@comicrelief/component-library 7.0.0 → 7.0.2

package/dist/components/Organisms/Donate/GivingSelector/GivingSelector.style.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Label = exports.MoneyBox = exports.Wrapper = exports.Switch = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _size = require("../../../../theme/shared/size");
+
+var _spacing = _interopRequireDefault(require("../../../../theme/shared/spacing"));
+
+var _zIndex = _interopRequireDefault(require("../../../../theme/shared/zIndex"));
+
+var _hideVisually = _interopRequireDefault(require("../../../../theme/shared/hideVisually"));
+
+var Switch = _styledComponents.default.span.withConfig({
+  displayName: "GivingSelectorstyle__Switch",
+  componentId: "sc-5ktn9c-0"
+})(["width:50%;height:48px;border-radius:2rem;", ";display:block;position:absolute;transition:left 0.15s ease-out;background-color:", ";left:2px;box-shadow:0px 0px 16px rgba(0,0,0,0.3);"], (0, _zIndex.default)('low'), function (_ref) {
+  var theme = _ref.theme;
+  return theme.color('blue');
+});
+
+exports.Switch = Switch;
+
+var Wrapper = _styledComponents.default.div.withConfig({
+  displayName: "GivingSelectorstyle__Wrapper",
+  componentId: "sc-5ktn9c-1"
+})(["display:flex;margin:", " 0;"], (0, _spacing.default)('md'));
+
+exports.Wrapper = Wrapper;
+
+var MoneyBox = _styledComponents.default.div.withConfig({
+  displayName: "GivingSelectorstyle__MoneyBox",
+  componentId: "sc-5ktn9c-2"
+})(["width:100%;padding:2px;position:relative;display:flex;flex-direction:row;margin:", " 0;border-radius:2rem;background:", ";", "{width:450px;margin:0 auto;}.give-monthly:checked ~ ", "{left:calc(50% - 2px);}input{", "}input:focus:not(:checked) + label{box-shadow:inset 0 0 0 4px ", ";}"], (0, _spacing.default)('md'), function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.color('blue_light');
+}, (0, _size.media)('small'), Switch, _hideVisually.default, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.color('blue');
+});
+
+exports.MoneyBox = MoneyBox;
+
+var Label = _styledComponents.default.label.withConfig({
+  displayName: "GivingSelectorstyle__Label",
+  componentId: "sc-5ktn9c-3"
+})(["font-size:", ";font-family:", ";font-weight:bold;min-height:48px;align-items:center;justify-content:center;display:flex;flex-basis:50%;border:none;transition:color 0.15s ease-out;", ";cursor:", ";border-radius:2rem;color:", ";&:active:focus{box-shadow:none;}&:focus{border:none;outline:none;box-shadow:inset 0 0 0 4px ", ";}"], function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.fontSize('s');
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.fontFamilies('Montserrat');
+}, (0, _zIndex.default)('medium'), function (_ref6) {
+  var active = _ref6.active;
+  return active === true ? 'default' : 'pointer';
+}, function (_ref7) {
+  var active = _ref7.active,
+      theme = _ref7.theme;
+  return active === true ? theme.color('white') : theme.color('black');
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.color('blue');
+});
+
+exports.Label = Label;

package/dist/components/Organisms/Donate/__snapshots__/Donate.test.js.snap

@@ -367,7 +367,7 @@ exports[`Monthly donation renders correctly 1`] = `
   background: #BECCF9;
 }
 
-.c8 #give-monthly:checked ~ .c11 {
+.c8 .give-monthly:checked ~ .c11 {
   left: calc(50% - 2px);
 }
 
@@ -415,6 +415,8 @@ exports[`Monthly donation renders correctly 1`] = `
   transition: color 0.15s ease-out;
   z-index: 2;
   cursor: default;
