From 5add05e39f88470a80e0d5c46bcbbc9f5eaf208b Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Mon, 17 Mar 2025 13:10:19 +0000
Subject: [PATCH 01/14] adjusting Label Optional text

---
 src/components/Atoms/Input/Input.md | 1 +
 src/components/Atoms/Label/Label.js | 7 +++++--
 src/components/Atoms/Label/Label.md | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/Atoms/Input/Input.md b/src/components/Atoms/Input/Input.md
index 259588379..2348f0053 100644
--- a/src/components/Atoms/Input/Input.md
+++ b/src/components/Atoms/Input/Input.md
@@ -7,6 +7,7 @@
     label="Label"
     id="input-example-1"
     showLabel={true}
+    optional
   />
 ```
 
diff --git a/src/components/Atoms/Label/Label.js b/src/components/Atoms/Label/Label.js
index 2b8a38a93..02f276316 100644
--- a/src/components/Atoms/Label/Label.js
+++ b/src/components/Atoms/Label/Label.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 import Text from '../Text/Text';
-import spacing from '../../../theme/shared/spacing';
 import hideVisually from '../../../theme/shared/hideVisually';
 
 const LabelElement = styled.label`
@@ -13,6 +12,10 @@ const LabelElement = styled.label`
   flex-direction: column;
   color: ${({ theme, errorMsg }) => (errorMsg ? theme.color('red') : theme.color('grey_label'))};
 
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    max-width: 290px;
+  }
+
   ${({ optional, theme }) => optional === true && `
   :after {
     position: absolute;
@@ -25,7 +28,7 @@ const LabelElement = styled.label`
 `;
 
 const VisibleText = styled(Text)`
-  margin-bottom: ${spacing('sm')};
+  margin-bottom: 0.5rem;
   font-weight: normal;
 `;
 
diff --git a/src/components/Atoms/Label/Label.md b/src/components/Atoms/Label/Label.md
index 3d8a41e4d..b875d76e3 100644
--- a/src/components/Atoms/Label/Label.md
+++ b/src/components/Atoms/Label/Label.md
@@ -15,7 +15,7 @@ const StyledInput = styled.input`
   border-width: 1px;
 `;
 
-<Label label="Wrapping a styled input">
+<Label label="Wrapping a styled input" optional>
   <StyledInput type="text" name="field-wrapper-test-1" />
 </Label>
 ```

From ff1af3463566628fffce1de93693b3fd7bdccf3f Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Mon, 17 Mar 2025 13:14:29 +0000
Subject: [PATCH 02/14] snaps

---
 src/components/Atoms/Input/input.test.js      |  6 +++++
 .../Select/__snapshots__/Select.test.js.snap  |  6 +++++
 .../Atoms/TextArea/TextArea.test.js           |  6 +++++
 .../TextInputWithDropdown.test.js.snap        | 18 ++++++++++++++
 .../__snapshots__/SchoolLookup.test.js.snap   |  6 +++++
 .../Molecules/SearchInput/SearchInput.test.js |  6 +++++
 .../__snapshots__/Typeahead.test.js.snap      |  6 +++++
 .../Donate/__snapshots__/Donate.test.js.snap  | 24 +++++++++++++++++++
 .../__snapshots__/EmailSignUp.test.js.snap    |  6 +++++
 .../Organisms/Membership/Membership.test.js   |  6 +++++
 10 files changed, 90 insertions(+)

diff --git a/src/components/Atoms/Input/input.test.js b/src/components/Atoms/Input/input.test.js
index 2e949cdc0..23de3ef89 100644
--- a/src/components/Atoms/Input/input.test.js
+++ b/src/components/Atoms/Input/input.test.js
@@ -88,6 +88,12 @@ it('renders correctly', () => {
       border: 1px solid #666;
     }
 
+    @media (min-width:740px) {
+      .c0 {
+        max-width: 290px;
+      }
+    }
+
     @media (min-width:740px) {
       .c4 {
         max-width: 290px;
diff --git a/src/components/Atoms/Select/__snapshots__/Select.test.js.snap b/src/components/Atoms/Select/__snapshots__/Select.test.js.snap
index dd1e7194d..b2c63e217 100644
--- a/src/components/Atoms/Select/__snapshots__/Select.test.js.snap
+++ b/src/components/Atoms/Select/__snapshots__/Select.test.js.snap
@@ -55,6 +55,12 @@ exports[`renders correctly 1`] = `
   border: 1px solid #666;
 }
 
