{"version":3,"file":"291-530a437fdd240f27b04c.js","mappings":"2MACO,MAAMA,EAAe,mBACfC,EAAa,mBACbC,EAAgB,iCAChBC,EAAiBC,IACnBC,EAAAA,EAAAA,IAAG,uDAEND,GAIKE,EAAa,SAACC,GAAuD,IAA3CC,EAAW,UAAH,6CAAG,IAAMC,EAAS,UAAH,6CAAGP,EAC7D,OAAOC,GAAcE,EAAAA,EAAAA,IAAG,oGACmB,iBAAbG,EAAwBA,EAAY,GAAEA,KAC7CD,EACOE,EACfF,GAEnB,EAiBO,SAASG,EAAaC,GACzB,OAAON,EAAAA,EAAAA,IAAG,wOAEUM,EAAOC,MACJD,EAAOH,SACAN,EAYlC,C,wDCnDA,SAEIW,MAAO,UAEPC,MAAO,UAEPC,OAAQ,UAERC,KAAM,UAENC,OAAQ,UAERC,IAAK,UACLC,MAAO,CAEHC,QAAS,UAETC,KAAM,WAGVC,KAAM,UACNC,KAAM,CAEFC,QAAQC,EAAAA,EAAAA,IAAI,EAAG,EAAG,KAElBC,QAAQD,EAAAA,EAAAA,IAAI,EAAG,EAAG,IAElBE,QAAQF,EAAAA,EAAAA,IAAI,EAAG,EAAG,KAElBG,QAAQH,EAAAA,EAAAA,IAAI,EAAG,EAAG,KAElBI,QAAQJ,EAAAA,EAAAA,IAAI,EAAG,EAAG,KAElBK,QAAQL,EAAAA,EAAAA,IAAI,EAAG,EAAG,IAElBM,QAAQN,EAAAA,EAAAA,IAAI,EAAG,EAAG,IAElBO,QAAQP,EAAAA,EAAAA,IAAI,EAAG,EAAG,IAElBQ,QAAQR,EAAAA,EAAAA,IAAI,EAAG,EAAG,KAElBS,QAAQT,EAAAA,EAAAA,IAAI,EAAG,EAAG,OAanB,IAAIU,GACX,SAAWA,GACPA,EAAoB,OAAI,SACxBA,EAAkB,KAAI,OACtBA,EAAoB,OAAI,SACxBA,EAAiB,IAAI,MACrBA,EAAmB,MAAI,QACvBA,EAAuB,UAAI,aAC3BA,EAAkB,KAAI,OACtBA,EAAmB,MAAI,OAC1B,CATD,CASGA,IAAgBA,EAAc,CAAC,G,0DC7D3B,MAAMC,EAAiB,GAIjBC,EAAoBC,EAAAA,GAAAA,YAIpBC,EAAoBD,EAAAA,GAAAA,aAI1B,SAASE,EAAMC,EAAKC,GAAiE,IAA5DC,EAAW,UAAH,6CAAGN,EAAmBO,EAAW,UAAH,6CAAGL,EACrE,MAAMM,EAASJ,EAAML,EACfU,EAASJ,EAAMN,EACfW,EAAcJ,EAAWP,EACzBY,EAAcJ,EAAWR,EACzBa,GAASH,EAASD,IAAWG,EAAcD,GAC3CG,GAAqBH,EAAcE,EAAQJ,EAC3CM,EAAY,GAAEC,EAAMP,QACpBQ,EAAY,GAAED,EAAMF,WAA2BE,EAAc,IAARH,OACrDK,EAAY,GAAEF,EAAMN,QAC1B,MAAQ,SAAQK,MAAaE,MAAaC,IAC9C,CAIO,SAASC,EAAUd,EAAKC,EAAKc,GAAkE,IAA5Db,EAAW,UAAH,6CAAGN,EAAmBO,EAAW,UAAH,6CAAGL,EAC/E,MAAMU,GAASP,EAAMD,IAAQG,EAAWD,GAClCO,GAAqBP,EAAWM,EAAQR,EACxCU,EAAY,GAAEC,EAAMX,KACpBY,EAAY,GAAED,EAAMF,KAAqBM,OAAUJ,EAAc,IAARH,OACzDK,EAAY,GAAEF,EAAMV,KAC1B,MAAQ,SAAQS,IAAWK,MAASH,MAAaC,IAAWE,IAChE,CAIA,SAASJ,EAAMK,GACX,OAAOC,KAAKN,MAAY,IAANK,GAAa,GACnC,C,gDC3CA,SACIE,WAAY,CACRC,OAAOvD,EAAAA,EAAAA,IAAG,6EAKVwD,SAASxD,EAAAA,EAAAA,IAAG,6EAKZyD,eAAezD,EAAAA,EAAAA,IAAG,6EAKlB0D,MAAM1D,EAAAA,EAAAA,IAAG,6EAKTS,OAAOT,EAAAA,EAAAA,IAAG,8EAMd2D,OAAQ,CACJJ,OAAOvD,EAAAA,EAAAA,IAAG,yEAKVwD,SAASxD,EAAAA,EAAAA,IAAG,yEAKZyD,eAAezD,EAAAA,EAAAA,IAAG,yDAIlB0D,MAAM1D,EAAAA,EAAAA,IAAG,0E,kCCvCV,MAAM4D,GAAc5D,E,QAAAA,IAAG,4E,oECHvB,MAGM6D,GAAW7D,EAAAA,EAAAA,IAAG,8NAHA,GACF,MAWd8D,EAAAA,EAAAA,IAAK7B,EAAAA,GAAAA,SAIH8B,GAAW/D,EAAAA,EAAAA,IAAG,qF,iBClBpB,IAAIiC,EAcJ,SAAS6B,EAAKE,GACjB,MAAQ,eAAcA,MAC1B,CACO,SAASC,EAAMD,GAClB,MAAQ,eAAcA,EAAO,MACjC,CACO,SAASE,EAAQC,EAAOC,GAC3B,MAAQ,GAAEN,EAAKK,UAAcF,EAAMG,IACvC,C,6CArBA,SAAWnC,GACPA,EAAOA,EAAoB,YAAI,KAAO,cACtCA,EAAOA,EAAe,OAAI,KAAO,SACjCA,EAAOA,EAAoB,YAAI,KAAO,cACtCA,EAAOA,EAAoB,YAAI,KAAO,cACtCA,EAAOA,EAAe,OAAI,KAAO,SACjCA,EAAOA,EAAoB,YAAI,MAAQ,cACvCA,EAAOA,EAAqB,aAAI,MAAQ,eACxCA,EAAOA,EAAgB,QAAI,MAAQ,UACnCA,EAAOA,EAAqB,aAAI,MAAQ,eACxCA,EAAOA,EAAsB,cAAI,MAAQ,gBACzCA,EAAOA,EAAkB,UAAI,MAAQ,WACxC,CAZD,CAYGA,IAAWA,EAAS,CAAC,G,sYCFjB,MAAMoC,GAAgBrE,EAAAA,EAAAA,IAAG,2CAC5BsE,EAAAA,EAAAA,OAAAA,MAEYnC,EAAAA,EAAAA,IAAM,GAAI,KAEboC,GAAKvE,EAAAA,EAAAA,IAAG,2CACjBqE,EAEAC,EAAAA,EAAAA,OAAAA,MACWnC,EAAAA,EAAAA,IAAM,GAAI,KACRA,EAAAA,EAAAA,IAAM,GAAI,KAEdqC,GAAKxE,EAAAA,EAAAA,IAAG,2CACjBqE,EAEAC,EAAAA,EAAAA,OAAAA,MACWnC,EAAAA,EAAAA,IAAM,GAAI,KACRA,EAAAA,EAAAA,IAAM,GAAI,KAEdsC,GAAKzE,EAAAA,EAAAA,IAAG,uCACjBqE,GAEWlC,EAAAA,EAAAA,IAAM,GAAI,KACRA,EAAAA,EAAAA,IAAM,GAAI,KAEduC,GAAK1E,EAAAA,EAAAA,IAAG,uCACjBqE,GAEWlC,EAAAA,EAAAA,IAAM,GAAI,KACRA,EAAAA,EAAAA,IAAM,GAAI,KAEdwC,GAAK3E,EAAAA,EAAAA,IAAG,uCACjBqE,GAEWlC,EAAAA,EAAAA,IAAM,GAAI,KACRA,EAAAA,EAAAA,IAAM,GAAI,KAEdyC,GAAK5E,EAAAA,EAAAA,IAAG,uCACjBqE,GAEWlC,EAAAA,EAAAA,IAAM,GAAI,KACRA,EAAAA,EAAAA,IAAM,GAAI,KAErB0C,GAAkB7E,EAAAA,EAAAA,IAAG,2CACvBsE,EAAAA,EAAAA,OAAAA,OAEYnC,EAAAA,EAAAA,IAAM,GAAI,KAEb2C,GAAiB9E,EAAAA,EAAAA,IAAG,2CAC7B6E,EAEAP,EAAAA,EAAAA,OAAAA,MACWnC,EAAAA,EAAAA,IAAM,GAAI,KACRA,EAAAA,EAAAA,IAAM,GAAI,KAEd4C,GAAY/E,EAAAA,EAAAA,IAAG,uCACxB6E,GAEW1C,EAAAA,EAAAA,IAAM,GAAI,KACRA,EAAAA,EAAAA,IAAM,GAAI,KAEd6C,GAAoBhF,EAAAA,EAAAA,IAAG,uCAChC6E,GAEW1C,EAAAA,EAAAA,IAAM,GAAI,KACRA,EAAAA,EAAAA,IAAM,GAAI,KAEd8C,GAAiBjF,EAAAA,EAAAA,IAAG,uCAC7B6E,GAEW1C,EAAAA,EAAAA,IAAM,GAAI,KACRA,EAAAA,EAAAA,IAAM,GAAI,KAEd+C,GAAgBlF,EAAAA,EAAAA,IAAG,uCAC5B6E,GAEW1C,EAAAA,EAAAA,IAAM,GAAI,KACRA,EAAAA,EAAAA,IAAM,GAAI,KAWdgD,IATUnF,EAAAA,EAAAA,IAAG,kEACtBsE,EAAAA,EAAAA,OAAAA,UAKiBtE,EAAAA,EAAAA,IAAG,SACpB+E,IAEgB/E,EAAAA,EAAAA,IAAG,uNACnBC,EAAAA,EAAAA,IAAW,2BAkBFmF,GAAapF,EAAAA,EAAAA,IAAG,0lBAEzBsE,EAAAA,EAAAA,OAAAA,MACWnC,EAAAA,EAAAA,IAAM,GAAI,KACRA,EAAAA,EAAAA,IAAM,GAAI,KAGdA,EAAAA,EAAAA,IAAM,GAAI,KAAOA,EAAAA,EAAAA,IAAM,GAAI,KAAOA,EAAAA,EAAAA,IAAM,GAAI,KAAOA,EAAAA,EAAAA,IAAM,GAAI,KAElDkD,EAAAA,EAAAA,IAAKC,EAAAA,EAAAA,MAAa,KAWpBA,EAAAA,EAAAA,OAkBhBP,GAUO5C,EAAAA,EAAAA,IAAM,EAAG,KAOToD,GAAiBvF,EAAAA,EAAAA,IAAG,uCAC7BiF,GAKSO,GAAQxF,EAAAA,EAAAA,IAAG,mdAObiE,EAAAA,EAAAA,IAAMhC,EAAAA,GAAAA,QAOOqD,EAAAA,EAAAA,MAYdhB,EAAAA,EAAAA,OAAAA,MACWnC,EAAAA,EAAAA,IAAM,GAAI,KACRA,EAAAA,EAAAA,IAAM,GAAI,IAELmD,EAAAA,EAAAA,KAAAA,OASlBhB,EAAAA,EAAAA,OAAAA,MACWnC,EAAAA,EAAAA,IAAM,GAAI,KACRA,EAAAA,EAAAA,IAAM,GAAI,IACLmD,EAAAA,EAAAA,KAAAA,OAMlBhB,EAAAA,EAAAA,OAAAA,OACWnC,EAAAA,EAAAA,IAAM,GAAI,KACRA,EAAAA,EAAAA,IAAM,GAAI,KAO3BsD,GAAqBzF,EAAAA,EAAAA,IAAG,yKAC1B0F,EAAAA,EAAAA,iBACApB,EAAAA,EAAAA,OAAAA,MACWnC,EAAAA,EAAAA,IAAM,GAAI,KAOZwD,GAAgB3F,EAAAA,EAAAA,IAAG,gqDAG1BuE,EAKAC,EAKAC,EAKAC,EAKAC,EAKAC,EAIAG,EAEMW,EAAAA,EAAAA,OACJP,EACOG,EAAAA,EAAAA,OAKTR,EAIAE,EAIAC,EAGIS,EAAAA,EAAAA,OACJP,EACOG,EAAAA,EAAAA,QAOCnD,EAAAA,EAAAA,IAAM,EAAG,KAASA,EAAAA,EAAAA,IAAM,GAAI,IAGlC0C,GAGY1C,EAAAA,EAAAA,IAAM,GAAI,KAIf2B,EAAAA,EAAAA,IAAK7B,EAAAA,GAAAA,cAyBCE,EAAAA,EAAAA,IAAM,GAAI,KACRA,EAAAA,EAAAA,IAAM,GAAI,IAeLmD,EAAAA,EAAAA,OAEXxB,EAAAA,EAAAA,IAAK7B,EAAAA,GAAAA,aAShBmD,EAIEG,EAKFjB,EAAAA,EAAAA,OAAAA,eAQQnC,EAAAA,EAAAA,IAAM,GAAI,IAMlBqD,EAsBAC,EACAC,EAAAA,EAAAA,iBAEOJ,EAAAA,EAAAA,MAMQM,GAcb3F,EAAAA,EAAAA,IAAW,WAOI4F,EAOjBJ,EACOH,EAAAA,EAAAA,MACUA,EAAAA,EAAAA,MAIjBG,GAOOK,GAAe9F,EAAAA,EAAAA,IAAG,wSAQRmC,EAAAA,EAAAA,IAAM,GAAI,KACXA,EAAAA,EAAAA,IAAM,GAAI,KAOfA,EAAAA,EAAAA,IAAM,GAAI,KACTA,EAAAA,EAAAA,IAAM,GAAI,IACI4D,E,kGC5dhC,MAAMC,EAAOC,EAAAA,GAAAA,IAAAA,WAAU,8DAAVA,CAAU,0LACnB3B,EAAAA,EAAAA,OAAAA,MAUcnC,EAAAA,EAAAA,IAAM,GAAI,KAGtB+D,GAAiBlG,EAAAA,EAAAA,IAAG,yBAGpBmG,GAAkBnG,EAAAA,EAAAA,IAAG,wBAGrBoG,EAAOH,EAAAA,GAAAA,IAAAA,WAAU,8DAAVA,CAAU,4JAOnB,IAAkB,IAAjB,SAAEI,GAAU,EACb,OAAQA,GACJ,IAAK,OACD,OAAOH,EACX,IAAK,QACD,OAAOC,EAED,IAUZG,GAAqBtG,EAAAA,EAAAA,IAAG,gjBACZsF,EAAAA,EAAAA,MACGA,EAAAA,EAAAA,MAGIxD,EAAAA,EAAAA,OACLwD,EAAAA,EAAAA,OACGA,EAAAA,EAAAA,OAGExD,EAAAA,EAAAA,KACLwD,EAAAA,EAAAA,KACGA,EAAAA,EAAAA,KAGExD,EAAAA,EAAAA,OACLwD,EAAAA,EAAAA,OACGA,EAAAA,EAAAA,OAGExD,EAAAA,EAAAA,IACLwD,EAAAA,EAAAA,IACGA,EAAAA,EAAAA,IAGExD,EAAAA,EAAAA,MACLwD,EAAAA,EAAAA,MAAAA,QACGA,EAAAA,EAAAA,MAAAA,QAGExD,EAAAA,EAAAA,UACLwD,EAAAA,EAAAA,MAAAA,KACGA,EAAAA,EAAAA,MAAAA,KAGExD,EAAAA,EAAAA,KACLwD,EAAAA,EAAAA,KACGA,EAAAA,EAAAA,MAKjBiB,GAAoBvG,EAAAA,EAAAA,IAAG,6jBACXsF,EAAAA,EAAAA,MACGA,EAAAA,EAAAA,KAEIxD,EAAAA,EAAAA,OACLwD,EAAAA,EAAAA,OACGA,EAAAA,EAAAA,MAGExD,EAAAA,EAAAA,KACLwD,EAAAA,EAAAA,KACGA,EAAAA,EAAAA,MAGExD,EAAAA,EAAAA,OACLwD,EAAAA,EAAAA,OACGA,EAAAA,EAAAA,MAGExD,EAAAA,EAAAA,IACLwD,EAAAA,EAAAA,IACGA,EAAAA,EAAAA,MAGExD,EAAAA,EAAAA,MACLwD,EAAAA,EAAAA,MAAAA,QACGA,EAAAA,EAAAA,MAGExD,EAAAA,EAAAA,UACLwD,EAAAA,EAAAA,MAAAA,KACGA,EAAAA,EAAAA,MAGExD,EAAAA,EAAAA,KACLwD,EAAAA,EAAAA,KACGA,EAAAA,EAAAA,MAIAA,EAAAA,EAAAA,OAIjBkB,GAAmBxG,EAAAA,EAAAA,IAAG,mLAUtBC,EAAAA,EAAAA,IAAW,iBAcXwG,GAAmBzG,EAAAA,EAAAA,IAAG,8eACPsF,EAAAA,EAAAA,OAKCnD,EAAAA,EAAAA,IAAM,GAAI,KAKVA,EAAAA,EAAAA,IAAM,GAAI,KAKVA,EAAAA,EAAAA,IAAM,GAAI,KAS5BlC,EAAAA,EAAAA,IAAW,YA4BFyF,EAAe,CACxBgB,OAtBWT,EAAAA,GAAAA,OAAAA,WAAa,gEAAbA,CAAa,6DACxBrC,EAAAA,EACA6C,GAEA,IAAmB,IAAlB,UAAEE,GAAW,EACd,OAAQA,GACJ,IAAK,SACD,OAAOL,EACX,IAAK,QACD,OAAOC,EACX,QAEI,OAAOC,EAAiB,IAWhCJ,OACAJ,OACAS,mBACAH,qBACAC,oBACAC,mB,8ECxNJ,MAsFA,EAL6B,CACzBI,UAlFcX,EAAAA,GAAAA,QAAAA,WAAc,2EAAdA,CAAc,0wBAcnBnC,EAAAA,EAAAA,IAAK7B,EAAAA,GAAAA,SAQL6B,EAAAA,EAAAA,IAAK7B,EAAAA,GAAAA,SASL6B,EAAAA,EAAAA,IAAK7B,EAAAA,GAAAA,QAMSH,EAAAA,EAAAA,OACPwD,EAAAA,EAAAA,OAGOxD,EAAAA,EAAAA,KACPwD,EAAAA,EAAAA,KAGOxD,EAAAA,EAAAA,OACPwD,EAAAA,EAAAA,OAGOxD,EAAAA,EAAAA,IACPwD,EAAAA,EAAAA,IAGOxD,EAAAA,EAAAA,MACPwD,EAAAA,EAAAA,MAAAA,QAGOxD,EAAAA,EAAAA,UACPwD,EAAAA,EAAAA,MAAAA,KAGOxD,EAAAA,EAAAA,KACPwD,EAAAA,EAAAA,MAqBhBuB,MAlBUZ,EAAAA,GAAAA,IAAAA,WAAU,uEAAVA,CAAU,2GAmBpBa,SAdoBb,EAAAA,GAAAA,IAAAA,WAAU,0EAAVA,CAAU,+GAC9BpC,EAAAA,I,gDC1EJ,MAAMkD,EAAmBC,EAAAA,cAAoB,CAAC,G,cCE9C,MAAMC,EAAiBD,EAAAA,YAAiB,CAACE,EAAOC,KAC5C,MAAM,SAAEC,EAAQ,MAAEC,EAAK,OAAEC,EAAS,UAAS,MAAEC,EAAQ,OAAM,WAAEC,EAAa,aAAcC,GAAeP,EACjGQ,EDMwBV,EAAAA,WAAiBD,GCL/C,OAAQC,EAAAA,cAAoBW,EAAAA,EAAAA,UAAa,CAAER,IAAKA,EAAKS,GAAIF,EAAUE,MAAQP,EAAQ,CAAE,uBAAwBA,GAAU,KAAO,6BAA8BK,EAAUE,GAAI,aAAcL,EAAO,mBAAoBC,KAAeC,GAC9NT,EAAAA,cAAoBW,EAAAA,EAAAA,MAAS,KAEd,cAAXL,EACOF,EAEJJ,EAAAA,cAAoBW,EAAAA,EAAAA,SAAY,KAAMP,IACjD,IAEJH,EAAeY,YAAc,iBAC7B,S","sources":["webpack://royal-geographical-society/./src/helpers/animate.ts","webpack://royal-geographical-society/./src/helpers/brand.ts","webpack://royal-geographical-society/./src/helpers/fluid.ts","webpack://royal-geographical-society/./src/helpers/fonts.ts","webpack://royal-geographical-society/./src/helpers/global.ts","webpack://royal-geographical-society/./src/helpers/grid.ts","webpack://royal-geographical-society/./src/helpers/media.ts","webpack://royal-geographical-society/./src/helpers/typography.ts","webpack://royal-geographical-society/./src/stories/Components/Buttons/Button/Button.styles.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 { css } from 'styled-components';\r\nexport const inViewMargin = '0px 0px -35% 0px';\r\nexport const rootMargin = '0px 0px -20% 0px';\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\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\n","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 { Device } from './media';\r\n/**\r\n * Base pixel value for the \"rem\" unit.\r\n */\r\nexport const PIXELS_PER_REM = 18;\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 * 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\nexport default {\r\n    nimbusSans: {\r\n        light: css `\r\n      font-family: 'Nimbus Sans', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 300;\r\n    `,\r\n        regular: css `\r\n      font-family: 'Nimbus Sans', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 400;\r\n    `,\r\n        regularItalic: css `\r\n      font-family: 'Nimbus Sans', sans-serif;\r\n      font-weight: 400;\r\n      font-style: italic;\r\n    `,\r\n        bold: css `\r\n      font-family: 'Nimbus Sans', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 700;\r\n    `,\r\n        black: css `\r\n      font-family: 'Nimbus Sans', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 900;\r\n    `,\r\n    },\r\n    agBook: {\r\n        light: css `\r\n      font-family: 'ag-book', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 300;\r\n    `,\r\n        regular: css `\r\n      font-family: 'ag-book', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 500;\r\n    `,\r\n        regularItalic: css `\r\n      font-family: 'ag-book', sans-serif;\r\n      font-style: italic;\r\n    `,\r\n        bold: css `\r\n      font-family: 'ag-book', sans-serif;\r\n      font-weight: 700;\r\n      font-style: normal;\r\n    `,\r\n    },\r\n};\r\n","import { css } from 'styled-components';\r\nexport default {\r\n    navHeight: 200,\r\n    navHeightMobile: 70,\r\n};\r\nexport const ButtonReset = css `\r\n  border: none;\r\n  outline: none;\r\n  padding: 0px;\r\n  background: none;\r\n  border-radius: 0px;\r\n`;\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 HoverArrowRightHovered from '@img/icons/hover-arrow-right-hovered.svg?url';\r\nimport HoverArrowRight from '@img/icons/hover-arrow-right.svg?url';\r\nimport TickCircle from '@img/icons/tick-circle.svg?url';\r\nimport { ButtonStyles } from '@stories/Components/Buttons/Button/Button.styles';\r\nimport { rgba } from 'polished';\r\nimport { css } from 'styled-components';\r\nimport { transition } from './animate';\r\nimport brand from './brand';\r\nimport { fluid } from './fluid';\r\nimport fonts from './fonts';\r\nimport { Device, from, until } from './media';\r\nexport const headingStyles = css `\r\n  ${fonts.agBook.bold};\r\n  color: currentColor;\r\n  margin: 0 0 ${fluid(24, 32)};\r\n`;\r\nexport const h1 = css `\r\n  ${headingStyles};\r\n\r\n  ${fonts.agBook.bold};\r\n  font-size: ${fluid(30, 48)};\r\n  line-height: ${fluid(36, 52)};\r\n`;\r\nexport const h2 = css `\r\n  ${headingStyles};\r\n\r\n  ${fonts.agBook.bold};\r\n  font-size: ${fluid(22, 32)};\r\n  line-height: ${fluid(30, 40)};\r\n`;\r\nexport const h3 = css `\r\n  ${headingStyles};\r\n\r\n  font-size: ${fluid(22, 26)};\r\n  line-height: ${fluid(28, 32)};\r\n`;\r\nexport const h4 = css `\r\n  ${headingStyles};\r\n\r\n  font-size: ${fluid(20, 24)};\r\n  line-height: ${fluid(26, 30)};\r\n`;\r\nexport const h5 = css `\r\n  ${headingStyles};\r\n\r\n  font-size: ${fluid(18, 22)};\r\n  line-height: ${fluid(24, 28)};\r\n`;\r\nexport const h6 = css `\r\n  ${headingStyles};\r\n\r\n  font-size: ${fluid(16, 20)};\r\n  line-height: ${fluid(22, 26)};\r\n`;\r\nconst paragraphStyles = css `\r\n  ${fonts.agBook.light};\r\n  color: currentColor;\r\n  margin: 0 0 ${fluid(16, 24)};\r\n`;\r\nexport const paragraphLarge = css `\r\n  ${paragraphStyles};\r\n\r\n  ${fonts.agBook.bold};\r\n  font-size: ${fluid(18, 24)};\r\n  line-height: ${fluid(24, 30)};\r\n`;\r\nexport const paragraph = css `\r\n  ${paragraphStyles};\r\n\r\n  font-size: ${fluid(18, 22)};\r\n  line-height: ${fluid(24, 30)};\r\n`;\r\nexport const paragraphSmallMed = css `\r\n  ${paragraphStyles};\r\n\r\n  font-size: ${fluid(16, 20)};\r\n  line-height: ${fluid(24, 26)};\r\n`;\r\nexport const paragraphSmall = css `\r\n  ${paragraphStyles};\r\n\r\n  font-size: ${fluid(16, 18)};\r\n  line-height: ${fluid(24, 24)};\r\n`;\r\nexport const paragraphTiny = css `\r\n  ${paragraphStyles};\r\n\r\n  font-size: ${fluid(16, 16)};\r\n  line-height: ${fluid(24, 24)};\r\n`;\r\nexport const caption = css `\r\n  ${fonts.agBook.regular};\r\n  text-transform: uppercase;\r\n  font-size: 14px;\r\n  line-height: 30px;\r\n`;\r\nexport const label = css `\r\n  ${paragraph};\r\n`;\r\nexport const link = css `\r\n  ${transition('text-decoration-color')};\r\n\r\n  display: inline;\r\n  text-decoration: underline;\r\n  text-decoration-color: currentColor;\r\n  text-decoration-thickness: 1px;\r\n  text-underline-offset: 2px;\r\n\r\n  &:focus {\r\n    outline: none;\r\n  }\r\n\r\n  &:focus,\r\n  &:hover {\r\n    text-decoration-color: transparent;\r\n  }\r\n`;\r\n/** TODO: update styling for rich text component */\r\nexport const blockquote = css `\r\n  position: relative;\r\n  ${fonts.agBook.bold}\r\n  font-size: ${fluid(20, 26)};\r\n  line-height: ${fluid(26, 32)};\r\n  margin: 2em 0;\r\n  color: currentColor;\r\n  padding: ${fluid(30, 40)} ${fluid(22, 43)} ${fluid(30, 40)} ${fluid(21, 36)};\r\n  text-align: left;\r\n  box-shadow: 0 0 6px ${rgba(brand.black, 0.16)};\r\n\r\n  &::before,\r\n  &::after {\r\n    display: block;\r\n    position: absolute;\r\n    font-size: 124px;\r\n    line-height: 62px;\r\n    color: var(--themeColor);\r\n\r\n    body:not([data-page-theme]) {\r\n      --themeColor: ${brand.orange};\r\n    }\r\n  }\r\n\r\n  &::before {\r\n    content: '\\\\201C';\r\n    top: -17px;\r\n    left: -15px;\r\n  }\r\n\r\n  &::after {\r\n    content: '\\\\201D';\r\n    bottom: -60px;\r\n    right: -15px;\r\n  }\r\n\r\n  > span,\r\n  > cite {\r\n    ${paragraph};\r\n    position: relative;\r\n    display: block;\r\n    padding-left: 26px;\r\n    margin: 22px 0 0;\r\n\r\n    &::before {\r\n      content: '';\r\n      position: absolute;\r\n      left: 0;\r\n      top: ${fluid(9, 12)};\r\n      width: 16px;\r\n      height: 0;\r\n      border-top: 1px solid currentColor;\r\n    }\r\n  }\r\n`;\r\nexport const blockquoteName = css `\r\n  ${paragraphSmall};\r\n  text-align: left;\r\n  display: block;\r\n`;\r\n/** TODO: update styling for rich text component */\r\nexport const table = css `\r\n  display: block;\r\n  overflow-x: auto;\r\n  padding-top: 1em;\r\n  margin-bottom: 1em;\r\n  width: 100%;\r\n\r\n  @media ${until(Device.Tablet)} {\r\n    white-space: nowrap;\r\n  }\r\n\r\n  table,\r\n  td,\r\n  th {\r\n    border: 1px solid ${brand.black};\r\n  }\r\n\r\n  tbody {\r\n    display: table;\r\n    width: 100%;\r\n  }\r\n\r\n  thead {\r\n    tr {\r\n      td,\r\n      th {\r\n        ${fonts.agBook.bold};\r\n        font-size: ${fluid(20, 24)};\r\n        line-height: ${fluid(26, 30)};\r\n        padding: 12px 16px;\r\n        background-color: ${brand.grey.grey91};\r\n        text-align: center;\r\n      }\r\n    }\r\n  }\r\n\r\n  tbody {\r\n    tr {\r\n      th {\r\n        ${fonts.agBook.bold};\r\n        font-size: ${fluid(20, 24)};\r\n        line-height: ${fluid(26, 30)};\r\n        background-color: ${brand.grey.grey91};\r\n        padding: 12px 16px;\r\n        text-align: center;\r\n      }\r\n\r\n      td {\r\n        ${fonts.agBook.light};\r\n        font-size: ${fluid(18, 22)};\r\n        line-height: ${fluid(24, 30)};\r\n        padding: 12px 16px;\r\n        text-align: center;\r\n      }\r\n    }\r\n  }\r\n`;\r\nconst sharedButtonStyles = css `\r\n  ${ButtonStyles.baseButtonStyles};\r\n  ${fonts.agBook.bold}\r\n  font-size: ${fluid(16, 20)};\r\n  color: var(--themeColor);\r\n  --buttonEdgePadding: 22px;\r\n  --buttonBgColor: var(--themeColor);\r\n  --buttonBorderColor: var(--themeColor);\r\n  text-decoration: none;\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  p {\r\n    ${paragraph}\r\n\r\n    a:not(${ButtonStyles.Button}):not([class*='button-style']) {\r\n      ${link};\r\n      color: ${brand.orange};\r\n    }\r\n  }\r\n\r\n  .large {\r\n    ${paragraphLarge}\r\n  }\r\n\r\n  .small-med {\r\n    ${paragraphSmallMed}\r\n  }\r\n\r\n  .small {\r\n    ${paragraphSmall}\r\n  }\r\n\r\n  a:not(${ButtonStyles.Button}):not([class*='button-style']) {\r\n    ${link}\r\n    color: ${brand.orange};\r\n  }\r\n\r\n  ol,\r\n  ul {\r\n    list-style: none;\r\n    padding-left: 0;\r\n    margin: ${fluid(8, 12)} 0 ${fluid(24, 32)};\r\n\r\n    li {\r\n      ${paragraphStyles};\r\n      font-size: inherit;\r\n      line-height: inherit;\r\n      margin: 0 0 ${fluid(16, 24)};\r\n      position: relative;\r\n      padding-left: 40px;\r\n\r\n      @media ${from(Device.TabletSmall)} {\r\n        padding-left: 50px;\r\n      }\r\n\r\n      p {\r\n        display: inline;\r\n        &:last-child {\r\n          margin-bottom: 0;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  ol {\r\n    list-style: none;\r\n    counter-reset: counter;\r\n\r\n    li {\r\n      counter-increment: counter;\r\n\r\n      &::before {\r\n        content: counter(counter) '.';\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        font-size: ${fluid(22, 26)};\r\n        line-height: ${fluid(28, 34)};\r\n      }\r\n    }\r\n  }\r\n\r\n  ul {\r\n    li {\r\n      &::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 5px;\r\n        left: 0;\r\n        width: 10px;\r\n        height: 10px;\r\n        border-radius: 100%;\r\n        background-color: ${brand.black};\r\n\r\n        @media ${from(Device.TabletSmall)} {\r\n          left: 10px;\r\n          top: 7px;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  blockquote {\r\n    ${blockquote};\r\n\r\n    > strong,\r\n    .quote-name {\r\n      ${blockquoteName}\r\n    }\r\n  }\r\n\r\n  em {\r\n    ${fonts.agBook.regularItalic};\r\n  }\r\n\r\n  hr {\r\n    display: block;\r\n    background: currentColor;\r\n    border: 0;\r\n    height: 2px;\r\n    margin: ${fluid(32, 48)} 0;\r\n    padding: 0;\r\n    width: 100%;\r\n  }\r\n\r\n  table {\r\n    ${table};\r\n  }\r\n\r\n  sub {\r\n    vertical-align: sub;\r\n    font-size: smaller;\r\n  }\r\n\r\n  .responsive-table {\r\n    position: relative;\r\n    overflow-x: auto;\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  .button-style-cta {\r\n    ${sharedButtonStyles};\r\n    ${ButtonStyles.textButtonStyles};\r\n    --buttonEdgePadding: 0;\r\n    color: ${brand.black};\r\n    padding-right: 36px;\r\n    position: relative;\r\n\r\n    &::before,\r\n    &::after {\r\n      content: url(${HoverArrowRight});\r\n      position: absolute;\r\n      right: 0;\r\n      top: 50%;\r\n      transform: translateY(-50%);\r\n      width: 26px;\r\n      height: 26px;\r\n      margin-left: 10px;\r\n      z-index: 0;\r\n    }\r\n\r\n    &::after {\r\n      z-index: 1;\r\n      opacity: 0;\r\n      ${transition('opacity')};\r\n    }\r\n\r\n    &:hover {\r\n      opacity: 1;\r\n\r\n      &::after {\r\n        content: url(${HoverArrowRightHovered});\r\n        opacity: 1;\r\n      }\r\n    }\r\n  }\r\n\r\n  .button-style-solid {\r\n    ${sharedButtonStyles};\r\n    color: ${brand.white};\r\n    --buttonFgColor: ${brand.white};\r\n  }\r\n\r\n  .button-style-border {\r\n    ${sharedButtonStyles};\r\n    --buttonBgColor: transparent;\r\n    --buttonFgColor: var(--themeColor);\r\n    --buttonBorderColor: var(--themeColor);\r\n    border: 2px solid var(--buttonBorderColor);\r\n  }\r\n`;\r\nexport const tickedBullet = css `\r\n  ul {\r\n    list-style: none;\r\n    padding-top: 0.5rem;\r\n    padding-left: 0;\r\n\r\n    li {\r\n      position: relative;\r\n      margin-bottom: ${fluid(16, 20)};\r\n      padding-left: ${fluid(38, 55)};\r\n\r\n      &::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: -1px;\r\n        left: 0;\r\n        width: ${fluid(26, 32)};\r\n        height: ${fluid(26, 32)};\r\n        background-image: url(${TickCircle});\r\n        background-size: 100%;\r\n        background-repeat: no-repeat;\r\n        background-position: center;\r\n      }\r\n    }\r\n  }\r\n`;\r\n","import { transition } from '@helpers/animate';\r\nimport brand, { ThemeOption } from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport fonts from '@helpers/fonts';\r\nimport { ButtonReset } from '@helpers/global';\r\nimport styled, { css } from 'styled-components';\r\nconst Text = styled.div `\r\n  ${fonts.agBook.bold}\r\n  font-size: var(--fontSize);\r\n  color: var(--buttonFgColor);\r\n\r\n  [data-element-size='small'] &,\r\n  [data-element-size='medium'] & {\r\n    --fontSize: 16px;\r\n  }\r\n\r\n  [data-element-size='large'] & {\r\n    --fontSize: ${fluid(16, 20)};\r\n  }\r\n`;\r\nconst iconLeftStyles = css `\r\n  padding-right: 10px;\r\n`;\r\nconst iconRightStyles = css `\r\n  padding-left: 10px;\r\n`;\r\nconst Icon = styled.div `\r\n  display: inline-block;\r\n  vertical-align: middle;\r\n  padding-top: 2px;\r\n  transition: transform 0.3s;\r\n  line-height: 0;\r\n\r\n  ${({ position }) => {\r\n    switch (position) {\r\n        case 'left':\r\n            return iconLeftStyles;\r\n        case 'right':\r\n            return iconRightStyles;\r\n        default:\r\n            break;\r\n    }\r\n}}\r\n\r\n  svg {\r\n    max-height: 26px;\r\n    max-width: 26px;\r\n    width: 100%;\r\n  }\r\n`;\r\nconst borderButtonStyles = css `\r\n  --themeColor: ${brand.black};\r\n  --buttonFgColor: ${brand.black};\r\n  --buttonBgColor: transparent;\r\n\r\n  &[data-element-theme=${ThemeOption.Orange}] {\r\n    --themeColor: ${brand.orange};\r\n    --buttonFgColor: ${brand.orange};\r\n  }\r\n\r\n  &[data-element-theme=${ThemeOption.Blue}] {\r\n    --themeColor: ${brand.blue};\r\n    --buttonFgColor: ${brand.blue};\r\n  }\r\n\r\n  &[data-element-theme=${ThemeOption.Purple}] {\r\n    --themeColor: ${brand.purple};\r\n    --buttonFgColor: ${brand.purple};\r\n  }\r\n\r\n  &[data-element-theme=${ThemeOption.Red}] {\r\n    --themeColor: ${brand.red};\r\n    --buttonFgColor: ${brand.red};\r\n  }\r\n\r\n  &[data-element-theme=${ThemeOption.Green}] {\r\n    --themeColor: ${brand.green.default};\r\n    --buttonFgColor: ${brand.green.default};\r\n  }\r\n\r\n  &[data-element-theme=${ThemeOption.DarkGreen}] {\r\n    --themeColor: ${brand.green.dark};\r\n    --buttonFgColor: ${brand.green.dark};\r\n  }\r\n\r\n  &[data-element-theme=${ThemeOption.Teal}] {\r\n    --themeColor: ${brand.teal};\r\n    --buttonFgColor: ${brand.teal};\r\n  }\r\n\r\n  border: 2px solid var(--buttonBorderColor);\r\n`;\r\nconst solidButtonStyles = css `\r\n  --themeColor: ${brand.white};\r\n  --buttonFgColor: ${brand.teal};\r\n\r\n  &[data-element-theme=${ThemeOption.Orange}] {\r\n    --themeColor: ${brand.orange};\r\n    --buttonFgColor: ${brand.white};\r\n  }\r\n\r\n  &[data-element-theme=${ThemeOption.Blue}] {\r\n    --themeColor: ${brand.blue};\r\n    --buttonFgColor: ${brand.white};\r\n  }\r\n\r\n  &[data-element-theme=${ThemeOption.Purple}] {\r\n    --themeColor: ${brand.purple};\r\n    --buttonFgColor: ${brand.white};\r\n  }\r\n\r\n  &[data-element-theme=${ThemeOption.Red}] {\r\n    --themeColor: ${brand.red};\r\n    --buttonFgColor: ${brand.white};\r\n  }\r\n\r\n  &[data-element-theme=${ThemeOption.Green}] {\r\n    --themeColor: ${brand.green.default};\r\n    --buttonFgColor: ${brand.white};\r\n  }\r\n\r\n  &[data-element-theme=${ThemeOption.DarkGreen}] {\r\n    --themeColor: ${brand.green.dark};\r\n    --buttonFgColor: ${brand.white};\r\n  }\r\n\r\n  &[data-element-theme=${ThemeOption.Teal}] {\r\n    --themeColor: ${brand.teal};\r\n    --buttonFgColor: ${brand.white};\r\n  }\r\n\r\n  &[data-solid-invert='true'] {\r\n    --buttonBgColor: ${brand.white};\r\n    --buttonFgColor: var(--themeColor);\r\n  }\r\n`;\r\nconst textButtonStyles = css `\r\n  --buttonHeight: 26px;\r\n  --buttonFgColor: currentColor;\r\n  --themeColor: transparent;\r\n\r\n  &&& {\r\n    --buttonEdgePadding: 0px;\r\n  }\r\n\r\n  svg path {\r\n    ${transition('stroke-width')}\r\n  }\r\n\r\n  &:hover,\r\n  &:focus {\r\n    &&& {\r\n      opacity: 1;\r\n    }\r\n\r\n    svg path {\r\n      stroke-width: 5;\r\n    }\r\n  }\r\n`;\r\nconst baseButtonStyles = css `\r\n  --buttonFgColor: ${brand.black};\r\n  --buttonBgColor: var(--themeColor);\r\n  --buttonBorderColor: var(--themeColor);\r\n\r\n  &[data-element-size='small'] {\r\n    --buttonHeight: ${fluid(16, 38)};\r\n    --buttonEdgePadding: 14px;\r\n  }\r\n\r\n  &[data-element-size='medium'] {\r\n    --buttonHeight: ${fluid(16, 42)};\r\n    --buttonEdgePadding: 22px;\r\n  }\r\n\r\n  &[data-element-size='large'] {\r\n    --buttonHeight: ${fluid(16, 48)};\r\n    --buttonEdgePadding: 22px;\r\n  }\r\n\r\n  display: inline-flex;\r\n  align-items: center;\r\n  height: var(--buttonHeight);\r\n  padding: 6px var(--buttonEdgePadding);\r\n  background-color: var(--buttonBgColor);\r\n  ${transition('opacity')}\r\n\r\n  &:hover,\r\n  &:focus {\r\n    opacity: 0.5;\r\n  }\r\n`;\r\nconst Button = styled.button `\r\n  ${ButtonReset}\r\n  ${baseButtonStyles};\r\n\r\n  ${({ styleType }) => {\r\n    switch (styleType) {\r\n        case 'border':\r\n            return borderButtonStyles;\r\n        case 'solid':\r\n            return solidButtonStyles;\r\n        default:\r\n        case 'text':\r\n            return textButtonStyles;\r\n    }\r\n}}\r\n\r\n  &:is(a) {\r\n    color: inherit;\r\n    text-decoration: none;\r\n  }\r\n`;\r\nexport const ButtonStyles = {\r\n    Button,\r\n    Icon,\r\n    Text,\r\n    baseButtonStyles,\r\n    borderButtonStyles,\r\n    solidButtonStyles,\r\n    textButtonStyles,\r\n};\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":["inViewMargin","rootMargin","cubicEaseOut","shouldAnimate","innerCss","css","transition","properties","duration","timing","inViewFadeUp","params","delay","white","black","orange","blue","purple","red","green","default","dark","teal","grey","grey13","hsl","grey20","grey35","grey41","grey44","grey60","grey80","grey90","grey91","grey97","ThemeOption","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","fluidUnit","unit","num","Math","nimbusSans","light","regular","regularItalic","bold","agBook","ButtonReset","siteWide","from","baseGrid","size","until","between","start","end","headingStyles","fonts","h1","h2","h3","h4","h5","h6","paragraphStyles","paragraphLarge","paragraph","paragraphSmallMed","paragraphSmall","paragraphTiny","link","blockquote","rgba","brand","blockquoteName","table","sharedButtonStyles","ButtonStyles","contentStyles","HoverArrowRight","HoverArrowRightHovered","tickedBullet","TickCircle","Text","styled","iconLeftStyles","iconRightStyles","Icon","position","borderButtonStyles","solidButtonStyles","textButtonStyles","baseButtonStyles","Button","styleType","Container","Inner","SiteWide","BasePropsContext","React","SectionWrapper","props","ref","children","theme","layout","flush","innerWidth","otherProps","baseProps","S","id","displayName"],"sourceRoot":""}