{"version":3,"file":"402-bc4526d9a1386cd11e21.js","mappings":"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","sources":["webpack://royal-geographical-society/./src/helpers/brand.ts","webpack://royal-geographical-society/./src/helpers/grid.ts","webpack://royal-geographical-society/./src/helpers/media.ts","webpack://royal-geographical-society/./src/stories/Components/Content/Iframe/Iframe.styles.ts","webpack://royal-geographical-society/./src/stories/Components/Content/Iframe/Iframe.tsx","webpack://royal-geographical-society/./src/stories/Components/Global/SectionWrapper/SectionWrapper.styles.ts","webpack://royal-geographical-society/./src/hoc/withBaseProps.tsx","webpack://royal-geographical-society/./src/stories/Components/Global/SectionWrapper/SectionWrapper.tsx"],"sourcesContent":["import { hsl } from 'polished';\r\nexport default {\r\n    /** Hex: #FFFFFF */\r\n    white: '#FFFFFF',\r\n    /** Hex: #000000 */\r\n    black: '#000000',\r\n    /** Hex: #F54C00 (About us) */\r\n    orange: '#F54C00',\r\n    /** Hex: #0C6493 (Choose geography | Research) */\r\n    blue: '#0C6493',\r\n    /** Hex: #8E0075 (Schools) */\r\n    purple: '#8E0075',\r\n    /** Hex: #E00029 (Professionals) */\r\n    red: '#E00029',\r\n    green: {\r\n        /** Hex: #57830A (In the field) */\r\n        default: '#57830A',\r\n        /** Hex: #344F06 (Collections) */\r\n        dark: '#344F06',\r\n    },\r\n    /** Hex: #1A847D (Events) */\r\n    teal: '#1A847D',\r\n    grey: {\r\n        /** Hex: #212121 */\r\n        grey13: hsl(0, 0, 0.13),\r\n        /** Hex: #585858 */\r\n        grey20: hsl(0, 0, 0.2),\r\n        /** Hex: #585858 */\r\n        grey35: hsl(0, 0, 0.35),\r\n        /** Hex: #686868 */\r\n        grey41: hsl(0, 0, 0.41),\r\n        /** Hex: #707070 */\r\n        grey44: hsl(0, 0, 0.44),\r\n        /** Hex: #999999 */\r\n        grey60: hsl(0, 0, 0.6),\r\n        /** Hex: #CCCCCC */\r\n        grey80: hsl(0, 0, 0.8),\r\n        /** Hex: #E5E5E5 */\r\n        grey90: hsl(0, 0, 0.9),\r\n        /** Hex: #E7E7E7 */\r\n        grey91: hsl(0, 0, 0.91),\r\n        /** Hex: #F7F7F7 */\r\n        grey97: hsl(0, 0, 0.97),\r\n    },\r\n};\r\n/**\r\n * - Orange (CSS: `${brand.orange}`) (HEX: #F54C00)\r\n * - Blue (CSS: `${brand.blue}`) (HEX: #0C6493)\r\n * - Purple (CSS: `${brand.purple}`) (HEX: #8E0075)\r\n * - Red (CSS: `${brand.red}`) (HEX: #E00029)\r\n * - Green (CSS: `${brand.green.default}`) (HEX: #57830A)\r\n * - DarkGreen (CSS: `${brand.green.dark}`) (HEX: #344F06)\r\n * - Teal (CSS: `${brand.teal}`) (HEX: #1A847D)\r\n * - White (CSS: `${brand.white}`) (HEX: #FFFFFF)\r\n */\r\nexport var ThemeOption;\r\n(function (ThemeOption) {\r\n    ThemeOption[\"Orange\"] = \"orange\";\r\n    ThemeOption[\"Blue\"] = \"blue\";\r\n    ThemeOption[\"Purple\"] = \"purple\";\r\n    ThemeOption[\"Red\"] = \"red\";\r\n    ThemeOption[\"Green\"] = \"green\";\r\n    ThemeOption[\"DarkGreen\"] = \"dark-green\";\r\n    ThemeOption[\"Teal\"] = \"teal\";\r\n    ThemeOption[\"White\"] = \"white\";\r\n})(ThemeOption || (ThemeOption = {}));\r\n","import { css } from 'styled-components';\r\nimport { Device, from } from './media';\r\nexport const SitePadding = 36;\r\nexport const SiteWidth = 1520;\r\nexport const SiteWidthBreakpoint = SiteWidth + SitePadding * 2;\r\nexport const siteWide = css `\r\n  --sitePadding: ${SitePadding}px;\r\n  --siteWidth: ${SiteWidth}px;\r\n  --gutterWidth: 10px;\r\n  margin: 0 auto;\r\n  max-width: calc(var(--siteWidth) + var(--sitePadding) + var(--sitePadding));\r\n  padding: 0 var(--sitePadding);\r\n  width: 100%;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    --gutterWidth: 16px;\r\n  }\r\n`;\r\nexport const baseGrid = css `\r\n  display: grid;\r\n  column-gap: var(--gutterWidth);\r\n  grid-template-columns: repeat(12, 1fr);\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[\"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 SectionWrapper from '@stories/Components/Global/SectionWrapper/SectionWrapper';\r\nimport styled from 'styled-components';\r\nconst Container = styled(SectionWrapper) ``;\r\nconst Content = styled.div `\r\n  iframe {\r\n    &[src*='youtube.com'],\r\n    &[src*='vimeo.com'] {\r\n      aspect-ratio: 16 / 9;\r\n    }\r\n  }\r\n`;\r\nexport const IframeStyles = {\r\n    Container,\r\n    Content,\r\n};\r\n","import React from 'react';\r\nimport { IframeStyles as S } from './Iframe.styles';\r\nconst Iframe = ({ content, id, innerWidth = 'reduced' }) => {\r\n    const writeThis = content.replaceAll('scrupt', 'script');\r\n    return (React.createElement(S.Container, { id: id, innerWidth: innerWidth, flush: \"top\" },\r\n        React.createElement(S.Content, { dangerouslySetInnerHTML: { __html: writeThis } })));\r\n};\r\nexport default Iframe;\r\n","import brand, { ThemeOption } from '@helpers/brand';\r\nimport { siteWide } from '@helpers/grid';\r\nimport { Device, from } from '@helpers/media';\r\nimport styled from 'styled-components';\r\nconst Container = styled.section `\r\n  --sectionSpacingTop: 40px;\r\n  --sectionSpacingBottom: 40px;\r\n\r\n  position: relative;\r\n  scroll-margin: var(--headerHeight) 0 0;\r\n\r\n  &[data-allow-scroll-margin='true'] {\r\n    overflow: clip;\r\n  }\r\n\r\n  &[data-flush='top'] {\r\n    --sectionSpacingTop: 0;\r\n\r\n    @media ${from(Device.Tablet)} {\r\n      --sectionSpacingTop: 0;\r\n    }\r\n  }\r\n\r\n  &[data-flush='bottom'] {\r\n    --sectionSpacingBottom: 0;\r\n\r\n    @media ${from(Device.Tablet)} {\r\n      --sectionSpacingBottom: 0;\r\n    }\r\n  }\r\n\r\n  &[data-flush='both'] {\r\n    --sectionSpacingTop: 0;\r\n    --sectionSpacingBottom: 0;\r\n\r\n    @media ${from(Device.Tablet)} {\r\n      --sectionSpacingTop: 0;\r\n      --sectionSpacingBottom: 0;\r\n    }\r\n  }\r\n\r\n  &[data-component-theme=${ThemeOption.Orange}] {\r\n    --themeColor: ${brand.orange};\r\n  }\r\n\r\n  &[data-component-theme=${ThemeOption.Blue}] {\r\n    --themeColor: ${brand.blue};\r\n  }\r\n\r\n  &[data-component-theme=${ThemeOption.Purple}] {\r\n    --themeColor: ${brand.purple};\r\n  }\r\n\r\n  &[data-component-theme=${ThemeOption.Red}] {\r\n    --themeColor: ${brand.red};\r\n  }\r\n\r\n  &[data-component-theme=${ThemeOption.Green}] {\r\n    --themeColor: ${brand.green.default};\r\n  }\r\n\r\n  &[data-component-theme=${ThemeOption.DarkGreen}] {\r\n    --themeColor: ${brand.green.dark};\r\n  }\r\n\r\n  &[data-component-theme=${ThemeOption.Teal}] {\r\n    --themeColor: ${brand.teal};\r\n  }\r\n`;\r\nconst Inner = styled.div `\r\n  color: var(--fgColor);\r\n  padding-top: var(--sectionSpacingTop);\r\n  padding-bottom: var(--sectionSpacingBottom);\r\n`;\r\nexport const SiteWide = styled.div `\r\n  ${siteWide}\r\n\r\n  [data-inner-width=\"reduced\"] & {\r\n    --siteWidth: 1136px;\r\n  }\r\n\r\n  [data-inner-width='narrow'] & {\r\n    --siteWidth: 880px;\r\n  }\r\n`;\r\nconst SectionWrapperStyles = {\r\n    Container,\r\n    Inner,\r\n    SiteWide,\r\n};\r\nexport default SectionWrapperStyles;\r\n","import * as React from 'react';\r\nconst BasePropsContext = React.createContext({});\r\nexport function withBaseProps(WrappedComponent) {\r\n    const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';\r\n    const ComponentWithBaseProps = (props) => {\r\n        return (React.createElement(BasePropsContext.Provider, { value: props },\r\n            React.createElement(WrappedComponent, { ...props })));\r\n    };\r\n    ComponentWithBaseProps.displayName = `withBaseProps(${displayName})`;\r\n    return ComponentWithBaseProps;\r\n}\r\nexport const useBaseProps = () => React.useContext(BasePropsContext);\r\n","import { useBaseProps } from '@hoc/withBaseProps';\r\nimport * as React from 'react';\r\nimport S from './SectionWrapper.styles';\r\nconst SectionWrapper = React.forwardRef((props, ref) => {\r\n    const { children, theme, layout = 'default', flush = 'none', innerWidth = 'default', ...otherProps } = props;\r\n    const baseProps = useBaseProps();\r\n    return (React.createElement(S.Container, { ref: ref, id: baseProps.id, ...(theme ? { 'data-component-theme': theme } : null), \"data-allow-scroll-margin\": !!baseProps.id, \"data-flush\": flush, \"data-inner-width\": innerWidth, ...otherProps },\r\n        React.createElement(S.Inner, null, renderLayout())));\r\n    function renderLayout() {\r\n        if (layout === 'fullWidth') {\r\n            return children;\r\n        }\r\n        return React.createElement(S.SiteWide, null, children);\r\n    }\r\n});\r\nSectionWrapper.displayName = 'SectionWrapper';\r\nexport default SectionWrapper;\r\n"],"names":["white","black","orange","blue","purple","red","green","default","dark","teal","grey","grey13","hsl","grey20","grey35","grey41","grey44","grey60","grey80","grey90","grey91","grey97","ThemeOption","siteWide","css","from","Device","baseGrid","size","until","between","start","end","IframeStyles","Container","styled","SectionWrapper","Content","content","id","innerWidth","writeThis","replaceAll","React","S","flush","dangerouslySetInnerHTML","__html","brand","Inner","SiteWide","BasePropsContext","props","ref","children","theme","layout","otherProps","baseProps","displayName"],"sourceRoot":""}