{"version":3,"file":"3010-f91cfa754390e0126823.js","mappings":"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","sources":["webpack://tipton/./src/hooks/useMedia.ts","webpack://tipton/./src/stories/Components/CardGrid/CardGrid.styles.ts","webpack://tipton/./src/stories/Components/CardGrid/CardGrid.tsx","webpack://tipton/./src/stories/Components/Misc/Forms/Form.styles.ts","webpack://tipton/./src/stories/Components/Misc/TitleAndIntroduction/TitleAndIntroduction.styles.ts","webpack://tipton/./src/stories/Widgets/ProductHero/ProductHero.styles.ts","webpack://tipton/./src/stories/Widgets/ProductHero/ProductHero.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\r\n/**\r\n * Store a value in state based on the specified media queries.\r\n * @param {Array<string>} queries\r\n * @param {Array<T>} values\r\n * @param {T} defaultValue\r\n */\r\nfunction useMedia(queries, values, defaultValue) {\r\n    // Function that gets value based on matching media query\r\n    const getValue = () => {\r\n        // Get index of first media query that matches\r\n        const index = mediaQueryLists.findIndex((mql) => mql.matches);\r\n        // Return related value or defaultValue if none\r\n        return typeof values[index] !== 'undefined' ? values[index] : defaultValue;\r\n    };\r\n    // State and setter for matched value\r\n    const [value, setValue] = useState(defaultValue);\r\n    const [mediaQueryLists, setMediaQueryLists] = useState([]);\r\n    useEffect(() => {\r\n        // Array containing a media query list for each query\r\n        setMediaQueryLists(queries.map((query) => window.matchMedia(query)));\r\n    }, []);\r\n    useEffect(() => {\r\n        setValue(getValue);\r\n        // Event listener callback\r\n        // Note: By defining getValue outside of useEffect we ensure that it has ...\r\n        // ... current values of hook args (as this hook callback is created once on mount).\r\n        const handler = () => setValue(getValue);\r\n        // Set a listener for each media query with above handler as callback.\r\n        mediaQueryLists.forEach((mql) => mql.addListener(handler));\r\n        // Remove listeners on cleanup\r\n        return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler));\r\n    }, [mediaQueryLists]); // Empty array ensures effect is only run on mount and unmount\r\n    return value;\r\n}\r\nexport default useMedia;\r\n","import { Device, from, until } from '@helpers/media';\r\nimport styled, { css } from 'styled-components';\r\nimport MotionTrack from '../Misc/Carousels/Carousel/MotionTrack/MotionTrack';\r\nimport MotionTrackStyles from '../Misc/Carousels/Carousel/MotionTrack/MotionTrack.styles';\r\nimport PaginationStyles from '../Misc/Carousels/Carousel/Pagination/Pagination.styles';\r\nexport const cardWidth = css `\r\n  flex: var(--grow) 0\r\n    calc(\r\n      100% / var(--rowItems) - (var(--gap) * ((var(--rowItems) - 1) / var(--rowItems))) -\r\n        (var(--itemPeek, 0px) / var(--rowItems))\r\n    );\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    max-width: var(--maxWidth);\r\n  }\r\n`;\r\nconst Track = styled(MotionTrack) `\r\n  margin: 0 calc(var(--gap) * -0.5);\r\n  width: calc(100% + var(--gap));\r\n\r\n  // Unset container when carousel is disabled\r\n  @media ${from(Device.TabletLarge)} {\r\n    display: contents;\r\n\r\n    ${MotionTrackStyles.Track} {\r\n      display: contents;\r\n    }\r\n  }\r\n`;\r\nconst Item = styled.li `\r\n  display: flex;\r\n  padding: 0 calc(var(--gap) * 0.5);\r\n  flex: 0 0 calc(100% / var(--rowItems) - (var(--itemPeek, 0px) / var(--rowItems)));\r\n\r\n  // Remove flex styling from the card whilst the mobile carousel is enabled\r\n  @media ${until(Device.TabletLarge)} {\r\n    > div,\r\n    > a,\r\n    > article {\r\n      flex: 0 0 100% !important;\r\n    }\r\n  }\r\n\r\n  // Unset container when carousel is disabled\r\n  @media ${from(Device.TabletLarge)} {\r\n    display: contents;\r\n  }\r\n`;\r\nconst Container = styled.section `\r\n  --alignment: center; // Flexbox alignment (eg. flex-start, center, flex-end)\r\n  --grow: 1; // Flex grow - 0 for equal width, 1 for auto width\r\n  --rowItems: 1; // Number of items per row\r\n  --maxWidth: 50%; // Max width a card can be\r\n  --gap: var(--gutterWidth); // Defaults to global grid gap\r\n\r\n  --controlsMargin: 24px; // Margin above the carousel controls\r\n  --itemPeek: 0px; // Carousel peek, use if carousel is enabled\r\n\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  justify-content: var(--alignment);\r\n  gap: var(--gap);\r\n  flex-flow: row wrap;\r\n\r\n  ${PaginationStyles.Container} {\r\n    margin: calc(var(--controlsMargin) - var(--gap)) 0 0;\r\n    flex: 0 0 100%;\r\n  }\r\n\r\n  /**\r\n    * Force --grow to be 0 if there are more than the configured cards per frow, to keep next row cards equal size.\r\n    */\r\n  &[data-row-max='1']:has(> :nth-child(1)) {\r\n    --grow: 0 !important;\r\n  }\r\n\r\n  &[data-row-max='2']:has(> :nth-child(2)) {\r\n    --grow: 0 !important;\r\n  }\r\n\r\n  &[data-row-max='3']:has(> :nth-child(3)) {\r\n    --grow: 0 !important;\r\n  }\r\n\r\n  &[data-row-max='4']:has(> :nth-child(4)) {\r\n    --grow: 0 !important;\r\n  }\r\n\r\n  &[data-row-max='5']:has(> :nth-child(5)) {\r\n    --grow: 0 !important;\r\n  }\r\n\r\n  &[data-row-max='6']:has(> :nth-child(6)) {\r\n    --grow: 0 !important;\r\n  }\r\n\r\n  // Remove peek and hide carousel controls\r\n  @media ${from(Device.TabletLarge)} {\r\n    --itemPeek: 0px !important;\r\n\r\n    ${PaginationStyles.Container} {\r\n      display: none;\r\n    }\r\n\r\n    &:has(${Track}) {\r\n      // Repeat the removal of grow for grids with a mobile carousel\r\n      &[data-row-max='1'] {\r\n        ${MotionTrackStyles.Track}:has(> :nth-child(1)) {\r\n          --grow: 0 !important;\r\n        }\r\n      }\r\n\r\n      &[data-row-max='2'] {\r\n        ${MotionTrackStyles.Track}:has(> :nth-child(2)) {\r\n          --grow: 0 !important;\r\n        }\r\n      }\r\n\r\n      &[data-row-max='3'] {\r\n        ${MotionTrackStyles.Track}:has(> :nth-child(3)) {\r\n          --grow: 0 !important;\r\n        }\r\n      }\r\n\r\n      &[data-row-max='4'] {\r\n        ${MotionTrackStyles.Track}:has(> :nth-child(4)) {\r\n          --grow: 0 !important;\r\n        }\r\n      }\r\n\r\n      &[data-row-max='5'] {\r\n        ${MotionTrackStyles.Track}:has(> :nth-child(5)) {\r\n          --grow: 0 !important;\r\n        }\r\n      }\r\n\r\n      &[data-row-max='6'] {\r\n        ${MotionTrackStyles.Track}:has(> :nth-child(6)) {\r\n          --grow: 0 !important;\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\nconst CardGridStyles = {\r\n    Container,\r\n    Track,\r\n    Item,\r\n};\r\nexport default CardGridStyles;\r\n","import { withMotionMax } from '@hoc/withMotionMax';\r\nimport { MotionConfig } from 'framer-motion';\r\nimport * as React from 'react';\r\nimport CarouselProvider from '../Misc/Carousels/Carousel/CarouselProvider/CarouselProvider';\r\nimport Pagination from '../Misc/Carousels/Carousel/Pagination/Pagination';\r\nimport S from './CardGrid.styles';\r\nconst CardGrid = ({ children, mobileCarousel, rowMax, paddingOffset, translations, carouselType, ...props }) => {\r\n    return (React.createElement(S.Container, { \"data-carousel\": mobileCarousel, \"data-row-max\": rowMax, ...props }, renderLayout()));\r\n    function renderLayout() {\r\n        if (mobileCarousel) {\r\n            const count = React.Children.count(children);\r\n            return (React.createElement(MotionConfig, { transition: { duration: 0.3, ease: 'easeOut' } },\r\n                React.createElement(CarouselProvider, { count: count, paddingOffset: paddingOffset ?? 0 },\r\n                    React.createElement(S.Track, null, React.Children.map(children, (child) => (React.createElement(S.Item, null, child)))),\r\n                    React.createElement(Pagination, { translations: translations, variant: carouselType }))));\r\n        }\r\n        return children;\r\n    }\r\n};\r\nexport default withMotionMax(CardGrid);\r\n","import { transition } from '@helpers/animate';\r\nimport brand from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport fonts from '@helpers/fonts';\r\nimport { ButtonReset } from '@helpers/global';\r\nimport { Device, from } from '@helpers/media';\r\nimport srOnly from '@helpers/srOnly';\r\nimport { contentStyles, paragraphRegular, paragraphSmall } from '@helpers/typography';\r\nimport ButtonStyles from '@stories/Components/Buttons/Button/Button.styles';\r\nimport { m } from 'framer-motion';\r\nimport { rgba } from 'polished';\r\nimport styled, { css } from 'styled-components';\r\nconst Form = styled.form `\r\n  --tooltipFgColour: ${brand.global.white};\r\n  --tooltipBgColour: ${brand.global.black};\r\n  --borderColour: ${brand.grey.light};\r\n  --textColour: ${brand.blue.navy};\r\n\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: ${fluid(32, 40)} 0;\r\n`;\r\nconst Section = styled.fieldset `\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: ${fluid(20, 24)};\r\n\r\n  &[data-visible='false'] {\r\n    display: none;\r\n  }\r\n`;\r\nexport const CommonLegendStyles = css `\r\n  ${fonts.proximaNova.bold};\r\n\r\n  display: block;\r\n  font-size: ${fluid(16, 20)};\r\n  margin: 0 0 30px;\r\n  padding: 0 0 8px;\r\n  color: var(--textColour);\r\n  border-bottom: 1px solid var(--borderColour);\r\n  width: 100%;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    margin-bottom: ${fluid(20, 24)};\r\n  }\r\n`;\r\nconst Title = styled.legend `\r\n  ${CommonLegendStyles};\r\n`;\r\nconst Content = styled.p `\r\n  ${paragraphRegular}\r\n`;\r\nconst Row = styled.div `\r\n  --count: 1;\r\n\r\n  display: grid;\r\n  grid-template-columns: repeat(var(--count), 1fr);\r\n  gap: ${fluid(20, 24)};\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    --count: 2;\r\n\r\n    &[data-layout='full'] {\r\n      --count: 1;\r\n    }\r\n  }\r\n`;\r\nconst Field = styled.div `\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    &[data-size='wide'] {\r\n      grid-column: span 2;\r\n    }\r\n\r\n    &[data-size='full'] {\r\n      grid-column: span 2;\r\n    }\r\n  }\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    &[data-size='full'] {\r\n      grid-column: span 4;\r\n    }\r\n  }\r\n`;\r\nexport const CommonLabelStyles = css `\r\n  ${fonts.proximaNova.semiBold};\r\n\r\n  font-size: 16px;\r\n  line-height: 26px;\r\n  display: block;\r\n  margin: 0 0 7px;\r\n  color: var(--textColour);\r\n\r\n  &[data-hide='true'] {\r\n    ${srOnly}\r\n  }\r\n`;\r\nconst Label = styled.label `\r\n  ${CommonLabelStyles};\r\n`;\r\nconst Description = styled.div `\r\n  ${paragraphRegular};\r\n`;\r\nexport const CommonErrorStyles = css `\r\n  ${paragraphSmall};\r\n\r\n  display: block;\r\n  color: ${brand.validation.invalid};\r\n  margin: 6px 0 0;\r\n\r\n  > span {\r\n    display: inline-flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    width: ${fluid(16, 20)};\r\n    height: ${fluid(16, 20)};\r\n    border-radius: 50%;\r\n    background-color: ${brand.validation.invalid};\r\n    color: ${brand.global.white};\r\n  }\r\n`;\r\nconst Error = styled.span `\r\n  ${CommonErrorStyles};\r\n`;\r\nconst Divider = styled.hr `\r\n  display: block;\r\n  border: 0;\r\n  border-bottom: 1px solid var(--borderColour);\r\n  margin: 0;\r\n  padding: 0;\r\n`;\r\nconst SubmitWrapper = styled.div `\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  gap: 30px;\r\n\r\n  ${ButtonStyles.Container} {\r\n    width: auto;\r\n  }\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    flex-direction: row;\r\n    align-items: center;\r\n    gap: ${fluid(20, 24)};\r\n\r\n    ${ButtonStyles.Container} {\r\n      margin-left: auto;\r\n    }\r\n  }\r\n`;\r\nconst Loader = styled.div `\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  display: flex;\r\n  background: ${rgba(brand.global.black, 0.2)};\r\n  color: ${brand.global.white};\r\n  flex-direction: column;\r\n  height: 100%;\r\n  place-content: center;\r\n  place-items: center;\r\n  text-align: center;\r\n  width: 100%;\r\n`;\r\nconst LoaderText = styled.span `\r\n  ${paragraphRegular};\r\n  ${fonts.proximaNova.bold};\r\n\r\n  display: block;\r\n  margin: 1rem 0 0;\r\n`;\r\nconst ErrorList = styled(m.ul) `\r\n  display: flex;\r\n  color: ${brand.validation.invalid};\r\n  flex-direction: column;\r\n  margin: 0;\r\n`;\r\nconst ErrorListItem = styled.li `\r\n  ${CommonErrorStyles};\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  gap: ${fluid(6, 8)};\r\n  margin: 0;\r\n\r\n  > div {\r\n    ${contentStyles};\r\n\r\n    flex: 1 1;\r\n\r\n    h1,\r\n    .h1-styles,\r\n    h2,\r\n    .h2-styles,\r\n    h3,\r\n    .h3-styles,\r\n    h4,\r\n    .h4-styles,\r\n    h5,\r\n    .h5-styles,\r\n    h6,\r\n    .h6-styles {\r\n      margin: 0 0 ${fluid(16, 22)};\r\n    }\r\n\r\n    p {\r\n      ${paragraphSmall};\r\n    }\r\n  }\r\n\r\n  &:not(:last-child) {\r\n    margin-bottom: 1em;\r\n  }\r\n`;\r\nconst ConfirmationMessage = styled(m.div) `\r\n  ${contentStyles};\r\n\r\n  p:last-child {\r\n    margin-bottom: 0;\r\n  }\r\n`;\r\nconst Info = styled.span `\r\n  position: relative;\r\n  margin: 0 0 0 5px;\r\n`;\r\nconst InfoButton = styled.button `\r\n  ${ButtonReset};\r\n  ${paragraphSmall};\r\n\r\n  border-radius: 5000px;\r\n  color: currentColor;\r\n  height: ${fluid(16, 20)};\r\n  width: ${fluid(16, 20)};\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  cursor: help;\r\n  text-transform: none;\r\n  color: ${brand.global.white};\r\n  background-color: ${brand.blue.navy};\r\n  transform: translateY(-1.5px);\r\n  z-index: 2;\r\n  margin: 0;\r\n\r\n  &:focus-visible,\r\n  &.focus-ring {\r\n    outline: auto;\r\n    outline-offset: 3px;\r\n    outline-width: 1px;\r\n    outline-style: solid;\r\n    outline-color: ${brand.blue.navy};\r\n  }\r\n`;\r\nconst Tooltip = styled.span `\r\n  ${transition('opacity', 0.2)};\r\n  ${paragraphSmall};\r\n\r\n  --shadowColour: rgba(0, 0, 0, 0.05);\r\n\r\n  position: absolute;\r\n  color: ${brand.global.white};\r\n  background-color: ${rgba(brand.blue.navy, 0.9)};\r\n  font-size: ${fluid(12, 14)};\r\n  text-align: left;\r\n  top: calc(100% + 4px);\r\n  right: 0;\r\n  opacity: 0;\r\n  z-index: -1;\r\n  width: ${fluid(200, 375)};\r\n  padding: 6px 8px;\r\n  box-shadow: -0.1px 1px 1.1px var(--shadowColour), -0.2px 2.7px 3px -0.8px var(--shadowColour),\r\n    -0.4px 6.3px 7.1px -1.7px var(--shadowColour), -0.9px 15px 16.9px -2.5px var(--shadowColour);\r\n  white-space: normal;\r\n  pointer-events: none;\r\n  border-radius: 4px;\r\n  margin: 0;\r\n\r\n  ${Info}:has(${InfoButton}:hover) &,\r\n  ${Info}:has(${InfoButton}:active) &,\r\n  ${Info}:has(${InfoButton}.focus-ring) &,\r\n  ${Info}:has(${InfoButton}:focus-visible) & {\r\n    opacity: 1;\r\n    z-index: 2;\r\n    pointer-events: all;\r\n  }\r\n`;\r\nconst FormStyles = {\r\n    ConfirmationMessage,\r\n    Content,\r\n    Description,\r\n    Divider,\r\n    Error,\r\n    ErrorList,\r\n    ErrorListItem,\r\n    Field,\r\n    Form,\r\n    Label,\r\n    Loader,\r\n    LoaderText,\r\n    Row,\r\n    Section,\r\n    SubmitWrapper,\r\n    Title,\r\n    Info,\r\n    Tooltip,\r\n    InfoButton,\r\n};\r\nexport default FormStyles;\r\n","import { fluid } from '@helpers/fluid';\r\nimport { baseGrid } from '@helpers/grid';\r\nimport { Device, from } from '@helpers/media';\r\nimport { headingStyles, paragraphRegular } from '@helpers/typography';\r\nimport styled, { css } from 'styled-components';\r\nconst Container = styled.section `\r\n  ${baseGrid};\r\n`;\r\nconst centralColumns = css `\r\n  grid-column: 1 / -1;\r\n  text-align: center;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    grid-column: 2 / -2;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    grid-column: 3 / -3;\r\n  }\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    grid-column: 4 / -4;\r\n  }\r\n`;\r\nconst leftColumns = css `\r\n  grid-column: 1 / -1;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    grid-column: 1 / span 6;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    grid-column: 1 / span 5;\r\n  }\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    grid-column: 1 / span 4;\r\n  }\r\n`;\r\nconst Title = styled.h2 `\r\n  ${headingStyles};\r\n\r\n  font-size: ${fluid(28, 38)};\r\n  margin: 0;\r\n\r\n  ${Container}[data-alignment='centre'] & {\r\n    ${centralColumns};\r\n  }\r\n\r\n  ${Container}[data-alignment='left'] & {\r\n    ${leftColumns};\r\n  }\r\n`;\r\nconst Introduction = styled.p `\r\n  ${paragraphRegular};\r\n\r\n  margin: ${fluid(16, 24)} 0 0;\r\n\r\n  ${Container}[data-alignment='centre'] & {\r\n    ${centralColumns};\r\n  }\r\n\r\n  ${Container}[data-alignment='left'] & {\r\n    ${leftColumns};\r\n  }\r\n`;\r\nconst TitleAndIntroductionStyles = {\r\n    Container,\r\n    Title,\r\n    Introduction,\r\n};\r\nexport default TitleAndIntroductionStyles;\r\n","import brand from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport fonts from '@helpers/fonts';\r\nimport { Device, from, until } from '@helpers/media';\r\nimport { h2, h5, paragraphLarge, paragraphSmall } from '@helpers/typography';\r\nimport CardGrid from '@stories/Components/CardGrid/CardGrid';\r\nimport { cardWidth } from '@stories/Components/CardGrid/CardGrid.styles';\r\nimport FormStyles from '@stories/Components/Misc/Forms/Form.styles';\r\nimport SectionWrapper, { ContentType, } from '@stories/Components/Misc/SectionWrapper/SectionWrapper';\r\nimport TitleAndIntroductionStyles from '@stories/Components/Misc/TitleAndIntroduction/TitleAndIntroduction.styles';\r\nimport styled from 'styled-components';\r\nconst Container = styled(SectionWrapper) `\r\n  --backgroundColour: ${brand.green.light};\r\n  --featureColour: ${brand.green.dark};\r\n  --paddingX: ${fluid(18, 26)};\r\n  --paddingY: 26px;\r\n\r\n  background-color: var(--backgroundColour);\r\n  border-radius: 0 0 ${fluid(25, 50)} 0;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    border-radius: 0 0 ${fluid(25, 50)} ${fluid(25, 50)};\r\n  }\r\n\r\n  &[data-theme=${ContentType.Savings}] {\r\n    --backgroundColour: ${brand.blue.light};\r\n    --featureColour: ${brand.blue.dark};\r\n  }\r\n\r\n  ${TitleAndIntroductionStyles.Container} {\r\n    margin-bottom: ${fluid(24, 48)};\r\n  }\r\n\r\n  ${TitleAndIntroductionStyles.Introduction} {\r\n    margin-bottom: 0;\r\n  }\r\n`;\r\nconst Wrapper = styled.div ``;\r\nconst TopArea = styled.div ``;\r\nconst Tag = styled.div `\r\n  ${paragraphSmall};\r\n  ${fonts.proximaNova.semiBold};\r\n\r\n  display: inline-block;\r\n  color: ${brand.global.white};\r\n  background-color: ${brand.blue.dark};\r\n  border-radius: 10000000px;\r\n  padding: 8px 12px;\r\n  margin-bottom: 12px;\r\n`;\r\nconst Title = styled.h1 `\r\n  ${h2};\r\n  margin-bottom: 18px;\r\n  max-width: 30ch;\r\n`;\r\nconst Introduction = styled.p `\r\n  ${paragraphLarge};\r\n  ${fonts.proximaNova.medium};\r\n  margin-bottom: ${fluid(22, 38)};\r\n  max-width: 70ch;\r\n`;\r\nconst Features = styled(CardGrid) `\r\n  --maxWidth: 33%;\r\n  --rowItems: 2;\r\n  --alignment: flex-start;\r\n\r\n  grid-row: 3;\r\n  grid-column: 1;\r\n  width: 100%;\r\n  margin-top: ${fluid(16, 28)};\r\n\r\n  &[data-single-col='true'] {\r\n    --grow: 0;\r\n\r\n    @media ${until(Device.TabletSmall)} {\r\n      --rowItems: 1;\r\n      --grow: 1;\r\n    }\r\n  }\r\n\r\n  @media ${from(Device.TabletSmall)} {\r\n    --rowItems: 3 !important; // Important required to prevent CLS specificity issue\r\n  }\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    --rowItems: 4 !important;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    --rowItems: 5 !important;\r\n\r\n    &[data-single-col='true'] {\r\n      --rowItems: 4 !important;\r\n    }\r\n  }\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    --rowItems: 6 !important;\r\n\r\n    &[data-single-col='true'] {\r\n      --rowItems: 4 !important;\r\n    }\r\n  }\r\n`;\r\nconst Info = styled(FormStyles.Info) `\r\n  grid-column: 2;\r\n  margin: 2px 0 0;\r\n`;\r\nconst InfoButton = styled(FormStyles.InfoButton) ``;\r\nconst Feature = styled.div `\r\n  ${cardWidth};\r\n\r\n  display: grid;\r\n  grid-template-columns: 1fr min-content;\r\n  column-gap: ${fluid(8, 16)};\r\n  background-color: ${brand.global.white};\r\n  padding: 4px 12px;\r\n  border-radius: 10px 10px 10px 0;\r\n  z-index: 1;\r\n\r\n  /* Larger z-index for feature displaying a tooltip to ensure info buttons don't overlap the tooltip when features stack */\r\n  &:has(${Info}:hover, ${Info}:focus-visible, ${Info}:active) {\r\n    z-index: 2;\r\n  }\r\n`;\r\nconst FeatureTitle = styled.h2 `\r\n  ${paragraphSmall};\r\n  ${fonts.proximaNova.bold};\r\n\r\n  grid-column: 1;\r\n  margin: 0;\r\n`;\r\nconst FeatureContent = styled.p `\r\n  ${h5};\r\n\r\n  grid-column: 1 / span 2;\r\n  margin: 0;\r\n  color: var(--featureColour);\r\n  margin-bottom: ${fluid(0, 24)};\r\n`;\r\nconst Tooltip = styled(FormStyles.Tooltip) `\r\n  --width: min(50vw, calc(var(--siteWidth) * 0.5));\r\n\r\n  width: calc(var(--width) - (var(--paddingX) * 2) - var(--sitePadding));\r\n  z-index: 1;\r\n\r\n  @media ${from(Device.TabletSmall)} {\r\n    --width: min(33vw, calc(var(--siteWidth) * 0.33));\r\n  }\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    --width: min(27.5vw, calc(var(--siteWidth) * 0.275));\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    --width: min(25vw, calc(var(--siteWidth) * 0.25));\r\n  }\r\n`;\r\nconst BottomArea = styled.div `\r\n  margin-top: ${fluid(22, 22)};\r\n`;\r\nconst SummaryBullets = styled.ul `\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin-bottom: ${fluid(24, 29)};\r\n  gap: 8px;\r\n  margin-left: 14px;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    flex-direction: row;\r\n    margin-left: 0;\r\n    gap: 16px 33px;\r\n  }\r\n\r\n  li {\r\n    ${paragraphSmall};\r\n    ${fonts.proximaNova.semiBold};\r\n    position: relative;\r\n    margin-bottom: 0;\r\n\r\n    &:before {\r\n      content: '';\r\n      position: absolute;\r\n      left: -14px;\r\n      top: 50%;\r\n      transform: translateY(-50%);\r\n      width: ${fluid(6, 7)};\r\n      height: ${fluid(6, 7)};\r\n      background-color: var(--featureColour);\r\n      border-radius: 100%;\r\n\r\n      @media ${from(Device.Tablet)} {\r\n        left: -19px;\r\n      }\r\n    }\r\n\r\n    &:first-of-type {\r\n      &:before {\r\n        @media ${from(Device.Tablet)} {\r\n          content: none;\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\nconst ProductHerotyles = {\r\n    BottomArea,\r\n    Container,\r\n    Feature,\r\n    FeatureContent,\r\n    Features,\r\n    FeatureTitle,\r\n    Info,\r\n    Introduction,\r\n    SummaryBullets,\r\n    Tag,\r\n    Title,\r\n    Tooltip,\r\n    TopArea,\r\n    Wrapper,\r\n    InfoButton,\r\n};\r\nexport default ProductHerotyles;\r\n","import { Device, until } from '@helpers/media';\r\nimport useMedia from '@hooks/useMedia';\r\nimport { LinkButton } from '@stories/Components/Buttons/Button/Button';\r\nimport { ContentType } from '@stories/Components/Misc/SectionWrapper/SectionWrapper';\r\nimport * as React from 'react';\r\nimport S from './ProductHero.styles';\r\nconst ProductHero = (props) => {\r\n    const rowMax = useMedia([\r\n        until(Device.TabletSmall),\r\n        until(Device.Tablet),\r\n        until(Device.TabletLarge),\r\n        until(Device.DesktopSmall),\r\n    ], [2, 3, 4, 5], 6);\r\n    if (props.featureBoxes.length === 0) {\r\n        return null;\r\n    }\r\n    return (React.createElement(S.Container, { \"data-theme\": props.theme ?? ContentType.Default, translations: props.translations },\r\n        React.createElement(S.Wrapper, null,\r\n            React.createElement(S.TopArea, null,\r\n                props.tag && React.createElement(S.Tag, null, props.tag),\r\n                React.createElement(S.Title, null, props.title),\r\n                props.introduction && React.createElement(S.Introduction, null, props.introduction)),\r\n            props.featureBoxes && props.featureBoxes.length > 0 && (React.createElement(S.Features, { rowMax: rowMax, \"data-single-col\": props.featureBoxes.length <= 3 }, props.featureBoxes.map((feature, index) => (React.createElement(S.Feature, { key: `feature-${index}` },\r\n                React.createElement(S.FeatureTitle, null, feature.title),\r\n                feature.tooltip && (React.createElement(S.Info, null,\r\n                    React.createElement(S.InfoButton, { \"aria-label\": props.translations?.['global.tooltip.label'], \"aria-describedby\": `feature-${index}-label`, onClick: (e) => e.preventDefault() }, \"?\"),\r\n                    React.createElement(S.Tooltip, { id: `feature-${index}-label`, role: \"tooltip\" }, feature.tooltip))),\r\n                React.createElement(S.FeatureContent, null, feature.content)))))),\r\n            React.createElement(S.BottomArea, null,\r\n                props.summaryBullets && props.summaryBullets.length > 0 && (React.createElement(S.SummaryBullets, null, props.summaryBullets.map((bullet, index) => (React.createElement(\"li\", { key: `bullet-${index}` }, bullet))))),\r\n                props.cta && (React.createElement(LinkButton, { href: props.cta.url, buttonType: \"tertiary\", \"aria-label\": props.cta.text }, props.cta.text))))));\r\n};\r\nexport default ProductHero;\r\n"],"names":["queries","values","defaultValue","getValue","index","mediaQueryLists","findIndex","mql","matches","value","setValue","useState","setMediaQueryLists","useEffect","map","query","window","matchMedia","handler","forEach","addListener","removeListener","cardWidth","css","from","Device","TabletLarge","Track","styled","MotionTrack","withConfig","displayName","componentId","MotionTrackStyles","Item","li","until","Container","section","PaginationStyles","withMotionMax","_ref","children","mobileCarousel","rowMax","paddingOffset","translations","carouselType","props","React","S","count","MotionConfig","transition","duration","ease","CarouselProvider","child","Pagination","variant","renderLayout","Form","form","brand","global","white","black","grey","light","blue","navy","fluid","Section","fieldset","CommonLegendStyles","fonts","proximaNova","bold","Tablet","Title","legend","Content","p","paragraphRegular","Row","div","Field","Desktop","CommonLabelStyles","semiBold","srOnly","Label","label","Description","CommonErrorStyles","paragraphSmall","validation","invalid","Error","span","Divider","hr","SubmitWrapper","ButtonStyles","Loader","rgba","LoaderText","ErrorList","m","ul","ErrorListItem","contentStyles","ConfirmationMessage","Info","InfoButton","button","ButtonReset","Tooltip","baseGrid","centralColumns","leftColumns","h2","headingStyles","Introduction","SectionWrapper","green","dark","ContentType","Savings","TitleAndIntroductionStyles","Wrapper","TopArea","Tag","h1","paragraphLarge","medium","Features","CardGrid","TabletSmall","FormStyles","Feature","FeatureTitle","FeatureContent","h5","BottomArea","SummaryBullets","_props$theme","useMedia","DesktopSmall","featureBoxes","length","theme","Default","tag","title","introduction","feature","_props$translations","key","tooltip","onClick","e","preventDefault","id","role","content","summaryBullets","bullet","cta","LinkButton","href","url","buttonType","text"],"sourceRoot":""}