{"version":3,"file":"4040-e70146a5aabf6f19ba91.js","mappings":"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","sources":["webpack://royal-college-radiologists/./src/helpers/srOnly.ts","webpack://royal-college-radiologists/./src/stories/Components/Buttons/GeneralButton/Button.styles.tsx","webpack://royal-college-radiologists/./src/stories/Components/UmbracoForm/UmbracoForm.styles.ts"],"sourcesContent":["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 { transition } from '@helpers/animate';\r\nimport brand from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport fonts from '@helpers/fonts';\r\nimport { Device, until } from '@helpers/media';\r\nimport styled, { css } from 'styled-components';\r\nconst Text = styled.div ``;\r\nconst PrimaryStyles = css `\r\n  border: 0;\r\n  background-color: ${brand.secondary.red};\r\n  color: ${brand.primary.purple};\r\n  border-radius: 1000000px;\r\n  overflow: hidden;\r\n\r\n  &:before {\r\n    ${transition('transform')};\r\n\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background-color: ${brand.primary.offWhite};\r\n    border-radius: 1000000px;\r\n    transform: translateX(calc(-100% - 2px));\r\n  }\r\n\r\n  [data-variant='light'] & {\r\n    span& {\r\n      button.focus-ring &,\r\n      button:hover &,\r\n      a.focus-ring & {\r\n        background-color: ${brand.primary.purple};\r\n        color: ${brand.primary.offWhite};\r\n      }\r\n\r\n      @media (hover: hover) {\r\n        a:hover & { \r\n          background-color: ${brand.primary.purple};\r\n          color: ${brand.primary.offWhite};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:not(span) {\r\n      &.focus-ring,\r\n      &:hover,\r\n      &:active {\r\n        background-color: ${brand.primary.purple};\r\n        color: ${brand.primary.offWhite};\r\n      }\r\n\r\n      @media (hover: hover) {\r\n        &:hover { \r\n          background-color: ${brand.primary.purple};\r\n          color: ${brand.primary.offWhite};\r\n        }\r\n      }\r\n    }\r\n\r\n    &.focus-ring {\r\n      outline-color: ${brand.primary.purple};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${brand.primary.purple};\r\n    }\r\n  }\r\n\r\n  [data-variant='dark'] & {\r\n    span& {\r\n      button.focus-ring &,\r\n      button:hover &,\r\n      a.focus-ring & {\r\n        background-color: ${brand.primary.offWhite};\r\n      }\r\n\r\n      @media (hover: hover) {\r\n        a:hover & { \r\n          background-color: ${brand.primary.offWhite};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:not(span) {\r\n      &.focus-ring,\r\n      &:active {\r\n        background-color: ${brand.primary.offWhite};\r\n      }\r\n\r\n      @media (hover: hover) {\r\n        &:hover { \r\n          background-color: ${brand.primary.offWhite};\r\n        }\r\n      }\r\n    }\r\n\r\n    &.focus-ring {\r\n      outline-color: ${brand.primary.offWhite};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${brand.primary.offWhite};\r\n    }\r\n  }\r\n\r\n  @media (hover: hover) {\r\n    &:hover { \r\n      background-color: ${brand.primary.offWhite};\r\n\r\n      &:before {\r\n        transform: translateX(0);\r\n      }\r\n    }\r\n  }\r\n\r\n  &.focus-ring,\r\n  &:active,\r\n  &[data-toggle-on='true'] {\r\n    background-color: ${brand.primary.offWhite};\r\n\r\n    &:before {\r\n      transform: translateX(0);\r\n    }\r\n  }\r\n`;\r\nconst OutlineStyles = css `\r\n  background-color: transparent;\r\n  border-radius: 1000000px;\r\n  overflow: hidden;\r\n\r\n  &:before {\r\n    ${transition('transform')};\r\n\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background-color: ${brand.primary.offWhite};\r\n    border-radius: 1000000px;\r\n    transform: translateX(calc(-100% - 2px));\r\n  }\r\n\r\n  [data-variant='light'] & {\r\n    color: ${brand.primary.purple};\r\n    border: 1px solid ${brand.primary.purple};\r\n\r\n    span& {\r\n      button.focus-ring &,\r\n      button:hover &,\r\n      a.focus-ring &,\r\n      a[data-toggle-on='true'] & {\r\n        border-color: ${brand.primary.purple};\r\n        background-color: ${brand.primary.purple};\r\n        color: ${brand.primary.offWhite};\r\n      }\r\n\r\n      @media (hover: hover) {\r\n        a:hover & { \r\n          border-color: ${brand.primary.purple};\r\n          background-color: ${brand.primary.purple};\r\n          color: ${brand.primary.offWhite};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:not(span) {\r\n      &.focus-ring,\r\n      &:active,\r\n      &[data-toggle-on='true'] {\r\n        border-color: ${brand.primary.purple};\r\n        background-color: ${brand.primary.purple};\r\n        color: ${brand.primary.offWhite};\r\n      }\r\n\r\n      @media (hover: hover) {\r\n        &:hover { \r\n          border-color: ${brand.primary.purple};\r\n          background-color: ${brand.primary.purple};\r\n          color: ${brand.primary.offWhite};\r\n        }\r\n      }\r\n    }\r\n\r\n    &.focus-ring {\r\n      outline-color: ${brand.primary.purple};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${brand.primary.purple};\r\n    }\r\n  }\r\n\r\n  [data-variant='dark'] & {\r\n    color: ${brand.primary.offWhite};\r\n    border: 1px solid ${brand.primary.offWhite};\r\n\r\n    span& {\r\n      button.focus-ring &,\r\n      \r\n      a.focus-ring &,\r\n      a[data-toggle-on='true'] & {\r\n        background-color: ${brand.primary.offWhite};\r\n        color: ${brand.primary.purple};\r\n      }\r\n\r\n      @media (hover: hover) {\r\n        button:hover &,\r\n        a:hover & { \r\n          background-color: ${brand.primary.offWhite};\r\n          color: ${brand.primary.purple};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:not(span) {\r\n      &.focus-ring,\r\n      &:hover,\r\n      &:active,\r\n      &[data-toggle-on='true'] {\r\n        background-color: ${brand.primary.offWhite};\r\n        color: ${brand.primary.purple};\r\n      }\r\n\r\n      @media (hover: hover) {\r\n        &:hover { \r\n          background-color: ${brand.primary.offWhite};\r\n          color: ${brand.primary.purple};\r\n        }\r\n      }\r\n    }\r\n\r\n    &.focus-ring {\r\n      outline-color: ${brand.primary.offWhite};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${brand.primary.offWhite};\r\n    }\r\n  }\r\n\r\n  &.focus-ring {\r\n    outline: auto;\r\n    outline-offset: 3px;\r\n    outline-style: solid;\r\n    outline-width: 2px;\r\n  }\r\n\r\n  span& {\r\n    button.focus-ring &,    \r\n    a.focus-ring &,\r\n    a[data-toggle-on='true'] & {\r\n      &::before {\r\n        transform: translateX(0);\r\n      }\r\n    }\r\n\r\n    @media (hover: hover) {\r\n      button:hover &,\r\n      a:hover & { \r\n        &::before {\r\n          transform: translateX(0);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(span) {\r\n    &.focus-ring,\r\n    &:active,\r\n    &[data-toggle-on='true'] {\r\n      &::before {\r\n        transform: translateX(0);\r\n      }\r\n    }\r\n\r\n    @media (hover: hover) {\r\n      &:hover { \r\n        &::before {\r\n          transform: translateX(0);\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\nconst OutlineAltStyles = css `\r\n  background-color: transparent;\r\n  border-radius: 1000000px;\r\n  overflow: hidden;\r\n\r\n  &:before {\r\n    ${transition('transform')};\r\n\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background-color: ${brand.secondary.red};\r\n    border-radius: 1000000px;\r\n    transform: translateX(calc(-100% - 2px));\r\n  }\r\n\r\n  [data-variant='light'] & {\r\n    color: ${brand.primary.purple};\r\n    border: 1px solid ${brand.primary.purple};\r\n\r\n    &.focus-ring {\r\n      outline-color: ${brand.primary.purple};\r\n    }\r\n  }\r\n\r\n  [data-variant='dark'] & {\r\n    color: ${brand.primary.offWhite};\r\n    border: 1px solid ${brand.primary.offWhite};\r\n\r\n    span& {\r\n      button.focus-ring &,      \r\n      a.focus-ring &,\r\n      a[data-toggle-on='true'] & {\r\n        color: ${brand.primary.purple};\r\n      }\r\n\r\n      @media (hover: hover) {\r\n        button:hover &,\r\n        a:hover & { \r\n          color: ${brand.primary.purple};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:not(span) {\r\n      &.focus-ring,\r\n      &:active,\r\n      &[data-toggle-on='true'] {\r\n        color: ${brand.primary.purple};\r\n      }\r\n\r\n      @media (hover: hover) {\r\n        &:hover { \r\n          color: ${brand.primary.purple};\r\n        }\r\n      }\r\n    }\r\n\r\n    &.focus-ring {\r\n      outline-color: ${brand.primary.offWhite};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${brand.secondary.red};\r\n    }\r\n  }\r\n\r\n  &.focus-ring {\r\n    outline: auto;\r\n    outline-offset: 3px;\r\n    outline-style: solid;\r\n    outline-width: 2px;\r\n  }\r\n\r\n  span& {\r\n    button.focus-ring &,    \r\n    a.focus-ring &,\r\n    a[data-toggle-on='true'] & {\r\n      background-color: ${brand.secondary.red};\r\n      border-color: ${brand.secondary.red};\r\n\r\n      &::before {\r\n        transform: translateX(0);\r\n      }\r\n    }\r\n\r\n    @media (hover: hover) {\r\n      button:hover &,\r\n      a:hover & { \r\n        background-color: ${brand.secondary.red};\r\n        border-color: ${brand.secondary.red};\r\n\r\n        &::before {\r\n          transform: translateX(0);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(span) {\r\n    &.focus-ring,\r\n    &:active,\r\n    &[data-toggle-on='true'] {\r\n      background-color: ${brand.secondary.red};\r\n      border-color: ${brand.secondary.red};\r\n\r\n      &::before {\r\n        transform: translateX(0);\r\n      }\r\n    }\r\n\r\n    @media (hover: hover) {\r\n      &:hover { \r\n        background-color: ${brand.secondary.red};\r\n        border-color: ${brand.secondary.red};\r\n\r\n        &::before {\r\n          transform: translateX(0);\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\nconst Wave = styled.div `\r\n  ${transition('max-width')};\r\n\r\n  overflow: hidden;\r\n  max-width: 0;\r\n  color: ${brand.secondary.red};\r\n\r\n  svg {\r\n    display: block;\r\n    margin-right: 5px;\r\n    height: 30px;\r\n  }\r\n`;\r\nconst Arrow = styled.div `\r\n  ${transition('transform')};\r\n\r\n  margin: 0 0 0 5px;\r\n\r\n  svg {\r\n    display: block;\r\n    height: 12px;\r\n  }\r\n`;\r\nconst TextOnlyStyles = css `\r\n  display: inline-flex;\r\n  align-items: center;\r\n  border: 1px solid transparent;\r\n  background: none;\r\n  color: ${brand.primary.purple};\r\n  padding: 0;\r\n\r\n  [data-variant='dark'] & {\r\n    color: ${brand.primary.offWhite};\r\n  }\r\n\r\n  ${Text} {\r\n    margin-bottom: 2px;\r\n  }\r\n\r\n  &.focus-ring {\r\n    outline: auto;\r\n    outline-offset: 3px;\r\n    outline-style: solid;\r\n    outline-width: 2px;\r\n  }\r\n\r\n  span& {\r\n    button.focus-ring &,\r\n    a.focus-ring & {\r\n      ${Wave} {\r\n        max-width: 50px;\r\n      }\r\n\r\n      ${Arrow} {\r\n        transform: translateX(15%);\r\n      }\r\n    }\r\n\r\n    @media (hover: hover) {\r\n      button:hover &,\r\n      a:hover & { \r\n        ${Wave} {\r\n          max-width: 50px;\r\n        }\r\n\r\n        ${Arrow} {\r\n          transform: translateX(15%);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(span) {\r\n    &:hover,\r\n    &:active,\r\n    &.focus-ring {\r\n      ${Wave} {\r\n        max-width: 50px;\r\n      }\r\n\r\n      ${Arrow} {\r\n        transform: translateX(15%);\r\n      }\r\n    }\r\n\r\n    @media (hover: hover) {\r\n      &:hover { \r\n        ${Wave} {\r\n          max-width: 50px;\r\n        }\r\n\r\n        ${Arrow} {\r\n          transform: translateX(15%);\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\nconst Icon = styled.div `\r\n  display: inline-flex;\r\n  align-items: center;\r\n  margin: 0 0 0 8px;\r\n\r\n  svg {\r\n    max-height: 24px;\r\n    width: 20px;\r\n  }\r\n\r\n  &[data-position='left'] {\r\n    order: -1;\r\n    margin: 0 8px 0 0;\r\n  }\r\n`;\r\nconst Button = styled.button `\r\n  ${transition('color, background-color, border-color')};\r\n\r\n  display: inline-flex;\r\n  padding: 10px ${fluid(20, 25)} 12px;\r\n  height: ${fluid(46, 48)};\r\n  user-select: none;\r\n  text-decoration: none;\r\n  position: relative;\r\n  align-items: center;\r\n\r\n  ${Text} {\r\n    ${fonts.graphikCompact.medium};\r\n\r\n    font-size: ${fluid(18, 20)};\r\n    line-height: ${fluid(24, 26)};\r\n    display: inline-block;\r\n    vertical-align: middle;\r\n    position: relative;\r\n    z-index: 2;\r\n  }\r\n\r\n  &:disabled {\r\n    opacity: 0.66;\r\n    pointer-events: none;\r\n\r\n    &:hover {\r\n      opacity: 0.66;\r\n    }\r\n  }\r\n\r\n  /* Mobile click styles - button should mimic press */\r\n  @media ${until(Device.TabletLarge)} {\r\n    ${transition('color, background-color, border-color, transform')};\r\n\r\n    span& {\r\n      button:active &,\r\n      a:active & {\r\n        transform: translateY(1.5px);\r\n      }\r\n    }\r\n\r\n    &:not(span) {\r\n      &:active {\r\n        transform: translateY(1.5px);\r\n      }\r\n    }\r\n  }\r\n\r\n  ${({ branding }) => {\r\n    switch (branding) {\r\n        case 'textOnly':\r\n            return TextOnlyStyles;\r\n        case 'solid':\r\n            return PrimaryStyles;\r\n        case 'outline':\r\n            return OutlineStyles;\r\n        case 'outline-alt':\r\n            return OutlineAltStyles;\r\n        default:\r\n            break;\r\n    }\r\n}}\r\n`;\r\nconst ArrowButton = styled.button `\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n  background: transparent;\r\n  border: none;\r\n  width: ${fluid(58, 60)};\r\n  height: ${fluid(48, 50)};\r\n  padding: 0;\r\n  color: var(--fgColour, ${brand.primary.purple});\r\n\r\n  &:first-child {\r\n    justify-content: flex-end;\r\n\r\n    svg {\r\n      transform: scaleX(-1);\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    opacity: 0.66;\r\n    pointer-events: none;\r\n\r\n    &:hover {\r\n      opacity: 0.66;\r\n    }\r\n  }\r\n\r\n  svg {\r\n    display: block;\r\n    height: ${fluid(12, 15)};\r\n  }\r\n\r\n  /* Mobile click styles - button should mimic press */\r\n  @media ${until(Device.TabletLarge)} {\r\n    ${transition('transform', 0.15)};\r\n\r\n    &:active {\r\n      transform: translateY(1.5px);\r\n    }\r\n  }\r\n`;\r\nconst ButtonInner = styled.div `\r\n  ${transition('max-width')};\r\n\r\n  border: 2px solid var(--fgColour, ${brand.primary.purple});\r\n  border-radius: 5000000px;\r\n  max-width: ${fluid(46, 48)};\r\n  width: ${fluid(56, 58)};\r\n  height: ${fluid(46, 48)};\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  ${ArrowButton}.focus-ring & {\r\n    outline: auto;\r\n    outline-offset: 3px;\r\n    outline-style: solid;\r\n    outline-width: 2px;\r\n  }\r\n\r\n  ${ArrowButton}.focus-ring & {\r\n    max-width: ${fluid(56, 58)};\r\n  }\r\n\r\n  @media (hover: hover) {\r\n    ${ArrowButton}:hover & {\r\n      max-width: ${fluid(56, 58)};\r\n    }\r\n  }\r\n\r\n  @media ${until(Device.TabletLarge)} {\r\n    max-width: ${fluid(56, 58)};\r\n  }\r\n`;\r\nconst ButtonIcon = styled.div `\r\n  ${transition('transform')};\r\n  position: relative;\r\n  line-height: 0;\r\n  transform: translateX(0);\r\n\r\n  ${ArrowButton}:last-child.focus-ring &{\r\n    transform: translateX(7px);\r\n  }\r\n\r\n  @media (hover: hover) {\r\n    ${ArrowButton}:last-child:hover & {\r\n      transform: translateX(7px);\r\n    }\r\n  }\r\n\r\n  ${ArrowButton}.focus-ring & {\r\n    transform: translateX(-7px);\r\n  }\r\n\r\n  @media (hover: hover) {\r\n    ${ArrowButton}:hover & {\r\n      transform: translateX(-7px);\r\n    }\r\n  }\r\n\r\n  @media ${until(Device.TabletLarge)} {\r\n    transform: translateX(-7px);\r\n\r\n    ${ArrowButton}:last-child & {\r\n      transform: translateX(7px);\r\n    }\r\n  }\r\n`;\r\nconst HoverLine = styled.div `\r\n  ${transition('transform')};\r\n\r\n  position: absolute;\r\n  left: 0;\r\n  top: 50%;\r\n  width: 22px;\r\n  height: 3px;\r\n  transform-origin: 0;\r\n  transform: translate(2px, -50%) scaleX(0);\r\n  background-color: var(--fgColour, ${brand.primary.purple});\r\n\r\n  ${ArrowButton}:last-child & {\r\n    transform-origin: 100%;\r\n    left: auto;\r\n    right: 0;\r\n    transform: translate(-2px, -50%) scaleX(0);\r\n  }\r\n\r\n  ${ArrowButton}.focus-ring & {\r\n    transform: translate(2px, -50%) scaleX(1);\r\n  }\r\n\r\n  @media (hover: hover) {\r\n    ${ArrowButton}:hover & {\r\n      transform: translate(2px, -50%) scaleX(1);\r\n    }\r\n  }\r\n\r\n  ${ArrowButton}:last-child.focus-ring & {\r\n    transform: translate(-2px, -50%) scaleX(1);\r\n  }\r\n\r\n  @media (hover: hover) {\r\n    ${ArrowButton}:last-child:hover & {\r\n      transform: translate(-2px, -50%) scaleX(1);\r\n    }\r\n  }\r\n\r\n  @media ${until(Device.TabletLarge)} {\r\n    transform: translate(2px, -50%) scaleX(1);\r\n\r\n    ${ArrowButton}:last-child & {\r\n      transform: translate(-2px, -50%) scaleX(1);\r\n    }\r\n  }\r\n`;\r\nexport const ButtonStyles = {\r\n    Arrow,\r\n    ArrowButton,\r\n    Button,\r\n    ButtonIcon,\r\n    ButtonInner,\r\n    HoverLine,\r\n    Icon,\r\n    Text,\r\n    Wave,\r\n};\r\n","import { shouldAnimate, transition } from '@helpers/animate';\r\nimport brand from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport fonts from '@helpers/fonts';\r\nimport { Device, from } from '@helpers/media';\r\nimport srOnly from '@helpers/srOnly';\r\nimport { contentStyles, h3, h4, label, link, paragraphRegular } from '@helpers/typography';\r\nimport svgTick from '@img/icons/background/tick.svg?url';\r\nimport styled, { css } from 'styled-components';\r\nimport { ButtonStyles } from '../Buttons/GeneralButton/Button.styles';\r\nconst Container = styled.section `\r\n  --invalidColor: ${brand.validation.invalid};\r\n\r\n  display: block;\r\n`;\r\nconst Form = styled.form `\r\n  display: block;\r\n`;\r\nconst Fieldset = styled.fieldset `\r\n  display: block;\r\n\r\n  & + & {\r\n    margin: ${fluid(20, 22)} 0 0;\r\n  }\r\n`;\r\nconst Legend = styled.legend `\r\n  ${h4};\r\n\r\n  color: ${brand.primary.purple};\r\n  display: block;\r\n  margin: ${fluid(20, 22)} 0 12px;\r\n  text-transform: uppercase;\r\n`;\r\nconst Field = styled.div `\r\n  ${h4};\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  gap: ${fluid(10, 12)};\r\n  margin: 0 0 ${fluid(20, 22)};\r\n\r\n  &:last-of-type {\r\n    margin-bottom: 0;\r\n  }\r\n`;\r\nconst Label = styled.label `\r\n  ${label};\r\n\r\n  color: ${brand.primary.purple};\r\n  margin: 0;\r\n  position: relative;\r\n`;\r\nconst ToolTipContainer = styled.div `\r\n  position: absolute;\r\n  left: calc(100% + 10px);\r\n  top: -5px;\r\n`;\r\nconst ToolTip = styled.button `\r\n  border: 1px solid ${brand.primary.purple};\r\n  background-color: ${brand.white};\r\n  color: ${brand.primary.purple};\r\n  border-radius: 10000px;\r\n  font-size: 11px;\r\n  padding: 2px;\r\n  width: 18px;\r\n  height: 18px;\r\n`;\r\nconst ToolTipInner = styled.div `\r\n  text-transform: none;\r\n  border: none;\r\n  background-color: ${brand.primary.purple};\r\n  color: ${brand.primary.offWhite};\r\n  font-size: 14px;\r\n  width: 170px;\r\n  padding: 5px 20px 5px 5px;\r\n  border-radius: 4px;\r\n  position: absolute;\r\n  top: calc(100% + 7px);\r\n  right: 0;\r\n  display: none;\r\n  z-index: 2;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    right: auto;\r\n    left: 0;\r\n  }\r\n\r\n  &[data-show-tooltip='true'] {\r\n    display: block;\r\n  }\r\n\r\n  &:after {\r\n    bottom: 100%;\r\n    right: 4px;\r\n    border: solid transparent;\r\n    content: \"\";\r\n    height: 0;\r\n    width: 0;\r\n    position: absolute;\r\n    pointer-events: none;\r\n    border-color: rgba(136, 183, 213, 0);\r\n    border-bottom-color: ${brand.primary.purple};\r\n    border-width: 5px;\r\n    margin-left: -5px;\r\n\r\n    @media ${from(Device.TabletLarge)} {\r\n      right: auto;\r\n      left: 9px;\r\n    }\r\n  }\r\n`;\r\nconst CloseToolTip = styled.button `\r\n  border: none;\r\n  background: transparent;\r\n  position: absolute;\r\n  top: 2px;\r\n  right: 0;\r\n  color: ${brand.primary.offWhite};\r\n\r\n  svg {\r\n    width: 10px;\r\n  }\r\n`;\r\nconst ControlLabel = styled.label `\r\n  font-weight: 400;\r\n  display: flex;\r\n  align-items: center;\r\n  height: 30px;\r\n\r\n  > a {\r\n    ${link};\r\n  }\r\n\r\n  > input {\r\n    ${srOnly};\r\n  }\r\n`;\r\nconst CheckboxLabel = styled.span `\r\n  ${label};\r\n\r\n  text-transform: none;\r\n  position: relative;\r\n  padding-left: 42px;\r\n  margin: 0;\r\n\r\n  &::after,\r\n  &::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: -4px;\r\n    left: 0;\r\n    display: block;\r\n    height: 28px;\r\n    width: 28px;\r\n  }\r\n\r\n  &::after {\r\n    ${transition('opacity', 0.25)};\r\n\r\n    content: '';\r\n    height: 30px;\r\n    opacity: 0;\r\n    width: 30px;\r\n    color: ${brand.primary.purple};\r\n    background-image: url(${svgTick});\r\n    background-size: 16px;\r\n    background-repeat: no-repeat;\r\n    background-position: center;\r\n  }\r\n\r\n  &::before {\r\n    background-color: ${brand.white};\r\n    border: 1px solid ${brand.primary.purple};\r\n  }\r\n\r\n  input:checked + & {\r\n    &::after {\r\n      opacity: 1;\r\n    }\r\n  }\r\n\r\n  [data-error='true'] &::before {\r\n    border-color: var(--invalidColor);\r\n  }\r\n`;\r\nconst RadioLabel = styled.span `\r\n  ${label};\r\n\r\n  text-transform: none;\r\n  position: relative;\r\n  padding-left: 42px;\r\n  margin: 0;\r\n\r\n  &::after,\r\n  &::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 0;\r\n    display: block;\r\n    border-radius: 50%;\r\n    height: 28px;\r\n    width: 28px;\r\n    transform: translateY(-50%);\r\n  }\r\n\r\n  &::after {\r\n    ${transition('opacity', 0.25)};\r\n\r\n    content: '';\r\n    height: 30px;\r\n    opacity: 0;\r\n    width: 30px;\r\n    color: ${brand.primary.purple};\r\n    background-image: url(${svgTick});\r\n    background-size: 16px;\r\n    background-repeat: no-repeat;\r\n    background-position: center;\r\n  }\r\n\r\n  &::before {\r\n    background-color: ${brand.white};\r\n    border: 1px solid ${brand.primary.purple};\r\n  }\r\n\r\n  input:checked + & {\r\n    &::after {\r\n      opacity: 1;\r\n    }\r\n  }\r\n\r\n  [data-error='true'] &::before {\r\n    border-color: var(--invalidColor);\r\n  }\r\n`;\r\nconst sharedInputStyles = css `\r\n  ${paragraphRegular};\r\n\r\n  display: block;\r\n  background: ${brand.white};\r\n  border: none;\r\n  border-bottom: 1px solid ${brand.primary.purple};\r\n  background-color: ${brand.white};\r\n  color: ${brand.primary.purple};\r\n  height: ${fluid(46, 50)};\r\n  padding: 18px 16px;\r\n  width: 100%;\r\n  margin: 0;\r\n\r\n  [data-error='true'] & {\r\n    border-color: ${brand.validation.invalid};\r\n  }\r\n\r\n  &:focus-visible {\r\n    outline: auto;\r\n    outline-offset: 5px;\r\n  }\r\n`;\r\nconst Input = styled.input `\r\n  ${sharedInputStyles};\r\n`;\r\nconst SelectWrapper = styled.div `\r\n  width: 100%;\r\n  position: relative;\r\n`;\r\nconst Arrow = styled.div `\r\n  ${transition('color')};\r\n\r\n  display: grid;\r\n  place-items: center;\r\n  height: 50px;\r\n  width: 32px;\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  pointer-events: none;\r\n\r\n  > svg {\r\n    ${transition('transform')};\r\n\r\n    display: block;\r\n    height: 12px;\r\n    color: currentColor;\r\n    transform: rotate(90deg);\r\n  }\r\n\r\n  [data-error='true'] & {\r\n    color: var(--invalidColor);\r\n  }\r\n`;\r\nconst Select = styled.select `\r\n  ${sharedInputStyles};\r\n\r\n  appearance: none;\r\n  padding-right: 32px;\r\n  padding-top: 0;\r\n  padding-bottom: 0;\r\n\r\n  option {\r\n    background-color: var(--bgColor);\r\n    color: var(--fgColor);\r\n  }\r\n\r\n  &:focus ~ ${Arrow} > svg {\r\n    transform: rotate(-90deg);\r\n  }\r\n`;\r\nconst Textarea = styled.textarea `\r\n  ${sharedInputStyles};\r\n\r\n  height: auto;\r\n  min-height: 163px;\r\n`;\r\nconst Error = styled.span `\r\n  font-weight: 400;\r\n\r\n  display: block;\r\n  font-size: 12px;\r\n  line-height: 22px;\r\n  margin: -4px 0 0;\r\n  color: var(--invalidColor);\r\n`;\r\nconst Submit = styled.div `\r\n  display: flex;\r\n  align-items: center;\r\n  flex-direction: row;\r\n  margin: 24px 0 0;\r\n\r\n  ${ButtonStyles.Icon} {\r\n    svg {\r\n      ${shouldAnimate(css `\r\n        animation: 6s linear infinite rotate;\r\n      `)}\r\n    }\r\n\r\n    path {\r\n      stroke-width: 1.5;\r\n    }\r\n  }\r\n\r\n  @keyframes rotate {\r\n    from {\r\n      transform: rotate(0deg);\r\n    }\r\n\r\n    to {\r\n      transform: rotate(360deg);\r\n    }\r\n  }\r\n`;\r\nconst Markup = styled.div `\r\n  ${contentStyles};\r\n`;\r\nconst ErrorList = styled.ul `\r\n  display: block;\r\n  margin: 0 0 ${fluid(32, 48)};\r\n  color: ${brand.validation.invalid};\r\n`;\r\nconst ErrorListItem = styled.li `\r\n  ${paragraphRegular};\r\n\r\n  margin: 0 0 ${fluid(8, 12)};\r\n`;\r\nconst FieldTitle = styled.h2 `\r\n  ${h3};\r\n\r\n  color: ${brand.primary.purple};\r\n  margin-bottom: 0;\r\n  display: block;\r\n  width: 100%;\r\n`;\r\nconst FieldDescription = styled.p `\r\n  ${paragraphRegular};\r\n  color: ${brand.primary.purple};\r\n  display: block;\r\n  width: 100%;\r\n  margin: 0 0 12px;\r\n`;\r\nconst List = styled.div `\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: ${fluid(8, 12)};\r\n`;\r\nconst RecaptchaWrapper = styled.div `\r\n  width: 100%;\r\n`;\r\n// File Upload Styles\r\nconst FileUploadLabelContainer = styled.div `\r\n  display: flex;\r\n  gap: ${fluid(8, 12)};\r\n  align-items: center;\r\n  width: 100%;\r\n  overflow: hidden;\r\n\r\n  > label {\r\n    ${label};\r\n\r\n    color: ${brand.primary.purple};\r\n    text-decoration: none;\r\n    margin: 0;\r\n    white-space: nowrap;\r\n\r\n    &:hover {\r\n      cursor: pointer;\r\n    }\r\n\r\n    > svg {\r\n      display: block;\r\n      height: ${fluid(16, 18)};\r\n      width: ${fluid(16, 18)};\r\n      margin-right: ${fluid(6, 8)};\r\n    }\r\n  }\r\n`;\r\nconst FileNameContent = styled.span `\r\n  ${fonts.graphikCompact.regular};\r\n\r\n  display: block;\r\n  font-size: ${fluid(14, 16)};\r\n  line-height: 24px;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  color: ${brand.secondary.red};\r\n  max-width: 180px;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    max-width: 250px;\r\n  }\r\n`;\r\nconst DisabledFormContent = styled.div ``;\r\nexport default {\r\n    Arrow,\r\n    CheckboxLabel,\r\n    CloseToolTip,\r\n    Container,\r\n    ControlLabel,\r\n    DisabledFormContent,\r\n    Error,\r\n    ErrorList,\r\n    ErrorListItem,\r\n    Field,\r\n    FieldDescription,\r\n    Fieldset,\r\n    FieldTitle,\r\n    FileNameContent,\r\n    FileUploadLabelContainer,\r\n    Form,\r\n    Input,\r\n    Label,\r\n    Legend,\r\n    List,\r\n    Markup,\r\n    RadioLabel,\r\n    RecaptchaWrapper,\r\n    Select,\r\n    SelectWrapper,\r\n    Submit,\r\n    ToolTip,\r\n    ToolTipContainer,\r\n    ToolTipInner,\r\n    Textarea,\r\n};\r\n"],"names":["css","Text","styled","div","withConfig","displayName","componentId","PrimaryStyles","brand","secondary","red","primary","purple","transition","offWhite","OutlineStyles","OutlineAltStyles","Wave","Arrow","TextOnlyStyles","Icon","Button","button","fluid","fonts","graphikCompact","medium","until","Device","TabletLarge","_ref","branding","ArrowButton","ButtonInner","ButtonStyles","ButtonIcon","HoverLine","Container","section","validation","invalid","Form","form","Fieldset","fieldset","Legend","legend","h4","Field","Label","label","ToolTipContainer","ToolTip","white","ToolTipInner","from","CloseToolTip","ControlLabel","link","srOnly","CheckboxLabel","span","svgTick","RadioLabel","sharedInputStyles","paragraphRegular","Input","input","SelectWrapper","Select","select","Textarea","textarea","Error","Submit","shouldAnimate","Markup","contentStyles","ErrorList","ul","ErrorListItem","li","FieldTitle","h2","h3","FieldDescription","p","List","RecaptchaWrapper","FileUploadLabelContainer","FileNameContent","regular","DisabledFormContent"],"sourceRoot":""}