+@media (min-width:740px) {
+  .c0 {
+    max-width: 290px;
+  }
+}
+
 @media (min-width:740px) {
   .c3 {
     max-width: 290px;
diff --git a/src/components/Atoms/TextArea/TextArea.test.js b/src/components/Atoms/TextArea/TextArea.test.js
index 458506706..8a884e167 100644
--- a/src/components/Atoms/TextArea/TextArea.test.js
+++ b/src/components/Atoms/TextArea/TextArea.test.js
@@ -81,6 +81,12 @@ it('renders correctly', () => {
       visibility: hidden;
     }
 
+    @media (min-width:740px) {
+      .c0 {
+        max-width: 290px;
+      }
+    }
+
     <label
       className="c0"
       htmlFor="Please leave your comment here"
diff --git a/src/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap b/src/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap
index 79ca19efa..e92cac0bd 100644
--- a/src/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap
+++ b/src/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap
@@ -77,6 +77,12 @@ exports[`renders correctly with no value and no options 1`] = `
   position: relative;
 }
 
+@media (min-width:740px) {
+  .c1 {
+    max-width: 290px;
+  }
+}
+
 @media (min-width:740px) {
   .c5 {
     max-width: 290px;
@@ -211,6 +217,12 @@ exports[`renders correctly with value and no options 1`] = `
   position: relative;
 }
 
+@media (min-width:740px) {
+  .c1 {
+    max-width: 290px;
+  }
+}
+
 @media (min-width:740px) {
   .c5 {
     max-width: 290px;
@@ -378,6 +390,12 @@ exports[`renders correctly with value and options 1`] = `
   background-color: #F4F3F5;
 }
 
+@media (min-width:740px) {
+  .c1 {
+    max-width: 290px;
+  }
+}
+
 @media (min-width:740px) {
   .c5 {
     max-width: 290px;
diff --git a/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap b/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap
index 76afd25bf..0f6a9e58c 100644
--- a/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap
+++ b/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap
@@ -77,6 +77,12 @@ exports[`renders correctly 1`] = `
   position: relative;
 }
 
+@media (min-width:740px) {
+  .c1 {
+    max-width: 290px;
+  }
+}
+
 @media (min-width:740px) {
   .c5 {
     max-width: 290px;
diff --git a/src/components/Molecules/SearchInput/SearchInput.test.js b/src/components/Molecules/SearchInput/SearchInput.test.js
index 423cdbcd4..df5ae413e 100644
--- a/src/components/Molecules/SearchInput/SearchInput.test.js
+++ b/src/components/Molecules/SearchInput/SearchInput.test.js
@@ -133,6 +133,12 @@ it('renders correctly', () => {
       border: 0;
     }
 
+    @media (min-width:740px) {
+      .c4 {
+        max-width: 290px;
+      }
+    }
+
     @media (min-width:740px) {
       .c9 {
         max-width: 290px;
diff --git a/src/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap b/src/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap
index 30c065ff5..45b83399d 100644
--- a/src/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap
+++ b/src/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap
@@ -77,6 +77,12 @@ exports[`renders correctly 1`] = `
   position: relative;
 }
 
+@media (min-width:740px) {
+  .c1 {
+    max-width: 290px;
+  }
+}
+
 @media (min-width:740px) {
   .c5 {
     max-width: 290px;
diff --git a/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap b/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap
index 274ae62ef..6a9502320 100644
--- a/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap
+++ b/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap
@@ -431,6 +431,12 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   }
 }
 
+@media (min-width:740px) {
+  .c18 {
+    max-width: 290px;
+  }
+}
+
 @media (min-width:740px) {
   .c23 {
     max-width: 290px;
@@ -1100,6 +1106,12 @@ exports[`Monthly donation renders correctly 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c19 {
+    max-width: 290px;
+  }
+}
+
 @media (min-width:740px) {
   .c24 {
     max-width: 290px;
@@ -1757,6 +1769,12 @@ exports[`Single donation renders correctly 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c12 {
+    max-width: 290px;
+  }
+}
+
 @media (min-width:740px) {
   .c17 {
     max-width: 290px;
@@ -2424,6 +2442,12 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c12 {
+    max-width: 290px;
+  }
+}
+
 @media (min-width:740px) {
   .c17 {
     max-width: 290px;
diff --git a/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap b/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap
index c7af37047..47a888f9c 100644
--- a/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap
+++ b/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap
@@ -234,6 +234,12 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c8 {
+    max-width: 290px;
+  }
+}
+
 @media (min-width:740px) {
   .c12 {
     max-width: 290px;
diff --git a/src/components/Organisms/Membership/Membership.test.js b/src/components/Organisms/Membership/Membership.test.js
index 18d594d3b..c9c687cf2 100644
--- a/src/components/Organisms/Membership/Membership.test.js
+++ b/src/components/Organisms/Membership/Membership.test.js
@@ -339,6 +339,12 @@ it('renders correctly', () => {
       background-color: #961D35;
     }
 
+    @media (min-width:740px) {
+      .c14 {
+        max-width: 290px;
+      }
+    }
+
     @media (min-width:740px) {
       .c18 {
         max-width: 290px;

From 18e11f5f933b85af1565e16b3f95840dfe863d4a Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Mon, 17 Mar 2025 15:14:20 +0000
Subject: [PATCH 03/14] break out styles

---
 src/components/Atoms/Input/Input.js       | 84 ++--------------------
 src/components/Atoms/Input/Input.style.js | 86 +++++++++++++++++++++++
 src/components/Atoms/Label/Label.js       | 37 ++--------
 src/components/Atoms/Label/Label.md       |  9 ++-
 src/components/Atoms/Label/Label.style.js | 40 +++++++++++
 5 files changed, 145 insertions(+), 111 deletions(-)
 create mode 100644 src/components/Atoms/Input/Input.style.js
 create mode 100644 src/components/Atoms/Label/Label.style.js

diff --git a/src/components/Atoms/Input/Input.js b/src/components/Atoms/Input/Input.js
index 7e0036f61..bac1075ec 100644
--- a/src/components/Atoms/Input/Input.js
+++ b/src/components/Atoms/Input/Input.js
@@ -1,85 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled, { css } from 'styled-components';
 
-import alertIcon from './assets/error-alert-icon-red.svg';
 import Label from '../Label/Label';
 import ErrorText from '../ErrorText/ErrorText';
-import zIndex from '../../../theme/shared/zIndex';
-
-// This seems to get a decent approximation of the necessary width (without resorting to measuring
-//  the element with JS)
-const getPrefixWidth = prefixLength => `calc(1.5rem + (${prefixLength} * 0.5rem))`;
-
-const InputWrapper = styled.div`
-  position: relative;
-  font-size: ${({ theme }) => theme.fontSize('m')};
-`;
-
-const InputFieldContainer = styled.div`
-  position: relative;
-  width: 100%;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
-    max-width: 290px;
-  }
-`;
-
-const InputField = styled.input`${({ theme, error, prefixLength }) => css`
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  height: 48px;
-  padding: 1rem 2.4rem 1rem 1.5rem;
-  ${prefixLength > 0 ? `padding-left: ${getPrefixWidth(prefixLength)};` : ''}
-  background-color: ${theme.color('grey_light')};
-  border: 1px solid;
-  border-color: ${error ? theme.color('red') : theme.color('grey_medium')};
-  box-shadow: none;
-  appearance: none;
-  color: ${theme.color('black')};
-  border-radius: 0.5rem;
-  font-size: inherit;
-  z-index: 2;
-  font-family: ${theme.fontFamilies(theme.font.regular)};
-
-  :focus {
-    border: 1px solid ${theme.color('grey_for_forms')};
-  }
-
-  @media ${theme.allBreakpoints('M')} {
-    max-width: 290px;
-  }
-`}`;
-
-const ErrorIconWrapper = styled.div`
-  position: absolute;
-  right: 0.6rem;
-  background: url(${alertIcon}) center/contain no-repeat;
-  --iconSize: 19px;
-  width: var(--iconSize);
-  height: var(--iconSize);
-  z-index: 3;
-`;
-
-const Prefix = styled.div`
-  position: absolute;
-  left: 0;
-  top: 0;
-  ${zIndex('high')}
-  display: flex;
-  height: 100%;
-  width: ${({ length }) => getPrefixWidth(length)};
-  justify-content: center;
-  align-items: center;
-  color: ${({ theme }) => theme.color('grey_dark')};
-  font-weight: 700;
-  font-size: inherit;
-  margin-left: 2px; // Just doesn't look quite right without this.
-`;
+import {
+  InputWrapper,
+  InputFieldContainer,
+  InputField,
+  ErrorIconWrapper,
+  Prefix
+} from './Input.style';
 
 const Input = React.forwardRef(
   (
diff --git a/src/components/Atoms/Input/Input.style.js b/src/components/Atoms/Input/Input.style.js
new file mode 100644
index 000000000..0b36cc04c
--- /dev/null
+++ b/src/components/Atoms/Input/Input.style.js
@@ -0,0 +1,86 @@
+import styled, { css } from 'styled-components';
+import alertIcon from './assets/error-alert-icon-red.svg';
+import zIndex from '../../../theme/shared/zIndex';
+
+// This seems to get a decent approximation of the necessary width (without resorting to measuring
+//  the element with JS)
+
+const getPrefixWidth = prefixLength => `calc(1.5rem + (${prefixLength} * 0.5rem))`;
+
+const InputWrapper = styled.div`
+  position: relative;
+  font-size: ${({ theme }) => theme.fontSize('m')};
+`;
+
+const InputFieldContainer = styled.div`
+  position: relative;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    max-width: 290px;
+  }
+`;
+
+const InputField = styled.input`${({ theme, error, prefixLength }) => css`
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 48px;
+  padding: 1rem 2.4rem 1rem 1.5rem;
+  ${prefixLength > 0 ? `padding-left: ${getPrefixWidth(prefixLength)};` : ''}
+  background-color: ${theme.color('grey_light')};
+  border: 1px solid;
+  border-color: ${error ? theme.color('red') : theme.color('grey_medium')};
+  box-shadow: none;
+  appearance: none;
+  color: ${theme.color('black')};
+  border-radius: 0.5rem;
+  font-size: inherit;
+  z-index: 2;
+  font-family: ${theme.fontFamilies(theme.font.regular)};
+
+  :focus {
+    border: 1px solid ${theme.color('grey_for_forms')};
+  }
+
+  @media ${theme.allBreakpoints('M')} {
+    max-width: 290px;
+  }
+`}`;
+
+const ErrorIconWrapper = styled.div`
+  position: absolute;
+  right: 0.6rem;
+  background: url(${alertIcon}) center/contain no-repeat;
+  --iconSize: 19px;
+  width: var(--iconSize);
+  height: var(--iconSize);
+  z-index: 3;
+`;
+
+const Prefix = styled.div`
+  position: absolute;
+  left: 0;
+  top: 0;
+  ${zIndex('high')}
+  display: flex;
+  height: 100%;
+  width: ${({ length }) => getPrefixWidth(length)};
+  justify-content: center;
+  align-items: center;
+  color: ${({ theme }) => theme.color('grey_dark')};
+  font-weight: 700;
+  font-size: inherit;
+  margin-left: 2px; // Just doesn't look quite right without this.
+`;
+
+export {
+  InputWrapper,
+  InputFieldContainer,
+  InputField,
+  ErrorIconWrapper,
+  Prefix
+};
diff --git a/src/components/Atoms/Label/Label.js b/src/components/Atoms/Label/Label.js
index 02f276316..ad136b7af 100644
--- a/src/components/Atoms/Label/Label.js
+++ b/src/components/Atoms/Label/Label.js
@@ -1,38 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 
-import Text from '../Text/Text';
-import hideVisually from '../../../theme/shared/hideVisually';
-
-const LabelElement = styled.label`
-  width: 100%;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  color: ${({ theme, errorMsg }) => (errorMsg ? theme.color('red') : theme.color('grey_label'))};
-
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
-    max-width: 290px;
-  }
-
-  ${({ optional, theme }) => optional === true && `
-  :after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    content: 'Optional';
-    font-family: ${theme.fontFamilies(theme.font.regular)};
-    font-size: ${theme.fontSize('s')};
-  }`}
-`;
-
-const VisibleText = styled(Text)`
-  margin-bottom: 0.5rem;
-  font-weight: normal;
-`;
-
-const HiddenText = styled(Text)`${hideVisually}`;
+import {
+  LabelElement,
+  VisibleText,
+  HiddenText
+} from './Label.style';
 
 // eslint-disable-next-line react/prop-types
 const LabelText = ({
diff --git a/src/components/Atoms/Label/Label.md b/src/components/Atoms/Label/Label.md
index b875d76e3..bb10eee6a 100644
--- a/src/components/Atoms/Label/Label.md
+++ b/src/components/Atoms/Label/Label.md
@@ -1,5 +1,7 @@
 ```js
-<Label label="Wrapping a basic text input">
+<Label
+  label="Wrapping a basic text input"
+>
   <input type="text" name="field-wrapper-test" style={{maxWidth: '300px'}} />
 </Label>
 ```
@@ -15,7 +17,10 @@ const StyledInput = styled.input`
   border-width: 1px;
 `;
 
-<Label label="Wrapping a styled input" optional>
+<Label
+  label="Wrapping a styled input"
+  optional
+>
   <StyledInput type="text" name="field-wrapper-test-1" />
 </Label>
 ```
diff --git a/src/components/Atoms/Label/Label.style.js b/src/components/Atoms/Label/Label.style.js
new file mode 100644
index 000000000..772ca419d
--- /dev/null
+++ b/src/components/Atoms/Label/Label.style.js
@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+import hideVisually from '../../../theme/shared/hideVisually';
+import Text from '../Text/Text';
+
+const LabelElement = styled.label`
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  color: ${({ theme, errorMsg }) => (errorMsg ? theme.color('red') : theme.color('grey_label'))};
+  border: 1px solid green;
+
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    max-width: 290px;
+    border: 1px solid red;
+  }
+
+  ${({ optional, theme }) => optional === true && `
+  :after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    content: 'Optional';
+    font-family: ${theme.fontFamilies(theme.font.regular)};
+    font-size: ${theme.fontSize('s')};
+  }`}
+`;
+
+const VisibleText = styled(Text)`
+  margin-bottom: 0.5rem;
+  font-weight: normal;
+`;
+
+const HiddenText = styled(Text)`${hideVisually}`;
+
+export {
+  LabelElement,
+  VisibleText,
+  HiddenText
+};

From 5dcfb04007d4ff4343b11ba85f596403b36b63ff Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Mon, 17 Mar 2025 17:03:13 +0000
Subject: [PATCH 04/14] remove Label changes

---
 src/components/Atoms/Label/Label.js       | 34 ++++++++++++++++---
 src/components/Atoms/Label/Label.style.js | 40 -----------------------
 2 files changed, 29 insertions(+), 45 deletions(-)
 delete mode 100644 src/components/Atoms/Label/Label.style.js

diff --git a/src/components/Atoms/Label/Label.js b/src/components/Atoms/Label/Label.js
index ad136b7af..2b8a38a93 100644
--- a/src/components/Atoms/Label/Label.js
+++ b/src/components/Atoms/Label/Label.js
@@ -1,11 +1,35 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
 
-import {
-  LabelElement,
-  VisibleText,
-  HiddenText
-} from './Label.style';
+import Text from '../Text/Text';
+import spacing from '../../../theme/shared/spacing';
+import hideVisually from '../../../theme/shared/hideVisually';
+
+const LabelElement = styled.label`
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  color: ${({ theme, errorMsg }) => (errorMsg ? theme.color('red') : theme.color('grey_label'))};
+
+  ${({ optional, theme }) => optional === true && `
+  :after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    content: 'Optional';
+    font-family: ${theme.fontFamilies(theme.font.regular)};
+    font-size: ${theme.fontSize('s')};
+  }`}
+`;
+
+const VisibleText = styled(Text)`
+  margin-bottom: ${spacing('sm')};
+  font-weight: normal;
+`;
+
+const HiddenText = styled(Text)`${hideVisually}`;
 
 // eslint-disable-next-line react/prop-types
 const LabelText = ({
diff --git a/src/components/Atoms/Label/Label.style.js b/src/components/Atoms/Label/Label.style.js
deleted file mode 100644
index 772ca419d..000000000
--- a/src/components/Atoms/Label/Label.style.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import styled from 'styled-components';
-import hideVisually from '../../../theme/shared/hideVisually';
-import Text from '../Text/Text';
-
-const LabelElement = styled.label`
-  width: 100%;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  color: ${({ theme, errorMsg }) => (errorMsg ? theme.color('red') : theme.color('grey_label'))};
-  border: 1px solid green;
-
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
-    max-width: 290px;
-    border: 1px solid red;
-  }
-
-  ${({ optional, theme }) => optional === true && `
-  :after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    content: 'Optional';
-    font-family: ${theme.fontFamilies(theme.font.regular)};
-    font-size: ${theme.fontSize('s')};
-  }`}
-`;
-
-const VisibleText = styled(Text)`
-  margin-bottom: 0.5rem;
-  font-weight: normal;
-`;
-
-const HiddenText = styled(Text)`${hideVisually}`;
-
-export {
-  LabelElement,
-  VisibleText,
-  HiddenText
-};

From d3571da160f069fd707ebba2ed11ac34a0ea0720 Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Mon, 17 Mar 2025 17:03:42 +0000
Subject: [PATCH 05/14] snaps and lint

---
 src/components/Atoms/Input/input.test.js      |  6 -----
 .../Select/__snapshots__/Select.test.js.snap  |  6 -----
 .../Atoms/TextArea/TextArea.test.js           |  6 -----
 .../TextInputWithDropdown.test.js.snap        | 18 --------------
 .../__snapshots__/SchoolLookup.test.js.snap   |  6 -----
 .../Molecules/SearchInput/SearchInput.test.js |  6 -----
 .../__snapshots__/Typeahead.test.js.snap      |  6 -----
 .../Donate/__snapshots__/Donate.test.js.snap  | 24 -------------------
 .../__snapshots__/EmailSignUp.test.js.snap    |  6 -----
 .../Organisms/Membership/Membership.test.js   |  6 -----
 10 files changed, 90 deletions(-)

diff --git a/src/components/Atoms/Input/input.test.js b/src/components/Atoms/Input/input.test.js
index 23de3ef89..2e949cdc0 100644
--- a/src/components/Atoms/Input/input.test.js
+++ b/src/components/Atoms/Input/input.test.js
@@ -88,12 +88,6 @@ it('renders correctly', () => {
       border: 1px solid #666;
     }
 
-    @media (min-width:740px) {
-      .c0 {
-        max-width: 290px;
-      }
-    }
-
     @media (min-width:740px) {
       .c4 {
         max-width: 290px;
diff --git a/src/components/Atoms/Select/__snapshots__/Select.test.js.snap b/src/components/Atoms/Select/__snapshots__/Select.test.js.snap
index b2c63e217..dd1e7194d 100644
--- a/src/components/Atoms/Select/__snapshots__/Select.test.js.snap
+++ b/src/components/Atoms/Select/__snapshots__/Select.test.js.snap
@@ -55,12 +55,6 @@ exports[`renders correctly 1`] = `
   border: 1px solid #666;
 }
 
-@media (min-width:740px) {
-  .c0 {
-    max-width: 290px;
-  }
-}
-
 @media (min-width:740px) {
   .c3 {
     max-width: 290px;
diff --git a/src/components/Atoms/TextArea/TextArea.test.js b/src/components/Atoms/TextArea/TextArea.test.js
index 8a884e167..458506706 100644
--- a/src/components/Atoms/TextArea/TextArea.test.js
+++ b/src/components/Atoms/TextArea/TextArea.test.js
@@ -81,12 +81,6 @@ it('renders correctly', () => {
       visibility: hidden;
     }
 
-    @media (min-width:740px) {
-      .c0 {
-        max-width: 290px;
-      }
-    }
-
     <label
       className="c0"
       htmlFor="Please leave your comment here"
diff --git a/src/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap b/src/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap
index e92cac0bd..79ca19efa 100644
--- a/src/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap
+++ b/src/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap
@@ -77,12 +77,6 @@ exports[`renders correctly with no value and no options 1`] = `
   position: relative;
 }
 
-@media (min-width:740px) {
-  .c1 {
-    max-width: 290px;
-  }
-}
-
 @media (min-width:740px) {
   .c5 {
     max-width: 290px;
@@ -217,12 +211,6 @@ exports[`renders correctly with value and no options 1`] = `
   position: relative;
 }
 
-@media (min-width:740px) {
-  .c1 {
-    max-width: 290px;
-  }
-}
-
 @media (min-width:740px) {
   .c5 {
     max-width: 290px;
@@ -390,12 +378,6 @@ exports[`renders correctly with value and options 1`] = `
   background-color: #F4F3F5;
 }
 
-@media (min-width:740px) {
-  .c1 {
-    max-width: 290px;
-  }
-}
-
 @media (min-width:740px) {
   .c5 {
     max-width: 290px;
diff --git a/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap b/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap
index 0f6a9e58c..76afd25bf 100644
--- a/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap
+++ b/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap
@@ -77,12 +77,6 @@ exports[`renders correctly 1`] = `
   position: relative;
 }
 
-@media (min-width:740px) {
-  .c1 {
-    max-width: 290px;
-  }
-}
-
 @media (min-width:740px) {
   .c5 {
     max-width: 290px;
diff --git a/src/components/Molecules/SearchInput/SearchInput.test.js b/src/components/Molecules/SearchInput/SearchInput.test.js
index df5ae413e..423cdbcd4 100644
--- a/src/components/Molecules/SearchInput/SearchInput.test.js
+++ b/src/components/Molecules/SearchInput/SearchInput.test.js
@@ -133,12 +133,6 @@ it('renders correctly', () => {
       border: 0;
     }
 
-    @media (min-width:740px) {
-      .c4 {
-        max-width: 290px;
-      }
-    }
-
     @media (min-width:740px) {
       .c9 {
         max-width: 290px;
diff --git a/src/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap b/src/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap
index 45b83399d..30c065ff5 100644
--- a/src/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap
+++ b/src/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap
@@ -77,12 +77,6 @@ exports[`renders correctly 1`] = `
   position: relative;
 }
 
-@media (min-width:740px) {
-  .c1 {
-    max-width: 290px;
-  }
-}
-
 @media (min-width:740px) {
   .c5 {
     max-width: 290px;
diff --git a/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap b/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap
index 6a9502320..274ae62ef 100644
--- a/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap
+++ b/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap
@@ -431,12 +431,6 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   }
 }
 
-@media (min-width:740px) {
-  .c18 {
-    max-width: 290px;
-  }
-}
-
 @media (min-width:740px) {
   .c23 {
     max-width: 290px;
@@ -1106,12 +1100,6 @@ exports[`Monthly donation renders correctly 1`] = `
   }
 }
 
-@media (min-width:740px) {
-  .c19 {
-    max-width: 290px;
-  }
-}
-
 @media (min-width:740px) {
   .c24 {
     max-width: 290px;
@@ -1769,12 +1757,6 @@ exports[`Single donation renders correctly 1`] = `
   }
 }
 
-@media (min-width:740px) {
-  .c12 {
-    max-width: 290px;
-  }
-}
-
 @media (min-width:740px) {
   .c17 {
     max-width: 290px;
@@ -2442,12 +2424,6 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   }
 }
 
-@media (min-width:740px) {
-  .c12 {
-    max-width: 290px;
-  }
-}
-
 @media (min-width:740px) {
   .c17 {
     max-width: 290px;
diff --git a/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap b/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap
index 47a888f9c..c7af37047 100644
--- a/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap
+++ b/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap
@@ -234,12 +234,6 @@ exports[`renders correctly 1`] = `
   }
 }
 
-@media (min-width:740px) {
-  .c8 {
-    max-width: 290px;
-  }
-}
-
 @media (min-width:740px) {
   .c12 {
     max-width: 290px;
diff --git a/src/components/Organisms/Membership/Membership.test.js b/src/components/Organisms/Membership/Membership.test.js
index c9c687cf2..18d594d3b 100644
--- a/src/components/Organisms/Membership/Membership.test.js
+++ b/src/components/Organisms/Membership/Membership.test.js
@@ -339,12 +339,6 @@ it('renders correctly', () => {
       background-color: #961D35;
     }
 
-    @media (min-width:740px) {
-      .c14 {
-        max-width: 290px;
-      }
-    }
-
     @media (min-width:740px) {
       .c18 {
         max-width: 290px;

From 32bceadec9b066a5eba571b169028aa1340d8a1a Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Mon, 17 Mar 2025 17:17:48 +0000
Subject: [PATCH 06/14] remove other Label changes

---
 src/components/Atoms/Label/Label.md | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/Atoms/Label/Label.md b/src/components/Atoms/Label/Label.md
index bb10eee6a..3d8a41e4d 100644
--- a/src/components/Atoms/Label/Label.md
+++ b/src/components/Atoms/Label/Label.md
@@ -1,7 +1,5 @@
 ```js
-<Label
-  label="Wrapping a basic text input"
->
+<Label label="Wrapping a basic text input">
   <input type="text" name="field-wrapper-test" style={{maxWidth: '300px'}} />
 </Label>
 ```
@@ -17,10 +15,7 @@ const StyledInput = styled.input`
   border-width: 1px;
 `;
 
-<Label
-  label="Wrapping a styled input"
-  optional
->
+<Label label="Wrapping a styled input">
   <StyledInput type="text" name="field-wrapper-test-1" />
 </Label>
 ```

From 3ea7e670ea4e472546a47087fde033dd8f541461 Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Mon, 17 Mar 2025 17:36:12 +0000
Subject: [PATCH 07/14] create Container to contain Label and Input

---
 src/components/Atoms/Input/Input.js       | 77 ++++++++++++-----------
 src/components/Atoms/Input/Input.style.js | 18 +++---
 2 files changed, 49 insertions(+), 46 deletions(-)

diff --git a/src/components/Atoms/Input/Input.js b/src/components/Atoms/Input/Input.js
index bac1075ec..755503cb2 100644
--- a/src/components/Atoms/Input/Input.js
+++ b/src/components/Atoms/Input/Input.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import Label from '../Label/Label';
 import ErrorText from '../ErrorText/ErrorText';
 import {
+  Container,
   InputWrapper,
   InputFieldContainer,
   InputField,
@@ -29,43 +30,45 @@ const Input = React.forwardRef(
     },
     ref
   ) => (
-    <Label
-      className={className}
-      htmlFor={id}
-      label={label}
-      hideLabel={!showLabel}
-      errorMsg={errorMsg}
-      optional={optional}
-      {...labelProps}
-    >
-      <InputWrapper error={Boolean(errorMsg)}>
-        {prefix && <Prefix length={prefix.length}>{prefix}</Prefix>}
-        <InputFieldContainer>
-          <InputField
-            id={id}
-            type={type}
-            placeholder={placeholder}
-            error={Boolean(errorMsg)}
-            aria-describedby={hasAria ? id : undefined}
-            ref={ref}
-            prefixLength={prefix.length}
-            required={optional === false}
-            {...rest}
-          />
-          {errorMsg && <ErrorIconWrapper />}
-        </InputFieldContainer>
-      </InputWrapper>
-      {errorMsg
-        && (
-        <ErrorText
-          size="sm"
-          weight="bold"
-          data-test="error-message"
-        >
-          {errorMsg}
-        </ErrorText>
-        )}
-    </Label>
+    <Container>
+      <Label
+        className={className}
+        htmlFor={id}
+        label={label}
+        hideLabel={!showLabel}
+        errorMsg={errorMsg}
+        optional={optional}
+        {...labelProps}
+      >
+        <InputWrapper error={Boolean(errorMsg)}>
+          {prefix && <Prefix length={prefix.length}>{prefix}</Prefix>}
+          <InputFieldContainer>
+            <InputField
+              id={id}
+              type={type}
+              placeholder={placeholder}
+              error={Boolean(errorMsg)}
+              aria-describedby={hasAria ? id : undefined}
+              ref={ref}
+              prefixLength={prefix.length}
+              required={optional === false}
+              {...rest}
+            />
+            {errorMsg && <ErrorIconWrapper />}
+          </InputFieldContainer>
+        </InputWrapper>
+        {errorMsg
+          && (
+          <ErrorText
+            size="sm"
+            weight="bold"
+            data-test="error-message"
+          >
+            {errorMsg}
+          </ErrorText>
+          )}
+      </Label>
+    </Container>
   )
 );
 
diff --git a/src/components/Atoms/Input/Input.style.js b/src/components/Atoms/Input/Input.style.js
index 0b36cc04c..e3e91c8df 100644
--- a/src/components/Atoms/Input/Input.style.js
+++ b/src/components/Atoms/Input/Input.style.js
@@ -7,6 +7,13 @@ import zIndex from '../../../theme/shared/zIndex';
 
 const getPrefixWidth = prefixLength => `calc(1.5rem + (${prefixLength} * 0.5rem))`;
 
+const Container = styled.div`
+  width: 100%;
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    max-width: 290px;
+  }
+`;
+
 const InputWrapper = styled.div`
   position: relative;
   font-size: ${({ theme }) => theme.fontSize('m')};
@@ -18,10 +25,6 @@ const InputFieldContainer = styled.div`
   display: flex;
   justify-content: flex-end;
   align-items: center;
-
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
-    max-width: 290px;
-  }
 `;
 
 const InputField = styled.input`${({ theme, error, prefixLength }) => css`
@@ -45,10 +48,6 @@ const InputField = styled.input`${({ theme, error, prefixLength }) => css`
   :focus {
     border: 1px solid ${theme.color('grey_for_forms')};
   }
-
-  @media ${theme.allBreakpoints('M')} {
-    max-width: 290px;
-  }
 `}`;
 
 const ErrorIconWrapper = styled.div`
@@ -78,9 +77,10 @@ const Prefix = styled.div`
 `;
 
 export {
+  Container,
   InputWrapper,
   InputFieldContainer,
   InputField,
   ErrorIconWrapper,
-  Prefix
+  Prefix,
 };

From 839a34bbfabcec2746e12363a244553d01974338 Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Mon, 17 Mar 2025 17:36:37 +0000
Subject: [PATCH 08/14] snaps and lint

---
 src/components/Atoms/Input/Input.style.js     |   2 +-
 src/components/Atoms/Input/input.test.js      |  84 +-
 .../TextInputWithDropdown.test.js.snap        | 310 ++++----
 .../__snapshots__/SchoolLookup.test.js.snap   |  92 +--
 .../Molecules/SearchInput/SearchInput.test.js |  98 +--
 .../__snapshots__/Typeahead.test.js.snap      |  92 +--
 .../Donate/__snapshots__/Donate.test.js.snap  | 734 +++++++++---------
 .../__snapshots__/EmailSignUp.test.js.snap    | 230 +++---
 .../Organisms/Membership/Membership.test.js   | 344 ++++----
 9 files changed, 1022 insertions(+), 964 deletions(-)

diff --git a/src/components/Atoms/Input/Input.style.js b/src/components/Atoms/Input/Input.style.js
index e3e91c8df..d0220295a 100644
--- a/src/components/Atoms/Input/Input.style.js
+++ b/src/components/Atoms/Input/Input.style.js
@@ -82,5 +82,5 @@ export {
   InputFieldContainer,
   InputField,
   ErrorIconWrapper,
-  Prefix,
+  Prefix
 };
diff --git a/src/components/Atoms/Input/input.test.js b/src/components/Atoms/Input/input.test.js
index 2e949cdc0..2b6043b9f 100644
--- a/src/components/Atoms/Input/input.test.js
+++ b/src/components/Atoms/Input/input.test.js
@@ -16,7 +16,7 @@ it('renders correctly', () => {
   ).toJSON();
 
   expect(tree).toMatchInlineSnapshot(`
-    .c1 {
+    .c2 {
       font-size: 1rem;
       line-height: 1rem;
       text-transform: inherit;
@@ -24,7 +24,7 @@ it('renders correctly', () => {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
     }
 
-    .c0 {
+    .c1 {
       width: 100%;
       position: relative;
       display: -webkit-box;
@@ -37,17 +37,21 @@ it('renders correctly', () => {
       color: #5C5C5E;
     }
 
-    .c2 {
+    .c3 {
       margin-bottom: 0.5rem;
       font-weight: normal;
     }
 
-    .c3 {
+    .c0 {
+      width: 100%;
+    }
+
+    .c4 {
       position: relative;
       font-size: 1.25rem;
     }
 
-    .c4 {
+    .c5 {
       position: relative;
       width: 100%;
       display: -webkit-box;
@@ -64,7 +68,7 @@ it('renders correctly', () => {
       align-items: center;
     }
 
-    .c5 {
+    .c6 {
       position: relative;
       box-sizing: border-box;
       width: 100%;
@@ -84,56 +88,54 @@ it('renders correctly', () => {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
     }
 
-    .c5:focus {
+    .c6:focus {
       border: 1px solid #666;
     }
 
     @media (min-width:740px) {
-      .c4 {
-        max-width: 290px;
-      }
-    }
-
-    @media (min-width:740px) {
-      .c5 {
+      .c0 {
         max-width: 290px;
       }
     }
 
-    <label
+    <div
       className="c0"
-      htmlFor="Accessibility info go here"
     >
-      <span
-        className="c1 c2"
-        color="inherit"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "Label",
-          }
-        }
-        size="s"
-      />
-      <div
-        className="c3"
+      <label
+        className="c1"
+        htmlFor="Accessibility info go here"
       >
-        
+        <span
+          className="c2 c3"
+          color="inherit"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "Label",
+            }
+          }
+          size="s"
+        />
         <div
           className="c4"
         >
-          <input
-            aria-describedby="Accessibility info go here"
-            className="c5"
-            id="Accessibility info go here"
-            name="fullname"
-            placeholder="This is the hint text"
-            required={false}
-            type="text"
-          />
           
+          <div
+            className="c5"
+          >
+            <input
+              aria-describedby="Accessibility info go here"
+              className="c6"
+              id="Accessibility info go here"
+              name="fullname"
+              placeholder="This is the hint text"
+              required={false}
+              type="text"
+            />
+            
+          </div>
         </div>
-      </div>
-      
-    </label>
+        
+      </label>
+    </div>
   `);
 });
diff --git a/src/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap b/src/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap
index 79ca19efa..4a1f28a73 100644
--- a/src/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap
+++ b/src/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly with no value and no options 1`] = `
-.c2 {
+.c3 {
   font-size: 1rem;
   line-height: 1rem;
   text-transform: inherit;
@@ -9,7 +9,7 @@ exports[`renders correctly with no value and no options 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c1 {
+.c2 {
   width: 100%;
   position: relative;
   display: -webkit-box;
@@ -22,17 +22,21 @@ exports[`renders correctly with no value and no options 1`] = `
   color: #5C5C5E;
 }
 
-.c3 {
+.c4 {
   margin-bottom: 0.5rem;
   font-weight: normal;
 }
 
-.c4 {
+.c1 {
+  width: 100%;
+}
+
+.c5 {
   position: relative;
   font-size: 1.25rem;
 }
 
-.c5 {
+.c6 {
   position: relative;
   width: 100%;
   display: -webkit-box;
@@ -49,7 +53,7 @@ exports[`renders correctly with no value and no options 1`] = `
   align-items: center;
 }
 
-.c6 {
+.c7 {
   position: relative;
   box-sizing: border-box;
   width: 100%;
@@ -69,7 +73,7 @@ exports[`renders correctly with no value and no options 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c6:focus {
+.c7:focus {
   border: 1px solid #666;
 }
 
@@ -78,13 +82,7 @@ exports[`renders correctly with no value and no options 1`] = `
 }
 
 @media (min-width:740px) {
-  .c5 {
-    max-width: 290px;
-  }
-}
-
-@media (min-width:740px) {
-  .c6 {
+  .c1 {
     max-width: 290px;
   }
 }
@@ -93,49 +91,53 @@ exports[`renders correctly with no value and no options 1`] = `
   className="c0 TextInputWithDropdown"
   onKeyDown={[Function]}
 >
-  <label
-    className="c1 TextInputWithDropdown__input"
-    htmlFor="text-input-with-dropdown"
+  <div
+    className="c1"
   >
-    <span
-      className="c2 c3"
-      color="inherit"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "Search for bikes",
-        }
-      }
-      size="s"
-    />
-    <div
-      className="c4"
+    <label
+      className="c2 TextInputWithDropdown__input"
+      htmlFor="text-input-with-dropdown"
     >
-      
+      <span
+        className="c3 c4"
+        color="inherit"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Search for bikes",
+          }
+        }
+        size="s"
+      />
       <div
         className="c5"
       >
-        <input
-          aria-describedby="text-input-with-dropdown"
-          autoComplete="off"
-          className="c6"
-          id="text-input-with-dropdown"
-          name="query"
-          onChange={[Function]}
-          placeholder=""
-          required={false}
-          type="text"
-          value=""
-        />
         
+        <div
+          className="c6"
+        >
+          <input
+            aria-describedby="text-input-with-dropdown"
+            autoComplete="off"
+            className="c7"
+            id="text-input-with-dropdown"
+            name="query"
+            onChange={[Function]}
+            placeholder=""
+            required={false}
+            type="text"
+            value=""
+          />
+          
+        </div>
       </div>
-    </div>
-    
-  </label>
+      
+    </label>
+  </div>
 </div>
 `;
 
 exports[`renders correctly with value and no options 1`] = `
-.c2 {
+.c3 {
   font-size: 1rem;
   line-height: 1rem;
   text-transform: inherit;
@@ -143,7 +145,7 @@ exports[`renders correctly with value and no options 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c1 {
+.c2 {
   width: 100%;
   position: relative;
   display: -webkit-box;
@@ -156,17 +158,21 @@ exports[`renders correctly with value and no options 1`] = `
   color: #5C5C5E;
 }
 
-.c3 {
+.c4 {
   margin-bottom: 0.5rem;
   font-weight: normal;
 }
 
-.c4 {
+.c1 {
+  width: 100%;
+}
+
+.c5 {
   position: relative;
   font-size: 1.25rem;
 }
 
-.c5 {
+.c6 {
   position: relative;
   width: 100%;
   display: -webkit-box;
@@ -183,7 +189,7 @@ exports[`renders correctly with value and no options 1`] = `
   align-items: center;
 }
 
-.c6 {
+.c7 {
   position: relative;
   box-sizing: border-box;
   width: 100%;
@@ -203,7 +209,7 @@ exports[`renders correctly with value and no options 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c6:focus {
+.c7:focus {
   border: 1px solid #666;
 }
 
@@ -212,13 +218,7 @@ exports[`renders correctly with value and no options 1`] = `
 }
 
 @media (min-width:740px) {
-  .c5 {
-    max-width: 290px;
-  }
-}
-
-@media (min-width:740px) {
-  .c6 {
+  .c1 {
     max-width: 290px;
   }
 }
@@ -227,49 +227,53 @@ exports[`renders correctly with value and no options 1`] = `
   className="c0 TextInputWithDropdown"
   onKeyDown={[Function]}
 >
-  <label
-    className="c1 TextInputWithDropdown__input"
-    htmlFor="text-input-with-dropdown"
+  <div
+    className="c1"
   >
-    <span
-      className="c2 c3"
-      color="inherit"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "Search for bikes",
-        }
-      }
-      size="s"
-    />
-    <div
-      className="c4"
+    <label
+      className="c2 TextInputWithDropdown__input"
+      htmlFor="text-input-with-dropdown"
     >
-      
+      <span
+        className="c3 c4"
+        color="inherit"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Search for bikes",
+          }
+        }
+        size="s"
+      />
       <div
         className="c5"
       >
-        <input
-          aria-describedby="text-input-with-dropdown"
-          autoComplete="off"
-          className="c6"
-          id="text-input-with-dropdown"
-          name="query"
-          onChange={[Function]}
-          placeholder=""
-          required={false}
-          type="text"
-          value="bikes"
-        />
         
+        <div
+          className="c6"
+        >
+          <input
+            aria-describedby="text-input-with-dropdown"
+            autoComplete="off"
+            className="c7"
+            id="text-input-with-dropdown"
+            name="query"
+            onChange={[Function]}
+            placeholder=""
+            required={false}
+            type="text"
+            value="bikes"
+          />
+          
+        </div>
       </div>
-    </div>
-    
-  </label>
+      
+    </label>
+  </div>
 </div>
 `;
 
 exports[`renders correctly with value and options 1`] = `
-.c2 {
+.c3 {
   font-size: 1rem;
   line-height: 1rem;
   text-transform: inherit;
@@ -277,7 +281,7 @@ exports[`renders correctly with value and options 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c1 {
+.c2 {
   width: 100%;
   position: relative;
   display: -webkit-box;
@@ -290,17 +294,21 @@ exports[`renders correctly with value and options 1`] = `
   color: #5C5C5E;
 }
 
-.c3 {
+.c4 {
   margin-bottom: 0.5rem;
   font-weight: normal;
 }
 
-.c4 {
+.c1 {
+  width: 100%;
+}
+
+.c5 {
   position: relative;
   font-size: 1.25rem;
 }
 
-.c5 {
+.c6 {
   position: relative;
   width: 100%;
   display: -webkit-box;
@@ -317,7 +325,7 @@ exports[`renders correctly with value and options 1`] = `
   align-items: center;
 }
 
-.c6 {
+.c7 {
   position: relative;
   box-sizing: border-box;
   width: 100%;
@@ -337,7 +345,7 @@ exports[`renders correctly with value and options 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c6:focus {
+.c7:focus {
   border: 1px solid #666;
 }
 
@@ -345,7 +353,7 @@ exports[`renders correctly with value and options 1`] = `
   position: relative;
 }
 
-.c7 {
+.c8 {
   z-index: 3;
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   position: absolute;
@@ -358,40 +366,34 @@ exports[`renders correctly with value and options 1`] = `
   width: 100%;
 }
 
-.c8 {
+.c9 {
   list-style: none;
   padding: 0;
   margin: 0;
 }
 
-.c9 {
+.c10 {
   padding: 0.5rem;
 }
 
-.c10 {
+.c11 {
   cursor: pointer;
   border-top: 1px solid #F4F3F5;
 }
 
-.c10:hover,
-.c10:focus {
+.c11:hover,
+.c11:focus {
   background-color: #F4F3F5;
 }
 
 @media (min-width:740px) {
-  .c5 {
-    max-width: 290px;
-  }
-}
-
-@media (min-width:740px) {
-  .c6 {
+  .c1 {
     max-width: 290px;
   }
 }
 
 @media (min-width:740px) {
-  .c7 {
+  .c8 {
     max-width: 500px;
   }
 }
@@ -400,55 +402,59 @@ exports[`renders correctly with value and options 1`] = `
   className="c0 TextInputWithDropdown"
   onKeyDown={[Function]}
 >
-  <label
-    className="c1 TextInputWithDropdown__input"
-    htmlFor="text-input-with-dropdown"
+  <div
+    className="c1"
   >
-    <span
-      className="c2 c3"
-      color="inherit"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "Search for bikes",
-        }
-      }
-      size="s"
-    />
-    <div
-      className="c4"
+    <label
+      className="c2 TextInputWithDropdown__input"
+      htmlFor="text-input-with-dropdown"
     >
-      
+      <span
+        className="c3 c4"
+        color="inherit"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Search for bikes",
+          }
+        }
+        size="s"
+      />
       <div
         className="c5"
       >
-        <input
-          aria-describedby="text-input-with-dropdown"
-          autoComplete="off"
-          className="c6"
-          id="text-input-with-dropdown"
-          name="query"
-          onChange={[Function]}
-          placeholder=""
-          required={false}
-          type="text"
-          value="c"
-        />
         
+        <div
+          className="c6"
+        >
+          <input
+            aria-describedby="text-input-with-dropdown"
+            autoComplete="off"
+            className="c7"
+            id="text-input-with-dropdown"
+            name="query"
+            onChange={[Function]}
+            placeholder=""
+            required={false}
+            type="text"
+            value="c"
+          />
+          
+        </div>
       </div>
-    </div>
-    
-  </label>
+      
+    </label>
+  </div>
   <div
-    className="c7 TextInputWithDropdown__options"
+    className="c8 TextInputWithDropdown__options"
   >
     <ul
-      className="c8"
+      className="c9"
       onBlur={[Function]}
       role="listbox"
     >
       <li
         aria-selected={false}
-        className="c9 c10"
+        className="c10 c11"
         id="option-0"
         onClick={[Function]}
         onKeyPress={[Function]}
@@ -456,7 +462,7 @@ exports[`renders correctly with value and options 1`] = `
         tabIndex="-1"
       >
         <span
-          className="c2"
+          className="c3"
           color="inherit"
           size="s"
         >
@@ -465,7 +471,7 @@ exports[`renders correctly with value and options 1`] = `
       </li>
       <li
         aria-selected={false}
-        className="c9 c10"
+        className="c10 c11"
         id="option-1"
         onClick={[Function]}
         onKeyPress={[Function]}
@@ -473,7 +479,7 @@ exports[`renders correctly with value and options 1`] = `
         tabIndex="-1"
       >
         <span
-          className="c2"
+          className="c3"
           color="inherit"
           size="s"
         >
@@ -482,7 +488,7 @@ exports[`renders correctly with value and options 1`] = `
       </li>
       <li
         aria-selected={false}
-        className="c9 c10"
+        className="c10 c11"
         id="option-2"
         onClick={[Function]}
         onKeyPress={[Function]}
@@ -490,7 +496,7 @@ exports[`renders correctly with value and options 1`] = `
         tabIndex="-1"
       >
         <span
-          className="c2"
+          className="c3"
           color="inherit"
           size="s"
         >
@@ -499,7 +505,7 @@ exports[`renders correctly with value and options 1`] = `
       </li>
       <li
         aria-selected={false}
-        className="c9 c10"
+        className="c10 c11"
         id="option-3"
         onClick={[Function]}
         onKeyPress={[Function]}
@@ -507,7 +513,7 @@ exports[`renders correctly with value and options 1`] = `
         tabIndex="-1"
       >
         <span
-          className="c2"
+          className="c3"
           color="inherit"
           size="s"
         >
diff --git a/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap b/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap
index 76afd25bf..794c3edc7 100644
--- a/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap
+++ b/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-.c2 {
+.c3 {
   font-size: 1rem;
   line-height: 1rem;
   text-transform: inherit;
@@ -9,7 +9,7 @@ exports[`renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c1 {
+.c2 {
   width: 100%;
   position: relative;
   display: -webkit-box;
@@ -22,17 +22,21 @@ exports[`renders correctly 1`] = `
   color: #5C5C5E;
 }
 
-.c3 {
+.c4 {
   margin-bottom: 0.5rem;
   font-weight: normal;
 }
 
-.c4 {
+.c1 {
+  width: 100%;
+}
+
+.c5 {
   position: relative;
   font-size: 1.25rem;
 }
 
-.c5 {
+.c6 {
   position: relative;
   width: 100%;
   display: -webkit-box;
@@ -49,7 +53,7 @@ exports[`renders correctly 1`] = `
   align-items: center;
 }
 
-.c6 {
+.c7 {
   position: relative;
   box-sizing: border-box;
   width: 100%;
@@ -69,7 +73,7 @@ exports[`renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c6:focus {
+.c7:focus {
   border: 1px solid #666;
 }
 
@@ -78,13 +82,7 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c5 {
-    max-width: 290px;
-  }
-}
-
-@media (min-width:740px) {
-  .c6 {
+  .c1 {
     max-width: 290px;
   }
 }
@@ -93,43 +91,47 @@ exports[`renders correctly 1`] = `
   className="c0 TextInputWithDropdown"
   onKeyDown={[Function]}
 >
-  <label
-    className="c1 TextInputWithDropdown__input"
-    htmlFor="school-lookup"
+  <div
+    className="c1"
   >
-    <span
-      className="c2 c3"
-      color="inherit"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "Enter the name or postcode of your school or nursery",
-        }
-      }
-      size="s"
-    />
-    <div
-      className="c4"
+    <label
+      className="c2 TextInputWithDropdown__input"
+      htmlFor="school-lookup"
     >
-      
+      <span
+        className="c3 c4"
+        color="inherit"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Enter the name or postcode of your school or nursery",
+          }
+        }
+        size="s"
+      />
       <div
         className="c5"
       >
-        <input
-          aria-describedby="school-lookup"
-          autoComplete="off"
-          className="c6"
-          defaultValue=""
-          id="school-lookup"
-          name="school-lookup"
-          onChange={[Function]}
-          placeholder="Type to start search"
-          required={false}
-          type="text"
-        />
         
+        <div
+          className="c6"
+        >
+          <input
+            aria-describedby="school-lookup"
+            autoComplete="off"
+            className="c7"
+            defaultValue=""
+            id="school-lookup"
+            name="school-lookup"
+            onChange={[Function]}
+            placeholder="Type to start search"
+            required={false}
+            type="text"
+          />
+          
+        </div>
       </div>
-    </div>
-    
-  </label>
+      
+    </label>
+  </div>
 </div>
 `;
diff --git a/src/components/Molecules/SearchInput/SearchInput.test.js b/src/components/Molecules/SearchInput/SearchInput.test.js
index 423cdbcd4..826a79606 100644
--- a/src/components/Molecules/SearchInput/SearchInput.test.js
+++ b/src/components/Molecules/SearchInput/SearchInput.test.js
@@ -15,7 +15,7 @@ it('renders correctly', () => {
   ).toJSON();
 
   expect(tree).toMatchInlineSnapshot(`
-    .c6 {
+    .c7 {
       font-size: 1rem;
       line-height: 1rem;
       text-transform: inherit;
@@ -23,7 +23,7 @@ it('renders correctly', () => {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
     }
 
-    .c4 {
+    .c5 {
       width: 100%;
       position: relative;
       display: -webkit-box;
@@ -36,7 +36,7 @@ it('renders correctly', () => {
       color: #5C5C5E;
     }
 
-    .c7 {
+    .c8 {
       border: 0;
       -webkit-clip: rect(0 0 0 0);
       clip: rect(0 0 0 0);
@@ -51,12 +51,16 @@ it('renders correctly', () => {
       width: 1px;
     }
 
-    .c8 {
+    .c4 {
+      width: 100%;
+    }
+
+    .c9 {
       position: relative;
       font-size: 1.25rem;
     }
 
-    .c9 {
+    .c10 {
       position: relative;
       width: 100%;
       display: -webkit-box;
@@ -73,7 +77,7 @@ it('renders correctly', () => {
       align-items: center;
     }
 
-    .c10 {
+    .c11 {
       position: relative;
       box-sizing: border-box;
       width: 100%;
@@ -93,7 +97,7 @@ it('renders correctly', () => {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
     }
 
-    .c10:focus {
+    .c11:focus {
       border: 1px solid #666;
     }
 
@@ -120,7 +124,7 @@ it('renders correctly', () => {
       padding: 0 0.5rem;
     }
 
-    .c5 input {
+    .c6 input {
       padding: 13px 0;
       margin: 0;
       max-width: 100%;
@@ -129,24 +133,18 @@ it('renders correctly', () => {
       background: none;
     }
 
-    .c5 input:focus {
+    .c6 input:focus {
       border: 0;
     }
 
     @media (min-width:740px) {
-      .c9 {
-        max-width: 290px;
-      }
-    }
-
-    @media (min-width:740px) {
-      .c10 {
+      .c4 {
         max-width: 290px;
       }
     }
 
     @media (min-width:740px) {
-      .c5 input {
+      .c6 input {
         height: 100px;
         font-size: 3rem;
       }
@@ -165,44 +163,48 @@ it('renders correctly', () => {
           <div
             className="c3"
           >
-            <label
-              className="c4 c5"
-              htmlFor="search"
+            <div
+              className="c4"
             >
-              <span
-                className="c6 c7"
-                color="inherit"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "Search",
-                  }
-                }
-                size="s"
-              />
-              <div
-                className="c8"
+              <label
+                className="c5 c6"
+                htmlFor="search"
               >
-                
+                <span
+                  className="c7 c8"
+                  color="inherit"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "Search",
+                    }
+                  }
+                  size="s"
+                />
                 <div
                   className="c9"
                 >
-                  <input
-                    aria-describedby="search"
-                    className="c10"
-                    id="search"
-                    name="search"
-                    onChange={[Function]}
-                    placeholder=""
-                    required={false}
-                    role="searchbox"
-                    type="text"
-                    value=""
-                  />
                   
+                  <div
+                    className="c10"
+                  >
+                    <input
+                      aria-describedby="search"
+                      className="c11"
+                      id="search"
+                      name="search"
+                      onChange={[Function]}
+                      placeholder=""
+                      required={false}
+                      role="searchbox"
+                      type="text"
+                      value=""
+                    />
+                    
+                  </div>
                 </div>
-              </div>
-              
-            </label>
+                
+              </label>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap b/src/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap
index 30c065ff5..6836b9479 100644
--- a/src/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap
+++ b/src/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-.c2 {
+.c3 {
   font-size: 1rem;
   line-height: 1rem;
   text-transform: inherit;
@@ -9,7 +9,7 @@ exports[`renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c1 {
+.c2 {
   width: 100%;
   position: relative;
   display: -webkit-box;
@@ -22,17 +22,21 @@ exports[`renders correctly 1`] = `
   color: #5C5C5E;
 }
 
-.c3 {
+.c4 {
   margin-bottom: 0.5rem;
   font-weight: normal;
 }
 
-.c4 {
+.c1 {
+  width: 100%;
+}
+
+.c5 {
   position: relative;
   font-size: 1.25rem;
 }
 
-.c5 {
+.c6 {
   position: relative;
   width: 100%;
   display: -webkit-box;
@@ -49,7 +53,7 @@ exports[`renders correctly 1`] = `
   align-items: center;
 }
 
-.c6 {
+.c7 {
   position: relative;
   box-sizing: border-box;
   width: 100%;
@@ -69,7 +73,7 @@ exports[`renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c6:focus {
+.c7:focus {
   border: 1px solid #666;
 }
 
@@ -78,13 +82,7 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c5 {
-    max-width: 290px;
-  }
-}
-
-@media (min-width:740px) {
-  .c6 {
+  .c1 {
     max-width: 290px;
   }
 }
@@ -93,43 +91,47 @@ exports[`renders correctly 1`] = `
   className="c0 TextInputWithDropdown"
   onKeyDown={[Function]}
 >
-  <label
-    className="c1 TextInputWithDropdown__input"
-    htmlFor="typeahead-test"
+  <div
+    className="c1"
   >
-    <span
-      className="c2 c3"
-      color="inherit"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "Typeahead test",
-        }
-      }
-      size="s"
-    />
-    <div
-      className="c4"
+    <label
+      className="c2 TextInputWithDropdown__input"
+      htmlFor="typeahead-test"
     >
-      
+      <span
+        className="c3 c4"
+        color="inherit"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Typeahead test",
+          }
+        }
+        size="s"
+      />
       <div
         className="c5"
       >
-        <input
-          aria-describedby="typeahead-test"
-          autoComplete="off"
-          className="c6"
-          defaultValue=""
-          id="typeahead-test"
-          name="q"
-          onChange={[Function]}
-          placeholder="Type to start searching..."
-          required={false}
-          type="text"
-        />
         
+        <div
+          className="c6"
+        >
+          <input
+            aria-describedby="typeahead-test"
+            autoComplete="off"
+            className="c7"
+            defaultValue=""
+            id="typeahead-test"
+            name="q"
+            onChange={[Function]}
+            placeholder="Type to start searching..."
+            required={false}
+            type="text"
+          />
+          
+        </div>
       </div>
-    </div>
-    
-  </label>
+      
+    </label>
+  </div>
 </div>
 `;
diff --git a/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap b/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap
index 274ae62ef..0f270254f 100644
--- a/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap
+++ b/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap
@@ -33,7 +33,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c20 {
+.c21 {
   font-size: 1rem;
   line-height: 1rem;
   text-transform: inherit;
@@ -41,7 +41,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c18 {
+.c19 {
   width: 100%;
   position: relative;
   display: -webkit-box;
@@ -54,17 +54,21 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   color: #5C5C5E;
 }
 
-.c21 {
+.c22 {
   margin-bottom: 0.5rem;
   font-weight: normal;
 }
 
-.c22 {
+.c18 {
+  width: 100%;
+}
+
+.c23 {
   position: relative;
   font-size: 1.25rem;
 }
 
-.c23 {
+.c24 {
   position: relative;
   width: 100%;
   display: -webkit-box;
@@ -81,7 +85,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   align-items: center;
 }
 
-.c24 {
+.c25 {
   position: relative;
   box-sizing: border-box;
   width: 100%;
@@ -101,7 +105,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c24:focus {
+.c25:focus {
   border: 1px solid #666;
 }
 
@@ -213,7 +217,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   justify-content: center;
 }
 
-.c19 {
+.c20 {
   position: relative;
   -webkit-flex-basis: 50%;
   -ms-flex-preferred-size: 50%;
@@ -229,7 +233,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   display: block;
 }
 
-.c19 span {
+.c20 span {
   position: absolute;
   font-size: 20px;
   top: 50%;
@@ -242,7 +246,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   z-index: 3;
 }
 
-.c19 input {
+.c20 input {
   height: 48px;
   border: 2px solid #969598;
   background: #F4F3F5;
@@ -250,17 +254,17 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   padding: 0.5rem 1rem 0.5rem 2rem;
 }
 
-.c19 input:focus {
+.c20 input:focus {
   outline: none;
   border: 2px solid #969598;
 }
 
-.c25 {
+.c26 {
   line-height: 1.5;
   margin-top: 2rem;
 }
 
-.c26 {
+.c27 {
   width: 100%;
   margin: 2rem 0 2rem;
   color: #FFFFFF;
@@ -279,9 +283,9 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   appearance: none;
 }
 
-.c26:active,
-.c26:focus,
-.c26:hover {
+.c27:active,
+.c27:focus,
+.c27:hover {
   outline: none;
   background-color: #961D35;
 }
@@ -432,13 +436,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
 }
 
 @media (min-width:740px) {
-  .c23 {
-    max-width: 290px;
-  }
-}
-
-@media (min-width:740px) {
-  .c24 {
+  .c18 {
     max-width: 290px;
   }
 }
@@ -512,7 +510,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
 }
 
 @media (min-width:740px) {
-  .c19 {
+  .c20 {
     -webkit-flex-basis: 60%;
     -ms-flex-preferred-size: 60%;
     flex-basis: 60%;
@@ -520,7 +518,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
 }
 
 @media (min-width:740px) {
-  .c26 {
+  .c27 {
     padding: 1rem 2rem;
   }
 }
@@ -630,51 +628,55 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
           <div
             className="c17"
           >
-            <label
-              className="c18 c19"
-              htmlFor="mship-4--MoneyBuy-userInput"
+            <div
+              className="c18"
             >
-              <span
-                className="c20 c21"
-                color="inherit"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "£",
-                  }
-                }
-                size="s"
-              />
-              <div
-                className="c22"
+              <label
+                className="c19 c20"
+                htmlFor="mship-4--MoneyBuy-userInput"
               >
-                
+                <span
+                  className="c21 c22"
+                  color="inherit"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "£",
+                    }
+                  }
+                  size="s"
+                />
                 <div
                   className="c23"
                 >
-                  <input
-                    aria-describedby="mship-4--MoneyBuy-userInput"
-                    aria-label="Input a different amount"
-                    className="c24"
-                    id="mship-4--MoneyBuy-userInput"
-                    max="25000"
-                    min="1"
-                    name="membership_amount"
-                    onChange={[Function]}
-                    pattern="[^[0-9]+([,.][0-9]+)?$]"
-                    placeholder="0.00"
-                    required={false}
-                    step="0.01"
-                    type="string"
-                    value={345.67}
-                  />
                   
+                  <div
+                    className="c24"
+                  >
+                    <input
+                      aria-describedby="mship-4--MoneyBuy-userInput"
+                      aria-label="Input a different amount"
+                      className="c25"
+                      id="mship-4--MoneyBuy-userInput"
+                      max="25000"
+                      min="1"
+                      name="membership_amount"
+                      onChange={[Function]}
+                      pattern="[^[0-9]+([,.][0-9]+)?$]"
+                      placeholder="0.00"
+                      required={false}
+                      step="0.01"
+                      type="string"
+                      value={345.67}
+                    />
+                    
+                  </div>
                 </div>
-              </div>
-              
-            </label>
+                
+              </label>
+            </div>
           </div>
           <p
-            className="c25"
+            className="c26"
           >
             <strong>
               £345.67 
@@ -682,7 +684,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
             will help us fund amazing projects in the UK and around the world.
           </p>
           <button
-            className="c26"
+            className="c27"
             color="red"
             type="submit"
           >
@@ -737,7 +739,7 @@ exports[`Monthly donation renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c21 {
+.c22 {
   font-size: 1rem;
   line-height: 1rem;
   text-transform: inherit;
@@ -745,7 +747,7 @@ exports[`Monthly donation renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c19 {
+.c20 {
   width: 100%;
   position: relative;
   display: -webkit-box;
@@ -758,17 +760,21 @@ exports[`Monthly donation renders correctly 1`] = `
   color: #5C5C5E;
 }
 
-.c22 {
+.c23 {
   margin-bottom: 0.5rem;
   font-weight: normal;
 }
 
-.c23 {
+.c19 {
+  width: 100%;
+}
+
+.c24 {
   position: relative;
   font-size: 1.25rem;
 }
 
-.c24 {
+.c25 {
   position: relative;
   width: 100%;
   display: -webkit-box;
@@ -785,7 +791,7 @@ exports[`Monthly donation renders correctly 1`] = `
   align-items: center;
 }
 
-.c25 {
+.c26 {
   position: relative;
   box-sizing: border-box;
   width: 100%;
@@ -805,7 +811,7 @@ exports[`Monthly donation renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c25:focus {
+.c26:focus {
   border: 1px solid #666;
 }
 
@@ -921,7 +927,7 @@ exports[`Monthly donation renders correctly 1`] = `
   margin-right: 0.5rem;
 }
 
-.c20 {
+.c21 {
   position: relative;
   -webkit-flex-basis: 50%;
   -ms-flex-preferred-size: 50%;
@@ -937,7 +943,7 @@ exports[`Monthly donation renders correctly 1`] = `
   display: block;
 }
 
-.c20 span {
+.c21 span {
   position: absolute;
   font-size: 20px;
   top: 50%;
@@ -950,7 +956,7 @@ exports[`Monthly donation renders correctly 1`] = `
   z-index: 3;
 }
 
-.c20 input {
+.c21 input {
   height: 48px;
   border: 2px solid #969598;
   background: #F4F3F5;
@@ -958,17 +964,17 @@ exports[`Monthly donation renders correctly 1`] = `
   padding: 0.5rem 1rem 0.5rem 2rem;
 }
 
-.c20 input:focus {
+.c21 input:focus {
   outline: none;
   border: 2px solid #969598;
 }
 
-.c26 {
+.c27 {
   line-height: 1.5;
   margin-top: 2rem;
 }
 
-.c27 {
+.c28 {
   width: 100%;
   margin: 2rem 0 2rem;
   color: #FFFFFF;
@@ -987,9 +993,9 @@ exports[`Monthly donation renders correctly 1`] = `
   appearance: none;
 }
 
-.c27:active,
-.c27:focus,
-.c27:hover {
+.c28:active,
+.c28:focus,
+.c28:hover {
   outline: none;
   background-color: #961D35;
 }
@@ -1101,13 +1107,7 @@ exports[`Monthly donation renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c24 {
-    max-width: 290px;
-  }
-}
-
-@media (min-width:740px) {
-  .c25 {
+  .c19 {
     max-width: 290px;
   }
 }
@@ -1177,7 +1177,7 @@ exports[`Monthly donation renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c20 {
+  .c21 {
     -webkit-flex-basis: 60%;
     -ms-flex-preferred-size: 60%;
     flex-basis: 60%;
@@ -1185,7 +1185,7 @@ exports[`Monthly donation renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c27 {
+  .c28 {
     padding: 1rem 2rem;
   }
 }
@@ -1302,58 +1302,62 @@ exports[`Monthly donation renders correctly 1`] = `
             >
               Other amount
             </span>
-            <label
-              className="c19 c20"
-              htmlFor="mship-1--MoneyBuy-userInput"
+            <div
+              className="c19"
             >
-              <span
-                className="c21 c22"
-                color="inherit"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "£",
-                  }
-                }
-                size="s"
-              />
-              <div
-                className="c23"
+              <label
+                className="c20 c21"
+                htmlFor="mship-1--MoneyBuy-userInput"
               >
-                
+                <span
+                  className="c22 c23"
+                  color="inherit"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "£",
+                    }
+                  }
+                  size="s"
+                />
                 <div
                   className="c24"
                 >
-                  <input
-                    aria-describedby="mship-1--MoneyBuy-userInput"
-                    aria-label="Input a different amount"
-                    className="c25"
-                    id="mship-1--MoneyBuy-userInput"
-                    max="25000"
-                    min="1"
-                    name="membership_amount"
-                    onChange={[Function]}
-                    pattern="[^[0-9]+([,.][0-9]+)?$]"
-                    placeholder="0.00"
-                    required={false}
-                    step="0.01"
-                    type="string"
-                    value={10}
-                  />
                   
+                  <div
+                    className="c25"
+                  >
+                    <input
+                      aria-describedby="mship-1--MoneyBuy-userInput"
+                      aria-label="Input a different amount"
+                      className="c26"
+                      id="mship-1--MoneyBuy-userInput"
+                      max="25000"
+                      min="1"
+                      name="membership_amount"
+                      onChange={[Function]}
+                      pattern="[^[0-9]+([,.][0-9]+)?$]"
+                      placeholder="0.00"
+                      required={false}
+                      step="0.01"
+                      type="string"
+                      value={10}
+                    />
+                    
+                  </div>
                 </div>
-              </div>
-              
-            </label>
+                
+              </label>
+            </div>
           </div>
           <p
-            className="c26"
+            className="c27"
           >
             <strong>
               £10 
             </strong>
           </p>
           <button
-            className="c27"
+            className="c28"
             color="red"
             type="submit"
           >
@@ -1399,7 +1403,7 @@ exports[`Single donation renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c21 {
+.c22 {
   font-size: 1rem;
   line-height: 1rem;
   text-transform: inherit;
@@ -1408,7 +1412,7 @@ exports[`Single donation renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c14 {
+.c15 {
   font-size: 1rem;
   line-height: 1rem;
   text-transform: inherit;
@@ -1416,7 +1420,7 @@ exports[`Single donation renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c12 {
+.c13 {
   width: 100%;
   position: relative;
   display: -webkit-box;
@@ -1429,17 +1433,21 @@ exports[`Single donation renders correctly 1`] = `
   color: #5C5C5E;
 }
 
-.c15 {
+.c16 {
   margin-bottom: 0.5rem;
   font-weight: normal;
 }
 
-.c16 {
+.c12 {
+  width: 100%;
+}
+
+.c17 {
   position: relative;
   font-size: 1.25rem;
 }
 
-.c17 {
+.c18 {
   position: relative;
   width: 100%;
   display: -webkit-box;
@@ -1456,7 +1464,7 @@ exports[`Single donation renders correctly 1`] = `
   align-items: center;
 }
 
-.c18 {
+.c19 {
   position: relative;
   box-sizing: border-box;
   width: 100%;
@@ -1476,15 +1484,15 @@ exports[`Single donation renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c18:focus {
+.c19:focus {
   border: 1px solid #666;
 }
 
-.c13 {
+.c14 {
   display: block;
 }
 
-.c13 input {
+.c14 input {
   border: none;
   background-color: #BECCF9;
   color: #000000;
@@ -1496,21 +1504,21 @@ exports[`Single donation renders correctly 1`] = `
   height: auto;
 }
 
-.c13 input:focus {
+.c14 input:focus {
   border: none;
   outline: none;
   box-shadow: inset 0 0 0 4px #2042AD;
 }
 
-.c13 input:active:focus {
+.c14 input:active:focus {
   box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
 }
 
-.c19 {
+.c20 {
   display: block;
 }
 
-.c19 input {
+.c20 input {
   border: none;
   background-color: #BECCF9;
   color: #000000;
@@ -1525,17 +1533,17 @@ exports[`Single donation renders correctly 1`] = `
   color: #FFFFFF;
 }
 
-.c19 input:focus {
+.c20 input:focus {
   border: none;
   outline: none;
   box-shadow: inset 0 0 0 4px #2042AD;
 }
 
-.c19 input:active:focus {
+.c20 input:active:focus {
   box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
 }
 
-.c19 input:focus {
+.c20 input:focus {
   box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
 }
 
@@ -1659,7 +1667,7 @@ exports[`Single donation renders correctly 1`] = `
   padding: 1.5rem 0.5rem;
 }
 
-.c20 {
+.c21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1674,11 +1682,11 @@ exports[`Single donation renders correctly 1`] = `
   justify-content: center;
 }
 
-.c22 {
+.c23 {
   margin-right: 0.5rem;
 }
 
-.c23 {
+.c24 {
   position: relative;
   -webkit-flex-basis: 50%;
   -ms-flex-preferred-size: 50%;
@@ -1694,7 +1702,7 @@ exports[`Single donation renders correctly 1`] = `
   display: block;
 }
 
-.c23 span {
+.c24 span {
   position: absolute;
   font-size: 20px;
   top: 50%;
@@ -1707,7 +1715,7 @@ exports[`Single donation renders correctly 1`] = `
   z-index: 3;
 }
 
-.c23 input {
+.c24 input {
   height: 48px;
   border: 2px solid #969598;
   background: #F4F3F5;
@@ -1715,17 +1723,17 @@ exports[`Single donation renders correctly 1`] = `
   padding: 0.5rem 1rem 0.5rem 2rem;
 }
 
-.c23 input:focus {
+.c24 input:focus {
   outline: none;
   border: 2px solid #969598;
 }
 
-.c24 {
+.c25 {
   line-height: 1.5;
   margin-top: 2rem;
 }
 
-.c25 {
+.c26 {
   width: 100%;
   margin: 2rem 0 2rem;
   color: #FFFFFF;
@@ -1744,9 +1752,9 @@ exports[`Single donation renders correctly 1`] = `
   appearance: none;
 }
 
-.c25:active,
-.c25:focus,
-.c25:hover {
+.c26:active,
+.c26:focus,
+.c26:hover {
   outline: none;
   background-color: #961D35;
 }
@@ -1758,26 +1766,20 @@ exports[`Single donation renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c17 {
-    max-width: 290px;
-  }
-}
-
-@media (min-width:740px) {
-  .c18 {
+  .c12 {
     max-width: 290px;
   }
 }
 
 @media (min-width:740px) {
-  .c13 input {
+  .c14 input {
     font-size: 2rem;
     padding: 1.5rem;
   }
 }
 
 @media (min-width:740px) {
-  .c19 input {
+  .c20 input {
     font-size: 2rem;
     padding: 1.5rem;
   }
@@ -1870,7 +1872,7 @@ exports[`Single donation renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c23 {
+  .c24 {
     -webkit-flex-basis: 60%;
     -ms-flex-preferred-size: 60%;
     flex-basis: 60%;
@@ -1878,7 +1880,7 @@ exports[`Single donation renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c25 {
+  .c26 {
     padding: 1rem 2rem;
   }
 }
@@ -1942,176 +1944,192 @@ exports[`Single donation renders correctly 1`] = `
           <div
             className="c11"
           >
-            <label
-              className="c12 c13"
-              htmlFor="mship-1--moneyBuy-box1"
+            <div
+              className="c12"
             >
-              <span
-                className="c14 c15"
-                color="inherit"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "",
-                  }
-                }
-                size="s"
-              />
-              <div
-                className="c16"
+              <label
+                className="c13 c14"
+                htmlFor="mship-1--moneyBuy-box1"
               >
-                
+                <span
+                  className="c15 c16"
+                  color="inherit"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "",
+                    }
+                  }
+                  size="s"
+                />
                 <div
                   className="c17"
                 >
-                  <input
-                    aria-describedby="mship-1--moneyBuy-box1"
-                    aria-label="£10"
-                    className="c18"
-                    id="mship-1--moneyBuy-box1"
-                    name="mship-1--moneyBuy1"
-                    onClick={[Function]}
-                    placeholder=""
-                    required={false}
-                    type="button"
-                    value="£ 10"
-                  />
                   
+                  <div
+                    className="c18"
+                  >
+                    <input
+                      aria-describedby="mship-1--moneyBuy-box1"
+                      aria-label="£10"
+                      className="c19"
+                      id="mship-1--moneyBuy-box1"
+                      name="mship-1--moneyBuy1"
+                      onClick={[Function]}
+                      placeholder=""
+                      required={false}
+                      type="button"
+                      value="£ 10"
+                    />
+                    
+                  </div>
                 </div>
-              </div>
-              
-            </label>
-            <label
-              className="c12 c19"
-              htmlFor="mship-1--moneyBuy-box2"
+                
+              </label>
+            </div>
+            <div
+              className="c12"
             >
-              <span
-                className="c14 c15"
-                color="inherit"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "",
-                  }
-                }
-                size="s"
-              />
-              <div
-                className="c16"
+              <label
+                className="c13 c20"
+                htmlFor="mship-1--moneyBuy-box2"
               >
-                
+                <span
+                  className="c15 c16"
+                  color="inherit"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "",
+                    }
+                  }
+                  size="s"
+                />
                 <div
                   className="c17"
                 >
-                  <input
-                    aria-describedby="mship-1--moneyBuy-box2"
-                    aria-label="£20"
-                    className="c18"
-                    id="mship-1--moneyBuy-box2"
-                    name="mship-1--moneyBuy2"
-                    onClick={[Function]}
-                    placeholder=""
-                    required={false}
-                    type="button"
-                    value="£ 20"
-                  />
                   
+                  <div
+                    className="c18"
+                  >
+                    <input
+                      aria-describedby="mship-1--moneyBuy-box2"
+                      aria-label="£20"
+                      className="c19"
+                      id="mship-1--moneyBuy-box2"
+                      name="mship-1--moneyBuy2"
+                      onClick={[Function]}
+                      placeholder=""
+                      required={false}
+                      type="button"
+                      value="£ 20"
+                    />
+                    
+                  </div>
                 </div>
-              </div>
-              
-            </label>
-            <label
-              className="c12 c13"
-              htmlFor="mship-1--moneyBuy-box3"
+                
+              </label>
+            </div>
+            <div
+              className="c12"
             >
-              <span
-                className="c14 c15"
-                color="inherit"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "",
-                  }
-                }
-                size="s"
-              />
-              <div
-                className="c16"
+              <label
+                className="c13 c14"
+                htmlFor="mship-1--moneyBuy-box3"
               >
-                
+                <span
+                  className="c15 c16"
+                  color="inherit"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "",
+                    }
+                  }
+                  size="s"
+                />
                 <div
                   className="c17"
                 >
-                  <input
-                    aria-describedby="mship-1--moneyBuy-box3"
-                    aria-label="£30"
-                    className="c18"
-                    id="mship-1--moneyBuy-box3"
-                    name="mship-1--moneyBuy3"
-                    onClick={[Function]}
-                    placeholder=""
-                    required={false}
-                    type="button"
-                    value="£ 30"
-                  />
                   
+                  <div
+                    className="c18"
+                  >
+                    <input
+                      aria-describedby="mship-1--moneyBuy-box3"
+                      aria-label="£30"
+                      className="c19"
+                      id="mship-1--moneyBuy-box3"
+                      name="mship-1--moneyBuy3"
+                      onClick={[Function]}
+                      placeholder=""
+                      required={false}
+                      type="button"
+                      value="£ 30"
+                    />
+                    
+                  </div>
                 </div>
-              </div>
-              
-            </label>
+                
+              </label>
+            </div>
           </div>
           <div
-            className="c20"
+            className="c21"
           >
             <span
-              className="c21 c22"
+              className="c22 c23"
               color="inherit"
               size="s"
             >
               Other amount
             </span>
-            <label
-              className="c12 c23"
-              htmlFor="mship-1--MoneyBuy-userInput"
+            <div
+              className="c12"
             >
-              <span
-                className="c14 c15"
-                color="inherit"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "£",
-                  }
-                }
-                size="s"
-              />
-              <div
-                className="c16"
+              <label
+                className="c13 c24"
+                htmlFor="mship-1--MoneyBuy-userInput"
               >
-                
+                <span
+                  className="c15 c16"
+                  color="inherit"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "£",
+                    }
+                  }
+                  size="s"
+                />
                 <div
                   className="c17"
                 >
-                  <input
-                    aria-describedby="mship-1--MoneyBuy-userInput"
-                    aria-label="Input a different amount"
-                    className="c18"
-                    id="mship-1--MoneyBuy-userInput"
-                    max="25000"
-                    min="1"
-                    name="membership_amount"
-                    onChange={[Function]}
-                    pattern="[^[0-9]+([,.][0-9]+)?$]"
-                    placeholder="0.00"
-                    required={false}
-                    step="0.01"
-                    type="string"
-                    value={20}
-                  />
                   
+                  <div
+                    className="c18"
+                  >
+                    <input
+                      aria-describedby="mship-1--MoneyBuy-userInput"
+                      aria-label="Input a different amount"
+                      className="c19"
+                      id="mship-1--MoneyBuy-userInput"
+                      max="25000"
+                      min="1"
+                      name="membership_amount"
+                      onChange={[Function]}
+                      pattern="[^[0-9]+([,.][0-9]+)?$]"
+                      placeholder="0.00"
+                      required={false}
+                      step="0.01"
+                      type="string"
+                      value={20}
+                    />
+                    
+                  </div>
                 </div>
-              </div>
-              
-            </label>
+                
+              </label>
+            </div>
           </div>
           <p
-            className="c24"
+            className="c25"
           >
             <strong>
               £20 
@@ -2119,7 +2137,7 @@ exports[`Single donation renders correctly 1`] = `
             a support worker to visit 10 isolated young mums with postnatal depression in the UK.
           </p>
           <button
-            className="c25"
+            className="c26"
             color="red"
             type="submit"
           >
@@ -2165,7 +2183,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c14 {
+.c15 {
   font-size: 1rem;
   line-height: 1rem;
   text-transform: inherit;
@@ -2173,7 +2191,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c12 {
+.c13 {
   width: 100%;
   position: relative;
   display: -webkit-box;
@@ -2186,17 +2204,21 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   color: #5C5C5E;
 }
 
-.c15 {
+.c16 {
   margin-bottom: 0.5rem;
   font-weight: normal;
 }
 
-.c16 {
+.c12 {
+  width: 100%;
+}
+
+.c17 {
   position: relative;
   font-size: 1.25rem;
 }
 
-.c17 {
+.c18 {
   position: relative;
   width: 100%;
   display: -webkit-box;
@@ -2213,7 +2235,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   align-items: center;
 }
 
-.c18 {
+.c19 {
   position: relative;
   box-sizing: border-box;
   width: 100%;
@@ -2233,7 +2255,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c18:focus {
+.c19:focus {
   border: 1px solid #666;
 }
 
@@ -2345,7 +2367,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   justify-content: center;
 }
 
-.c13 {
+.c14 {
   position: relative;
   -webkit-flex-basis: 50%;
   -ms-flex-preferred-size: 50%;
@@ -2361,7 +2383,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   display: block;
 }
 
-.c13 span {
+.c14 span {
   position: absolute;
   font-size: 20px;
   top: 50%;
@@ -2374,7 +2396,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   z-index: 3;
 }
 
-.c13 input {
+.c14 input {
   height: 48px;
   border: 2px solid #969598;
   background: #F4F3F5;
@@ -2382,17 +2404,17 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   padding: 0.5rem 1rem 0.5rem 2rem;
 }
 
-.c13 input:focus {
+.c14 input:focus {
   outline: none;
   border: 2px solid #969598;
 }
 
-.c19 {
+.c20 {
   line-height: 1.5;
   margin-top: 2rem;
 }
 
-.c20 {
+.c21 {
   width: 100%;
   margin: 2rem 0 2rem;
   color: #FFFFFF;
@@ -2411,9 +2433,9 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   appearance: none;
 }
 
-.c20:active,
-.c20:focus,
-.c20:hover {
+.c21:active,
+.c21:focus,
+.c21:hover {
   outline: none;
   background-color: #961D35;
 }
@@ -2425,13 +2447,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c17 {
-    max-width: 290px;
-  }
-}
-
-@media (min-width:740px) {
-  .c18 {
+  .c12 {
     max-width: 290px;
   }
 }
@@ -2501,7 +2517,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c13 {
+  .c14 {
     -webkit-flex-basis: 60%;
     -ms-flex-preferred-size: 60%;
     flex-basis: 60%;
@@ -2509,7 +2525,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c20 {
+  .c21 {
     padding: 1rem 2rem;
   }
 }
@@ -2569,58 +2585,62 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
           <div
             className="c11"
           >
-            <label
-              className="c12 c13"
-              htmlFor="mship-1--MoneyBuy-userInput"
+            <div
+              className="c12"
             >
-              <span
-                className="c14 c15"
-                color="inherit"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "£",
-                  }
-                }
-                size="s"
-              />
-              <div
-                className="c16"
+              <label
+                className="c13 c14"
+                htmlFor="mship-1--MoneyBuy-userInput"
               >
-                
+                <span
+                  className="c15 c16"
+                  color="inherit"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "£",
+                    }
+                  }
+                  size="s"
+                />
                 <div
                   className="c17"
                 >
-                  <input
-                    aria-describedby="mship-1--MoneyBuy-userInput"
-                    aria-label="Input a different amount"
-                    className="c18"
-                    id="mship-1--MoneyBuy-userInput"
-                    max="25000"
-                    min="1"
-                    name="membership_amount"
-                    onChange={[Function]}
-                    pattern="[^[0-9]+([,.][0-9]+)?$]"
-                    placeholder="0.00"
-                    required={false}
-                    step="0.01"
-                    type="string"
-                    value={10}
-                  />
                   
+                  <div
+                    className="c18"
+                  >
+                    <input
+                      aria-describedby="mship-1--MoneyBuy-userInput"
+                      aria-label="Input a different amount"
+                      className="c19"
+                      id="mship-1--MoneyBuy-userInput"
+                      max="25000"
+                      min="1"
+                      name="membership_amount"
+                      onChange={[Function]}
+                      pattern="[^[0-9]+([,.][0-9]+)?$]"
+                      placeholder="0.00"
+                      required={false}
+                      step="0.01"
+                      type="string"
+                      value={10}
+                    />
+                    
+                  </div>
                 </div>
-              </div>
-              
-            </label>
+                
+              </label>
+            </div>
           </div>
           <p
-            className="c19"
+            className="c20"
           >
             <strong>
               £10 
             </strong>
           </p>
           <button
-            className="c20"
+            className="c21"
             color="red"
             type="submit"
           >
diff --git a/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap b/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap
index c7af37047..20a552817 100644
--- a/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap
+++ b/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap
@@ -21,7 +21,7 @@ exports[`renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c15 {
+.c16 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -51,17 +51,17 @@ exports[`renders correctly 1`] = `
   color: #FFFFFF;
 }
 
-.c15 > a {
+.c16 > a {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c15:hover {
+.c16:hover {
   background-color: #890B11;
   color: #FFFFFF;
 }
 
-.c8 {
+.c9 {
   width: 100%;
   position: relative;
   display: -webkit-box;
@@ -74,17 +74,21 @@ exports[`renders correctly 1`] = `
   color: #5C5C5E;
 }
 
-.c10 {
+.c11 {
   margin-bottom: 0.5rem;
   font-weight: normal;
 }
 
-.c11 {
+.c8 {
+  width: 100%;
+}
+
+.c12 {
   position: relative;
   font-size: 1.25rem;
 }
 
-.c12 {
+.c13 {
   position: relative;
   width: 100%;
   display: -webkit-box;
@@ -101,7 +105,7 @@ exports[`renders correctly 1`] = `
   align-items: center;
 }
 
-.c13 {
+.c14 {
   position: relative;
   box-sizing: border-box;
   width: 100%;
@@ -121,7 +125,7 @@ exports[`renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c13:focus {
+.c14:focus {
   border: 1px solid #666;
 }
 
@@ -129,7 +133,7 @@ exports[`renders correctly 1`] = `
   text-align: left;
 }
 
-.c16:disabled {
+.c17:disabled {
   cursor: not-allowed;
   opacity: 0.75;
 }
@@ -156,15 +160,15 @@ exports[`renders correctly 1`] = `
   margin-bottom: 1rem;
 }
 
-.c14 {
+.c15 {
   margin-top: 1rem;
 }
 
-.c14 button {
+.c15 button {
   background-color: #E52630;
 }
 
-.c17 {
+.c18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -175,12 +179,12 @@ exports[`renders correctly 1`] = `
   margin-top: 1rem;
 }
 
-.c17 p {
+.c18 p {
   font-size: 1rem;
   line-height: 2rem;
 }
 
-.c17 p a {
+.c18 p a {
   font-size: 1rem;
   color: #FFFFFF;
 }
@@ -207,12 +211,12 @@ exports[`renders correctly 1`] = `
   gap: 0;
 }
 
-.c9 {
+.c10 {
   width: 100%;
   margin-bottom: 1rem;
 }
 
-.c9 > span:first-child {
+.c10 > span:first-child {
   color: #FFFFFF;
 }
 
@@ -221,13 +225,13 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c15 {
+  .c16 {
     width: auto;
   }
 }
 
 @media (min-width:1024px) {
-  .c15 {
+  .c16 {
     width: auto;
     padding: 1rem 2rem;
     margin: 0 auto 2rem;
@@ -235,13 +239,7 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c12 {
-    max-width: 290px;
-  }
-}
-
-@media (min-width:740px) {
-  .c13 {
+  .c8 {
     max-width: 290px;
   }
 }
@@ -260,7 +258,7 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:1024px) {
-  .c9 {
+  .c10 {
     max-width: 290px;
   }
 }
@@ -303,76 +301,126 @@ exports[`renders correctly 1`] = `
       <div
         className="c7"
       >
-        <label
-          className="c8 c9"
-          htmlFor="first-name"
+        <div
+          className="c8"
         >
-          <span
-            className="c4 c10"
-            color="inherit"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "First Name",
-              }
-            }
-            size="s"
-          />
-          <div
-            className="c11"
+          <label
+            className="c9 c10"
+            htmlFor="first-name"
           >
-            
+            <span
+              className="c4 c11"
+              color="inherit"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "First Name",
+                }
+              }
+              size="s"
+            />
             <div
               className="c12"
             >
-              <input
-                aria-describedby="first-name"
-                aria-required={true}
+              
+              <div
                 className="c13"
-                id="first-name"
-                name="firstName"
-                onBlur={[Function]}
-                onChange={[Function]}
-                placeholder="Enter your first name"
-                required={false}
-                type="text"
-              />
+              >
+                <input
+                  aria-describedby="first-name"
+                  aria-required={true}
+                  className="c14"
+                  id="first-name"
+                  name="firstName"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  placeholder="Enter your first name"
+                  required={false}
+                  type="text"
+                />
+                
+              </div>
+            </div>
+            
+          </label>
+        </div>
+        <div
+          className="c8"
+        >
+          <label
+            className="c9 c10"
+            htmlFor="last-name"
+          >
+            <span
+              className="c4 c11"
+              color="inherit"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Last Name",
+                }
+              }
+              size="s"
+            />
+            <div
+              className="c12"
+            >
               
+              <div
+                className="c13"
+              >
+                <input
+                  aria-describedby="last-name"
+                  aria-required={true}
+                  className="c14"
+                  id="last-name"
+                  name="lastName"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  placeholder="Enter your last name"
+                  required={false}
+                  type="text"
+                />
+                
+              </div>
             </div>
-          </div>
-          
-        </label>
+            
+          </label>
+        </div>
+      </div>
+      <div
+        className="c8"
+      >
         <label
-          className="c8 c9"
-          htmlFor="last-name"
+          className="c9 c10"
+          htmlFor="email"
         >
           <span
-            className="c4 c10"
+            className="c4 c11"
             color="inherit"
             dangerouslySetInnerHTML={
               Object {
-                "__html": "Last Name",
+                "__html": "Email Address",
               }
             }
             size="s"
           />
           <div
-            className="c11"
+            className="c12"
           >
             
             <div
-              className="c12"
+              className="c13"
             >
               <input
-                aria-describedby="last-name"
+                aria-describedby="email"
                 aria-required={true}
-                className="c13"
-                id="last-name"
-                name="lastName"
+                className="c14"
+                id="email"
+                name="email"
                 onBlur={[Function]}
                 onChange={[Function]}
-                placeholder="Enter your last name"
+                placeholder="example@youremail.com"
                 required={false}
-                type="text"
+                type="email"
               />
               
             </div>
@@ -380,49 +428,11 @@ exports[`renders correctly 1`] = `
           
         </label>
       </div>
-      <label
-        className="c8 c9"
-        htmlFor="email"
-      >
-        <span
-          className="c4 c10"
-          color="inherit"
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "Email Address",
-            }
-          }
-          size="s"
-        />
-        <div
-          className="c11"
-        >
-          
-          <div
-            className="c12"
-          >
-            <input
-              aria-describedby="email"
-              aria-required={true}
-              className="c13"
-              id="email"
-              name="email"
-              onBlur={[Function]}
-              onChange={[Function]}
-              placeholder="example@youremail.com"
-              required={false}
-              type="email"
-            />
-            
-          </div>
-        </div>
-        
-      </label>
       <div
-        className="c14"
+        className="c15"
       >
         <button
-          className="c15 c16"
+          className="c16 c17"
           data-test="subscribe-button"
           disabled={true}
           type="submit"
@@ -441,7 +451,7 @@ exports[`renders correctly 1`] = `
       </div>
     </div>
     <div
-      className="c17"
+      className="c18"
     >
       <span
         className="c4"
diff --git a/src/components/Organisms/Membership/Membership.test.js b/src/components/Organisms/Membership/Membership.test.js
index 18d594d3b..9e058d170 100644
--- a/src/components/Organisms/Membership/Membership.test.js
+++ b/src/components/Organisms/Membership/Membership.test.js
@@ -48,7 +48,7 @@ it('renders correctly', () => {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
     }
 
-    .c22 {
+    .c23 {
       font-size: 1rem;
       line-height: 1rem;
       text-transform: inherit;
@@ -71,7 +71,7 @@ it('renders correctly', () => {
       object-fit: cover;
     }
 
-    .c14 {
+    .c15 {
       width: 100%;
       position: relative;
       display: -webkit-box;
@@ -84,17 +84,21 @@ it('renders correctly', () => {
       color: #5C5C5E;
     }
 
-    .c16 {
+    .c17 {
       margin-bottom: 0.5rem;
       font-weight: normal;
     }
 
-    .c17 {
+    .c14 {
+      width: 100%;
+    }
+
+    .c18 {
       position: relative;
       font-size: 1.25rem;
     }
 
-    .c18 {
+    .c19 {
       position: relative;
       width: 100%;
       display: -webkit-box;
@@ -111,7 +115,7 @@ it('renders correctly', () => {
       align-items: center;
     }
 
-    .c19 {
+    .c20 {
       position: relative;
       box-sizing: border-box;
       width: 100%;
@@ -131,15 +135,15 @@ it('renders correctly', () => {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
     }
 
-    .c19:focus {
+    .c20:focus {
       border: 1px solid #666;
     }
 
-    .c15 {
+    .c16 {
       display: block;
     }
 
-    .c15 input {
+    .c16 input {
       border: 2px solid #E1E2E3;
       font-size: 1.5rem;
       font-weight: 800;
@@ -150,11 +154,11 @@ it('renders correctly', () => {
       height: auto;
     }
 
-    .c20 {
+    .c21 {
       display: block;
     }
 
-    .c20 input {
+    .c21 input {
       border: 2px solid #E1E2E3;
       font-size: 1.5rem;
       font-weight: 800;
@@ -271,7 +275,7 @@ it('renders correctly', () => {
       border-color: #E52630;
     }
 
-    .c21 {
+    .c22 {
       display: -webkit-box;
       display: -webkit-flex;
       display: -ms-flexbox;
@@ -282,11 +286,11 @@ it('renders correctly', () => {
       align-items: center;
     }
 
-    .c23 {
+    .c24 {
       margin-right: auto;
     }
 
-    .c24 {
+    .c25 {
       position: relative;
       -webkit-flex: 0 0 50%;
       -ms-flex: 0 0 50%;
@@ -295,7 +299,7 @@ it('renders correctly', () => {
       display: block;
     }
 
-    .c24 span {
+    .c25 span {
       position: absolute;
       padding: 0px 15px;
       font-size: 20px;
@@ -307,21 +311,21 @@ it('renders correctly', () => {
       font-weight: 500;
     }
 
-    .c24 input {
+    .c25 input {
       border: 2px solid #E1E2E3;
       background: transparent;
       padding: 0.5rem 1rem 0.5rem 2rem;
     }
 
-    .c24 input:focus {
+    .c25 input:focus {
       border: 2px solid #E52630;
     }
 
-    .c26 {
+    .c27 {
       line-height: 1.5;
     }
 
-    .c25 {
+    .c26 {
       width: 100%;
       color: #FFFFFF;
       font-size: 1rem;
@@ -333,20 +337,14 @@ it('renders correctly', () => {
       border-radius: 100px;
     }
 
-    .c25:active,
-    .c25:focus,
-    .c25:hover {
+    .c26:active,
+    .c26:focus,
+    .c26:hover {
       background-color: #961D35;
     }
 
     @media (min-width:740px) {
-      .c18 {
-        max-width: 290px;
-      }
-    }
-
-    @media (min-width:740px) {
-      .c19 {
+      .c14 {
         max-width: 290px;
       }
     }
@@ -394,7 +392,7 @@ it('renders correctly', () => {
     }
 
     @media (min-width:1024px) {
-      .c24 {
+      .c25 {
         -webkit-flex: 0 0 60%;
         -ms-flex: 0 0 60%;
         flex: 0 0 60%;
@@ -402,7 +400,7 @@ it('renders correctly', () => {
     }
 
     @media (min-width:1024px) {
-      .c25 {
+      .c26 {
         width: auto;
         padding: 1rem 2rem;
         margin: 0 auto 2rem;
@@ -471,183 +469,199 @@ it('renders correctly', () => {
               <div
                 className="c13"
               >
-                <label
-                  className="c14 c15"
-                  htmlFor="mship-1--moneyBuy-box1"
+                <div
+                  className="c14"
                 >
-                  <span
-                    className="c7 c16"
-                    color="inherit"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "",
-                      }
-                    }
-                    size="s"
-                  />
-                  <div
-                    className="c17"
+                  <label
+                    className="c15 c16"
+                    htmlFor="mship-1--moneyBuy-box1"
                   >
-                    
+                    <span
+                      className="c7 c17"
+                      color="inherit"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "",
+                        }
+                      }
+                      size="s"
+                    />
                     <div
                       className="c18"
                     >
-                      <input
-                        aria-describedby="mship-1--moneyBuy-box1"
-                        aria-label="£5"
-                        className="c19"
-                        id="mship-1--moneyBuy-box1"
-                        name="mship-1--moneyBuy1"
-                        onClick={[Function]}
-                        placeholder=""
-                        required={false}
-                        type="button"
-                        value="£ 5"
-                      />
                       
+                      <div
+                        className="c19"
+                      >
+                        <input
+                          aria-describedby="mship-1--moneyBuy-box1"
+                          aria-label="£5"
+                          className="c20"
+                          id="mship-1--moneyBuy-box1"
+                          name="mship-1--moneyBuy1"
+                          onClick={[Function]}
+                          placeholder=""
+                          required={false}
+                          type="button"
+                          value="£ 5"
+                        />
+                        
+                      </div>
                     </div>
-                  </div>
-                  
-                </label>
-                <label
-                  className="c14 c20"
-                  htmlFor="mship-1--moneyBuy-box2"
+                    
+                  </label>
+                </div>
+                <div
+                  className="c14"
                 >
-                  <span
-                    className="c7 c16"
-                    color="inherit"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "",
-                      }
-                    }
-                    size="s"
-                  />
-                  <div
-                    className="c17"
+                  <label
+                    className="c15 c21"
+                    htmlFor="mship-1--moneyBuy-box2"
                   >
-                    
+                    <span
+                      className="c7 c17"
+                      color="inherit"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "",
+                        }
+                      }
+                      size="s"
+                    />
                     <div
                       className="c18"
                     >
-                      <input
-                        aria-describedby="mship-1--moneyBuy-box2"
-                        aria-label="£10"
-                        className="c19"
-                        id="mship-1--moneyBuy-box2"
-                        name="mship-1--moneyBuy2"
-                        onClick={[Function]}
-                        placeholder=""
-                        required={false}
-                        type="button"
-                        value="£ 10"
-                      />
                       
+                      <div
+                        className="c19"
+                      >
+                        <input
+                          aria-describedby="mship-1--moneyBuy-box2"
+                          aria-label="£10"
+                          className="c20"
+                          id="mship-1--moneyBuy-box2"
+                          name="mship-1--moneyBuy2"
+                          onClick={[Function]}
+                          placeholder=""
+                          required={false}
+                          type="button"
+                          value="£ 10"
+                        />
+                        
+                      </div>
                     </div>
-                  </div>
-                  
-                </label>
-                <label
-                  className="c14 c15"
-                  htmlFor="mship-1--moneyBuy-box3"
+                    
+                  </label>
+                </div>
+                <div
+                  className="c14"
                 >
-                  <span
-                    className="c7 c16"
-                    color="inherit"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "",
-                      }
-                    }
-                    size="s"
-                  />
-                  <div
-                    className="c17"
+                  <label
+                    className="c15 c16"
+                    htmlFor="mship-1--moneyBuy-box3"
                   >
-                    
+                    <span
+                      className="c7 c17"
+                      color="inherit"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "",
+                        }
+                      }
+                      size="s"
+                    />
                     <div
                       className="c18"
                     >
-                      <input
-                        aria-describedby="mship-1--moneyBuy-box3"
-                        aria-label="£20"
-                        className="c19"
-                        id="mship-1--moneyBuy-box3"
-                        name="mship-1--moneyBuy3"
-                        onClick={[Function]}
-                        placeholder=""
-                        required={false}
-                        type="button"
-                        value="£ 20"
-                      />
                       
+                      <div
+                        className="c19"
+                      >
+                        <input
+                          aria-describedby="mship-1--moneyBuy-box3"
+                          aria-label="£20"
+                          className="c20"
+                          id="mship-1--moneyBuy-box3"
+                          name="mship-1--moneyBuy3"
+                          onClick={[Function]}
+                          placeholder=""
+                          required={false}
+                          type="button"
+                          value="£ 20"
+                        />
+                        
+                      </div>
                     </div>
-                  </div>
-                  
-                </label>
+                    
+                  </label>
+                </div>
               </div>
               <div
-                className="c21"
+                className="c22"
               >
                 <span
-                  className="c22 c23"
+                  className="c23 c24"
                   color="inherit"
                   size="s"
                 >
                   Other amount
                 </span>
-                <label
-                  className="c14 c24"
-                  htmlFor="mship-1--MoneyBuy-userInput"
+                <div
+                  className="c14"
                 >
-                  <span
-                    className="c7 c16"
-                    color="inherit"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "£",
-                      }
-                    }
-                    size="s"
-                  />
-                  <div
-                    className="c17"
+                  <label
+                    className="c15 c25"
+                    htmlFor="mship-1--MoneyBuy-userInput"
                   >
-                    
+                    <span
+                      className="c7 c17"
+                      color="inherit"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "£",
+                        }
+                      }
+                      size="s"
+                    />
                     <div
                       className="c18"
                     >
-                      <input
-                        aria-describedby="mship-1--MoneyBuy-userInput"
-                        aria-label="Input a different amount"
-                        className="c19"
-                        id="mship-1--MoneyBuy-userInput"
-                        max="25000"
-                        min="1"
-                        name="membership_amount"
-                        onChange={[Function]}
-                        onClick={[Function]}
-                        onKeyPress={[Function]}
-                        pattern="[^[0-9]+([,.][0-9]+)?$]"
-                        placeholder="0.00"
-                        required={false}
-                        step="0.01"
-                        type="number"
-                        value=""
-                      />
                       
+                      <div
+                        className="c19"
+                      >
+                        <input
+                          aria-describedby="mship-1--MoneyBuy-userInput"
+                          aria-label="Input a different amount"
+                          className="c20"
+                          id="mship-1--MoneyBuy-userInput"
+                          max="25000"
+                          min="1"
+                          name="membership_amount"
+                          onChange={[Function]}
+                          onClick={[Function]}
+                          onKeyPress={[Function]}
+                          pattern="[^[0-9]+([,.][0-9]+)?$]"
+                          placeholder="0.00"
+                          required={false}
+                          step="0.01"
+                          type="number"
+                          value=""
+                        />
+                        
+                      </div>
                     </div>
-                  </div>
-                  
-                </label>
+                    
+                  </label>
+                </div>
               </div>
               <input
-                className="c25"
+                className="c26"
                 type="submit"
                 value="Donate"
               />
               <p
-                className="c26"
+                className="c27"
               />
             </fieldset>
           </form>

From 4c52e019b544d635db8aeeee62fe5adf91df47b7 Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Mon, 17 Mar 2025 17:47:53 +0000
Subject: [PATCH 09/14] Empty commit to trigger build


From 4ade4b33efd1a8873418bcdb1025772a56cd1785 Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Tue, 18 Mar 2025 11:04:16 +0000
Subject: [PATCH 10/14] comment out parts of failing test

---
 playwright/components/molecules/typeahead.spec.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/playwright/components/molecules/typeahead.spec.js b/playwright/components/molecules/typeahead.spec.js
index 0e063c6fa..adfa5d638 100644
--- a/playwright/components/molecules/typeahead.spec.js
+++ b/playwright/components/molecules/typeahead.spec.js
@@ -18,9 +18,9 @@ test.describe('typeahead component', () => {
     expect(placeholderAttribute).toBe('Start searching...');
 
     // type a word and typeahead should give options
-    await page.locator('input#typeahead-test').type('red nos');
-    await expect(page.locator('label[for="typeahead-test"] ~ div > ul[role="listbox"]')).toBeVisible();
-    await expect(page.locator('label[for="typeahead-test"] ~ div > ul[role="listbox"] > li[id="option-0"]')).toContainText('red nose');
+    // await page.locator('input#typeahead-test').type('red nos');
+    // await expect(page.locator('label[for="typeahead-test"] ~ div > ul[role="listbox"]')).toBeVisible();
+    // await expect(page.locator('label[for="typeahead-test"] ~ div > ul[role="listbox"] > li[id="option-0"]')).toContainText('red nose');
 
     await page.close();
   });

From 0830884bd080e3a334d19ae77976c7dcf0c3ebed Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Tue, 18 Mar 2025 11:27:32 +0000
Subject: [PATCH 11/14] revert comment out

---
 playwright/components/molecules/typeahead.spec.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/playwright/components/molecules/typeahead.spec.js b/playwright/components/molecules/typeahead.spec.js
index adfa5d638..0e063c6fa 100644
--- a/playwright/components/molecules/typeahead.spec.js
+++ b/playwright/components/molecules/typeahead.spec.js
@@ -18,9 +18,9 @@ test.describe('typeahead component', () => {
     expect(placeholderAttribute).toBe('Start searching...');
 
     // type a word and typeahead should give options
-    // await page.locator('input#typeahead-test').type('red nos');
-    // await expect(page.locator('label[for="typeahead-test"] ~ div > ul[role="listbox"]')).toBeVisible();
-    // await expect(page.locator('label[for="typeahead-test"] ~ div > ul[role="listbox"] > li[id="option-0"]')).toContainText('red nose');
+    await page.locator('input#typeahead-test').type('red nos');
+    await expect(page.locator('label[for="typeahead-test"] ~ div > ul[role="listbox"]')).toBeVisible();
+    await expect(page.locator('label[for="typeahead-test"] ~ div > ul[role="listbox"] > li[id="option-0"]')).toContainText('red nose');
 
     await page.close();
   });

From dbcf23046416e86a9196f837cf0d03e2229bf4a1 Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Tue, 18 Mar 2025 18:21:42 +0000
Subject: [PATCH 12/14] fix input and textInputWithDropdown tests

---
 playwright/components/atoms/input.spec.js                 | 2 +-
 playwright/components/atoms/textInputWithDropdown.spec.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/playwright/components/atoms/input.spec.js b/playwright/components/atoms/input.spec.js
index 5d3c6831e..1c0a3bb22 100644
--- a/playwright/components/atoms/input.spec.js
+++ b/playwright/components/atoms/input.spec.js
@@ -41,7 +41,7 @@ test.describe('input component', () => {
     await page.locator('#input-example-2').type('This is test input text');
 
     // error message should be visible
-    await expect(page.locator('[data-preview="Input"] > div > label > span[data-test="error-message"]')).toBeVisible();
+    await expect(page.locator('[data-preview="Input"] > div > div > label > span[data-test="error-message"]')).toBeVisible();
 
     await page.close();
   });
diff --git a/playwright/components/atoms/textInputWithDropdown.spec.js b/playwright/components/atoms/textInputWithDropdown.spec.js
index f57f62ce2..50137be1a 100644
--- a/playwright/components/atoms/textInputWithDropdown.spec.js
+++ b/playwright/components/atoms/textInputWithDropdown.spec.js
@@ -14,9 +14,9 @@ test.describe('Text Input With Dropdown Component', () => {
     await page.locator('label[for="input-with-dropdown"]').type('test');
 
     // ensure select dropdown values are visible
-    await expect(page.locator('label[for="input-with-dropdown"] ~ div > ul[role="listbox"]')).toBeVisible();
+    await expect(page.locator('ul[role="listbox"]')).toBeVisible();
 
-    await page.locator('label[for="input-with-dropdown"] ~ div > ul[role="listbox"] > li[id="option-1"]').click();
+    await page.locator('ul[role="listbox"] > li[id="option-1"]').click();
 
     await page.close();
   });

From 97acd1661f57439211c3414d2e828bfa2765843e Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Tue, 18 Mar 2025 18:39:58 +0000
Subject: [PATCH 13/14] adjust tests

---
 playwright/components/molecules/schoolLookup.spec.js       | 4 ++--
 playwright/components/molecules/simpleSchoolLookUp.spec.js | 4 ++--
 playwright/components/molecules/typeahead.spec.js          | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/playwright/components/molecules/schoolLookup.spec.js b/playwright/components/molecules/schoolLookup.spec.js
index 60910d7ad..c4e120ad9 100644
--- a/playwright/components/molecules/schoolLookup.spec.js
+++ b/playwright/components/molecules/schoolLookup.spec.js
@@ -18,8 +18,8 @@ test.describe('school lookup component', () => {
     expect(placeholderAttribute).toBe('Type to start search');
 
     await page.locator('#school-lookup').type('St Paul');
-    await expect(page.locator('label[for="school-lookup"] ~ div > ul[role="listbox"]')).toBeVisible();
-    await page.locator('label[for="school-lookup"] ~ div > ul[role="listbox"] > li[id="option-6"]').click();
+    await expect(page.locator('ul[role="listbox"]')).toBeVisible();
+    await page.locator('ul[role="listbox"] > li[id="option-6"]').click();
 
     await page.close();
   });
diff --git a/playwright/components/molecules/simpleSchoolLookUp.spec.js b/playwright/components/molecules/simpleSchoolLookUp.spec.js
index 59beef212..15964d1b2 100644
--- a/playwright/components/molecules/simpleSchoolLookUp.spec.js
+++ b/playwright/components/molecules/simpleSchoolLookUp.spec.js
@@ -21,7 +21,7 @@ test.describe('simple school lookup component', () => {
     await page.locator('input#school_lookup').type('St Paul');
     await expect(page.locator('[data-preview="SimpleSchoolLookup"] > div > div > button[type="button"]')).toBeVisible();
     await page.locator('[data-preview="SimpleSchoolLookup"] > div > div > button[type="button"]').click();
-    await expect(page.locator('label[for="school_lookup"] ~ div > ul[role="listbox"]')).toBeVisible();
+    await expect(page.locator('ul[role="listbox"]')).toBeVisible();
 
     // clear school name and enter school postcode
     await page.locator('input#school_lookup').fill('');
@@ -29,7 +29,7 @@ test.describe('simple school lookup component', () => {
     await expect(page.locator('[data-preview="SimpleSchoolLookup"] > div > div > button[type="button"]')).toBeVisible();
     await page.locator('[data-preview="SimpleSchoolLookup"] > div > div > button[type="button"]').click();
 
-    await expect(page.locator('label[for="school_lookup"] ~ div > ul[role="listbox"]')).toBeVisible();
+    await expect(page.locator('ul[role="listbox"]')).toBeVisible();
     await page.close();
   });
 });
diff --git a/playwright/components/molecules/typeahead.spec.js b/playwright/components/molecules/typeahead.spec.js
index 0e063c6fa..17bcf7fa7 100644
--- a/playwright/components/molecules/typeahead.spec.js
+++ b/playwright/components/molecules/typeahead.spec.js
@@ -19,8 +19,8 @@ test.describe('typeahead component', () => {
 
     // type a word and typeahead should give options
     await page.locator('input#typeahead-test').type('red nos');
-    await expect(page.locator('label[for="typeahead-test"] ~ div > ul[role="listbox"]')).toBeVisible();
-    await expect(page.locator('label[for="typeahead-test"] ~ div > ul[role="listbox"] > li[id="option-0"]')).toContainText('red nose');
+    await expect(page.locator('ul[role="listbox"]')).toBeVisible();
+    await expect(page.locator('ul[role="listbox"] > li[id="option-0"]')).toContainText('red nose');
 
     await page.close();
   });

From 24b7eaf1f2d9df5fe57802b89d39311519784a9d Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Wed, 19 Mar 2025 14:16:41 +0000
Subject: [PATCH 14/14] edit tests for extra container

---
 .../organisms/marketingPreferences.spec.js    | 68 +++++++++----------
 1 file changed, 34 insertions(+), 34 deletions(-)

diff --git a/playwright/components/organisms/marketingPreferences.spec.js b/playwright/components/organisms/marketingPreferences.spec.js
index eaf9eca94..5fb4a37ac 100644
--- a/playwright/components/organisms/marketingPreferences.spec.js
+++ b/playwright/components/organisms/marketingPreferences.spec.js
@@ -41,57 +41,57 @@ test.describe('marketing preferences component', () => {
     await page.locator('div#marketing-preferences--default ~ input[type="submit"]').click();
 
     // email field empty error message
-    await expect(page.locator('div#marketing-preferences--default div.field-email > div > label[for="mp_email"] > span > span')).toContainText('Please enter your email address');
+    await expect(page.locator('div#marketing-preferences--default div.field-email > div > div > label[for="mp_email"] > span > span')).toContainText('Please enter your email address');
 
     // postal address fields empty error messages
     // address line 1 error message
-    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_address1"] > span > span')).toContainText('Please enter the first line of your address');
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > div > label[for="mp_address1"] > span > span')).toContainText('Please enter the first line of your address');
     // town error message
-    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_town"] > span > span')).toContainText('Please enter your town');
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > div > label[for="mp_town"] > span > span')).toContainText('Please enter your town');
     // postcode error message
-    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_postcode"] > span > span')).toContainText('Please enter your postcode');
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > div > label[for="mp_postcode"] > span > span')).toContainText('Please enter your postcode');
     // country error message
-    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_country"] > span > span')).toContainText('Please enter your country');
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > div > label[for="mp_country"] > span > span')).toContainText('Please enter your country');
     // text empty error message
-    await expect(page.locator('div#marketing-preferences--default div.field-sms > div > label[for="mp_mobile"] > span > span')).toContainText('Please enter your mobile number');
+    await expect(page.locator('div#marketing-preferences--default div.field-sms > div > div > label[for="mp_mobile"] > span > span')).toContainText('Please enter your mobile number');
     // phone error message
-    await expect(page.locator('div#marketing-preferences--default div.field-phone > div > label > span > span')).toContainText('Please enter your phone number');
+    await expect(page.locator('div#marketing-preferences--default div.field-phone > div > div > label > span > span')).toContainText('Please enter your phone number');
 
     // text field empty error message
-    await expect(page.locator('div#marketing-preferences--default div.field-sms > div > label[for="mp_mobile"] > span > span')).toContainText('Please enter your mobile number');
+    await expect(page.locator('div#marketing-preferences--default div.field-sms > div > div > label[for="mp_mobile"] > span > span')).toContainText('Please enter your mobile number');
 
     // phone field empty error message
-    await expect(page.locator('div#marketing-preferences--default div.field-phone > div > label > span > span')).toContainText('Please enter your phone number');
+    await expect(page.locator('div#marketing-preferences--default div.field-phone > div > div > label > span > span')).toContainText('Please enter your phone number');
 
     // validate email field
     await page.locator('div#marketing-preferences--default input#mp_email').type('email-signup@email.sls.comicrelief.com');
     await page.locator('div#marketing-preferences--default input#mp_email').fill(''); // clear the email field
     await page.locator('div#marketing-preferences--default input#mp_address1').click();
-    await expect(page.locator('div#marketing-preferences--default div.field-email > div > label[for="mp_email"] > span > span')).toContainText('Please enter your email address');
+    await expect(page.locator('div#marketing-preferences--default div.field-email > div > div > label[for="mp_email"] > span > span')).toContainText('Please enter your email address');
 
     // email that has : should show error message
     await page.locator('div#marketing-preferences--default input#mp_email').fill(''); // clear the email field
     await page.locator('div#marketing-preferences--default input#mp_email').type('test:@£$%£test@comicrelief.com');
     await page.locator('div#marketing-preferences--default input#mp_address1').click();
-    await expect(page.locator('div#marketing-preferences--default div.field-email > div > label[for="mp_email"] > span > span')).toContainText('Please enter a valid email address');
+    await expect(page.locator('div#marketing-preferences--default div.field-email > div > div > label[for="mp_email"] > span > span')).toContainText('Please enter a valid email address');
 
     // email that has mix of special chars that's valid and not valid should show error message
     await page.locator('div#marketing-preferences--default input#mp_email').fill(''); // clear the email field
     await page.locator('div#marketing-preferences--default input#mp_email').type('Test0-9!#$%&\'*+/=?^_{|}~-@comicrelief_9-8.com.uk');
     await page.locator('div#marketing-preferences--default input#mp_address1').click();
-    await expect(page.locator('div#marketing-preferences--default div.field-email > div > label[for="mp_email"] > span > span')).toContainText('Please enter a valid email address');
+    await expect(page.locator('div#marketing-preferences--default div.field-email > div > div > label[for="mp_email"] > span > span')).toContainText('Please enter a valid email address');
 
     // postal address fields validation
     // validate address line 1 field
     await page.locator('div#marketing-preferences--default input#mp_address1').type('Comic Relief');
     await page.locator('div#marketing-preferences--default input#mp_address1').fill(''); // clear the email field
     await page.locator('div#marketing-preferences--default input#mp_address2').click();
-    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_address1"] > span > span')).toContainText('Please enter the first line of your address');
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > div > label[for="mp_address1"] > span > span')).toContainText('Please enter the first line of your address');
 
     // address line 1 with special characters should show error message
     await page.locator('div#marketing-preferences--default input#mp_address1').type('Comic @% Relief');
     await page.locator('div#marketing-preferences--default input#mp_address2').click();
-    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_address1"] > span > span')).toContainText('This field only accepts alphanumeric characters and , . ( ) / & \' - and must start with an alphanumeric character');
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > div > label[for="mp_address1"] > span > span')).toContainText('This field only accepts alphanumeric characters and , . ( ) / & \' - and must start with an alphanumeric character');
 
     // address line 1 with valid input should not show error message
     await page.locator('div#marketing-preferences--default input#mp_address1').fill('Comic Relief'); // clear the email field
@@ -111,108 +111,108 @@ test.describe('marketing preferences component', () => {
     await page.locator('div#marketing-preferences--default input#mp_town').type('London');
     await page.locator('div#marketing-preferences--default input#mp_town').fill(''); // clear the email field
     await page.locator('div#marketing-preferences--default input#mp_address2').click();
-    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_town"] > span > span')).toContainText('Please enter your town');
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > div > label[for="mp_town"] > span > span')).toContainText('Please enter your town');
 
     // town field with special characters should show error message
     await page.locator('div#marketing-preferences--default input#mp_town').type('Lon@%don ');
     await page.locator('div#marketing-preferences--default input#mp_address2').click();
-    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_town"] > span > span')).toContainText('This field only accepts alphanumeric characters and , . ( ) / & \' - and must start with an alphanumeric character');
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > div > label[for="mp_town"] > span > span')).toContainText('This field only accepts alphanumeric characters and , . ( ) / & \' - and must start with an alphanumeric character');
 
     // town field with valid input should not show error message
     await page.locator('div#marketing-preferences--default input#mp_town').fill('LONDON'); // clear the email field
-    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_town"] > span > span')).toBeHidden('');
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > div > label[for="mp_town"] > span > span')).toBeHidden('');
 
     // postcode field should show error message when value is not entered
     await page.locator('div#marketing-preferences--default input#mp_postcode').type('E1 8QS');
     await page.locator('div#marketing-preferences--default input#mp_postcode').fill(''); // clear the email field
     await page.locator('div#marketing-preferences--default input#mp_address2').click();
-    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_postcode"] > span > span')).toContainText('Please enter your postcode');
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > div > label[for="mp_postcode"] > span > span')).toContainText('Please enter your postcode');
 
     // postcode field with a space should show error message
     await page.locator('div#marketing-preferences--default input#mp_postcode').type('E 1 8QS');
     await page.locator('div#marketing-preferences--default input#mp_address2').click();
-    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_postcode"] > span > span')).toContainText('Please enter a valid postcode');
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > div > label[for="mp_postcode"] > span > span')).toContainText('Please enter a valid postcode');
 
     // postcode field with a space in second part should show error message
     await page.locator('div#marketing-preferences--default input#mp_postcode').type('E1 8 QS');
     await page.locator('div#marketing-preferences--default input#mp_address2').click();
-    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_postcode"] > span > span')).toContainText('Please enter a valid postcode');
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > div > label[for="mp_postcode"] > span > span')).toContainText('Please enter a valid postcode');
 
     // postcode field with valid input should not show error message
     await page.locator('div#marketing-preferences--default input#mp_postcode').fill('E1 8QS'); // clear the email field
-    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_postcode"] > span > span')).toBeHidden('');
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > div > label[for="mp_postcode"] > span > span')).toBeHidden('');
 
     // country field should show error message when value is not entered
     await page.locator('div#marketing-preferences--default input#mp_country').type('United Kingdom');
     await page.locator('div#marketing-preferences--default input#mp_country').fill(''); // clear the email field
     await page.locator('div#marketing-preferences--default input#mp_address2').click();
-    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_country"] > span > span')).toContainText('Please enter your country');
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > div > label[for="mp_country"] > span > span')).toContainText('Please enter your country');
 
     // country field with special characters should show error message
     await page.locator('div#marketing-preferences--default input#mp_country').type('United £$^3 Kingdom');
     await page.locator('div#marketing-preferences--default input#mp_address2').click();
-    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_country"] > span > span')).toContainText('This field only accepts alphanumeric characters and , . ( ) / & \' - and must start with an alphanumeric character');
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > div > label[for="mp_country"] > span > span')).toContainText('This field only accepts alphanumeric characters and , . ( ) / & \' - and must start with an alphanumeric character');
 
     // country field with valid input should not show error message
     await page.locator('div#marketing-preferences--default input#mp_country').fill(''); // clear the email field
     await page.locator('div#marketing-preferences--default input#mp_country').fill('United Kingdom'); // clear the email field
-    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_country"] > span > span')).toBeHidden('');
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > div > label[for="mp_country"] > span > span')).toBeHidden('');
 
     // sms field should show error message when value is not entered
     await page.locator('div#marketing-preferences--default input#mp_mobile').type('07123456789');
     await page.locator('div#marketing-preferences--default input#mp_mobile').fill(''); // clear the email field
     await page.locator('div#marketing-preferences--default input#mp_address2').click();
-    await expect(page.locator('div#marketing-preferences--default div.field-sms > div > label[for="mp_mobile"] > span > span')).toContainText('Please enter your mobile number');
+    await expect(page.locator('div#marketing-preferences--default div.field-sms > div > div > label[for="mp_mobile"] > span > span')).toContainText('Please enter your mobile number');
 
     // sms field with 10 digits should show error message
     await page.locator('div#marketing-preferences--default input#mp_mobile').type('0712345678');
     await page.locator('div#marketing-preferences--default input#mp_address2').click();
-    await expect(page.locator('div#marketing-preferences--default div.field-sms > div > label[for="mp_mobile"] > span > span')).toContainText('Please enter a valid UK mobile number');
+    await expect(page.locator('div#marketing-preferences--default div.field-sms > div > div > label[for="mp_mobile"] > span > span')).toContainText('Please enter a valid UK mobile number');
 
     // sms field with 12 digits should show error message
     await page.locator('div#marketing-preferences--default input#mp_mobile').fill(''); // clear the email field
     await page.locator('div#marketing-preferences--default input#mp_mobile').type('071234567890');
     await page.locator('div#marketing-preferences--default input#mp_address2').click();
-    await expect(page.locator('div#marketing-preferences--default div.field-sms > div > label[for="mp_mobile"] > span > span')).toContainText('Please enter a valid UK mobile number');
+    await expect(page.locator('div#marketing-preferences--default div.field-sms > div > div > label[for="mp_mobile"] > span > span')).toContainText('Please enter a valid UK mobile number');
 
     // sms field starting with a space should show error message
     await page.locator('div#marketing-preferences--default input#mp_mobile').fill(''); // clear the email field
     await page.locator('div#marketing-preferences--default input#mp_mobile').type(' 07123456789');
     await page.locator('div#marketing-preferences--default input#mp_address2').click();
-    await expect(page.locator('div#marketing-preferences--default div.field-sms > div > label[for="mp_mobile"] > span > span')).toContainText('Please enter a valid UK mobile number');
+    await expect(page.locator('div#marketing-preferences--default div.field-sms > div > div > label[for="mp_mobile"] > span > span')).toContainText('Please enter a valid UK mobile number');
 
     // sms field with valid input should not show error message
     await page.locator('div#marketing-preferences--default input#mp_mobile').fill(''); // clear the email field
     await page.locator('div#marketing-preferences--default input#mp_mobile').fill('07123456789');
-    await expect(page.locator('div#marketing-preferences--default div.field-sms > div > label[for="mp_mobile"] > span > span')).toBeHidden('');
+    await expect(page.locator('div#marketing-preferences--default div.field-sms > div > div > label[for="mp_mobile"] > span > span')).toBeHidden('');
 
     // phone field should show error message when value is not entered
     await page.locator('div#marketing-preferences--default input#mp_phone').type('02081234567');
     await page.locator('div#marketing-preferences--default input#mp_phone').fill(''); // clear the email field
     await page.locator('div#marketing-preferences--default input#mp_address2').click();
-    await expect(page.locator('div#marketing-preferences--default div.field-phone > div > label > span > span')).toContainText('Please enter your phone number');
+    await expect(page.locator('div#marketing-preferences--default div.field-phone > div > div > label > span > span')).toContainText('Please enter your phone number');
 
     // phone field with 10 digits should show error message
     await page.locator('div#marketing-preferences--default input#mp_phone').type('0208123456');
     await page.locator('div#marketing-preferences--default input#mp_address2').click();
-    await expect(page.locator('div#marketing-preferences--default div.field-phone > div > label > span > span')).toContainText('Please enter a valid UK phone number');
+    await expect(page.locator('div#marketing-preferences--default div.field-phone > div > div > label > span > span')).toContainText('Please enter a valid UK phone number');
 
     // phone field with 12 digits should show error message
     await page.locator('div#marketing-preferences--default input#mp_phone').fill(''); // clear the email field
     await page.locator('div#marketing-preferences--default input#mp_phone').type('020812345678');
     await page.locator('div#marketing-preferences--default input#mp_address2').click();
-    await expect(page.locator('div#marketing-preferences--default div.field-phone > div > label > span > span')).toContainText('Please enter a valid UK phone number');
+    await expect(page.locator('div#marketing-preferences--default div.field-phone > div > div > label > span > span')).toContainText('Please enter a valid UK phone number');
 
     // phone field starting with a space should show error message
     await page.locator('div#marketing-preferences--default input#mp_phone').fill(''); // clear the email field
     await page.locator('div#marketing-preferences--default input#mp_phone').type(' 02081234567');
     await page.locator('div#marketing-preferences--default input#mp_address2').click();
-    await expect(page.locator('div#marketing-preferences--default div.field-phone > div > label > span > span')).toContainText('Please enter a valid UK phone number');
+    await expect(page.locator('div#marketing-preferences--default div.field-phone > div > div > label > span > span')).toContainText('Please enter a valid UK phone number');
 
     // phone field with valid input should not show error message
     await page.locator('div#marketing-preferences--default input#mp_phone').fill(''); // clear the email field
     await page.locator('div#marketing-preferences--default input#mp_phone').fill('02081234567');
-    await expect(page.locator('div#marketing-preferences--default div.field-phone > div > label > span > span')).toBeHidden('');
+    await expect(page.locator('div#marketing-preferences--default div.field-phone > div > div > label > span > span')).toBeHidden('');
 
     await page.close();
   });