{"version":3,"file":"7820-58f6eed50d697411905e.js","mappings":"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","sources":["webpack://brc/./src/helpers/scrollbars.ts","webpack://brc/./src/helpers/srOnly.ts","webpack://brc/./src/helpers/typography.ts","webpack://brc/./src/hooks/useIntersectionObserver.ts","webpack://brc/./src/hooks/useInView.ts","webpack://brc/./src/stories/Components/Buttons/Button/Button.styles.ts","webpack://brc/./src/stories/Components/Buttons/Button/Button.tsx"],"sourcesContent":["import { css } from 'styled-components';\r\nimport brand from './brand';\r\nexport default css `\r\n  &::-webkit-scrollbar-track {\r\n    background-color: ${brand.grey.grey40};\r\n  }\r\n\r\n  &::-webkit-scrollbar {\r\n    background-color: ${brand.grey.grey40};\r\n    height: 6px;\r\n    width: 6px;\r\n  }\r\n\r\n  &::-webkit-scrollbar-thumb {\r\n    background-color: ${brand.grey.grey90};\r\n    border-radius: 0;\r\n    cursor: pointer;\r\n  }\r\n`;\r\n","import { css } from 'styled-components';\r\n/**\r\n * Show only for screen readers.\r\n * @description Sourced from https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034\r\n */\r\nconst srOnly = css `\r\n  border: 0 !important;\r\n  clip: rect(1px, 1px, 1px, 1px) !important;\r\n  -webkit-clip-path: inset(50%) !important;\r\n  clip-path: inset(50%) !important;\r\n  height: 1px !important;\r\n  margin: -1px !important;\r\n  overflow: hidden !important;\r\n  padding: 0 !important;\r\n  position: absolute !important;\r\n  width: 1px !important;\r\n  white-space: nowrap !important;\r\n`;\r\nexport default srOnly;\r\n","import svgQuote from '@img/icons/background/quote.svg?url';\r\nimport svgChevron from '@img/icons/interface/chevron-down.svg?url';\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 } from './media';\r\nimport scrollbars from './scrollbars';\r\nexport const headingStyles = css `\r\n  ${fonts.intro};\r\n\r\n  color: currentColor;\r\n  margin: 0 0 ${fluid(16, 34)};\r\n`;\r\nexport const h1Sizes = css `\r\n  font-size: ${fluid(32, 64)};\r\n  line-height: ${fluid(38, 74)};\r\n`;\r\nexport const h1 = css `\r\n  ${headingStyles};\r\n  ${h1Sizes};\r\n`;\r\nexport const h2 = css `\r\n  ${headingStyles};\r\n\r\n  font-size: ${fluid(28, 48)};\r\n  line-height: ${fluid(36, 56)};\r\n`;\r\nexport const h3 = css `\r\n  ${headingStyles};\r\n\r\n  font-size: ${fluid(24, 34)};\r\n  line-height: ${fluid(32, 40)};\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, 28)};\r\n`;\r\nexport const h5 = css `\r\n  ${headingStyles};\r\n\r\n  font-size: ${fluid(18, 23)};\r\n  line-height: ${fluid(24, 27)};\r\n`;\r\nexport const h6 = css `\r\n  ${headingStyles};\r\n\r\n  font-size: ${fluid(16, 22)};\r\n  line-height: ${fluid(20, 30)};\r\n`;\r\nconst paragraphStyles = css `\r\n  ${fonts.lato.regular};\r\n\r\n  color: currentColor;\r\n  margin: 0 0 ${fluid(16, 34)};\r\n`;\r\nexport const paragraphLarge = css `\r\n  ${paragraphStyles};\r\n\r\n  font-size: ${fluid(18, 20)};\r\n  line-height: ${fluid(26, 28)};\r\n`;\r\nexport const paragraphRegular = css `\r\n  ${paragraphStyles};\r\n\r\n  font-size: ${fluid(16, 18)};\r\n  line-height: ${fluid(24, 28)};\r\n`;\r\nexport const paragraphSmall = css `\r\n  ${paragraphStyles};\r\n\r\n  font-size: ${fluid(14, 16)};\r\n  line-height: ${fluid(22, 24)};\r\n`;\r\nexport const paragraphExtraSmall = css `\r\n  ${paragraphStyles};\r\n\r\n  font-size: 14px;\r\n  line-height: ${fluid(22, 24)};\r\n`;\r\nexport const subheading = css `\r\n  ${fonts.intro};\r\n\r\n  font-size: ${fluid(12, 16)};\r\n  line-height: ${fluid(14, 24)};\r\n  margin-bottom: 16px;\r\n\r\n  strong {\r\n    font-family: inherit;\r\n    color: currentColor;\r\n    font-size: inherit;\r\n    line-height: inherit;\r\n    font-style: inherit;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    margin-bottom: 12px;\r\n  }\r\n`;\r\nexport const link = css `\r\n  ${transition('text-decoration-color')};\r\n\r\n  display: inline-block;\r\n  color: var(--textLinkColour);\r\n  text-decoration: underline;\r\n  text-decoration-color: var(--textDecorationColour, transparent);\r\n  text-decoration-thickness: 1px;\r\n  text-underline-offset: 3px;\r\n\r\n  &:not(span) {\r\n    &:focus {\r\n      outline: none;\r\n    }\r\n\r\n    &:focus-visible {\r\n      outline: auto;\r\n      outline-offset: 2px;\r\n      outline-width: 1px;\r\n      outline-style: solid;\r\n    }\r\n\r\n    &:focus,\r\n    &:hover {\r\n      text-decoration-color: var(--textDecorationHoverColour, currentColor);\r\n    }\r\n  }\r\n\r\n  /* Safari only link hover styles */\r\n  @supports (hanging-punctuation: first) and (font: -apple-system-body) and\r\n    (-webkit-appearance: none) {\r\n    text-decoration: none;\r\n\r\n    &:not(span) {\r\n      &:focus,\r\n      &:hover {\r\n        text-decoration: underline;\r\n      }\r\n    }\r\n  }\r\n`;\r\nexport const reverseLinkUnderline = css `\r\n  --textDecorationColour: currentColor;\r\n  --textDecorationHoverColour: transparent;\r\n\r\n  /* Safari only link hover styles */\r\n  @supports (hanging-punctuation: first) and (font: -apple-system-body) and\r\n    (-webkit-appearance: none) {\r\n    text-decoration: underline !important;\r\n\r\n    &:not(span) {\r\n      &:focus,\r\n      &:hover {\r\n        text-decoration: none !important;\r\n      }\r\n    }\r\n  }\r\n`;\r\nexport const blockquote = css `\r\n  ${paragraphLarge};\r\n\r\n  font-weight: 600;\r\n  font-style: italic;\r\n  color: currentColor;\r\n  text-align: left;\r\n\r\n  &::before {\r\n    content: '';\r\n    display: block;\r\n    width: ${fluid(48, 64)};\r\n    aspect-ratio: 1;\r\n    background-size: 100%;\r\n    background-repeat: no-repeat;\r\n    background-position: top left;\r\n    background-image: url(${svgQuote});\r\n    margin-bottom: ${fluid(16, 34)};\r\n  }\r\n\r\n  p {\r\n    color: currentColor;\r\n    font-size: inherit;\r\n    line-height: inherit;\r\n    font-style: inherit;\r\n    font-family: inherit;\r\n    margin: 0 0 ${fluid(16, 34)};\r\n\r\n    &:last-child {\r\n      margin: 0;\r\n    }\r\n  }\r\n\r\n  footer {\r\n    color: ${brand.primary.purple.dark};\r\n    font-weight: 700;\r\n    margin-top: ${fluid(32, 34)};\r\n\r\n    cite {\r\n      ${paragraphRegular};\r\n\r\n      display: block;\r\n      margin: 0;\r\n    }\r\n  }\r\n`;\r\nexport const table = css `\r\n  ${paragraphRegular};\r\n\r\n  --borderColour: ${brand.primary.grey};\r\n  --borderRadius: ${fluid(10, 20)};\r\n  --headerBgColour: ${brand.primary.purple.light};\r\n  --headerTextColour: ${brand.global.white};\r\n  --paddingX: ${fluid(16, 26)};\r\n\r\n  background: ${brand.global.white};\r\n  border-collapse: collapse;\r\n  color: currentColor;\r\n  margin-bottom: ${fluid(16, 34)};\r\n  width: 100% !important;\r\n\r\n  td,\r\n  th {\r\n    border-right: 1px solid var(--headerTextColour);\r\n    padding: 12px var(--paddingX);\r\n    text-align: left;\r\n  }\r\n\r\n  thead {\r\n    tr {\r\n      background: var(--headerBgColour);\r\n\r\n      td,\r\n      th {\r\n        ${fonts.intro};\r\n\r\n        color: ${brand.global.white};\r\n        padding: var(--paddingX);\r\n        border-right: 1px solid var(--headerTextColour);\r\n\r\n        &:first-child {\r\n          border-top-left-radius: var(--borderRadius);\r\n        }\r\n\r\n        &:last-child {\r\n          border-top-right-radius: var(--borderRadius);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  tbody {\r\n    tr {\r\n      &:nth-child(odd) {\r\n        background-color: ${brand.global.white};\r\n      }\r\n\r\n      &:nth-child(even) {\r\n        background-color: ${brand.primary.grey};\r\n      }\r\n\r\n      &:last-child td {\r\n        border-bottom: 1px solid var(--borderColour);\r\n      }\r\n\r\n      td {\r\n        &:first-child {\r\n          border-left: 1px solid var(--borderColour);\r\n        }\r\n\r\n        &:last-child {\r\n          border-right: 1px solid ${brand.primary.grey};\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\nexport const contentStyles = css `\r\n  h1,\r\n  .h1-styles {\r\n    ${h2};\r\n  }\r\n\r\n  h2,\r\n  .h2-styles {\r\n    ${h3};\r\n  }\r\n\r\n  h3,\r\n  .h3-styles {\r\n    ${h4};\r\n  }\r\n\r\n  h4,\r\n  .h4-styles {\r\n    ${h5}\r\n  }\r\n\r\n  h5,\r\n  .h5-styles {\r\n    ${h6}\r\n  }\r\n\r\n  h6,\r\n  .h6-styles {\r\n    ${headingStyles};\r\n\r\n    font-size: ${fluid(15, 20)};\r\n    line-height: ${fluid(19, 28)};\r\n  }\r\n\r\n  p {\r\n    ${paragraphRegular}\r\n\r\n    a {\r\n      ${link};\r\n    }\r\n  }\r\n\r\n  strong {\r\n    ${fonts.lato.bold};\r\n  }\r\n\r\n  .large {\r\n    ${paragraphLarge}\r\n  }\r\n\r\n  .small {\r\n    ${paragraphSmall}\r\n  }\r\n\r\n  .x-small {\r\n    ${paragraphExtraSmall}\r\n  }\r\n\r\n  .disclaimer {\r\n    ${paragraphStyles};\r\n\r\n    font-size: 12px;\r\n    line-height: 16px;\r\n  }\r\n\r\n  .subheading {\r\n    ${subheading};\r\n  }\r\n\r\n  /* Brand Colour Classes */\r\n  .brand-purple-light {\r\n    color: ${brand.primary.purple.light};\r\n  }\r\n\r\n  .brand-purple-dark {\r\n    color: ${brand.primary.purple.dark};\r\n  }\r\n\r\n  .brand-blue-light {\r\n    color: ${brand.primary.blue.light};\r\n  }\r\n\r\n  .brand-blue-dark {\r\n    color: ${brand.primary.blue.dark};\r\n  }\r\n\r\n  .brand-green-light {\r\n    color: ${brand.secondary.green.light};\r\n  }\r\n\r\n  .brand-green-mid {\r\n    color: ${brand.secondary.green.mid};\r\n  }\r\n\r\n  .brand-green-dark {\r\n    color: ${brand.secondary.green.dark};\r\n  }\r\n\r\n  .brand-orange-light {\r\n    color: ${brand.secondary.orange.light};\r\n  }\r\n\r\n  .brand-orange-mid {\r\n    color: ${brand.secondary.orange.mid};\r\n  }\r\n\r\n  .brand-orange-dark {\r\n    color: ${brand.secondary.orange.dark};\r\n  }\r\n\r\n  .brand-pink-light {\r\n    color: ${brand.secondary.pink.light};\r\n  }\r\n\r\n  .brand-pink-mid {\r\n    color: ${brand.secondary.pink.mid};\r\n  }\r\n\r\n  .brand-pink-dark {\r\n    color: ${brand.secondary.pink.dark};\r\n  }\r\n\r\n  .brand-yellow-light {\r\n    color: ${brand.secondary.yellow.light};\r\n  }\r\n\r\n  .brand-yellow-mid {\r\n    color: ${brand.secondary.yellow.mid};\r\n  }\r\n\r\n  .brand-yellow-dark {\r\n    color: ${brand.secondary.yellow.dark};\r\n  }\r\n\r\n  a {\r\n    ${link}\r\n  }\r\n\r\n  ol,\r\n  ul {\r\n    ${paragraphRegular};\r\n\r\n    list-style: none;\r\n    padding-left: 1.2em;\r\n    margin: ${fluid(8, 16)} 0 ${fluid(16, 34)};\r\n\r\n    li {\r\n      color: currentColor;\r\n      margin: 0 0 ${fluid(8, 16)};\r\n\r\n      span {\r\n        display: inline;\r\n      }\r\n\r\n      &::before {\r\n        color: ${brand.primary.purple.light};\r\n        display: inline-block;\r\n        width: 1.2em;\r\n        margin-left: -1.2em;\r\n      }\r\n    }\r\n  }\r\n\r\n  ol {\r\n    counter-reset: li;\r\n\r\n    li {\r\n      counter-increment: li;\r\n\r\n      &::before {\r\n        content: counter(li) '.';\r\n        width: 2.5ch; // Allow space for double digit numbers\r\n        margin-left: -2.5ch;\r\n      }\r\n    }\r\n  }\r\n\r\n  // Ensure that inline styling hasn't been applied\r\n  ul:not([style*='list-style-type']) li::before {\r\n    content: '\\\\2022';\r\n    font-weight: bold;\r\n  }\r\n\r\n  blockquote {\r\n    ${blockquote};\r\n  }\r\n\r\n  hr {\r\n    display: block;\r\n    background: ${brand.primary.purple.light};\r\n    border: 0;\r\n    height: 2px;\r\n    margin: ${fluid(16, 34)} 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  .responsive-table {\r\n    ${scrollbars};\r\n\r\n    position: relative;\r\n    overflow-x: auto;\r\n  }\r\n\r\n  /* Details/Summary Accordion styles */\r\n  details {\r\n    display: block;\r\n    color: ${brand.primary.blue.dark};\r\n    padding: ${fluid(16, 18)};\r\n    border-radius: ${fluid(10, 20)};\r\n    background-color: ${brand.primary.grey};\r\n    margin-bottom: ${fluid(16, 18)};\r\n\r\n    summary {\r\n      ${fonts.lato.semiBold};\r\n\r\n      display: flex;\r\n      align-items: flex-start;\r\n      justify-content: space-between;\r\n      font-size: ${fluid(18, 24)};\r\n      line-height: ${fluid(24, 28)};\r\n      text-align: left;\r\n      width: 100%;\r\n      color: currentColor;\r\n      cursor: pointer;\r\n      margin-bottom: 2px;\r\n\r\n      &::after {\r\n        ${transition('transform')};\r\n\r\n        content: '';\r\n        display: block;\r\n        width: 40px;\r\n        height: 32px;\r\n        background: currentColor;\r\n        -webkit-mask-image: url(${svgChevron});\r\n        mask-image: url(${svgChevron});\r\n        mask-repeat: no-repeat;\r\n        mask-size: cover;\r\n        mask-position: center;\r\n      }\r\n    }\r\n\r\n    &[open] summary::after {\r\n      transform: rotate(180deg);\r\n    }\r\n\r\n    > div {\r\n      padding: ${fluid(14, 20)} 0 6px;\r\n\r\n      p,\r\n      ul,\r\n      ol {\r\n        margin-bottom: ${fluid(12, 18)};\r\n      }\r\n\r\n      ul,\r\n      ol {\r\n        margin-left: ${fluid(4, 8)};\r\n\r\n        li {\r\n          margin-bottom: ${fluid(6, 10)};\r\n        }\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  }\r\n\r\n  > *:first-child {\r\n    margin-top: 0;\r\n  }\r\n\r\n  > *:last-child {\r\n    margin-bottom: 0;\r\n  }\r\n`;\r\n","import { useEffect, useRef } from 'react';\r\n/**\r\n * Use the IntersectionObserver to track visibility of an element in the viewport.\r\n * @param {IntersectionObserverCallback} callback\r\n * @param {IntersectionObserverInit} options\r\n * @returns {UseIntersectionObserverReturn}\r\n */\r\nfunction useIntersectionObserver(callback, options = {}) {\r\n    const observerRef = useRef(null);\r\n    const rootRef = useRef(null);\r\n    const elementRef = useRef(null);\r\n    useEffect(() => {\r\n        if (!elementRef.current) {\r\n            return undefined;\r\n        }\r\n        observerRef.current = new IntersectionObserver(callback, {\r\n            root: rootRef.current,\r\n            ...options,\r\n        });\r\n        observerRef.current.observe(elementRef.current);\r\n        return () => {\r\n            if (observerRef.current === null) {\r\n                return;\r\n            }\r\n            observerRef.current.disconnect();\r\n        };\r\n    }, [callback, options]);\r\n    return { elementRef, observerRef, rootRef };\r\n}\r\nexport default useIntersectionObserver;\r\n","import { useState } from 'react';\r\nimport useIntersectionObserver from './useIntersectionObserver';\r\nexport function useInView(options, reverse = false, isEditMode = false) {\r\n    const [inView, setInView] = useState(false);\r\n    const { elementRef } = useIntersectionObserver((entries) => {\r\n        if (entries[0].isIntersecting) {\r\n            setInView(true);\r\n        }\r\n        else if (reverse === true) {\r\n            setInView(false);\r\n        }\r\n    }, options);\r\n    return [elementRef, isEditMode ? true : inView];\r\n}\r\n","import { transition } from '@helpers/animate';\r\nimport brand, { BrandColours } from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport fonts from '@helpers/fonts';\r\nimport { ButtonReset } from '@helpers/global';\r\nimport { InterfaceIcon } from '@helpers/icons';\r\nimport { Device, until } from '@helpers/media';\r\nimport srOnly from '@helpers/srOnly';\r\nimport { BackgroundVariant } from '@stories/Components/Misc/SectionWrapper/SectionWrapper';\r\nimport { rgba } from 'polished';\r\nimport styled, { css } from 'styled-components';\r\nexport const CommonButtonTextStyles = css `\r\n  ${transition('color', 0.25)};\r\n  ${fonts.lato.bold};\r\n\r\n  color: currentColor;\r\n  font-size: var(--fontSize);\r\n  line-height: 1.5;\r\n  text-decoration: none;\r\n`;\r\nconst Text = styled.span `\r\n  ${CommonButtonTextStyles};\r\n\r\n  [data-icon-only='true'] & {\r\n    ${srOnly};\r\n  }\r\n`;\r\nconst IconWrapper = styled.div `\r\n  ${transition('color', 0.25)};\r\n\r\n  --iconHeight: 24px;\r\n\r\n  display: grid;\r\n  place-content: center;\r\n  color: currentColor;\r\n  height: var(--iconHeight);\r\n  aspect-ratio: 1;\r\n  margin: 0;\r\n  padding: 0;\r\n\r\n  > svg {\r\n    display: block;\r\n    height: var(--iconHeight);\r\n  }\r\n\r\n  [data-icon-position='left'] & {\r\n    order: -1;\r\n  }\r\n\r\n  [data-icon-position='right'] & {\r\n    order: 1;\r\n  }\r\n\r\n  [data-icon-type=${InterfaceIcon.ArrowRight}] & {\r\n    ${transition('transform, color', 0.25)};\r\n  }\r\n\r\n  [data-icon-type=${InterfaceIcon.Close}] & {\r\n    --iconHeight: 12px;\r\n  }\r\n\r\n  [data-icon-position='left'][data-icon-type=${InterfaceIcon.ArrowRight}] & {\r\n    svg {\r\n      transform: scale(-1);\r\n    }\r\n  }\r\n`;\r\nconst IconHoverStyles = css `\r\n  &[data-icon-type=${InterfaceIcon.ArrowRight}] {\r\n    ${IconWrapper} {\r\n      transform: translateX(4px);\r\n    }\r\n  }\r\n\r\n  &[data-icon-position='left'][data-icon-type=${InterfaceIcon.ArrowRight}] {\r\n    ${IconWrapper} {\r\n      transform: translateX(-4px);\r\n    }\r\n  }\r\n`;\r\nexport const DefaultButtonStyles = css `\r\n  ${ButtonReset};\r\n  ${transition('background-color, color', 0.25)};\r\n\r\n  --bgColour: ${brand.secondary.yellow.light};\r\n  --bgColourActive: var(--bgColourHover);\r\n  --bgColourDisabled: ${brand.grey.light};\r\n  --bgColourHover: ${brand.secondary.yellow.dark};\r\n  --borderColorActive: var(--bgColourActive);\r\n  --borderColorHover: var(--bgColourHover);\r\n  --borderColour: var(--bgColour);\r\n  --borderColourDisabled: var(--bgColourDisabled);\r\n  --borderRadius: 50px;\r\n  --borderWidth: 1px;\r\n  --buttonHeight: ${fluid(44, 64)};\r\n  --colourText: ${brand.global.black};\r\n  --colourTextDisabled: ${brand.grey.dark};\r\n  --colourTextHover: var(--colourText);\r\n  --fontSize: ${fluid(15, 16)};\r\n\r\n  display: inline-flex;\r\n  gap: ${fluid(8, 12)};\r\n  align-items: center;\r\n  border: var(--borderWidth) solid var(--borderColour);\r\n  background: none;\r\n  background-color: var(--bgColour);\r\n  background-position: top center;\r\n  color: var(--colourText);\r\n  min-height: var(--buttonHeight);\r\n  padding: 8px ${fluid(16, 20)};\r\n  text-decoration: none;\r\n  user-select: none;\r\n  width: auto;\r\n  border-radius: var(--borderRadius);\r\n\r\n  /* Mobile click styles - button should mimic press */\r\n  @media ${until(Device.TabletLarge)} {\r\n    ${transition('background-color, color, transform', 0.15)};\r\n\r\n    &:active {\r\n      transform: translateY(1.5px);\r\n    }\r\n  }\r\n\r\n  span& {\r\n    .focus-ring & {\r\n      outline: auto;\r\n      outline-offset: 3px;\r\n      outline-width: 2px;\r\n    }\r\n\r\n    .focus-ring &,\r\n    button:hover &,\r\n    a:hover &,\r\n    label:hover & {\r\n      ${IconHoverStyles};\r\n\r\n      color: var(--colourTextHover);\r\n      background-color: var(--bgColourHover);\r\n      border-color: var(--borderColorHover);\r\n    }\r\n\r\n    button:active &,\r\n    a:active & {\r\n      background-color: var(--bgColourActive);\r\n      border-color: var(--borderColorActive);\r\n      color: var(--colourTextHover);\r\n    }\r\n  }\r\n\r\n  &:not(span) {\r\n    cursor: pointer;\r\n\r\n    &:focus-visible,\r\n    &.focus-ring {\r\n      outline: auto;\r\n      outline-offset: 3px;\r\n      outline-width: 2px;\r\n    }\r\n\r\n    &:focus-visible,\r\n    &.focus-ring,\r\n    &:hover {\r\n      ${IconHoverStyles};\r\n\r\n      color: var(--colourTextHover);\r\n      background-color: var(--bgColourHover);\r\n      border-color: var(--borderColorHover);\r\n    }\r\n\r\n    &:active {\r\n      background-color: var(--bgColourActive);\r\n      border-color: var(--borderColorActive);\r\n      color: var(--colourTextHover);\r\n    }\r\n  }\r\n\r\n  /* Increase specificity to override :not(span) style */\r\n  &[aria-disabled='true'][aria-disabled='true'][aria-disabled='true'],\r\n  &:disabled:disabled:disabled {\r\n    color: var(--colourTextDisabled);\r\n    background-color: var(--bgColourDisabled);\r\n    border-color: var(--borderColourDisabled);\r\n\r\n    cursor: not-allowed;\r\n\r\n    ${IconWrapper} {\r\n      transform: none;\r\n    }\r\n  }\r\n`;\r\nexport const SecondaryButtonStyles = css `\r\n  --bgColour: transparent;\r\n  --bgColourActive: ${brand.primary.purple.dark};\r\n  --bgColourDisabled: transparent;\r\n  --bgColourHover: var(--colourText);\r\n  --borderColorActive: var(--bgColourActive);\r\n  --borderColorHover: var(--bgColourHover);\r\n  --borderColour: var(--colourText);\r\n  --borderColourDisabled: var(--colourTextDisabled);\r\n  --colourText: ${brand.primary.purple.light};\r\n  --colourTextDisabled: ${brand.grey.dark};\r\n  --colourTextHover: ${brand.global.white};\r\n\r\n  [data-variant=${BrandColours.OrangeMid}] &,\r\n  [data-variant=${BrandColours.OrangeDark}] &,\r\n  [data-variant=${BrandColours.GreenDark}] &,\r\n  [data-variant=${BrandColours.PinkDark}] &,\r\n  [data-variant=${BackgroundVariant.Blue}] &,\r\n  [data-variant=${BackgroundVariant.Purple}] &,\r\n  [data-variant=${BackgroundVariant.PurpleDark}] & {\r\n    --bgColourActive: ${brand.primary.grey};\r\n    --colourText: ${brand.global.white};\r\n  }\r\n\r\n  [data-variant=${BrandColours.OrangeDark}] &,\r\n  [data-variant=${BrandColours.GreenDark}] &,\r\n  [data-variant=${BackgroundVariant.Blue}] &,\r\n  [data-variant=${BrandColours.PinkDark}] &,\r\n  [data-variant=${BackgroundVariant.PurpleDark}] & {\r\n    --colourTextDisabled: ${brand.grey.light};\r\n  }\r\n\r\n  [data-variant=${BackgroundVariant.Purple}] & {\r\n    --colourTextDisabled: ${brand.grey.lightest};\r\n  }\r\n\r\n  [data-variant=${BackgroundVariant.Purple}] &,\r\n  [data-variant=${BackgroundVariant.PurpleDark}] & {\r\n    --colourTextHover: ${brand.primary.purple.light};\r\n  }\r\n\r\n  [data-variant=${BackgroundVariant.Blue}] & {\r\n    --colourTextHover: ${brand.primary.blue.dark};\r\n  }\r\n\r\n  [data-variant=${BrandColours.GreenDark}] & {\r\n    --colourTextHover: ${brand.secondary.green.dark};\r\n  }\r\n\r\n  [data-variant=${BrandColours.OrangeDark}] & {\r\n    --colourTextHover: ${brand.secondary.orange.dark};\r\n  }\r\n\r\n  [data-variant=${BrandColours.OrangeMid}] & {\r\n    --colourTextHover: ${brand.secondary.orange.mid};\r\n  }\r\n\r\n  [data-variant=${BrandColours.PinkDark}] & {\r\n    --colourTextHover: ${brand.secondary.pink.mid};\r\n  }\r\n\r\n  [data-variant=${BrandColours.BlueLight}] &,\r\n  [data-variant=${BrandColours.GreenLight}] &,\r\n  [data-variant=${BrandColours.OrangeLight}] &,\r\n  [data-variant=${BrandColours.PinkLight}] & {\r\n    --colourText: ${brand.global.black};\r\n  }\r\n\r\n  [data-variant=${BrandColours.BlueLight}] & {\r\n    --bgColourActive: ${brand.primary.blue.dark};\r\n  }\r\n\r\n  [data-variant=${BrandColours.GreenLight}] & {\r\n    --bgColourActive: ${brand.secondary.green.dark};\r\n  }\r\n\r\n  [data-variant=${BrandColours.OrangeLight}] & {\r\n    --bgColourActive: ${brand.secondary.orange.dark};\r\n  }\r\n\r\n  [data-variant=${BrandColours.PinkLight}] & {\r\n    --bgColourActive: ${brand.secondary.pink.dark};\r\n  }\r\n`;\r\nexport const TertiaryButtonStyles = css `\r\n  --bgColour: ${brand.primary.purple.light};\r\n  --bgColourActive: ${brand.grey.lightest};\r\n  --bgColourDisabled: ${brand.grey.grey40};\r\n  --bgColourHover: transparent;\r\n  --borderColorActive: var(--bgColour);\r\n  --borderColorHover: var(--bgColour);\r\n  --borderColour: var(--colourText);\r\n  --borderColourDisabled: var(--bgColourDisabled);\r\n  --colourText: ${brand.global.white};\r\n  --colourTextDisabled: ${brand.grey.lightest};\r\n  --colourTextHover: var(--bgColour);\r\n\r\n  [data-variant=${BackgroundVariant.Blue}] &,\r\n  [data-variant=${BackgroundVariant.Purple}] &,\r\n  [data-variant=${BackgroundVariant.PurpleDark}] & {\r\n    --bgColour: ${brand.global.white};\r\n    --colourText: ${brand.primary.purple.light};\r\n    --bgColourActive: ${rgba(brand.global.white, 0.2)};\r\n  }\r\n\r\n  [data-variant=${BackgroundVariant.Grey}] & {\r\n    --bgColourActive: ${rgba(brand.global.black, 0.1)};\r\n  }\r\n`;\r\nconst Container = styled.button `\r\n  ${DefaultButtonStyles};\r\n\r\n  &[data-type='secondary'] {\r\n    ${SecondaryButtonStyles};\r\n  }\r\n\r\n  &[data-type='tertiary'] {\r\n    ${TertiaryButtonStyles};\r\n  }\r\n\r\n  &[data-icon-only='true'] {\r\n    height: var(--buttonHeight);\r\n    justify-content: center;\r\n    padding: 0;\r\n    width: var(--buttonHeight);\r\n  }\r\n`;\r\nconst ButtonStyles = {\r\n    Container,\r\n    IconWrapper,\r\n    Text,\r\n};\r\nexport default ButtonStyles;\r\n","import { InterfaceIcon, getSvgIcon } from '@helpers/icons';\r\nimport { FocusRing } from '@react-aria/focus';\r\nimport * as React from 'react';\r\nimport S from './Button.styles';\r\nconst Button = React.forwardRef(({ buttonType, children, fillDirection = 'right', icon, iconOnly, iconPosition = 'right', ...otherProps }, ref) => {\r\n    return (React.createElement(FocusRing, { focusRingClass: \"focus-ring\" },\r\n        React.createElement(S.Container, { ref: ref, \"data-fill\": fillDirection, \"data-icon-only\": iconOnly, \"data-icon-position\": iconPosition, \"data-icon-type\": icon ?? InterfaceIcon.ArrowRight, \"data-type\": buttonType, ...otherProps },\r\n            React.createElement(S.Text, null, children),\r\n            icon !== InterfaceIcon.None && (React.createElement(S.IconWrapper, null, getSvgIcon(icon) ?? getSvgIcon(InterfaceIcon.ArrowRight))))));\r\n});\r\nButton.displayName = 'Button';\r\nconst FakeButton = React.forwardRef(({ buttonType, children, fillDirection = 'right', icon, iconOnly, iconPosition = 'right', ...otherProps }, ref) => {\r\n    return (React.createElement(S.Container, { ref: ref, as: \"span\", \"data-fill\": fillDirection, \"data-icon-only\": iconOnly, \"data-icon-position\": iconPosition, \"data-icon-type\": icon ?? InterfaceIcon.ArrowRight, \"data-type\": buttonType, ...otherProps },\r\n        React.createElement(S.Text, null, children),\r\n        icon !== InterfaceIcon.None && (React.createElement(S.IconWrapper, null, getSvgIcon(icon) ?? getSvgIcon(InterfaceIcon.ArrowRight)))));\r\n});\r\nFakeButton.displayName = 'Fake Button';\r\nconst LinkButton = React.forwardRef(({ buttonType, children, fillDirection = 'right', icon, iconOnly, iconPosition = 'right', ...otherProps }, ref) => {\r\n    return (React.createElement(FocusRing, { focusRingClass: \"focus-ring\" },\r\n        React.createElement(S.Container, { ref: ref, as: \"a\", \"data-fill\": fillDirection, \"data-icon-only\": iconOnly, \"data-icon-position\": iconPosition, \"data-icon-type\": icon ?? InterfaceIcon.ArrowRight, \"data-type\": buttonType, ...otherProps },\r\n            React.createElement(S.Text, null, children),\r\n            icon !== InterfaceIcon.None && (React.createElement(S.IconWrapper, null, getSvgIcon(icon) ?? getSvgIcon(InterfaceIcon.ArrowRight))))));\r\n});\r\nLinkButton.displayName = 'Link Button';\r\nexport { FakeButton, LinkButton, Button as default };\r\n"],"names":["css","brand","grey","grey40","grey90","headingStyles","fonts","intro","fluid","h1Sizes","h2","h3","h4","h5","h6","paragraphStyles","lato","regular","paragraphLarge","paragraphRegular","paragraphSmall","paragraphExtraSmall","subheading","from","Device","TabletLarge","link","transition","reverseLinkUnderline","blockquote","svgQuote","primary","purple","dark","table","light","global","white","contentStyles","bold","blue","secondary","green","mid","orange","pink","yellow","scrollbars","semiBold","svgChevron","callback","options","arguments","length","undefined","observerRef","useRef","rootRef","elementRef","useEffect","current","IntersectionObserver","root","observe","disconnect","useInView","reverse","isEditMode","inView","setInView","useState","useIntersectionObserver","entries","isIntersecting","CommonButtonTextStyles","Text","styled","span","withConfig","displayName","componentId","srOnly","IconWrapper","div","InterfaceIcon","ArrowRight","Close","IconHoverStyles","DefaultButtonStyles","ButtonReset","black","until","SecondaryButtonStyles","BrandColours","OrangeMid","OrangeDark","GreenDark","PinkDark","BackgroundVariant","Blue","Purple","PurpleDark","lightest","BlueLight","GreenLight","OrangeLight","PinkLight","TertiaryButtonStyles","rgba","Grey","Container","button","Button","React","_ref","ref","_getSvgIcon","buttonType","children","fillDirection","icon","iconOnly","iconPosition","otherProps","FocusRing","focusRingClass","S","None","getSvgIcon","FakeButton","_ref2","_getSvgIcon2","as","LinkButton","_ref3","_getSvgIcon3"],"sourceRoot":""}