{"version":3,"sources":["webpack:///./src/helpers/media.ts","webpack:///./src/stories/Components/Global/Typography/Heading.styles.ts","webpack:///./src/stories/Widgets/RichText/RichText.styles.ts","webpack:///./src/stories/Components/Global/SiteWide/SiteWide.tsx","webpack:///./src/stories/Components/Global/SiteWide/SiteWide.styles.ts","webpack:///./src/stories/Components/Global/Typography/Paragraph.styles.ts","webpack:///./src/helpers/fluid.ts","webpack:///./src/helpers/utils.ts","webpack:///./src/helpers/animation.ts","webpack:///./src/helpers/brand.ts","webpack:///./src/helpers/grey.ts","webpack:///./src/stories/Widgets/SustainabilityFacts/SustainabilityFacts.styles.ts","webpack:///./src/stories/Widgets/SustainabilityFacts/SustainabilityFacts.tsx","webpack:///./src/helpers/cssVar.ts","webpack:///./src/helpers/fonts.ts"],"names":["Device","from","size","until","between","start","end","H1Styles","css","fonts","brown","thin","fluid","H2Styles","H3Styles","light","H4Styles","H5Styles","bold","H6Styles","Heading","styled","h1","visual","linkStyles","cssVar","regular","tableStyles","ParagraphStyles","RegularStyles","contentStyles","HeadingStyles","Container","SectionWrapper","verticalMargin","setCssVar","TabletLarge","isActive","fadeIn","animation","easeInOutCubic","MobileLarge","Content","div","imageStyles","SiteWide","children","className","width","React","createElement","S","DesktopLarge","LargeStyles","SmallStyles","Paragraph","p","DEFAULT_MIN_VALUE","Tablet","DEFAULT_MAX_VALUE","ActualDesktop","min","max","minWidth","maxWidth","minRem","maxRem","minWidthRem","slope","yAxisIntersection","round","fluidUnit","unit","num","Math","headerOverlap","Desktop","headerOverlapPadding","highlightTitleWords","title","replaceAll","inView","threshold","rootMargin","earlyRootMargin","globalThreshold","slideInUpInitial","slideInUp","animate","duration","delay","easingFunc","fadeInUp","amount","backgroundAnimation","textClip","multicolouredBackground","multicolouredAnimatedText","multicolouredBackgroundBright","multicolouredTextBright","choirInTheSpireBackground","choirInTheSpireText","transition","properties","timing","innerCss","brand","black","blue","blueGrey","blueTint","grey","reduce","previous","current","value","hsl","orange","white","validation","invalid","valid","lightTheme","grey90","grey96","darkTheme","grey10","themes","dark","Section","section","themeOption","attrs","IntoSection","Title","h2","RichTextStyles","CardContainer","Card","CardHeader","CardIconWrapper","rgba","GradientBorder","CardTitleWrapper","CardKicker","CardTitle","CardSubtitle","h4","CardContent","SustainabilityFacts","id","content","items","theme","dangerouslySetInnerHTML","__html","map","item","key","kicker","as","length","renderSystemIcon","icon","subtitle","name","thinItalic","lightItalic","regularItalic","boldItalic"],"mappings":"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","file":"92-90de7ab42677e8d93e62.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[\"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[\"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 { fluid } from '@helpers/fluid';\r\nimport fonts from '@helpers/fonts';\r\nimport styled, { css } from 'styled-components';\r\nconst H1Styles = css `\r\n  ${fonts.brown.thin};\r\n  font-size: ${fluid(32, 70)};\r\n  line-height: ${fluid(32, 70)};\r\n  letter-spacing: normal;\r\n  margin: 0 0 16px;\r\n  text-transform: uppercase;\r\n`;\r\nconst H2Styles = css `\r\n  ${fonts.brown.thin};\r\n  font-size: ${fluid(28, 60)};\r\n  line-height: ${fluid(28, 64)};\r\n  letter-spacing: normal;\r\n  margin: 0 0 16px;\r\n  text-transform: uppercase;\r\n`;\r\nconst H3Styles = css `\r\n  ${fonts.brown.light};\r\n  font-size: ${fluid(24, 50)};\r\n  line-height: ${fluid(26, 54)};\r\n  letter-spacing: normal;\r\n  margin: 0 0 16px;\r\n  text-transform: uppercase;\r\n`;\r\nconst H4Styles = css `\r\n  ${fonts.brown.light};\r\n  font-size: ${fluid(21, 24)};\r\n  line-height: ${fluid(28, 32)};\r\n  letter-spacing: normal;\r\n  margin: 0 0 16px;\r\n  text-transform: uppercase;\r\n`;\r\nconst H5Styles = css `\r\n  ${fonts.brown.bold};\r\n  font-size: ${fluid(16, 20)};\r\n  line-height: ${fluid(18, 28)};\r\n  letter-spacing: normal;\r\n  margin: 0 0 16px;\r\n  text-transform: uppercase;\r\n`;\r\nconst H6Styles = css `\r\n  ${fonts.brown.bold};\r\n  font-size: ${fluid(16, 20)};\r\n  line-height: ${fluid(18, 28)};\r\n  letter-spacing: normal;\r\n  margin: 0 0 16px;\r\n  text-transform: uppercase;\r\n`;\r\nconst Heading = styled.h1 `\r\n  ${({ visual }) => {\r\n    switch (visual) {\r\n        case 'h1':\r\n            return H1Styles;\r\n        case 'h2':\r\n            return H2Styles;\r\n        case 'h3':\r\n            return H3Styles;\r\n        case 'h4':\r\n            return H4Styles;\r\n        case 'h5':\r\n            return H5Styles;\r\n        case 'h6':\r\n            return H6Styles;\r\n        default:\r\n            break;\r\n    }\r\n}}\r\n`;\r\nexport default {\r\n    H1Styles,\r\n    H2Styles,\r\n    H3Styles,\r\n    H4Styles,\r\n    H5Styles,\r\n    H6Styles,\r\n    Heading,\r\n};\r\n","import animation, { fadeIn } from '@helpers/animation';\r\nimport { cssVar, setCssVar } from '@helpers/cssVar';\r\nimport fonts from '@helpers/fonts';\r\nimport { Device, from, until } from '@helpers/media';\r\nimport HeadingStyles from '@stories/Components/Global/Typography/Heading.styles';\r\nimport ParagraphStyles from '@stories/Components/Global/Typography/Paragraph.styles';\r\nimport SectionWrapper from '@stories/Components/SectionWrapper/SectionWrapper';\r\nimport styled, { css } from 'styled-components';\r\nconst linkStyles = css `\r\n  background-color: transparent;\r\n  background-image: linear-gradient(\r\n    to right,\r\n    ${cssVar('accentColor')} 0%,\r\n    ${cssVar('accentColor')} 100%\r\n  );\r\n  background-repeat: no-repeat;\r\n  background-size: 0% 100%;\r\n  color: ${cssVar('fgColor')};\r\n  ${fonts.brown.regular};\r\n  margin: -3px;\r\n  padding: 3px;\r\n  text-decoration: underline;\r\n  text-underline-position: under;\r\n  transition: background-size 0.15s ease-out;\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  }\r\n`;\r\nconst tableStyles = css `\r\n  margin: 0 0 16px;\r\n\r\n  th,\r\n  td {\r\n    border: 1px solid ${cssVar('fgColor')};\r\n    color: ${cssVar('fgColor')};\r\n    ${ParagraphStyles.RegularStyles};\r\n    height: auto !important; // override inline height - no point this being content editable.\r\n    margin: 0;\r\n    padding: 8px 16px;\r\n  }\r\n`;\r\nconst contentStyles = css `\r\n  color: ${cssVar('fgColor')};\r\n  ${fonts.brown.regular};\r\n\r\n  h1 {\r\n    ${HeadingStyles.H1Styles};\r\n  }\r\n\r\n  h2 {\r\n    ${HeadingStyles.H2Styles};\r\n  }\r\n\r\n  h3 {\r\n    ${HeadingStyles.H3Styles};\r\n  }\r\n\r\n  h4 {\r\n    ${HeadingStyles.H4Styles};\r\n  }\r\n\r\n  h5 {\r\n    ${HeadingStyles.H5Styles};\r\n  }\r\n\r\n  h6 {\r\n    ${HeadingStyles.H6Styles};\r\n  }\r\n\r\n  p {\r\n    ${ParagraphStyles.RegularStyles};\r\n  }\r\n\r\n  strong {\r\n    ${fonts.brown.bold};\r\n  }\r\n\r\n  ol,\r\n  ul {\r\n    display: block;\r\n    ${ParagraphStyles.RegularStyles};\r\n    padding: 0 0 0 40px;\r\n  }\r\n\r\n  ol {\r\n    list-style: decimal;\r\n\r\n    li {\r\n      display: list-item;\r\n    }\r\n  }\r\n\r\n  ul {\r\n    list-style: disc;\r\n\r\n    /* Adjust padding if the browser supports custom markers, otherwise use default disc marker. */\r\n    @supports (selector(ul li::marker)) {\r\n      padding: 0 0 0 20px;\r\n\r\n      li {\r\n        display: list-item;\r\n        padding: 0 0 0 20px;\r\n\r\n        &::marker {\r\n          content: '-';\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  a {\r\n    ${linkStyles};\r\n  }\r\n\r\n  > *:last-child {\r\n    margin-bottom: 0;\r\n  }\r\n\r\n  table {\r\n    ${tableStyles};\r\n  }\r\n\r\n  hr {\r\n    margin: 16px 0;\r\n  }\r\n\r\n  sup {\r\n    position: relative;\r\n    top: -0.5em;\r\n    font-size: 80%;\r\n  }\r\n\r\n  sub {\r\n    position: relative;\r\n    top: 0.5em;\r\n    font-size: 80%;\r\n  }\r\n`;\r\nconst Container = styled(SectionWrapper) `\r\n  ${({ verticalMargin }) => verticalMargin &&\r\n    css `\r\n      ${setCssVar('sectionMargin', verticalMargin)};\r\n    `}\r\n  padding-top: 40px;\r\n  @media ${from(Device.TabletLarge)} {\r\n    scroll-margin-top: 128px;\r\n    margin: ${cssVar('sectionMargin')} 0;\r\n    opacity: 0;\r\n\r\n    ${({ isActive }) => isActive &&\r\n    css `\r\n        ${fadeIn(isActive, 375, 0, animation.easeInOutCubic)};\r\n      `}\r\n  }\r\n\r\n  @media ${until(Device.MobileLarge)} {\r\n    scroll-margin-top: 60px;\r\n    margin: calc(${cssVar('sectionMargin')} / 2) 0;\r\n  }\r\n`;\r\nconst Content = styled.div `\r\n  margin: 0 auto;\r\n  width: 100%;\r\n\r\n  ${contentStyles}\r\n`;\r\nconst imageStyles = css `\r\n  img {\r\n    object-fit: contain;\r\n    height: fit-content;\r\n  }\r\n`;\r\nexport default {\r\n    Container,\r\n    Content,\r\n    contentStyles,\r\n    linkStyles,\r\n    imageStyles,\r\n};\r\n","import React from 'react';\r\nimport S from './SiteWide.styles';\r\nconst SiteWide = ({ children, className, width = 'default' }) => {\r\n    return (React.createElement(S.Container, { className: className, width: width }, children));\r\n};\r\nexport default SiteWide;\r\n","import { cssVar, setCssVar } from '@helpers/cssVar';\r\nimport { Device, from } from '@helpers/media';\r\nimport styled, { css } from 'styled-components';\r\nconst Container = styled.div `\r\n  ${setCssVar('sitePadding', '18px')};\r\n  ${setCssVar('siteWidth', '100%')};\r\n\r\n  --siteGutter: calc((1926px - (var(--siteWidth) + (var(--sitePadding) * 2))) / 2);\r\n\r\n  margin-left: auto;\r\n  margin-right: auto;\r\n  max-width: calc(${cssVar('siteWidth')} + (${cssVar('sitePadding')} * 2));\r\n  padding-left: ${cssVar('sitePadding')};\r\n  padding-right: ${cssVar('sitePadding')};\r\n  width: 100%;\r\n\r\n  ${({ width }) => {\r\n    switch (width) {\r\n        case 'default':\r\n            return css `\r\n          @media ${from(Device.DesktopLarge)} {\r\n            ${setCssVar('sitePadding', '18px')};\r\n            ${setCssVar('siteWidth', '1312px')};\r\n          }\r\n        `;\r\n        case 'narrow':\r\n            return css `\r\n          @media ${from(Device.TabletLarge)} {\r\n            ${setCssVar('sitePadding', '18px')};\r\n            ${setCssVar('siteWidth', '804px')};\r\n          }\r\n        `;\r\n        case 'wide':\r\n            return css `\r\n          @media ${from(Device.TabletLarge)} {\r\n            ${setCssVar('sitePadding', '18px')};\r\n            ${setCssVar('siteWidth', '1640px')};\r\n          }\r\n        `;\r\n    }\r\n}}\r\n`;\r\nexport default {\r\n    Container,\r\n};\r\n","import { fluid } from '@helpers/fluid';\r\nimport fonts from '@helpers/fonts';\r\nimport styled, { css } from 'styled-components';\r\n/**\r\n * 20px / 28px\r\n */\r\nconst LargeStyles = css `\r\n  ${fonts.brown.light};\r\n  font-size: ${fluid(18, 24)};\r\n  line-height: ${fluid(26, 36)};\r\n  letter-spacing: normal;\r\n  margin: 0 0 16px;\r\n`;\r\n/**\r\n * 18px / 28px\r\n */\r\nconst RegularStyles = css `\r\n  ${fonts.brown.light};\r\n  font-size: ${fluid(16, 20)};\r\n  line-height: ${fluid(26, 32)};\r\n  letter-spacing: normal;\r\n  margin: 0 0 16px;\r\n`;\r\n/**\r\n * 16px / 26px\r\n */\r\nconst SmallStyles = css `\r\n  ${fonts.brown.light};\r\n  font-size: ${fluid(14, 16)};\r\n  line-height: ${fluid(20, 22)};\r\n  letter-spacing: normal;\r\n  margin: 0 0 16px;\r\n`;\r\nconst Paragraph = styled.p `\r\n  ${({ size }) => {\r\n    switch (size) {\r\n        case 'large':\r\n            return LargeStyles;\r\n        case 'regular':\r\n            return RegularStyles;\r\n        case 'small':\r\n            return SmallStyles;\r\n        default:\r\n            break;\r\n    }\r\n}}\r\n`;\r\nexport default {\r\n    Paragraph,\r\n    SmallStyles,\r\n    RegularStyles,\r\n    LargeStyles,\r\n};\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.Tablet;\r\n/**\r\n * Default pixel value for the max width.\r\n */\r\nexport const DEFAULT_MAX_VALUE = Device.ActualDesktop;\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 * Define a fluid value between the min/max values at the min/max widths.\r\n */\r\nexport function fluidUnit(min, max, unit = '', minWidth = DEFAULT_MIN_VALUE, maxWidth = DEFAULT_MAX_VALUE) {\r\n    const slope = (max - min) / (maxWidth - minWidth);\r\n    const yAxisIntersection = -minWidth * slope + min;\r\n    const clampMin = `${round(min)}`;\r\n    const clampVal = `${round(yAxisIntersection)}${unit} + ${round(slope * 100)}vw`;\r\n    const clampMax = `${round(max)}`;\r\n    return `clamp(${clampMin}${unit}, ${clampVal}, ${clampMax}${unit})`;\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\nimport { Device, from } from './media';\r\nexport function sleep(ms) {\r\n    return new Promise((resolve) => setTimeout(resolve, ms));\r\n}\r\nexport const headerOverlap = css `\r\n  margin-top: -46px;\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    margin-top: -104px;\r\n  }\r\n\r\n  .no-header & {\r\n    margin-top: 0 !important;\r\n  }\r\n`;\r\nexport const headerOverlapPadding = css `\r\n  --headerHeight: 46px;\r\n\r\n  padding-top: var(--headerHeight);\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    --headerHeight: 104px;\r\n  }\r\n\r\n  .no-header & {\r\n    padding-top: 0 !important;\r\n  }\r\n`;\r\nexport const highlightTitleWords = (title) => title.replaceAll(/\\*([\\w\\W]+)\\*/g, '<span>$1</span>');\r\n","import { css } from 'styled-components';\r\nimport fonts from './fonts';\r\nexport default {\r\n    inView: {\r\n        threshold: 0.25,\r\n        rootMargin: '0px 0px -25% 0px',\r\n        earlyRootMargin: '0px 0px -10% 0px',\r\n    },\r\n    globalThreshold: 0.25,\r\n    easeInOutCubic: 'cubic-bezier(0.645, 0.045, 0.355, 1)',\r\n};\r\nexport const slideInUpInitial = css `\r\n  > span {\r\n    opacity: 0;\r\n    transform: translateY(100%);\r\n  }\r\n`;\r\nexport function slideInUp(animate, duration, delay, easingFunc) {\r\n    return css `\r\n    overflow: hidden;\r\n\r\n    > span {\r\n      display: inline-block;\r\n      transition: transform ${duration}ms ${delay}ms ${easingFunc},\r\n        opacity ${duration}ms ${delay}ms ${easingFunc};\r\n    }\r\n\r\n    ${animate\r\n        ? css `\r\n          > span {\r\n            opacity: 1;\r\n            transform: translateY(0px);\r\n          }\r\n        `\r\n        : css `\r\n          ${slideInUpInitial};\r\n        `}\r\n  `;\r\n}\r\nexport function fadeInUp(animate, amount, duration, delay, easingFunc) {\r\n    return css `\r\n    transition: transform ${duration}ms ${delay}ms ${easingFunc},\r\n      opacity ${duration}ms ${delay}ms ${easingFunc};\r\n\r\n    ${animate\r\n        ? css `\r\n          opacity: 1;\r\n          transform: translateY(0px);\r\n        `\r\n        : css `\r\n          opacity: 0;\r\n          transform: translateY(${amount}px);\r\n        `}\r\n  `;\r\n}\r\nexport function fadeIn(animate, duration, delay, easingFunc) {\r\n    return css `\r\n    transition: opacity ${duration}ms ${delay}ms ${easingFunc};\r\n\r\n    ${animate\r\n        ? css `\r\n          opacity: 1;\r\n        `\r\n        : css `\r\n          opacity: 0;\r\n        `}\r\n  `;\r\n}\r\nconst backgroundAnimation = css `\r\n  background-size: 200% auto;\r\n  animation: multicoloured 5s linear infinite;\r\n\r\n  @keyframes multicoloured {\r\n    to {\r\n      background-position: 200% center;\r\n    }\r\n  }\r\n`;\r\nconst textClip = css `\r\n  background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  width: fit-content;\r\n`;\r\nexport const multicolouredBackground = css `\r\n  background: linear-gradient(\r\n    90deg,\r\n    rgba(213, 149, 91, 1) 0%,\r\n    rgba(213, 118, 86, 1) 20%,\r\n    rgba(100, 202, 185, 1) 40%,\r\n    rgba(150, 145, 204, 1) 60%,\r\n    rgba(182, 103, 202, 1) 80%,\r\n    rgba(174, 90, 188, 1) 100%\r\n  );\r\n\r\n  ${backgroundAnimation}\r\n`;\r\nexport const multicolouredAnimatedText = css `\r\n  ${fonts.brown.light}\r\n  ${multicolouredBackground};\r\n  ${textClip};\r\n`;\r\nexport const multicolouredBackgroundBright = css `\r\n  background: linear-gradient(\r\n    90deg,\r\n    #ed4141,\r\n    #ef523d,\r\n    #f0623a,\r\n    #f17138,\r\n    #f07e37,\r\n    #f08b39,\r\n    #ef983c,\r\n    #eda441,\r\n    #d8a936,\r\n    #c2ae30,\r\n    #aab231,\r\n    #90b439,\r\n    #73b645,\r\n    #50b754,\r\n    #08b766,\r\n    #50b754,\r\n    #73b645,\r\n    #90b439,\r\n    #aab231,\r\n    #c2ae30,\r\n    #d8a936,\r\n    #eda441,\r\n    #ef983c,\r\n    #f08b39,\r\n    #f07e37,\r\n    #f17138,\r\n    #f0623a,\r\n    #ef523d,\r\n    #ed4141\r\n  );\r\n\r\n  ${backgroundAnimation}\r\n`;\r\nexport const multicolouredTextBright = css `\r\n  ${fonts.brown.light}\r\n  ${multicolouredBackgroundBright};\r\n  ${textClip};\r\n`;\r\nexport const choirInTheSpireBackground = css `\r\n  background: linear-gradient(\r\n    90deg,\r\n    #f1563c 9%,\r\n    #e65352 10%,\r\n    #d34e79 11%,\r\n    #c74c92 12%,\r\n    #c34b9b 13%,\r\n    #00b3c1 40%,\r\n    #c34b9b 45%,\r\n    #f1563c 50%,\r\n    #f1563c 59%,\r\n    #e65352 60%,\r\n    #d34e79 61%,\r\n    #d34e79 62%,\r\n    #c74c92 63%,\r\n    #00b3c1 90%,\r\n    #c34b9b 95%,\r\n    #f1563c 100%\r\n  );\r\n\r\n  ${backgroundAnimation}\r\n`;\r\nexport const choirInTheSpireText = css `\r\n  ${choirInTheSpireBackground};\r\n  ${textClip};\r\n`;\r\nexport const cubicEaseOut = `cubic-bezier(0.33, 1, 0.68, 1)`;\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-duration: ${typeof duration === 'string' ? duration : `${duration}s`};\r\n    transition-property: ${properties};\r\n    transition-timing-function: ${timing};\r\n    will-change: ${properties};\r\n  `);\r\n};\r\n","import { css } from 'styled-components';\r\nimport { setCssVar } from './cssVar';\r\nimport greyscale from './grey';\r\nconst brand = {\r\n    black: '#000000',\r\n    blue: '#b7cbeb',\r\n    blueGrey: '#eff1f1',\r\n    blueTint: '#eef1f8',\r\n    grey: greyscale,\r\n    orange: '#f96a1d',\r\n    white: '#fff',\r\n    validation: {\r\n        invalid: '#da291c',\r\n        valid: '#008c15',\r\n    },\r\n};\r\nexport const lightTheme = css `\r\n  ${setCssVar('fgColor', brand.black)};\r\n  ${setCssVar('bgColor', brand.white)};\r\n  ${setCssVar('bgColorAlt', brand.grey.grey90)};\r\n  ${setCssVar('bgColorAlt2', brand.grey.grey96)};\r\n  ${setCssVar('accentColor', brand.orange)};\r\n  ${setCssVar('colorScheme', 'light')};\r\n`;\r\nexport const darkTheme = css `\r\n  ${setCssVar('fgColor', brand.white)};\r\n  ${setCssVar('bgColor', brand.black)};\r\n  ${setCssVar('bgColorAlt', brand.grey.grey10)};\r\n  ${setCssVar('bgColorAlt2', brand.black)};\r\n  ${setCssVar('accentColor', brand.orange)};\r\n  ${setCssVar('colorScheme', 'dark')};\r\n`;\r\nexport const themes = {\r\n    dark: darkTheme,\r\n    light: lightTheme,\r\n};\r\nexport default brand;\r\n","import { hsl } from 'polished';\r\nconst greyscaleValues = [10, 18, 46, 73, 90, 96];\r\nconst greyscale = greyscaleValues.reduce((previous, current) => ({\r\n    ...previous,\r\n    [`grey${current}`]: grey(current),\r\n}), {});\r\nfunction grey(value) {\r\n    return hsl(0, 0, value / 100);\r\n}\r\nexport { greyscale as default, grey };\r\n","import { choirInTheSpireBackground, choirInTheSpireText } from '@helpers/animation';\r\nimport brand, { themes } from '@helpers/brand';\r\nimport { cssVar } from '@helpers/cssVar';\r\nimport { fluid } from '@helpers/fluid';\r\nimport fonts from '@helpers/fonts';\r\nimport { Device, from } from '@helpers/media';\r\nimport SiteWide from '@stories/Components/Global/SiteWide/SiteWide';\r\nimport HeadingStyles from '@stories/Components/Global/Typography/Heading.styles';\r\nimport ParagraphStyles from '@stories/Components/Global/Typography/Paragraph.styles';\r\nimport RichTextStyles from '@stories/Widgets/RichText/RichText.styles';\r\nimport { rgba } from 'polished';\r\nimport styled, { css } from 'styled-components';\r\nconst Section = styled.section `\r\n  ${({ themeOption }) => themeOption &&\r\n    css `\r\n      ${themes[themeOption]}\r\n    `}\r\n\r\n  background: ${cssVar('bgColor')};\r\n  color: ${cssVar('fgColor')};\r\n  padding: ${fluid(40, 120)} 0;\r\n`;\r\nconst Container = styled(SiteWide).attrs({ width: 'wide' }) ``;\r\nconst IntoSection = styled.div `\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: flex-start;\r\n  gap: 24px 0;\r\n  margin-bottom: ${fluid(32, 64)};\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n  }\r\n`;\r\nconst Title = styled.h2 `\r\n  ${HeadingStyles.H2Styles};\r\n  font-weight: 100;\r\n  margin-bottom: 0;\r\n\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex-direction: row;\r\n  gap: 0 0.4em;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    flex-direction: column;\r\n  }\r\n\r\n  &:not(:only-child) {\r\n    @media ${from(Device.TabletLarge)} {\r\n      padding-right: 60px;\r\n    }\r\n  }\r\n\r\n  > span {\r\n    color: ${cssVar('accentColor')};\r\n    display: inline;\r\n  }\r\n`;\r\nconst Content = styled.div `\r\n  ${RichTextStyles.contentStyles}\r\n  position: relative;\r\n\r\n  p {\r\n    ${fonts.brown.light};\r\n    font-size: ${fluid(14, 24)};\r\n    line-height: ${fluid(20, 36)};\r\n  }\r\n\r\n  &:before {\r\n    position: absolute;\r\n    left: 0;\r\n    content: '';\r\n    background: ${cssVar('fgColor')};\r\n    height: 100%;\r\n    width: 24px;\r\n    clip-path: polygon(calc(100% - 2px) 0, 100% 0, 2px 100%, 0% 100%);\r\n  }\r\n\r\n  padding-left: 32px;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    padding-left: 0;\r\n    &:before {\r\n      left: -42px;\r\n    }\r\n  }\r\n`;\r\nconst CardContainer = styled.div `\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: ${fluid(32, 64)};\r\n  display: grid;\r\n  grid-template-columns: 1fr;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    grid-template-columns: repeat(2, 1fr);\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    grid-template-columns: repeat(4, 1fr);\r\n  }\r\n`;\r\nconst Card = styled.div `\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: ${fluid(20, 32)};\r\n`;\r\nconst CardHeader = styled.div `\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 16px;\r\n  flex-direction: row-reverse;\r\n  margin-bottom: -20px;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    flex-direction: row;\r\n    margin-bottom: 0;\r\n  }\r\n`;\r\nconst CardIconWrapper = styled.div `\r\n  border-radius: 50%;\r\n  position: relative;\r\n  z-index: 1;\r\n  aspect-ratio: 1 / 1;\r\n  max-width: ${fluid(64, 72)};\r\n  width: 100%;\r\n\r\n  ${Card}:nth-child(even) & {\r\n    &::before,\r\n    &::after {\r\n      animation-delay: 0.2s;\r\n    }\r\n  }\r\n\r\n  &::before {\r\n    content: '';\r\n    position: absolute;\r\n    z-index: -1;\r\n    top: 50%;\r\n    left: 50%;\r\n    width: 100%;\r\n    height: 100%;\r\n    border-radius: 50%;\r\n    background: ${rgba(brand.orange, 0.08)};\r\n    transform: translate(-50%, -50%) scale(0.5);\r\n    animation: pulse 2s infinite;\r\n\r\n    [data-theme='choir-in-the-spire'] & {\r\n      ${choirInTheSpireBackground};\r\n      filter: opacity(0.08);\r\n      animation: pulse 2s infinite;\r\n    }\r\n\r\n    @keyframes pulse {\r\n      0% {\r\n        transform: translate(-50%, -50%) scale(0.5);\r\n        opacity: 0;\r\n      }\r\n      50% {\r\n        transform: translate(-50%, -50%) scale(1.8);\r\n        opacity: 1;\r\n      }\r\n      75% {\r\n        transform: translate(-50%, -50%) scale(0.5);\r\n        opacity: 0;\r\n      }\r\n      100% {\r\n        transform: translate(-50%, -50%) scale(0.5);\r\n        opacity: 0;\r\n      }\r\n    }\r\n  }\r\n\r\n  &::after {\r\n    content: '';\r\n    position: absolute;\r\n    z-index: -2;\r\n    top: 50%;\r\n    left: 50%;\r\n    width: 100%;\r\n    height: 100%;\r\n    border-radius: 50%;\r\n    background: ${rgba(brand.orange, 0.16)};\r\n    transform: translate(-50%, -50%) scale(0.25);\r\n    animation: pulse-alt 2s infinite;\r\n\r\n    [data-theme='choir-in-the-spire'] & {\r\n      ${choirInTheSpireBackground};\r\n      filter: opacity(0.16);\r\n      animation: pulse-alt 2s infinite;\r\n    }\r\n\r\n    @keyframes pulse-alt {\r\n      0% {\r\n        transform: translate(-50%, -50%) scale(0.5);\r\n        opacity: 0;\r\n      }\r\n      25% {\r\n        transform: translate(-50%, -50%) scale(1.4);\r\n        opacity: 1;\r\n      }\r\n      50% {\r\n        transform: translate(-50%, -50%) scale(1.4);\r\n        opacity: 1;\r\n      }\r\n      100% {\r\n        transform: translate(-50%, -50%) scale(0.5);\r\n        opacity: 0;\r\n      }\r\n    }\r\n  }\r\n\r\n  svg {\r\n    background-color: ${brand.black};\r\n    border-radius: 50%;\r\n  }\r\n`;\r\nconst GradientBorder = styled.div `\r\n  position: absolute;\r\n  display: none;\r\n  inset: 0;\r\n  border-radius: 50%;\r\n\r\n  ${choirInTheSpireBackground};\r\n\r\n  mask: radial-gradient(circle, transparent calc(70% - 4px), black 70%);\r\n\r\n  [data-theme='choir-in-the-spire'] & {\r\n    display: block;\r\n  }\r\n`;\r\nconst CardTitleWrapper = styled.div `\r\n  position: relative;\r\n  flex-grow: 1;\r\n  &[data-has-kicker='true'] {\r\n    padding-left: 24px;\r\n  }\r\n`;\r\nconst CardKicker = styled.div `\r\n  width: 72px;\r\n  font-size: 12px;\r\n  text-transform: uppercase;\r\n  position: absolute;\r\n  transform: rotate(-90deg) translate(50%, -200%);\r\n  left: 0;\r\n  bottom: 0;\r\n`;\r\nconst CardTitle = styled(Title) `\r\n  display: inline;\r\n  ${fonts.brown.light};\r\n  font-size: ${fluid(50, 60)};\r\n  line-height: ${fluid(54, 64)};\r\n\r\n  [data-has-kicker='true'] & {\r\n    ${fonts.brown.regular};\r\n  }\r\n\r\n  &[data-long-text='true'] {\r\n    font-size: ${fluid(24, 32)};\r\n    line-height: ${fluid(28, 36)};\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    display: flex;\r\n    justify-content: flex-end;\r\n  }\r\n\r\n  &:not(:only-child) {\r\n    @media ${from(Device.TabletLarge)} {\r\n      padding-right: 0;\r\n    }\r\n  }\r\n\r\n  span {\r\n    ${fonts.brown.light};\r\n\r\n    [data-has-kicker='true'] & {\r\n      ${fonts.brown.thin};\r\n    }\r\n  }\r\n\r\n  [data-theme='choir-in-the-spire'] & > span {\r\n    ${choirInTheSpireText};\r\n  }\r\n`;\r\nconst CardSubtitle = styled.h4 `\r\n  ${HeadingStyles.H4Styles};\r\n  margin: 0;\r\n  padding-left: 88px;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    padding-left: 0;\r\n  }\r\n`;\r\nconst CardContent = styled.div `\r\n  ${RichTextStyles.contentStyles};\r\n  padding-left: 88px;\r\n\r\n  p {\r\n    ${fonts.brown.light};\r\n    ${ParagraphStyles.SmallStyles};\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    padding-left: 0;\r\n  }\r\n`;\r\nexport default {\r\n    Section,\r\n    Container,\r\n    IntoSection,\r\n    Title,\r\n    Content,\r\n    CardContainer,\r\n    Card,\r\n    CardHeader,\r\n    CardTitleWrapper,\r\n    CardIconWrapper,\r\n    GradientBorder,\r\n    CardKicker,\r\n    CardTitle,\r\n    CardSubtitle,\r\n    CardContent,\r\n};\r\n","import { renderSystemIcon } from '@helpers/systemIcons';\r\nimport { highlightTitleWords } from '@helpers/utils';\r\nimport React from 'react';\r\nimport S from './SustainabilityFacts.styles';\r\nconst SustainabilityFacts = ({ id, title, content, items = [], theme, }) => {\r\n    return (React.createElement(S.Section, { themeOption: theme === 'choir-in-the-spire' ? 'dark' : theme, \"data-theme\": theme, id: id },\r\n        React.createElement(S.Container, null,\r\n            React.createElement(S.IntoSection, null,\r\n                React.createElement(S.Title, { dangerouslySetInnerHTML: { __html: highlightTitleWords(title) } }),\r\n                content && React.createElement(S.Content, { dangerouslySetInnerHTML: { __html: content } })),\r\n            React.createElement(S.CardContainer, null, items.map((item) => (React.createElement(S.Card, { key: item.id },\r\n                React.createElement(S.CardHeader, null,\r\n                    React.createElement(S.CardTitleWrapper, { \"data-has-kicker\": !!item.kicker },\r\n                        item.kicker && React.createElement(S.CardKicker, null, item.kicker),\r\n                        React.createElement(S.CardTitle, { as: \"h3\", \"data-long-text\": item.title.length > 8, dangerouslySetInnerHTML: { __html: highlightTitleWords(item.title) } })),\r\n                    React.createElement(S.CardIconWrapper, null,\r\n                        React.createElement(S.GradientBorder, null),\r\n                        renderSystemIcon(item.icon))),\r\n                item.subtitle && React.createElement(S.CardSubtitle, null, item.subtitle),\r\n                React.createElement(S.CardContent, { dangerouslySetInnerHTML: { __html: item.content } }))))))));\r\n};\r\nexport default SustainabilityFacts;\r\n","const variables = [\r\n    'fgColor',\r\n    'bgColor',\r\n    'bgColorAlt',\r\n    'bgColorAlt2',\r\n    'accentColor',\r\n    'siteWidth',\r\n    'sitePadding',\r\n    'sectionMargin',\r\n    'colorScheme',\r\n];\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 { css } from 'styled-components';\r\nexport default {\r\n    brown: {\r\n        thin: css `\r\n      font-family: 'Brown', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 100;\r\n    `,\r\n        thinItalic: css `\r\n      font-family: 'Brown', sans-serif;\r\n      font-weight: 100;\r\n      font-style: italic;\r\n    `,\r\n        light: css `\r\n      font-family: 'Brown', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 300;\r\n    `,\r\n        lightItalic: css `\r\n      font-family: 'Brown', sans-serif;\r\n      font-weight: 300;\r\n      font-style: italic;\r\n    `,\r\n        regular: css `\r\n      font-family: 'Brown', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 400;\r\n    `,\r\n        regularItalic: css `\r\n      font-family: 'Brown', sans-serif;\r\n      font-weight: 400;\r\n      font-style: italic;\r\n    `,\r\n        bold: css `\r\n      font-family: 'Brown', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 700;\r\n    `,\r\n        boldItalic: css `\r\n      font-family: 'Brown', sans-serif;\r\n      font-weight: 700;\r\n      font-style: italic;\r\n    `,\r\n    },\r\n};\r\n"],"sourceRoot":""}