+  border-radius: 2rem;
+  color: #FFFFFF;
 }
 
 .c9:active:focus {
@@ -427,16 +429,6 @@ exports[`Monthly donation renders correctly 1`] = `
   box-shadow: inset 0 0 0 4px #0565D1;
 }
 
-.c9[for='give-once'] {
-  border-radius: 2rem;
-  color: #FFFFFF;
-}
-
-.c9[for='give-monthly'] {
-  border-radius: 2rem;
-  color: #FFFFFF;
-}
-
 .c10 {
   font-size: 1rem;
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
@@ -462,6 +454,8 @@ exports[`Monthly donation renders correctly 1`] = `
   transition: color 0.15s ease-out;
   z-index: 2;
   cursor: pointer;
+  border-radius: 2rem;
+  color: #000000;
 }
 
 .c10:active:focus {
@@ -474,16 +468,6 @@ exports[`Monthly donation renders correctly 1`] = `
   box-shadow: inset 0 0 0 4px #0565D1;
 }
 
-.c10[for='give-once'] {
-  border-radius: 2rem;
-  color: #000000;
-}
-
-.c10[for='give-monthly'] {
-  border-radius: 2rem;
-  color: #000000;
-}
-
 @media (min-width:740px) {
   .c5 {
     font-size: 1.25rem;
@@ -644,8 +628,9 @@ exports[`Monthly donation renders correctly 1`] = `
           <input
             aria-label="Single"
             checked={true}
+            className="give-once"
             errormsg=""
-            id="give-once"
+            id="give-once--mship-1"
             label=""
             onClick={[Function]}
             type="radio"
@@ -653,15 +638,16 @@ exports[`Monthly donation renders correctly 1`] = `
           />
           <label
             className="c9"
-            htmlFor="give-once"
+            htmlFor="give-once--mship-1"
           >
             Single
           </label>
           <input
             aria-label="Monthly"
             checked={false}
+            className="give-monthly"
             errormsg=""
-            id="give-monthly"
+            id="give-monthly--mship-1"
             label=""
             onClick={[Function]}
             type="radio"
@@ -669,7 +655,7 @@ exports[`Monthly donation renders correctly 1`] = `
           />
           <label
             className="c10"
-            htmlFor="give-monthly"
+            htmlFor="give-monthly--mship-1"
           >
             Monthly
           </label>
@@ -832,7 +818,7 @@ exports[`Monthly donation renders correctly 1`] = `
                   aria-label="Input a different amount"
                   className="c23"
                   id="mship-1--MoneyBuy-userInput"
-                  max="20000"
+                  max="25000"
                   min="1"
                   name="membership_amount"
                   onChange={[Function]}
@@ -1535,7 +1521,7 @@ exports[`Single donation renders correctly 1`] = `
                   aria-label="Input a different amount"
                   className="c17"
                   id="mship-1--MoneyBuy-userInput"
-                  max="20000"
+                  max="25000"
                   min="1"
                   name="membership_amount"
                   onChange={[Function]}
@@ -2001,7 +1987,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
                   aria-label="Input a different amount"
                   className="c17"
                   id="mship-1--MoneyBuy-userInput"
-                  max="20000"
+                  max="25000"
                   min="1"
                   name="membership_amount"
                   onChange={[Function]}

package/dist/components/Organisms/EmailSignUp/EmailSignUpForm.js

@@ -48,6 +48,7 @@ var EmailSignUpForm = function EmailSignUpForm() {
               valid = _context.sent;
 
               if (valid) {
+                // eslint-disable-next-line no-console
                 console.log(data);
               }
 

package/dist/components/Organisms/Membership/Form/Form.js

@@ -194,7 +194,7 @@ var Signup = function Signup(_ref) {
     id: "".concat(mbshipID, "--MoneyBuy-userInput"),
     showLabel: true
   }, rest, {
-    max: "20000",
+    max: "25000",
     min: "1",
     value: userInput,
     pattern: "[^[0-9]+([,.][0-9]+)?$]",
@@ -214,8 +214,9 @@ var Signup = function Signup(_ref) {
     type: "submit",
     value: "Donate"
   }), errorMsg && /*#__PURE__*/_react.default.createElement(_Membership2.Error, {
-    tag: "p"
-  }, "Please enter a number between 1 and 20000, and up to 2 decimal places"), moneyBuyCopy && /*#__PURE__*/_react.default.createElement(_Membership2.Copy, {
+    tag: "p",
+    className: "error--amount"
+  }, "Please enter a number between 1 and 25000, and up to 2 decimal places"), moneyBuyCopy && /*#__PURE__*/_react.default.createElement(_Membership2.Copy, {
     as: "p"
   }, moneyBuyCopy))));
 };

package/dist/components/Organisms/Membership/Membership.test.js

