{"version":3,"file":"4811-f4aa20eb066c90ce0aad.js","mappings":"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","sources":["webpack://tipton/./src/stories/Components/Misc/FiltersForm/FiltersForm.styles.ts","webpack://tipton/./src/stories/Components/Misc/Forms/Form.styles.ts","webpack://tipton/./src/stories/Components/Misc/Forms/Inputs/CheckboxList/CheckboxList.styles.ts","webpack://tipton/./src/stories/Components/Misc/Forms/Inputs/RadioList/RadioList.styles.ts","webpack://tipton/./src/stories/Components/Misc/Forms/Inputs/Select/Select.styles.ts","webpack://tipton/./src/stories/Components/Misc/Forms/Inputs/Textbox/Textbox.styles.ts","webpack://tipton/./src/stories/Components/Misc/Forms/Inputs/Textbox/Textbox.tsx"],"sourcesContent":["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 FormStyles, { CommonLegendStyles } from '@stories/Components/Misc/Forms/Form.styles';\r\nimport CheckboxListStyles from '@stories/Components/Misc/Forms/Inputs/CheckboxList/CheckboxList.styles';\r\nimport RadioListStyles from '@stories/Components/Misc/Forms/Inputs/RadioList/RadioList.styles';\r\nimport TextboxStyles from '@stories/Components/Misc/Forms/Inputs/Textbox/Textbox.styles';\r\nimport styled from 'styled-components';\r\nimport SelectStyles from '../Forms/Inputs/Select/Select.styles';\r\nimport { ContentType } from '../SectionWrapper/SectionWrapper';\r\nconst Container = styled.form `\r\n  --activeBgColour: ${brand.green.light};\r\n  --activeBorderColour: ${brand.green.dark};\r\n  --borderColour: ${brand.grey.light};\r\n\r\n  &[data-type=${ContentType.Savings}] {\r\n    --activeBgColour: ${brand.blue.light};\r\n    --activeBorderColour: ${brand.blue.dark};\r\n    --borderColour: ${brand.grey.light};\r\n\r\n    ${CheckboxListStyles.Label},\r\n    ${RadioListStyles.Label} {\r\n      --activeColour: ${brand.blue.default};\r\n    }\r\n  }\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 24px;\r\n\r\n  ${FormStyles.Label}[data-size='large'] {\r\n    ${CommonLegendStyles};\r\n\r\n    margin-bottom: 0px !important;\r\n  }\r\n\r\n  ${FormStyles.Title},\r\n  ${FormStyles.Label}[data-size='large'] {\r\n    border: 0;\r\n  }\r\n\r\n  ${FormStyles.Title} {\r\n    margin-bottom: 8px;\r\n  }\r\n\r\n  ${CheckboxListStyles.Container},\r\n  ${RadioListStyles.Container} {\r\n    gap: ${fluid(8, 12)};\r\n  }\r\n\r\n  ${CheckboxListStyles.Label},\r\n  ${RadioListStyles.Label} {\r\n    ${transition('background-color, border-color, border-width', 0.2)};\r\n    ${fonts.proximaNova.semiBold};\r\n\r\n    --bgColour: ${brand.global.white};\r\n    --borderOpacity: 0;\r\n\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    font-size: ${fluid(14, 18)};\r\n    padding: 4px ${fluid(12, 24)};\r\n    height: ${fluid(44, 54)};\r\n    border-radius: 10px;\r\n    background: var(--bgColour);\r\n    width: 100%;\r\n\r\n    &::before,\r\n    &::after {\r\n      content: '';\r\n      position: absolute;\r\n      background: transparent !important;\r\n      top: 0;\r\n      left: 0;\r\n      padding: 0;\r\n      border-radius: inherit;\r\n    }\r\n\r\n    &::before {\r\n      border: 1px solid var(--borderColour);\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n\r\n    &::after {\r\n      ${transition('opacity', 0.2)};\r\n\r\n      border: 2px solid var(--activeBorderColour);\r\n      opacity: var(--borderOpacity);\r\n      width: calc(100% - 4px);\r\n      height: calc(100% - 4px);\r\n      transform: none;\r\n      -webkit-mask-image: none;\r\n      mask-image: none;\r\n    }\r\n  }\r\n\r\n  ${CheckboxListStyles.Label}::before {\r\n    width: calc(100% - 2px);\r\n    height: calc(100% - 2px);\r\n  }\r\n\r\n  ${CheckboxListStyles.Label}:hover,\r\n  ${RadioListStyles.Label}:hover,\r\n  ${CheckboxListStyles.Input}:checked + ${CheckboxListStyles.Label},\r\n  ${RadioListStyles.Input}:checked + ${RadioListStyles.Label},\r\n  ${CheckboxListStyles.Input}:focus-visible + ${CheckboxListStyles.Label},\r\n  ${RadioListStyles.Input}:focus-visible + ${RadioListStyles.Label} {\r\n    --borderOpacity: 1;\r\n  }\r\n\r\n  ${CheckboxListStyles.Input}:checked + ${CheckboxListStyles.Label},\r\n  ${RadioListStyles.Input}:checked + ${RadioListStyles.Label} {\r\n    --bgColour: var(--activeBgColour);\r\n  }\r\n\r\n  ${TextboxStyles.Prefix},\r\n  ${TextboxStyles.Suffix} {\r\n    background-color: ${brand.global.white};\r\n    padding: 0 12px;\r\n  }\r\n\r\n  ${SelectStyles.Wrapper},\r\n  ${TextboxStyles.InputWrapper} {\r\n    max-width: 418px;\r\n  }\r\n\r\n  ${TextboxStyles.InputWrapper}:has(${TextboxStyles.Prefix}) ${TextboxStyles.Input} {\r\n    border-left: 0;\r\n    padding-left: 0;\r\n  }\r\n\r\n  ${TextboxStyles.InputWrapper}:has(${TextboxStyles.Suffix}) ${TextboxStyles.Input} {\r\n    border-right: 0;\r\n    padding-right: 0;\r\n  }\r\n\r\n  @container ${until(Device.TabletSmall)} {\r\n    ${RadioListStyles.Container}:not(:has(${RadioListStyles.Option}:nth-child(3))) {\r\n      flex-direction: row;\r\n\r\n      ${RadioListStyles.Option} {\r\n        flex: 1;\r\n      }\r\n\r\n      ${RadioListStyles.Label} {\r\n        justify-content: center;\r\n        text-align: center;\r\n      }\r\n    }\r\n\r\n    ${CheckboxListStyles.Container}:not(:has(${CheckboxListStyles.Option}:nth-child(3))) {\r\n      flex-direction: row;\r\n\r\n      ${CheckboxListStyles.Option} {\r\n        flex: 1;\r\n      }\r\n\r\n      ${CheckboxListStyles.Label} {\r\n        justify-content: center;\r\n        text-align: center;\r\n      }\r\n    }\r\n  }\r\n`;\r\nconst FiltersFormStyles = {\r\n    Container,\r\n};\r\nexport default FiltersFormStyles;\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 { 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 { link } from '@helpers/typography';\r\nimport svgTick from '@img/icons/tick.svg?url';\r\nimport styled, { css } from 'styled-components';\r\nexport const CommonCheckboxContainerStyles = css `\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 14px ${fluid(24, 48)};\r\n\r\n  flex-direction: column;\r\n\r\n  @container ${from(Device.TabletSmall)} {\r\n    flex-direction: row;\r\n    row-gap: 12px;\r\n  }\r\n\r\n  &[data-layout='vertical'] {\r\n    flex-direction: column;\r\n  }\r\n`;\r\nconst Container = styled.div `\r\n  ${CommonCheckboxContainerStyles};\r\n`;\r\nconst Option = styled.label `\r\n  display: flex;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    white-space: nowrap;\r\n  }\r\n`;\r\nconst Input = styled.input `\r\n  /* Ensure iOS doesn't apply default border radius */\r\n  -webkit-appearance: none !important;\r\n\r\n  ${srOnly};\r\n`;\r\nexport const CommonCheckboxLabelStyles = css `\r\n  ${fonts.proximaNova.regular};\r\n\r\n  --activeColour: ${brand.green.default};\r\n  --bgColour: ${brand.global.white};\r\n  --borderRadius: 3px;\r\n\r\n  display: inline-flex;\r\n  gap: 8px;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  font-size: 16px;\r\n  line-height: 1em;\r\n  color: var(--textColour);\r\n  position: relative;\r\n\r\n  &::before,\r\n  &::after {\r\n    content: '';\r\n  }\r\n\r\n  &::before {\r\n    display: inline-flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    height: ${fluid(22, 24)};\r\n    background: var(--bgColour);\r\n    border: 1px solid var(--borderColour);\r\n    border-radius: var(--borderRadius);\r\n    color: var(--bgColour);\r\n    width: ${fluid(22, 24)};\r\n    border-radius: 5px;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  &::after {\r\n    ${transition('opacity', 0.2)};\r\n\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 5px;\r\n    width: ${fluid(14, 16)};\r\n    height: ${fluid(14, 16)};\r\n    opacity: 0;\r\n    background: var(--activeColour);\r\n    background-size: contain;\r\n    background-position: center;\r\n    -webkit-mask-image: url(${svgTick});\r\n    mask-image: url(${svgTick});\r\n    -webkit-mask-repeat: no-repeat;\r\n    mask-repeat: no-repeat;\r\n    -webkit-mask-size: contain;\r\n    mask-size: contain;\r\n    -webkit-mask-position: center;\r\n    mask-position: center;\r\n    transform: translateY(-50%);\r\n  }\r\n\r\n  a {\r\n    ${link};\r\n  }\r\n\r\n  ${Input}:disabled + & {\r\n    pointer-events: none;\r\n    opacity: 0.5;\r\n  }\r\n\r\n  ${Input}:checked + &::after {\r\n    opacity: 1;\r\n  }\r\n\r\n  ${Input}:focus-visible + &::before {\r\n    border-color: var(--activeColour);\r\n  }\r\n`;\r\nconst Label = styled.p `\r\n  ${CommonCheckboxLabelStyles};\r\n`;\r\nconst CheckboxListStyles = {\r\n    Container,\r\n    Input,\r\n    Label,\r\n    Option,\r\n};\r\nexport default CheckboxListStyles;\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, from } from '@helpers/media';\r\nimport srOnly from '@helpers/srOnly';\r\nimport styled, { css } from 'styled-components';\r\nexport const CommonRadioListContainerStyles = css `\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: ${fluid(10, 12)} ${fluid(24, 48)};\r\n\r\n  flex-direction: column;\r\n\r\n  @container ${from(Device.TabletSmall)} {\r\n    flex-direction: row;\r\n  }\r\n\r\n  &[data-layout='vertical'] {\r\n    flex-direction: column;\r\n  }\r\n`;\r\nconst Container = styled.div `\r\n  ${CommonRadioListContainerStyles};\r\n`;\r\nconst Input = styled.input `\r\n  /* Ensure iOS doesn't apply default border radius */\r\n  -webkit-appearance: none !important;\r\n\r\n  ${srOnly};\r\n`;\r\nexport const CommonRadioListLabelStyles = css `\r\n  --activeColour: ${brand.green.default};\r\n  --bgColour: ${brand.global.white};\r\n  --borderRadius: 5000px;\r\n  --indicatorSize: ${fluid(20, 24)};\r\n\r\n  position: relative;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  font-size: 16px;\r\n  line-height: 1em;\r\n  color: var(--textColour);\r\n  gap: 8px;\r\n\r\n  &::before,\r\n  &::after {\r\n    content: '';\r\n    display: inline-block;\r\n    height: var(--indicatorSize);\r\n    width: var(--indicatorSize);\r\n    border-radius: var(--borderRadius);\r\n  }\r\n\r\n  &::before {\r\n    ${transition('background-color, border-color', 0.2)};\r\n\r\n    background: transparent;\r\n    background-clip: content-box;\r\n    border: 1px solid var(--borderColour);\r\n    box-sizing: border-box;\r\n    background-color: var(--bgColour);\r\n    padding: 4px;\r\n    position: relative;\r\n    z-index: 1;\r\n    flex: 0 0 var(--indicatorSize);\r\n  }\r\n\r\n  &::after {\r\n    position: absolute;\r\n    left: 0;\r\n    top: 50%;\r\n    background-color: ${brand.global.white};\r\n    transform: translateY(-50%);\r\n  }\r\n\r\n  ${Input}:disabled + & {\r\n    pointer-events: none;\r\n    opacity: 0.5;\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  ${Input}:checked + &::before {\r\n    background-color: var(--activeColour);\r\n  }\r\n\r\n  ${Input}:focus-visible + &::before {\r\n    border-color: var(--activeColour);\r\n  }\r\n`;\r\nconst Label = styled.p `\r\n  ${CommonRadioListLabelStyles};\r\n`;\r\nconst Description = styled.p `\r\n  ${fonts.proximaNova.medium};\r\n\r\n  font-size: ${fluid(12, 16)};\r\n  line-height: ${fluid(20, 26)};\r\n  padding-left: ${fluid(28, 32)};\r\n\r\n  ${Input}:disabled ~ & {\r\n    pointer-events: none;\r\n    opacity: 0.5;\r\n  }\r\n`;\r\nconst Option = styled.label `\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 4px;\r\n  cursor: pointer;\r\n\r\n  &:has(${Input}:disabled) {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &:has(${Description}) ${Label} {\r\n    ${fonts.proximaNova.semiBold};\r\n  }\r\n`;\r\nconst RadioListStyles = {\r\n    Container,\r\n    Input,\r\n    Label,\r\n    Option,\r\n    Description,\r\n};\r\nexport default RadioListStyles;\r\n","import { transition } from '@helpers/animate';\r\nimport { fluid } from '@helpers/fluid';\r\nimport svgChevron from '@img/icons/chevron-down.svg?url';\r\nimport styled, { css } from 'styled-components';\r\nimport { CommonTextInputStyles } from '../Textbox/Textbox.styles';\r\nexport const CommonSelectStyles = css `\r\n  ${CommonTextInputStyles};\r\n\r\n  cursor: pointer;\r\n\r\n  &:read-only,\r\n  &[readonly] {\r\n    color: unset;\r\n  }\r\n`;\r\nexport const CommonDropdownWrapperStyles = css `\r\n  --translateY: -50%;\r\n\r\n  position: relative;\r\n  color: var(--textColour);\r\n\r\n  &::after {\r\n    ${transition('transform')};\r\n\r\n    content: '';\r\n    display: inline-flex;\r\n    align-items: center;\r\n    width: 13px;\r\n    height: 13px;\r\n    position: absolute;\r\n    top: 50%;\r\n    right: ${fluid(16, 24)};\r\n    transform: translateY(var(--translateY));\r\n    pointer-events: none;\r\n    background: currentColor;\r\n    background-size: contain;\r\n    background-position: center;\r\n    -webkit-mask-image: url(${svgChevron});\r\n    mask-image: url(${svgChevron});\r\n    -webkit-mask-repeat: no-repeat;\r\n    mask-repeat: no-repeat;\r\n    -webkit-mask-size: contain;\r\n    mask-size: contain;\r\n    -webkit-mask-position: center;\r\n    mask-position: center;\r\n  }\r\n  \r\n  &[data-open=\"true\"]::after {\r\n    transform: translateY(var(--translateY)) rotate(180deg);\r\n  }\r\n`;\r\nconst Wrapper = styled.div `\r\n  ${CommonDropdownWrapperStyles};\r\n`;\r\nconst Select = styled.select `\r\n  ${CommonSelectStyles};\r\n`;\r\nconst SelectStyles = {\r\n    Wrapper,\r\n    Select,\r\n};\r\nexport default SelectStyles;\r\n","import brand from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport fonts from '@helpers/fonts';\r\nimport { paragraphRegular } from '@helpers/typography';\r\nimport styled, { css } from 'styled-components';\r\nexport const CommonTextInputStyles = css `\r\n  ${fonts.proximaNova.regular};\r\n\r\n  --bgColour: ${brand.global.white};\r\n  --borderRadius: 10px;\r\n  --placeholderColour: ${brand.grey.dark};\r\n  --readOnlyColour: ${brand.grey.dark};\r\n\r\n  /* Ensure iOS doesn't apply default border radius */\r\n  -webkit-appearance: none !important;\r\n  display: block;\r\n  background: var(--bgColour);\r\n  border: 1px solid var(--borderColour);\r\n  border-radius: var(--borderRadius);\r\n  color: var(--textColour);\r\n  height: ${fluid(48, 55)};\r\n  font-size: 16px;\r\n  line-height: 26px;\r\n  margin: 0;\r\n  padding: ${fluid(10, 14)} 12px;\r\n  width: 100%;\r\n  scroll-margin: calc(var(--headerHeight, 0px) + ${fluid(16, 32)}) 0 0;\r\n\r\n  &:disabled {\r\n    opacity: 0.5;\r\n    color: var(--readOnlyColour);\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &:read-only,\r\n  &[readonly] {\r\n    color: var(--readOnlyColour);\r\n  }\r\n\r\n  &::placeholder {\r\n    color: var(--placeholderColour);\r\n    opacity: 0.5;\r\n  }\r\n\r\n  &:-webkit-autofill,\r\n  &:-webkit-autofill:hover,\r\n  &:-webkit-autofill:focus {\r\n    -webkit-text-fill-color: var(--textColour);\r\n    -webkit-box-shadow: 0 0 0px 1000px ${brand.green.light} inset;\r\n  }\r\n\r\n  &.focus-ring {\r\n    outline: auto;\r\n    outline-offset: 3px;\r\n    outline-width: 2px;\r\n    outline-style: solid;\r\n  }\r\n`;\r\nconst Input = styled.input `\r\n  ${CommonTextInputStyles};\r\n`;\r\nconst AdditionalElementStyles = css `\r\n  ${paragraphRegular};\r\n  ${fonts.proximaNova.bold};\r\n\r\n  --borderRadius: 10px;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  height: ${fluid(48, 55)};\r\n  border: 1px solid var(--borderColour);\r\n  padding: 0 ${fluid(16, 24)};\r\n  background-color: ${brand.green.light};\r\n  color: var(--textColour);\r\n  white-space: nowrap;\r\n  margin: 0;\r\n`;\r\nconst Prefix = styled.span `\r\n  ${AdditionalElementStyles};\r\n\r\n  border-right: 0;\r\n  border-radius: var(--borderRadius) 0 0 var(--borderRadius);\r\n`;\r\nconst Suffix = styled.span `\r\n  ${AdditionalElementStyles};\r\n\r\n  border-left: 0;\r\n  border-radius: 0 var(--borderRadius) var(--borderRadius) 0;\r\n`;\r\nconst InputWrapper = styled.div `\r\n  display: flex;\r\n\r\n  &[data-type='currency'] {\r\n    > input {\r\n      ${CommonTextInputStyles};\r\n    }\r\n  }\r\n\r\n  &:has(${Prefix}) {\r\n    input {\r\n      border-top-left-radius: 0;\r\n      border-bottom-left-radius: 0;\r\n    }\r\n  }\r\n\r\n  &:has(${Suffix}) {\r\n    input {\r\n      border-top-right-radius: 0;\r\n      border-bottom-right-radius: 0;\r\n    }\r\n  }\r\n`;\r\nconst TextboxStyles = {\r\n    Input,\r\n    InputWrapper,\r\n    Prefix,\r\n    Suffix,\r\n};\r\nexport default TextboxStyles;\r\n","import * as React from 'react';\r\nimport { FocusRing } from 'react-aria';\r\nimport MaskedInput from 'react-text-mask';\r\nimport createNumberMask from 'text-mask-addons/dist/createNumberMask';\r\nimport S from './Textbox.styles';\r\nconst maskOptions = {\r\n    prefix: '',\r\n    suffix: '',\r\n    includeThousandsSeparator: true,\r\n    thousandsSeparatorSymbol: ',',\r\n    allowDecimal: true,\r\n    decimalSymbol: '.',\r\n    decimalLimit: 2,\r\n    integerLimit: 8,\r\n    allowNegative: false,\r\n    allowLeadingZeroes: false,\r\n};\r\nconst Textbox = React.forwardRef(({ prefix, suffix, setValue, initialValue, ...props }, ref) => {\r\n    const currencyMask = createNumberMask(maskOptions);\r\n    const [maskedValue, setMaskedValue] = React.useState(initialValue ?? '');\r\n    React.useEffect(() => {\r\n        setMaskedValue(initialValue ?? '');\r\n        setValue?.(initialValue ? initialValue.replace(/,/g, '') : '');\r\n    }, [initialValue]);\r\n    const otherProps = {};\r\n    if (props.type === 'number') {\r\n        otherProps.step = 'any';\r\n    }\r\n    if (prefix && prefix === '£') {\r\n        return (React.createElement(FocusRing, { focusRingClass: \"focus-ring\" },\r\n            React.createElement(S.InputWrapper, { \"data-type\": \"currency\" },\r\n                prefix && React.createElement(S.Prefix, null, prefix),\r\n                React.createElement(MaskedInput, { mask: currencyMask, onChange: (e) => {\r\n                        setValue?.(e.target.value.replace(/,/g, ''));\r\n                        setMaskedValue(e.target.value);\r\n                    }, inputMode: \"numeric\", value: maskedValue }),\r\n                React.createElement(\"input\", { ref: ref, ...props, \"aria-labelledby\": `${props.name}-label`, ...otherProps, type: \"hidden\" }),\r\n                suffix && React.createElement(S.Suffix, null, suffix))));\r\n    }\r\n    return (React.createElement(FocusRing, { focusRingClass: \"focus-ring\" },\r\n        React.createElement(S.InputWrapper, null,\r\n            prefix && React.createElement(S.Prefix, null, prefix),\r\n            React.createElement(S.Input, { ref: ref, ...props, \"aria-labelledby\": `${props.name}-label`, ...otherProps }),\r\n            suffix && React.createElement(S.Suffix, null, suffix))));\r\n});\r\nTextbox.displayName = 'Textbox';\r\nexport default Textbox;\r\n"],"names":["Container","styled","form","withConfig","displayName","componentId","brand","green","light","dark","grey","ContentType","Savings","blue","CheckboxListStyles","Label","RadioListStyles","default","FormStyles","CommonLegendStyles","Title","fluid","transition","fonts","proximaNova","semiBold","global","white","Input","TextboxStyles","Prefix","Suffix","SelectStyles","Wrapper","InputWrapper","until","Device","TabletSmall","Option","Form","black","navy","Section","fieldset","css","bold","from","Tablet","legend","Content","p","paragraphRegular","Row","div","Field","Desktop","CommonLabelStyles","srOnly","label","Description","CommonErrorStyles","paragraphSmall","validation","invalid","Error","span","Divider","hr","SubmitWrapper","ButtonStyles","Loader","rgba","LoaderText","ErrorList","m","ul","ErrorListItem","li","contentStyles","ConfirmationMessage","Info","InfoButton","button","ButtonReset","Tooltip","CommonCheckboxContainerStyles","input","CommonCheckboxLabelStyles","regular","svgTick","link","CommonRadioListContainerStyles","CommonRadioListLabelStyles","medium","CommonSelectStyles","CommonTextInputStyles","CommonDropdownWrapperStyles","svgChevron","Select","select","AdditionalElementStyles","maskOptions","prefix","suffix","includeThousandsSeparator","thousandsSeparatorSymbol","allowDecimal","decimalSymbol","decimalLimit","integerLimit","allowNegative","allowLeadingZeroes","Textbox","React","_ref","ref","setValue","initialValue","props","currencyMask","createNumberMask","maskedValue","setMaskedValue","replace","otherProps","type","step","FocusRing","focusRingClass","S","MaskedInput","mask","onChange","e","target","value","inputMode","name"],"sourceRoot":""}