@@ -29,5 +29,5 @@ it("renders correctly", function () {
     subtitle: "Jordan was close to suicide - which is now the biggest killer of men under 45 in the UK. Join now and help save lives.",
     otherDescription: "Your donation will help us fund amazing projects in the UK and around the world."
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c6 {\n      font-size: 1.5rem;\n      line-height: 1.5rem;\n      text-transform: inherit;\n      font-weight: 800;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c7 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c12 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c16 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c22 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: 500;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c1 {\n      display: block;\n      width: 100%;\n      height: 100%;\n      position: relative;\n    }\n\n    .c3 {\n      width: 100%;\n      height: 100%;\n      display: block;\n      object-fit: cover;\n    }\n\n    .c14 {\n      position: relative;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      color: #5C5C5E;\n      width: 100%;\n    }\n\n    .c17 {\n      margin-bottom: 0.5rem;\n    }\n\n    .c19 {\n      position: relative;\n      box-sizing: border-box;\n      width: 100%;\n      height: 48px;\n      padding: 1rem 1.5rem;\n      background-color: #F4F3F5;\n      border: 1px solid;\n      border-color: #E1E2E3;\n      box-shadow: none;\n      -webkit-appearance: none;\n      -moz-appearance: none;\n      appearance: none;\n      color: #000000;\n      border-radius: 0.5rem;\n      font-size: inherit;\n      z-index: 2;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c19:focus {\n      border: 1px solid #666;\n    }\n\n    .c18 {\n      position: relative;\n      font-size: 1.25rem;\n    }\n\n    .c15 {\n      display: block;\n    }\n\n    .c15 input {\n      border: 2px solid #E1E2E3;\n      font-size: 1.5rem;\n      font-weight: 800;\n      -webkit-letter-spacing: -2px;\n      -moz-letter-spacing: -2px;\n      -ms-letter-spacing: -2px;\n      letter-spacing: -2px;\n      height: auto;\n    }\n\n    .c20 {\n      display: block;\n    }\n\n    .c20 input {\n      border: 2px solid #E1E2E3;\n      font-size: 1.5rem;\n      font-weight: 800;\n      -webkit-letter-spacing: -2px;\n      -moz-letter-spacing: -2px;\n      -ms-letter-spacing: -2px;\n      letter-spacing: -2px;\n      height: auto;\n      border-color: #E52630;\n      background-color: #E52630;\n      color: #FFFFFF;\n    }\n\n    .c0 {\n      background-color: #FEE3CC;\n      position: relative;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      min-height: 100vh;\n    }\n\n    .c2 {\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      height: auto;\n    }\n\n    .c2:before {\n      color: #FEE3CC;\n      content: '';\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      box-shadow: inset 0px 4rem 2rem -2rem;\n    }\n\n    .c4 {\n      position: relative;\n      max-width: 320px;\n      text-align: center;\n      margin-bottom: 50%;\n    }\n\n    .c5 {\n      padding: 2rem 1rem 0;\n      margin-bottom: 2rem;\n    }\n\n    .c8 {\n      background-color: #FFFFFF;\n      box-shadow: 0px 1rem 4rem rgba(0,0,0,0.3);\n      height: 450px;\n    }\n\n    .c9 {\n      padding: 1rem;\n    }\n\n    .c9 h3 {\n      margin-top: 1rem;\n    }\n\n    .c9 input {\n      max-width: 100%;\n      margin: 0;\n    }\n\n    .c10 {\n      padding: 0;\n      margin: 0;\n      border: none;\n    }\n\n    .c10 >:not(:last-child):not(legend) {\n      margin-bottom: 2rem;\n    }\n\n    .c11 {\n      margin: 0;\n      padding: 0;\n    }\n\n    .c13 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: justify;\n      -webkit-justify-content: space-between;\n      -ms-flex-pack: justify;\n      justify-content: space-between;\n    }\n\n    .c13 label {\n      -webkit-flex: 0 0 30%;\n      -ms-flex: 0 0 30%;\n      flex: 0 0 30%;\n    }\n\n    .c13 label input {\n      cursor: pointer;\n      padding: 1rem;\n    }\n\n    .c13 label:hover input {\n      border-color: #E52630;\n    }\n\n    .c21 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n    }\n\n    .c23 {\n      margin-right: auto;\n    }\n\n    .c24 {\n      position: relative;\n      -webkit-flex: 0 0 50%;\n      -ms-flex: 0 0 50%;\n      flex: 0 0 50%;\n      font-weight: 400;\n      display: block;\n    }\n\n    .c24 span {\n      position: absolute;\n      padding: 0px 15px;\n      font-size: 20px;\n      top: 50%;\n      -webkit-transform: translateY(-50%);\n      -ms-transform: translateY(-50%);\n      transform: translateY(-50%);\n      left: 0px;\n      font-weight: 500;\n    }\n\n    .c24 input {\n      border: 2px solid #E1E2E3;\n      background: transparent;\n      padding: 0.5rem 1rem 0.5rem 2rem;\n    }\n\n    .c24 input:focus {\n      border: 2px solid #E52630;\n    }\n\n    .c26 {\n      line-height: 1.5;\n    }\n\n    .c25 {\n      width: 100%;\n      color: #FFFFFF;\n      font-size: 1rem;\n      font-weight: bold;\n      cursor: pointer;\n      padding: 1rem 0.5rem;\n      background: #E52630;\n      border: none;\n      border-radius: 100px;\n    }\n\n    .c25:active,\n    .c25:focus,\n    .c25:hover {\n      background-color: #961D35;\n    }\n\n    @media (min-width:740px) {\n      .c19 {\n        max-width: 290px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 {\n        -webkit-align-items: center;\n        -webkit-box-align: center;\n        -ms-flex-align: center;\n        align-items: center;\n        -webkit-box-pack: inherit;\n        -webkit-justify-content: inherit;\n        -ms-flex-pack: inherit;\n        justify-content: inherit;\n        min-height: 750px;\n        height: 100vh;\n        max-height: 900px;\n        -webkit-flex-direction: row;\n        -ms-flex-direction: row;\n        flex-direction: row;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c2 {\n        height: 100%;\n      }\n\n      .c2:before {\n        content: none;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c4 {\n        margin: 0 8rem;\n        max-width: 420px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c8 {\n        height: 430px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c24 {\n        -webkit-flex: 0 0 60%;\n        -ms-flex: 0 0 60%;\n        flex: 0 0 60%;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c25 {\n        width: auto;\n        padding: 1rem 2rem;\n        margin: 0 auto 2rem;\n      }\n    }\n\n    <div\n      className=\"c0\"\n      id=\"mship-1\"\n    >\n      <div\n        className=\"c1 c2\"\n        height=\"100%\"\n        width=\"100%\"\n      >\n        <img\n          alt=\"Background image\"\n          className=\"c3 lazyload\"\n          data-src={null}\n          height=\"100%\"\n          width=\"100%\"\n        />\n      </div>\n      <div\n        className=\"c4\"\n      >\n        <div\n          className=\"c5\"\n        >\n          <h2\n            className=\"c6\"\n            color=\"inherit\"\n            size=\"l\"\n          >\n            Help someone like Jordan see a better tomorrow\n          </h2>\n          <p\n            className=\"c7\"\n            color=\"inherit\"\n            size=\"s\"\n          >\n            Jordan was close to suicide - which is now the biggest killer of men under 45 in the UK. Join now and help save lives.\n          </p>\n        </div>\n        <div\n          className=\"c8\"\n        >\n          <form\n            className=\"c9\"\n            onSubmit={[Function]}\n          >\n            <fieldset\n              className=\"c10\"\n            >\n              <legend\n                className=\"c11\"\n              >\n                <h3\n                  className=\"c12\"\n                  color=\"inherit\"\n                  size=\"s\"\n                >\n                  Choose your monthly donation\n                </h3>\n              </legend>\n              <div\n                className=\"c13\"\n              >\n                <label\n                  className=\"c14 c15\"\n                  htmlFor=\"mship-1--moneyBuy-box1\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--moneyBuy-box1\"\n                      aria-label=\"\xA35\"\n                      className=\"c19\"\n                      id=\"mship-1--moneyBuy-box1\"\n                      name=\"mship-1--moneyBuy1\"\n                      onClick={[Function]}\n                      placeholder=\"\"\n                      required={false}\n                      type=\"button\"\n                      value=\"\xA3 5\"\n                    />\n                  </div>\n                  \n                </label>\n                <label\n                  className=\"c14 c20\"\n                  htmlFor=\"mship-1--moneyBuy-box2\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--moneyBuy-box2\"\n                      aria-label=\"\xA310\"\n                      className=\"c19\"\n                      id=\"mship-1--moneyBuy-box2\"\n                      name=\"mship-1--moneyBuy2\"\n                      onClick={[Function]}\n                      placeholder=\"\"\n                      required={false}\n                      type=\"button\"\n                      value=\"\xA3 10\"\n                    />\n                  </div>\n                  \n                </label>\n                <label\n                  className=\"c14 c15\"\n                  htmlFor=\"mship-1--moneyBuy-box3\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--moneyBuy-box3\"\n                      aria-label=\"\xA320\"\n                      className=\"c19\"\n                      id=\"mship-1--moneyBuy-box3\"\n                      name=\"mship-1--moneyBuy3\"\n                      onClick={[Function]}\n                      placeholder=\"\"\n                      required={false}\n                      type=\"button\"\n                      value=\"\xA3 20\"\n                    />\n                  </div>\n                  \n                </label>\n              </div>\n              <div\n                className=\"c21\"\n              >\n                <span\n                  className=\"c22 c23\"\n                  color=\"inherit\"\n                  size=\"s\"\n                >\n                  Other amount\n                </span>\n                <label\n                  className=\"c14 c24\"\n                  htmlFor=\"mship-1--MoneyBuy-userInput\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\xA3\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--MoneyBuy-userInput\"\n                      aria-label=\"Input a different amount\"\n                      className=\"c19\"\n                      id=\"mship-1--MoneyBuy-userInput\"\n                      max=\"20000\"\n                      min=\"1\"\n                      name=\"membership_amount\"\n                      onChange={[Function]}\n                      onClick={[Function]}\n                      onKeyPress={[Function]}\n                      pattern=\"[^[0-9]+([,.][0-9]+)?$]\"\n                      placeholder=\"0.00\"\n                      required={false}\n                      step=\"0.01\"\n                      type=\"number\"\n                      value=\"\"\n                    />\n                  </div>\n                  \n                </label>\n              </div>\n              <input\n                className=\"c25\"\n                type=\"submit\"\n                value=\"Donate\"\n              />\n              <p\n                className=\"c26\"\n              />\n            </fieldset>\n          </form>\n        </div>\n      </div>\n    </div>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c6 {\n      font-size: 1.5rem;\n      line-height: 1.5rem;\n      text-transform: inherit;\n      font-weight: 800;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c7 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c12 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c16 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c22 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: 500;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c1 {\n      display: block;\n      width: 100%;\n      height: 100%;\n      position: relative;\n    }\n\n    .c3 {\n      width: 100%;\n      height: 100%;\n      display: block;\n      object-fit: cover;\n    }\n\n    .c14 {\n      position: relative;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      color: #5C5C5E;\n      width: 100%;\n    }\n\n    .c17 {\n      margin-bottom: 0.5rem;\n    }\n\n    .c19 {\n      position: relative;\n      box-sizing: border-box;\n      width: 100%;\n      height: 48px;\n      padding: 1rem 1.5rem;\n      background-color: #F4F3F5;\n      border: 1px solid;\n      border-color: #E1E2E3;\n      box-shadow: none;\n      -webkit-appearance: none;\n      -moz-appearance: none;\n      appearance: none;\n      color: #000000;\n      border-radius: 0.5rem;\n      font-size: inherit;\n      z-index: 2;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c19:focus {\n      border: 1px solid #666;\n    }\n\n    .c18 {\n      position: relative;\n      font-size: 1.25rem;\n    }\n\n    .c15 {\n      display: block;\n    }\n\n    .c15 input {\n      border: 2px solid #E1E2E3;\n      font-size: 1.5rem;\n      font-weight: 800;\n      -webkit-letter-spacing: -2px;\n      -moz-letter-spacing: -2px;\n      -ms-letter-spacing: -2px;\n      letter-spacing: -2px;\n      height: auto;\n    }\n\n    .c20 {\n      display: block;\n    }\n\n    .c20 input {\n      border: 2px solid #E1E2E3;\n      font-size: 1.5rem;\n      font-weight: 800;\n      -webkit-letter-spacing: -2px;\n      -moz-letter-spacing: -2px;\n      -ms-letter-spacing: -2px;\n      letter-spacing: -2px;\n      height: auto;\n      border-color: #E52630;\n      background-color: #E52630;\n      color: #FFFFFF;\n    }\n\n    .c0 {\n      background-color: #FEE3CC;\n      position: relative;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      min-height: 100vh;\n    }\n\n    .c2 {\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      height: auto;\n    }\n\n    .c2:before {\n      color: #FEE3CC;\n      content: '';\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      box-shadow: inset 0px 4rem 2rem -2rem;\n    }\n\n    .c4 {\n      position: relative;\n      max-width: 320px;\n      text-align: center;\n      margin-bottom: 50%;\n    }\n\n    .c5 {\n      padding: 2rem 1rem 0;\n      margin-bottom: 2rem;\n    }\n\n    .c8 {\n      background-color: #FFFFFF;\n      box-shadow: 0px 1rem 4rem rgba(0,0,0,0.3);\n      height: 450px;\n    }\n\n    .c9 {\n      padding: 1rem;\n    }\n\n    .c9 h3 {\n      margin-top: 1rem;\n    }\n\n    .c9 input {\n      max-width: 100%;\n      margin: 0;\n    }\n\n    .c10 {\n      padding: 0;\n      margin: 0;\n      border: none;\n    }\n\n    .c10 >:not(:last-child):not(legend) {\n      margin-bottom: 2rem;\n    }\n\n    .c11 {\n      margin: 0;\n      padding: 0;\n    }\n\n    .c13 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: justify;\n      -webkit-justify-content: space-between;\n      -ms-flex-pack: justify;\n      justify-content: space-between;\n    }\n\n    .c13 label {\n      -webkit-flex: 0 0 30%;\n      -ms-flex: 0 0 30%;\n      flex: 0 0 30%;\n    }\n\n    .c13 label input {\n      cursor: pointer;\n      padding: 1rem;\n    }\n\n    .c13 label:hover input {\n      border-color: #E52630;\n    }\n\n    .c21 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n    }\n\n    .c23 {\n      margin-right: auto;\n    }\n\n    .c24 {\n      position: relative;\n      -webkit-flex: 0 0 50%;\n      -ms-flex: 0 0 50%;\n      flex: 0 0 50%;\n      font-weight: 400;\n      display: block;\n    }\n\n    .c24 span {\n      position: absolute;\n      padding: 0px 15px;\n      font-size: 20px;\n      top: 50%;\n      -webkit-transform: translateY(-50%);\n      -ms-transform: translateY(-50%);\n      transform: translateY(-50%);\n      left: 0px;\n      font-weight: 500;\n    }\n\n    .c24 input {\n      border: 2px solid #E1E2E3;\n      background: transparent;\n      padding: 0.5rem 1rem 0.5rem 2rem;\n    }\n\n    .c24 input:focus {\n      border: 2px solid #E52630;\n    }\n\n    .c26 {\n      line-height: 1.5;\n    }\n\n    .c25 {\n      width: 100%;\n      color: #FFFFFF;\n      font-size: 1rem;\n      font-weight: bold;\n      cursor: pointer;\n      padding: 1rem 0.5rem;\n      background: #E52630;\n      border: none;\n      border-radius: 100px;\n    }\n\n    .c25:active,\n    .c25:focus,\n    .c25:hover {\n      background-color: #961D35;\n    }\n\n    @media (min-width:740px) {\n      .c19 {\n        max-width: 290px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 {\n        -webkit-align-items: center;\n        -webkit-box-align: center;\n        -ms-flex-align: center;\n        align-items: center;\n        -webkit-box-pack: inherit;\n        -webkit-justify-content: inherit;\n        -ms-flex-pack: inherit;\n        justify-content: inherit;\n        min-height: 750px;\n        height: 100vh;\n        max-height: 900px;\n        -webkit-flex-direction: row;\n        -ms-flex-direction: row;\n        flex-direction: row;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c2 {\n        height: 100%;\n      }\n\n      .c2:before {\n        content: none;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c4 {\n        margin: 0 8rem;\n        max-width: 420px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c8 {\n        height: 430px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c24 {\n        -webkit-flex: 0 0 60%;\n        -ms-flex: 0 0 60%;\n        flex: 0 0 60%;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c25 {\n        width: auto;\n        padding: 1rem 2rem;\n        margin: 0 auto 2rem;\n      }\n    }\n\n    <div\n      className=\"c0\"\n      id=\"mship-1\"\n    >\n      <div\n        className=\"c1 c2\"\n        height=\"100%\"\n        width=\"100%\"\n      >\n        <img\n          alt=\"Background image\"\n          className=\"c3 lazyload\"\n          data-src={null}\n          height=\"100%\"\n          width=\"100%\"\n        />\n      </div>\n      <div\n        className=\"c4\"\n      >\n        <div\n          className=\"c5\"\n        >\n          <h2\n            className=\"c6\"\n            color=\"inherit\"\n            size=\"l\"\n          >\n            Help someone like Jordan see a better tomorrow\n          </h2>\n          <p\n            className=\"c7\"\n            color=\"inherit\"\n            size=\"s\"\n          >\n            Jordan was close to suicide - which is now the biggest killer of men under 45 in the UK. Join now and help save lives.\n          </p>\n        </div>\n        <div\n          className=\"c8\"\n        >\n          <form\n            className=\"c9\"\n            onSubmit={[Function]}\n          >\n            <fieldset\n              className=\"c10\"\n            >\n              <legend\n                className=\"c11\"\n              >\n                <h3\n                  className=\"c12\"\n                  color=\"inherit\"\n                  size=\"s\"\n                >\n                  Choose your monthly donation\n                </h3>\n              </legend>\n              <div\n                className=\"c13\"\n              >\n                <label\n                  className=\"c14 c15\"\n                  htmlFor=\"mship-1--moneyBuy-box1\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--moneyBuy-box1\"\n                      aria-label=\"\xA35\"\n                      className=\"c19\"\n                      id=\"mship-1--moneyBuy-box1\"\n                      name=\"mship-1--moneyBuy1\"\n                      onClick={[Function]}\n                      placeholder=\"\"\n                      required={false}\n                      type=\"button\"\n                      value=\"\xA3 5\"\n                    />\n                  </div>\n                  \n                </label>\n                <label\n                  className=\"c14 c20\"\n                  htmlFor=\"mship-1--moneyBuy-box2\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--moneyBuy-box2\"\n                      aria-label=\"\xA310\"\n                      className=\"c19\"\n                      id=\"mship-1--moneyBuy-box2\"\n                      name=\"mship-1--moneyBuy2\"\n                      onClick={[Function]}\n                      placeholder=\"\"\n                      required={false}\n                      type=\"button\"\n                      value=\"\xA3 10\"\n                    />\n                  </div>\n                  \n                </label>\n                <label\n                  className=\"c14 c15\"\n                  htmlFor=\"mship-1--moneyBuy-box3\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--moneyBuy-box3\"\n                      aria-label=\"\xA320\"\n                      className=\"c19\"\n                      id=\"mship-1--moneyBuy-box3\"\n                      name=\"mship-1--moneyBuy3\"\n                      onClick={[Function]}\n                      placeholder=\"\"\n                      required={false}\n                      type=\"button\"\n                      value=\"\xA3 20\"\n                    />\n                  </div>\n                  \n                </label>\n              </div>\n              <div\n                className=\"c21\"\n              >\n                <span\n                  className=\"c22 c23\"\n                  color=\"inherit\"\n                  size=\"s\"\n                >\n                  Other amount\n                </span>\n                <label\n                  className=\"c14 c24\"\n                  htmlFor=\"mship-1--MoneyBuy-userInput\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\xA3\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--MoneyBuy-userInput\"\n                      aria-label=\"Input a different amount\"\n                      className=\"c19\"\n                      id=\"mship-1--MoneyBuy-userInput\"\n                      max=\"25000\"\n                      min=\"1\"\n                      name=\"membership_amount\"\n                      onChange={[Function]}\n                      onClick={[Function]}\n                      onKeyPress={[Function]}\n                      pattern=\"[^[0-9]+([,.][0-9]+)?$]\"\n                      placeholder=\"0.00\"\n                      required={false}\n                      step=\"0.01\"\n                      type=\"number\"\n                      value=\"\"\n                    />\n                  </div>\n                  \n                </label>\n              </div>\n              <input\n                className=\"c25\"\n                type=\"submit\"\n                value=\"Donate\"\n              />\n              <p\n                className=\"c26\"\n              />\n            </fieldset>\n          </form>\n        </div>\n      </div>\n    </div>\n  ");
 });

package/dist/utils/Membership.js

@@ -16,7 +16,7 @@ exports.onKeyPress = onKeyPress;
 
 var isAmountValid = function isAmountValid(input) {
   var reg = /^\s*(?=.*[1-9])\d*(?:\.\d{1,2})?\s*$/g;
-  var isValid = input * 1 >= 1 && input * 1 <= 20000 && reg.test(input);
+  var isValid = input * 1 >= 1 && input * 1 <= 25000 && reg.test(input);
   return isValid;
 };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.0.0",
+  "version": "7.0.2",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Organisms/Donate/Donate.md

@@ -41,7 +41,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-1"
+  mbshipID="mship-2"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -66,7 +66,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-1"
+  mbshipID="mship-3"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -91,7 +91,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-1"
+  mbshipID="mship-4"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -118,7 +118,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-1"
+  mbshipID="mship-5"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -143,7 +143,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-1"
+  mbshipID="mship-6"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -168,7 +168,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-1"
+  mbshipID="mship-7"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -193,7 +193,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-1"
+  mbshipID="mship-8"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -213,7 +213,7 @@ import data from './dev-data/data-single';
   backgroundColor="blue_dark"
   formAlignRight={false}
   data={data}
-  mbshipID="mship-1"
+  mbshipID="mship-9"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -241,7 +241,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-1"
+  mbshipID="mship-10"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"

package/src/components/Organisms/Donate/Form/Form.js

@@ -125,6 +125,7 @@ const Signup = ({
           givingType={givingType}
           changeGivingType={data => setGivingType(data)}
           setPopOpen={setPopOpen}
+          mbshipID={mbshipID}
         />
       )}
 
@@ -178,7 +179,7 @@ const Signup = ({
               id={`${mbshipID}--MoneyBuy-userInput`}
               showLabel
               {...rest}
-              max="20000"
+              max="25000"
               min="1"
               value={amountDonate}
               pattern="[^[0-9]+([,.][0-9]+)?$]"
@@ -193,6 +194,14 @@ const Signup = ({
               {moneyBuyCopy}
             </Copy>
           )}
+
+          {errorMsg && (
+          <Error className="error--amount" tag="p">
+            Please enter an amount between £1 and £25000 and up to 2 decimal
+            places
+          </Error>
+          )}
+
           {noMoneyBuys ? (
             <Button type="submit" as="input" value="Donate" />
           ) : (
@@ -202,12 +211,7 @@ const Signup = ({
               value={givingType === 'single' ? 'Donate now' : 'Donate monthly'}
             />
           )}
-          {errorMsg && (
-            <Error tag="p">
-              Please enter an amount between £1 and £20000 and up to 2 decimal
-              places
-            </Error>
-          )}
+
         </OuterFieldset>
       </Form>
     </FormWrapper>

package/src/components/Organisms/Donate/GivingSelector/GivingSelector.js

@@ -1,91 +1,19 @@
 import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-
-import { media } from '../../../../theme/shared/size';
-import spacing from '../../../../theme/shared/spacing';
-import zIndex from '../../../../theme/shared/zIndex';
-import hideVisually from '../../../../theme/shared/hideVisually';
-
-const Switch = styled.span`
-  width: 50%;
-  height: 48px;
-  border-radius: 2rem;
-  ${zIndex('low')};
-  display: block;
-  position: absolute;
-  transition: left 0.15s ease-out;
-  background-color: ${({ theme }) => theme.color('blue')};
-  left: 2px;
-  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.3);
-`;
 
-const Wrapper = styled.div`
-  display: flex;
-  margin: ${spacing('md')} 0;
-`;
-
-const MoneyBox = styled.div`
-  width: 100%;
-  padding: 2px;
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  margin: ${spacing('md')} 0;
-  border-radius: 2rem;
-  background: ${({ theme }) => theme.color('blue_light')};
-  ${media('small')} {
-    width: 450px;
-    margin: 0 auto;
-  }
-  #give-monthly:checked ~ ${Switch} {
-    left: calc(50% - 2px);
-  }
-  input {
-    ${hideVisually}
-  }
-  input:focus:not(:checked) + label {
-    box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('blue')};
-  }
-`;
-
-const Label = styled.label`
-  font-size: ${({ theme }) => theme.fontSize('s')};
-  font-family: ${({ theme }) => theme.fontFamilies('Montserrat')};
-  font-weight: bold;
-  min-height: 48px;
-  align-items: center;
-  justify-content: center;
-  display: flex;
-  flex-basis: 50%;
-  border: none;
-  transition: color 0.15s ease-out;
-  ${zIndex('medium')};
-  cursor: ${({ active }) => (active === true ? 'default' : 'pointer')};
-  &:active:focus {
-    box-shadow: none;
-  }
-  &:focus {
-    border: none;
-    outline: none;
-    box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('blue')};
-  }
-  &[for='give-once'] {
-    border-radius: 2rem;
-    color: ${({ active, theme }) => (active === true ? theme.color('white') : theme.color('black'))};
-  }
-  &[for='give-monthly'] {
-    border-radius: 2rem;
-    color: ${({ active, theme }) => (active === true ? theme.color('white') : theme.color('black'))};
-  }
-`;
+import PropTypes from 'prop-types';
+import {
+  Switch, Wrapper, MoneyBox, Label
+} from './GivingSelector.style';
 
-const GivingSelector = ({ givingType, changeGivingType, setPopOpen }) => (
+const GivingSelector = ({
+  givingType, changeGivingType, setPopOpen, mbshipID
+}) => (
   <Wrapper>
     <MoneyBox>
       <input
+        className="give-once"
         aria-label="Single"
-        id="give-once"
+        id={`give-once--${mbshipID}`}
         value="Single"
         type="radio"
         label=""
@@ -96,12 +24,13 @@ const GivingSelector = ({ givingType, changeGivingType, setPopOpen }) => (
           setPopOpen(true);
         }}
       />
-      <Label active={givingType === 'single'} htmlFor="give-once">
+      <Label active={givingType === 'single'} htmlFor={`give-once--${mbshipID}`}>
         Single
       </Label>
       <input
+        className="give-monthly"
         aria-label="Monthly"
-        id="give-monthly"
+        id={`give-monthly--${mbshipID}`}
         value="Monthly"
         type="radio"
         label=""
@@ -112,7 +41,7 @@ const GivingSelector = ({ givingType, changeGivingType, setPopOpen }) => (
           setPopOpen(false);
         }}
       />
-      <Label active={givingType === 'monthly'} htmlFor="give-monthly">
+      <Label active={givingType === 'monthly'} htmlFor={`give-monthly--${mbshipID}`}>
         Monthly
       </Label>
       <Switch />
@@ -123,7 +52,8 @@ const GivingSelector = ({ givingType, changeGivingType, setPopOpen }) => (
 GivingSelector.propTypes = {
   givingType: PropTypes.string.isRequired,
   changeGivingType: PropTypes.func.isRequired,
-  setPopOpen: PropTypes.func.isRequired
+  setPopOpen: PropTypes.func.isRequired,
+  mbshipID: PropTypes.string.isRequired
 };
 
 export default GivingSelector;

package/src/components/Organisms/Donate/GivingSelector/GivingSelector.style.js

@@ -0,0 +1,78 @@
+import styled from 'styled-components';
+
+import { media } from '../../../../theme/shared/size';
+import spacing from '../../../../theme/shared/spacing';
+import zIndex from '../../../../theme/shared/zIndex';
+import hideVisually from '../../../../theme/shared/hideVisually';
+
+const Switch = styled.span`
+  width: 50%;
+  height: 48px;
+  border-radius: 2rem;
+  ${zIndex('low')};
+  display: block;
+  position: absolute;
+  transition: left 0.15s ease-out;
+  background-color: ${({ theme }) => theme.color('blue')};
+  left: 2px;
+  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.3);
+`;
+
+const Wrapper = styled.div`
+  display: flex;
+  margin: ${spacing('md')} 0;
+`;
+
+const MoneyBox = styled.div`
+  width: 100%;
+  padding: 2px;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  margin: ${spacing('md')} 0;
+  border-radius: 2rem;
+  background: ${({ theme }) => theme.color('blue_light')};
+  ${media('small')} {
+    width: 450px;
+    margin: 0 auto;
+  }
+  .give-monthly:checked ~ ${Switch} {
+    left: calc(50% - 2px);
+  }
+  input {
+    ${hideVisually}
+  }
+  input:focus:not(:checked) + label {
+    box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('blue')};
+  }
+`;
+
+const Label = styled.label`
+  font-size: ${({ theme }) => theme.fontSize('s')};
+  font-family: ${({ theme }) => theme.fontFamilies('Montserrat')};
+  font-weight: bold;
+  min-height: 48px;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  flex-basis: 50%;
+  border: none;
+  transition: color 0.15s ease-out;
+  ${zIndex('medium')};
+  cursor: ${({ active }) => (active === true ? 'default' : 'pointer')};
+  border-radius: 2rem;
+  color: ${({ active, theme }) => (active === true ? theme.color('white') : theme.color('black'))};
+
+  &:active:focus {
+    box-shadow: none;
+  }
+  &:focus {
+    border: none;
+    outline: none;
+    box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('blue')};
+  }
+`;
+
+export {
+  Switch, Wrapper, MoneyBox, Label
+};