@comicrelief/component-library 8.5.1 → 8.6.1

package/dist/components/Organisms/MarketingPreferencesDS/MarketingPreferencesDS.style.js

@@ -5,127 +5,134 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TopCopyWrapper = exports.ShowHideInputWrapper = exports.OuterWrapper = exports.MPTextInput = exports.Head = exports.FormField = exports.ExtraInfo = exports.CheckLabel = exports.CheckInput = exports.CheckContainer = exports.BottomCopyWrapper = void 0;
+exports.TopCopyWrapper = exports.ShowHideInputWrapper = exports.OuterWrapper = exports.MPTextInput = exports.FormField = exports.ExtraInfo = exports.CheckboxWrapper = exports.CheckLabel = exports.CheckInput = exports.CheckContainer = exports.BottomCopyWrapper = exports.AssociatedFieldsName = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _CR_Tick_black = _interopRequireDefault(require("./assets/CR_Tick_black.svg"));
 var _TextInput = _interopRequireDefault(require("./_TextInput"));
+var _Email = _interopRequireDefault(require("./assets/Email.svg"));
+var _Phone = _interopRequireDefault(require("./assets/Phone.svg"));
+var _Post = _interopRequireDefault(require("./assets/Post.svg"));
+var _Text = _interopRequireDefault(require("./assets/Text.svg"));
+var _EmailWhite = _interopRequireDefault(require("./assets/Email--white.svg"));
+var _PhoneWhite = _interopRequireDefault(require("./assets/Phone--white.svg"));
+var _PostWhite = _interopRequireDefault(require("./assets/Post--white.svg"));
+var _TextWhite = _interopRequireDefault(require("./assets/Text--white.svg"));
 const OuterWrapper = exports.OuterWrapper = _styledComponents.default.div.withConfig({
   displayName: "MarketingPreferencesDSstyle__OuterWrapper",
   componentId: "sc-68n85q-0"
-})(["display:flex;flex-direction:column;@media ", "{flex-direction:row;flex-wrap:wrap;}"], _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.allBreakpoints('M');
-});
+})(["display:flex;flex-direction:column;&:after{position:absolute;width:0;height:0;overflow:hidden;z-index:-1;content:url(", ") url(", ") url(", ") url(", ");}"], _EmailWhite.default, _PhoneWhite.default, _PostWhite.default, _TextWhite.default);
 const TopCopyWrapper = exports.TopCopyWrapper = _styledComponents.default.div.withConfig({
   displayName: "MarketingPreferencesDSstyle__TopCopyWrapper",
   componentId: "sc-68n85q-1"
-})(["margin:", " 0;display:flex;width:100%;@media ", "{padding:10px;}"], (0, _spacing.default)('l'), _ref2 => {
+})(["margin:", " 0;display:flex;width:100%;@media ", "{padding:10px;}"], (0, _spacing.default)('l'), _ref => {
   let {
     theme
-  } = _ref2;
+  } = _ref;
   return theme.allBreakpoints('M');
 });
 const BottomCopyWrapper = exports.BottomCopyWrapper = _styledComponents.default.div.withConfig({
   displayName: "MarketingPreferencesDSstyle__BottomCopyWrapper",
   componentId: "sc-68n85q-2"
 })(["margin:", " 0;"], (0, _spacing.default)('md'));
-const Head = exports.Head = _styledComponents.default.div.withConfig({
-  displayName: "MarketingPreferencesDSstyle__Head",
+const CheckboxWrapper = exports.CheckboxWrapper = _styledComponents.default.div.withConfig({
+  displayName: "MarketingPreferencesDSstyle__CheckboxWrapper",
   componentId: "sc-68n85q-3"
 })(["display:flex;justify-content:space-between;flex-direction:column;"]);
+const AssociatedFieldsName = exports.AssociatedFieldsName = _styledComponents.default.span.withConfig({
+  displayName: "MarketingPreferencesDSstyle__AssociatedFieldsName",
+  componentId: "sc-68n85q-4"
+})(["padding-left:40px;line-height:30px;background-repeat:no-repeat;background-position:left center;&.icon-mp_permissionEmail{background-image:url(", ")}&.icon-mp_permissionPhone{background-image:url(", ")}&.icon-mp_permissionPost{background-image:url(", ")}&.icon-mp_permissionSMS{background-image:url(", ")}"], _Email.default, _Phone.default, _Post.default, _Text.default);
 const FormField = exports.FormField = _styledComponents.default.div.withConfig({
   displayName: "MarketingPreferencesDSstyle__FormField",
-  componentId: "sc-68n85q-4"
-})(["", ""], _ref3 => {
+  componentId: "sc-68n85q-5"
+})(["", ""], _ref2 => {
   let {
     theme
-  } = _ref3;
-  return (0, _styledComponents.css)(["position:relative;margin-bottom:", ";width:100%;display:flex;flex-direction:column;@media ", "{width:50%;padding:10px;}label{position:relative;margin-bottom:", ";width:100%;color:", ";}h3{position:relative;margin-bottom:", ";&:before{position:absolute;top:0;left:0;width:24px;height:24px;content:'';}}"], (0, _spacing.default)('md'), theme.allBreakpoints('M'), (0, _spacing.default)('md'), theme.color('grey_dark'), (0, _spacing.default)('md'));
+  } = _ref2;
+  return (0, _styledComponents.css)(["position:relative;margin-bottom:", ";width:100%;display:flex;flex-direction:column;padding:", ";border:1px solid ", ";;border-radius:10px;background-color:", ";transition:background-color 0.3s,color 0.3s;&:hover{background-color:", ";}&.selected{background-color:", ";span.icon-mp_permissionEmail{background-image:url(", ");}span.icon-mp_permissionPhone{background-image:url(", ");}span.icon-mp_permissionPost{background-image:url(", ");}span.icon-mp_permissionSMS{background-image:url(", ");}> div{label,> span{color:", ";}}&:hover{background-color:#161a85;}}label{position:relative;margin-bottom:0;width:100%;color:", ";font-weight:600;display:flex;justify-content:space-between;}h3{position:relative;margin-bottom:", ";&:before{position:absolute;top:0;left:0;width:24px;height:24px;content:'';}}"], (0, _spacing.default)('md'), (0, _spacing.default)('m'), theme.color('grey'), theme.color('grey_light'), theme.color('grey_medium'), theme.color('blue_donate'), _EmailWhite.default, _PhoneWhite.default, _PostWhite.default, _TextWhite.default, theme.color('white'), theme.color('black'), (0, _spacing.default)('md'));
 });
 const CheckContainer = exports.CheckContainer = _styledComponents.default.div.withConfig({
   displayName: "MarketingPreferencesDSstyle__CheckContainer",
-  componentId: "sc-68n85q-5"
-})(["", ""], _ref4 => {
+  componentId: "sc-68n85q-6"
+})(["", ""], _ref3 => {
   let {
     theme
-  } = _ref4;
+  } = _ref3;
   return (0, _styledComponents.css)(["width:100%;display:flex;justify-content:space-between;font-size:", ";font-family:", ";"], theme.fontSize('md'), theme.fontFamilies(theme.font.regular));
 });
 const CheckLabel = exports.CheckLabel = _styledComponents.default.label.withConfig({
   displayName: "MarketingPreferencesDSstyle__CheckLabel",
-  componentId: "sc-68n85q-6"
-})(["", ""], _ref5 => {
+  componentId: "sc-68n85q-7"
+})(["", ""], _ref4 => {
   let {
     theme
-  } = _ref5;
+  } = _ref4;
   return (0, _styledComponents.css)(["display:flex;align-items:center;font-size:", ";@media ", "{font-size:", ";}"], theme.fontSize('xs'), theme.allBreakpoints('M'), theme.fontSize('s'));
 });
 const CheckInput = exports.CheckInput = _styledComponents.default.input.withConfig({
   displayName: "MarketingPreferencesDSstyle__CheckInput",
-  componentId: "sc-68n85q-7"
-})(["font-size:", ";display:block;box-sizing:border-box;opacity:0;position:absolute;width:100%;height:100%;left:0;top:0;margin:0;border:1px solid ", ";+ span{margin-right:10px;width:30px;height:30px;background-color:", ";border:1px solid ", ";float:left;border-radius:8px;@media ", "{margin-right:15px;}}:checked + span{background:url(", ") no-repeat center;background-color:", ";background-size:contain;}"], _ref6 => {
+  componentId: "sc-68n85q-8"
+})(["font-size:", ";display:block;box-sizing:border-box;opacity:0;position:absolute;width:100%;height:100%;left:0;top:0;margin:0;border:1px solid ", ";+ span{width:30px;height:30px;background-color:", ";border:1px solid ", ";float:left;border-radius:8px;}:checked + span{background:url(", ") no-repeat center ", ";;background-size:contain;}"], _ref5 => {
   let {
     theme
-  } = _ref6;
+  } = _ref5;
   return theme.fontSize('sm');
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.color('grey_for_forms');
 }, _ref7 => {
   let {
     theme
   } = _ref7;
-  return theme.color('grey_for_forms');
+  return theme.color('white');
 }, _ref8 => {
   let {
     theme
   } = _ref8;
-  return theme.color('grey_light');
-}, _ref9 => {
-  let {
-    theme
-  } = _ref9;
   return theme.color('black');
-}, _ref10 => {
+}, _CR_Tick_black.default, _ref9 => {
   let {
     theme
-  } = _ref10;
-  return theme.allBreakpoints('M');
-}, _CR_Tick_black.default, _ref11 => {
-  let {
-    theme
-  } = _ref11;
-  return theme.color('grey_light');
+  } = _ref9;
+  return theme.color('white');
 });
 const ShowHideInputWrapper = exports.ShowHideInputWrapper = _styledComponents.default.div.withConfig({
   displayName: "MarketingPreferencesDSstyle__ShowHideInputWrapper",
-  componentId: "sc-68n85q-8"
-})(["display:", ";width:100%;label{width:100%;border:none;padding:0;}"], _ref12 => {
+  componentId: "sc-68n85q-9"
+})(["display:", ";width:100%;label{width:100%;border:none;padding:0;}"], _ref10 => {
   let {
     show
-  } = _ref12;
+  } = _ref10;
   return show ? 'block' : 'none';
 });
 const ExtraInfo = exports.ExtraInfo = _styledComponents.default.span.withConfig({
   displayName: "MarketingPreferencesDSstyle__ExtraInfo",
-  componentId: "sc-68n85q-9"
-})(["display:block;width:100%;font-size:1rem;text-transform:inherit;font-weight:normal;line-height:normal;font-family:'Montserrat',Helvetica,Arial,sans-serif;margin-bottom:0.5rem;color:", ";+ label{margin-top:20px;&[for=\"mp_email\"],&[for=\"mp_mobile\"],&[for=\"mp_phone\"]{> span:first-child{position:absolute;margin:-1px;padding:0;width:1px;height:1px;border:0;overflow:hidden;clip:rect(1px 1px 1px 1px);word-wrap:normal;}}"], _ref13 => {
+  componentId: "sc-68n85q-10"
+})(["display:block;width:100%;font-size:1rem;text-transform:inherit;font-weight:normal;line-height:normal;font-family:'Montserrat',Helvetica,Arial,sans-serif;margin-bottom:0rem;margin-top:1rem;color:", ";+ label{margin-top:", ";margin-bottom:0;&[for=\"mp_email\"],&[for=\"mp_mobile\"],&[for=\"mp_phone\"]{> span:first-child{position:absolute;margin:-1px;padding:0;width:1px;height:1px;border:0;overflow:hidden;clip:rect(1px 1px 1px 1px);word-wrap:normal;}}"], _ref11 => {
   let {
     theme
-  } = _ref13;
-  return theme.color('grey_dark');
-});
+  } = _ref11;
+  return theme.color('black');
+}, (0, _spacing.default)('md'));
 const MPTextInput = exports.MPTextInput = (0, _styledComponents.default)(_TextInput.default).withConfig({
   displayName: "MarketingPreferencesDSstyle__MPTextInput",
-  componentId: "sc-68n85q-10"
-})(["input{border:1px solid  ", ";;@media ", "{max-width:none;}}"], _ref14 => {
+  componentId: "sc-68n85q-11"
+})(["> div + span span{margin-top:-20px;}> span{margin-bottom:.5rem;}input{border:1px solid  ", ";background-color:", ";margin-bottom:10px;@media ", "{max-width:none;}}"], _ref12 => {
   let {
     theme
-  } = _ref14;
+  } = _ref12;
   return theme.color('black');
-}, _ref15 => {
+}, _ref13 => {
   let {
     theme
-  } = _ref15;
+  } = _ref13;
+  return theme.color('white');
+}, _ref14 => {
+  let {
+    theme
+  } = _ref14;
   return theme.allBreakpoints('M');
 });

package/dist/components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS.js

@@ -21,7 +21,7 @@ var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactHookForm = require("react-hook-form");
-var _CheckAnswer = _interopRequireDefault(require("./_CheckAnswer"));
+var _OptInCheckbox = _interopRequireDefault(require("./_OptInCheckbox"));
 var _DefaultCopy = require("./_DefaultCopy");
 var _MarketingPreferencesDS = require("./MarketingPreferencesDS.style");
 var _MarketingPrefsConfig = require("./_MarketingPrefsConfig");
@@ -93,8 +93,8 @@ const MarketingPreferencesDS = _ref => {
   return /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.OuterWrapper, Object.assign({
     id: customId
   }, rest), copyTop && /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.TopCopyWrapper, null, copyTop), !mp_permissionEmail.disableOption && /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.FormField, {
-    className: "field-email"
-  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.Head, null, /*#__PURE__*/_react.default.createElement(_CheckAnswer.default, {
+    className: "field-email ".concat(emailChoice && 'selected')
+  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckboxWrapper, null, /*#__PURE__*/_react.default.createElement(_OptInCheckbox.default, {
     mpValidationOptions: mpValidationOptions,
     name: "mp_permissionEmail",
     id: "mp_permissionEmail",
@@ -115,8 +115,8 @@ const MarketingPreferencesDS = _ref => {
     id: "mp_email",
     formContext: formContext
   })))), !mp_permissionPost.disableOption && /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.FormField, {
-    className: "field-post"
-  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.Head, null, /*#__PURE__*/_react.default.createElement(_CheckAnswer.default, {
+    className: "field-post ".concat(postChoice && 'selected')
+  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckboxWrapper, null, /*#__PURE__*/_react.default.createElement(_OptInCheckbox.default, {
     name: "mp_permissionPost",
     mpValidationOptions: mpValidationOptions,
     id: "mp_permissionPost",
@@ -169,8 +169,8 @@ const MarketingPreferencesDS = _ref => {
     id: "mp_country",
     formContext: formContext
   })))), !mp_permissionSMS.disableOption && /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.FormField, {
-    className: "field-sms"
-  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.Head, null, /*#__PURE__*/_react.default.createElement(_CheckAnswer.default, {
+    className: "field-sms ".concat(smsChoice && 'selected')
+  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckboxWrapper, null, /*#__PURE__*/_react.default.createElement(_OptInCheckbox.default, {
     name: "mp_permissionSMS",
     id: "mp_permissionSMS",
     mpValidationOptions: mpValidationOptions,
@@ -188,8 +188,8 @@ const MarketingPreferencesDS = _ref => {
     id: "mp_mobile",
     formContext: formContext
   })))), !mp_permissionPhone.disableOption && /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.FormField, {
-    className: "field-phone"
-  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.Head, null, /*#__PURE__*/_react.default.createElement(_CheckAnswer.default, {
+    className: "field-phone ".concat(phoneChoice && 'selected')
+  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckboxWrapper, null, /*#__PURE__*/_react.default.createElement(_OptInCheckbox.default, {
     name: "mp_permissionPhone",
     mpValidationOptions: mpValidationOptions,
     id: "mp_permissionPhone",

package/dist/components/Organisms/MarketingPreferencesDS/{_CheckAnswer.js → _OptInCheckbox.js}

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _AssociatedFields = _interopRequireDefault(require("./_AssociatedFields"));
 var _MarketingPreferencesDS = require("./MarketingPreferencesDS.style");
-const CheckAnswer = _ref => {
+const OptInCheckbox = _ref => {
   let {
     name,
     mpValidationOptions,
@@ -53,13 +53,15 @@ const CheckAnswer = _ref => {
   return /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckContainer, null, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckLabel, {
     htmlFor: "".concat(name, "-yes"),
     userSelection: userSelection
-  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckInput, Object.assign({
+  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.AssociatedFieldsName, {
+    className: "icon-".concat(name)
+  }, _AssociatedFields.default[name].label), /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckInput, Object.assign({
     type: "checkbox",
     name: name,
     id: "".concat(name, "-yes"),
     value: "yes"
   }, register(name), {
     onChange: onChange
-  })), /*#__PURE__*/_react.default.createElement("span", null), _AssociatedFields.default[name].label));
+  })), /*#__PURE__*/_react.default.createElement("span", null)));
 };
-var _default = exports.default = CheckAnswer;
+var _default = exports.default = OptInCheckbox;

package/dist/components/Organisms/MarketingPreferencesDS/assets/Email--white.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 3.5H2C1.4475 3.5 1 3.9475 1 4.5V19.5C1 20.052 1.448 20.5 2 20.5H22C22.552 20.5 23 20.052 23 19.5V4.5C23 3.9475 22.552 3.5 22 3.5ZM19.9495 5.5L12 12.6545L4.0505 5.5H19.9495ZM3 18.5V7.2455L11.331 14.7435C11.521 14.9145 11.7605 15 12 15C12.2395 15 12.479 14.9145 12.669 14.7435L21 7.2455V18.5H3Z" fill="#FFFFFF"/>
+</svg>

package/dist/components/Organisms/MarketingPreferencesDS/assets/Email.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 3.5H2C1.4475 3.5 1 3.9475 1 4.5V19.5C1 20.052 1.448 20.5 2 20.5H22C22.552 20.5 23 20.052 23 19.5V4.5C23 3.9475 22.552 3.5 22 3.5ZM19.9495 5.5L12 12.6545L4.0505 5.5H19.9495ZM3 18.5V7.2455L11.331 14.7435C11.521 14.9145 11.7605 15 12 15C12.2395 15 12.479 14.9145 12.669 14.7435L21 7.2455V18.5H3Z" fill="#222222"/>
+</svg>

package/dist/components/Organisms/MarketingPreferencesDS/assets/Phone--white.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.4995 3.5C11.4995 2.948 11.9475 2.5 12.4995 2.5C17.0415 2.5 21.4995 6.958 21.4995 11.5C21.4995 12.052 21.0515 12.5 20.4995 12.5C19.9475 12.5 19.4995 12.052 19.4995 11.5C19.4995 8.0325 15.967 4.5 12.4995 4.5C11.9475 4.5 11.4995 4.052 11.4995 3.5Z" fill="#FFFFFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.8065 17.3886C18.012 15.5851 16.576 14.1631 14.882 14.2541C13.932 14.3056 13.071 14.8226 12.25 15.8346C12.0505 15.8816 11.1785 15.7606 9.70854 14.2906C8.23804 12.8201 8.11454 11.9496 8.16454 11.7491C9.17604 10.9286 9.69354 10.0676 9.74454 9.11755C9.83751 7.40352 8.41382 5.98733 6.61102 4.19403L6.60954 4.19255L6.20954 3.79305C5.93154 3.51505 5.51704 3.42655 5.15154 3.56405C3.32754 4.24805 2.08754 5.70855 1.66204 7.67605C0.960038 10.9181 2.54404 14.9526 5.79604 18.2046C8.53754 20.9466 11.8355 22.5026 14.7455 22.5026C15.2875 22.5026 15.816 22.4486 16.3245 22.3386C18.292 21.9121 19.752 20.6731 20.4365 18.8486C20.574 18.4816 20.4845 18.0676 20.207 17.7906L19.8065 17.3886ZM15.9005 20.3836C13.358 20.9351 9.94454 19.5246 7.20954 16.7901C4.47504 14.0556 3.06504 10.6441 3.61604 8.09905C3.78504 7.31805 4.21604 6.31955 5.29054 5.70055C6.59004 6.99305 7.79154 8.20805 7.74804 9.00955C7.72904 9.36455 7.43604 9.77105 6.87804 10.2181C6.45104 10.5596 6.19704 11.0826 6.16304 11.6896C6.11804 12.5036 6.45104 13.8611 8.29504 15.7046C10.139 17.5486 11.5 17.8816 12.3105 17.8366C12.918 17.8031 13.4405 17.5491 13.7815 17.1221C14.2285 16.5636 14.635 16.2706 14.99 16.2511C15.81 16.2126 17.007 17.4101 18.2985 18.7086C17.68 19.7831 16.6815 20.2141 15.9005 20.3836Z" fill="#FFFFFF"/>
+<path d="M15.4995 11.5C15.4995 12.052 15.9475 12.5 16.4995 12.5C17.0515 12.5 17.4995 12.052 17.4995 11.5C17.4995 8.93 15.07 6.5 12.4995 6.5C11.9475 6.5 11.4995 6.948 11.4995 7.5C11.4995 8.052 11.9475 8.5 12.4995 8.5C13.9575 8.5 15.4995 10.042 15.4995 11.5Z" fill="#FFFFFF"/>
+</svg>

package/dist/components/Organisms/MarketingPreferencesDS/assets/Phone.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.4995 3.5C11.4995 2.948 11.9475 2.5 12.4995 2.5C17.0415 2.5 21.4995 6.958 21.4995 11.5C21.4995 12.052 21.0515 12.5 20.4995 12.5C19.9475 12.5 19.4995 12.052 19.4995 11.5C19.4995 8.0325 15.967 4.5 12.4995 4.5C11.9475 4.5 11.4995 4.052 11.4995 3.5Z" fill="#222222"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.8065 17.3886C18.012 15.5851 16.576 14.1631 14.882 14.2541C13.932 14.3056 13.071 14.8226 12.25 15.8346C12.0505 15.8816 11.1785 15.7606 9.70854 14.2906C8.23804 12.8201 8.11454 11.9496 8.16454 11.7491C9.17604 10.9286 9.69354 10.0676 9.74454 9.11755C9.83751 7.40352 8.41382 5.98733 6.61102 4.19403L6.60954 4.19255L6.20954 3.79305C5.93154 3.51505 5.51704 3.42655 5.15154 3.56405C3.32754 4.24805 2.08754 5.70855 1.66204 7.67605C0.960038 10.9181 2.54404 14.9526 5.79604 18.2046C8.53754 20.9466 11.8355 22.5026 14.7455 22.5026C15.2875 22.5026 15.816 22.4486 16.3245 22.3386C18.292 21.9121 19.752 20.6731 20.4365 18.8486C20.574 18.4816 20.4845 18.0676 20.207 17.7906L19.8065 17.3886ZM15.9005 20.3836C13.358 20.9351 9.94454 19.5246 7.20954 16.7901C4.47504 14.0556 3.06504 10.6441 3.61604 8.09905C3.78504 7.31805 4.21604 6.31955 5.29054 5.70055C6.59004 6.99305 7.79154 8.20805 7.74804 9.00955C7.72904 9.36455 7.43604 9.77105 6.87804 10.2181C6.45104 10.5596 6.19704 11.0826 6.16304 11.6896C6.11804 12.5036 6.45104 13.8611 8.29504 15.7046C10.139 17.5486 11.5 17.8816 12.3105 17.8366C12.918 17.8031 13.4405 17.5491 13.7815 17.1221C14.2285 16.5636 14.635 16.2706 14.99 16.2511C15.81 16.2126 17.007 17.4101 18.2985 18.7086C17.68 19.7831 16.6815 20.2141 15.9005 20.3836Z" fill="#222222"/>
+<path d="M15.4995 11.5C15.4995 12.052 15.9475 12.5 16.4995 12.5C17.0515 12.5 17.4995 12.052 17.4995 11.5C17.4995 8.93 15.07 6.5 12.4995 6.5C11.9475 6.5 11.4995 6.948 11.4995 7.5C11.4995 8.052 11.9475 8.5 12.4995 8.5C13.9575 8.5 15.4995 10.042 15.4995 11.5Z" fill="#222222"/>
+</svg>

package/dist/components/Organisms/MarketingPreferencesDS/assets/Post--white.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.4045 5.91958C23.4395 5.84458 23.464 5.76358 23.4795 5.67908C23.483 5.65908 23.488 5.63958 23.49 5.61958C23.492 5.60508 23.4965 5.59158 23.4975 5.57708C23.5035 5.49758 23.4975 5.42008 23.486 5.34408C23.4835 5.32858 23.479 5.31458 23.4755 5.29908C23.4565 5.20708 23.427 5.11908 23.384 5.03758C23.3815 5.03258 23.3815 5.02708 23.3785 5.02208C23.3775 5.02058 23.376 5.01908 23.375 5.01758C23.328 4.93308 23.2675 4.85808 23.1985 4.79058C23.1855 4.77758 23.173 4.76508 23.1595 4.75308C23.09 4.69158 23.0135 4.63958 22.9285 4.59908C22.9165 4.59358 22.904 4.58958 22.892 4.58458C22.8125 4.55058 22.728 4.52658 22.639 4.51408C22.6265 4.51208 22.615 4.50858 22.6025 4.50758C22.5935 4.50658 22.5855 4.50358 22.5765 4.50308L3.0765 3.00308C2.677 2.97108 2.286 3.19058 2.1045 3.55608C1.9235 3.92108 1.9825 4.36008 2.253 4.66458L5.353 8.15208L1.291 9.02258C0.881497 9.11058 0.569497 9.44458 0.509997 9.85958C0.450997 10.2746 0.656997 10.6821 1.026 10.8806L7.102 14.1526L8.016 19.1791C8.0825 19.5451 8.3465 19.8436 8.7015 19.9546C8.8005 19.9856 8.901 20.0006 9.0005 20.0006C9.2615 20.0006 9.517 19.8981 9.7075 19.7076L23.2075 6.20758C23.218 6.19708 23.223 6.18258 23.2335 6.17158C23.2945 6.10558 23.3495 6.03358 23.3915 5.95208C23.3965 5.94158 23.3995 5.93058 23.4045 5.91958ZM5.3935 5.18758L15.5445 5.96858L7.601 7.67058L5.3935 5.18758ZM9.643 16.9441L8.9845 13.3216C8.9305 13.0226 8.7425 12.7641 8.4745 12.6201L4.368 10.4086L19.399 7.18758L9.643 16.9441ZM3.0015 18.0006C2.6345 18.0006 2.2815 17.7981 2.106 17.4476C1.859 16.9536 2.059 16.3531 2.5535 16.1056L4.5535 15.1056C5.0485 14.8576 5.6485 15.0591 5.8955 15.5531C6.1425 16.0471 5.9425 16.6476 5.448 16.8951L3.448 17.8951C3.304 17.9671 3.1515 18.0006 3.0015 18.0006ZM6.7075 18.2936C7.098 18.6841 7.098 19.3171 6.7075 19.7076L4.7075 21.7076C4.512 21.9031 4.2565 22.0006 4.0005 22.0006C3.7445 22.0006 3.489 21.9031 3.2935 21.7076C2.903 21.3171 2.903 20.6841 3.2935 20.2936L5.2935 18.2936C5.684 17.9031 6.317 17.9031 6.7075 18.2936Z" fill="#FFFFFF"/>
+</svg>

package/dist/components/Organisms/MarketingPreferencesDS/assets/Post.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.4045 5.91958C23.4395 5.84458 23.464 5.76358 23.4795 5.67908C23.483 5.65908 23.488 5.63958 23.49 5.61958C23.492 5.60508 23.4965 5.59158 23.4975 5.57708C23.5035 5.49758 23.4975 5.42008 23.486 5.34408C23.4835 5.32858 23.479 5.31458 23.4755 5.29908C23.4565 5.20708 23.427 5.11908 23.384 5.03758C23.3815 5.03258 23.3815 5.02708 23.3785 5.02208C23.3775 5.02058 23.376 5.01908 23.375 5.01758C23.328 4.93308 23.2675 4.85808 23.1985 4.79058C23.1855 4.77758 23.173 4.76508 23.1595 4.75308C23.09 4.69158 23.0135 4.63958 22.9285 4.59908C22.9165 4.59358 22.904 4.58958 22.892 4.58458C22.8125 4.55058 22.728 4.52658 22.639 4.51408C22.6265 4.51208 22.615 4.50858 22.6025 4.50758C22.5935 4.50658 22.5855 4.50358 22.5765 4.50308L3.0765 3.00308C2.677 2.97108 2.286 3.19058 2.1045 3.55608C1.9235 3.92108 1.9825 4.36008 2.253 4.66458L5.353 8.15208L1.291 9.02258C0.881497 9.11058 0.569497 9.44458 0.509997 9.85958C0.450997 10.2746 0.656997 10.6821 1.026 10.8806L7.102 14.1526L8.016 19.1791C8.0825 19.5451 8.3465 19.8436 8.7015 19.9546C8.8005 19.9856 8.901 20.0006 9.0005 20.0006C9.2615 20.0006 9.517 19.8981 9.7075 19.7076L23.2075 6.20758C23.218 6.19708 23.223 6.18258 23.2335 6.17158C23.2945 6.10558 23.3495 6.03358 23.3915 5.95208C23.3965 5.94158 23.3995 5.93058 23.4045 5.91958ZM5.3935 5.18758L15.5445 5.96858L7.601 7.67058L5.3935 5.18758ZM9.643 16.9441L8.9845 13.3216C8.9305 13.0226 8.7425 12.7641 8.4745 12.6201L4.368 10.4086L19.399 7.18758L9.643 16.9441ZM3.0015 18.0006C2.6345 18.0006 2.2815 17.7981 2.106 17.4476C1.859 16.9536 2.059 16.3531 2.5535 16.1056L4.5535 15.1056C5.0485 14.8576 5.6485 15.0591 5.8955 15.5531C6.1425 16.0471 5.9425 16.6476 5.448 16.8951L3.448 17.8951C3.304 17.9671 3.1515 18.0006 3.0015 18.0006ZM6.7075 18.2936C7.098 18.6841 7.098 19.3171 6.7075 19.7076L4.7075 21.7076C4.512 21.9031 4.2565 22.0006 4.0005 22.0006C3.7445 22.0006 3.489 21.9031 3.2935 21.7076C2.903 21.3171 2.903 20.6841 3.2935 20.2936L5.2935 18.2936C5.684 17.9031 6.317 17.9031 6.7075 18.2936Z" fill="#222222"/>
+</svg>

package/dist/components/Organisms/MarketingPreferencesDS/assets/Text--white.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.5 10.5C8.5 11.327 7.827 12 7 12C6.173 12 5.5 11.327 5.5 10.5C5.5 9.673 6.173 9 7 9C7.827 9 8.5 9.673 8.5 10.5ZM12 9C11.173 9 10.5 9.673 10.5 10.5C10.5 11.327 11.173 12 12 12C12.827 12 13.5 11.327 13.5 10.5C13.5 9.673 12.827 9 12 9ZM17 9C16.173 9 15.5 9.673 15.5 10.5C15.5 11.327 16.173 12 17 12C17.827 12 18.5 11.327 18.5 10.5C18.5 9.673 17.827 9 17 9ZM23 5V16C23 16.1075 22.983 16.2145 22.9485 16.316L20.9485 22.316C20.8205 22.7 20.474 22.9685 20.0705 22.9975C20.047 22.9995 20.0235 23 19.9995 23C19.623 23 19.276 22.7875 19.1055 22.4475L17.382 19H4C2.318 19 1 17.682 1 16V5C1 3.318 2.318 2 4 2H20C21.682 2 23 3.318 23 5ZM21 5C21 4.4205 20.5795 4 20 4H4C3.4205 4 3 4.4205 3 5V16C3 16.5795 3.4205 17 4 17H18C18.379 17 18.725 17.214 18.8945 17.5525L19.815 19.3935L21 15.8375V5Z" fill="#FFFFFF"/>
+</svg>

package/dist/components/Organisms/MarketingPreferencesDS/assets/Text.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.5 10.5C8.5 11.327 7.827 12 7 12C6.173 12 5.5 11.327 5.5 10.5C5.5 9.673 6.173 9 7 9C7.827 9 8.5 9.673 8.5 10.5ZM12 9C11.173 9 10.5 9.673 10.5 10.5C10.5 11.327 11.173 12 12 12C12.827 12 13.5 11.327 13.5 10.5C13.5 9.673 12.827 9 12 9ZM17 9C16.173 9 15.5 9.673 15.5 10.5C15.5 11.327 16.173 12 17 12C17.827 12 18.5 11.327 18.5 10.5C18.5 9.673 17.827 9 17 9ZM23 5V16C23 16.1075 22.983 16.2145 22.9485 16.316L20.9485 22.316C20.8205 22.7 20.474 22.9685 20.0705 22.9975C20.047 22.9995 20.0235 23 19.9995 23C19.623 23 19.276 22.7875 19.1055 22.4475L17.382 19H4C2.318 19 1 17.682 1 16V5C1 3.318 2.318 2 4 2H20C21.682 2 23 3.318 23 5ZM21 5C21 4.4205 20.5795 4 20 4H4C3.4205 4 3 4.4205 3 5V16C3 16.5795 3.4205 17 4 17H18C18.379 17 18.725 17.214 18.8945 17.5525L19.815 19.3935L21 15.8375V5Z" fill="#222222"/>
+</svg>

package/package.json

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

package/src/components/Organisms/MarketingPreferencesDS/MarketingPreferencesDS.style.js

@@ -3,14 +3,31 @@ import styled, { css } from 'styled-components';
 import spacing from '../../../theme/shared/spacing';
 import checkBoxIcon from './assets/CR_Tick_black.svg';
 import TextInput from './_TextInput';
+import EmailIcon from './assets/Email.svg';
+import PhoneIcon from './assets/Phone.svg';
+import PostIcon from './assets/Post.svg';
+import SMSIcon from './assets/Text.svg';
+import EmailIconWhite from './assets/Email--white.svg';
+import PhoneIconWhite from './assets/Phone--white.svg';
+import PostIconWhite from './assets/Post--white.svg';
+import SMSIconWhite from './assets/Text--white.svg';
 
 const OuterWrapper = styled.div`
   display: flex;
   flex-direction: column;
 
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
-    flex-direction: row;
-    flex-wrap: wrap;
+  // Preload 'selected' icons
+  &:after {
+    position:absolute;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    z-index: -1;
+    content: 
+      url(${EmailIconWhite})
+      url(${PhoneIconWhite})
+      url(${PostIconWhite})
+      url(${SMSIconWhite});
   }
 `;
 
@@ -28,29 +45,91 @@ const BottomCopyWrapper = styled.div`
   margin: ${spacing('md')} 0;
 `;
 
-const Head = styled.div`
+const CheckboxWrapper = styled.div`
   display: flex;
   justify-content: space-between;
   flex-direction: column;
 `;
 
+const AssociatedFieldsName = styled.span`
+  padding-left: 40px;
+  line-height: 30px;
+  background-repeat: no-repeat;
+  background-position: left center;
+
+  &.icon-mp_permissionEmail {
+    background-image: url(${EmailIcon})
+  }
+
+  &.icon-mp_permissionPhone {
+    background-image: url(${PhoneIcon})
+  }
+
+  &.icon-mp_permissionPost {
+    background-image: url(${PostIcon})
+  }
+
+  &.icon-mp_permissionSMS {
+    background-image: url(${SMSIcon})
+  }
+`;
+
 const FormField = styled.div`${({ theme }) => css`
   position: relative;
   margin-bottom: ${spacing('md')};
   width: 100%;
   display: flex;
   flex-direction: column;
+  padding: ${spacing('m')};
+  border: 1px solid ${theme.color('grey')};;
+  border-radius: 10px;
+  background-color: ${theme.color('grey_light')};
+  transition: background-color 0.3s, color 0.3s;
 
-  @media ${theme.allBreakpoints('M')} {
-    width: 50%;
-    padding: 10px;
+  &:hover {
+    background-color: ${theme.color('grey_medium')};
+  }
+
+  &.selected {
+    background-color: ${theme.color('blue_donate')};
+
+    span.icon-mp_permissionEmail {
+      background-image: url(${EmailIconWhite});
+    }
+
+    span.icon-mp_permissionPhone {
+      background-image: url(${PhoneIconWhite});
+    }
+
+    span.icon-mp_permissionPost {
+      background-image: url(${PostIconWhite});
+    }
+
+    span.icon-mp_permissionSMS {
+      background-image: url(${SMSIconWhite});
+    }
+
+    > div {
+      label, > span {
+        color: ${theme.color('white')};
+      }
+    }
+
+    &:hover {
+      // No fancy functions yet to darken preexisting colours..
+      background-color: #161a85;
+    }
   }
 
+  // All labels; input AND checkbox
   label {
     position: relative;
-    margin-bottom: ${spacing('md')};
+    margin-bottom: 0;
     width: 100%;
-    color: ${theme.color('grey_dark')};
+    color: ${theme.color('black')};
+    font-weight: 600;
+    display: flex;
+    justify-content: space-between;
   }
 
   h3 {
@@ -99,21 +178,15 @@ const CheckInput = styled.input`
   margin: 0;
   border: 1px solid ${({ theme }) => theme.color('grey_for_forms')};
   + span {
-    margin-right: 10px;
     width: 30px;
     height: 30px;
-    background-color: ${({ theme }) => theme.color('grey_light')};
+    background-color: ${({ theme }) => theme.color('white')};
     border: 1px solid ${({ theme }) => theme.color('black')};
     float: left;
     border-radius: 8px;
-
-    @media ${({ theme }) => theme.allBreakpoints('M')} {
-      margin-right: 15px;
-    }
   }
   :checked + span {
-    background: url(${checkBoxIcon}) no-repeat center;
-    background-color: ${({ theme }) => theme.color('grey_light')};
+    background: url(${checkBoxIcon}) no-repeat center ${({ theme }) => theme.color('white')};;
     background-size: contain;
   }
 `;
@@ -137,11 +210,13 @@ const ExtraInfo = styled.span`
   font-weight: normal;
   line-height: normal;
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-  margin-bottom: 0.5rem;
-  color: ${({ theme }) => theme.color('grey_dark')};
+  margin-bottom: 0rem;
+  margin-top: 1rem;
+  color: ${({ theme }) => theme.color('black')};
 
   + label {
-    margin-top: 20px;
+    margin-top: ${spacing('md')};
+    margin-bottom: 0;
 
     // Visually hide the actual field label for the
     // non-multifield options, as we have the
@@ -164,8 +239,19 @@ const ExtraInfo = styled.span`
 `;
 
 const MPTextInput = styled(TextInput)`
+  // Correct the ErrorMsg offset for this context
+  > div + span span {
+    margin-top: -20px;
+  }
+
+  > span {
+    margin-bottom: .5rem;
+  }
+
   input {
-    border: 1px solid  ${({ theme }) => theme.color('black')};;
+    border: 1px solid  ${({ theme }) => theme.color('black')};
+    background-color: ${({ theme }) => theme.color('white')};
+    margin-bottom: 10px;
     @media ${({ theme }) => theme.allBreakpoints('M')} {
       max-width: none;
     }
@@ -175,7 +261,7 @@ const MPTextInput = styled(TextInput)`
 export {
   TopCopyWrapper,
   BottomCopyWrapper,
-  Head,
+  CheckboxWrapper,
   FormField,
   CheckLabel,
   CheckInput,
@@ -183,5 +269,6 @@ export {
   ShowHideInputWrapper,
   ExtraInfo,
   OuterWrapper,
-  MPTextInput
+  MPTextInput,
+  AssociatedFieldsName
 };

package/src/components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS.js

@@ -2,11 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useWatch } from 'react-hook-form';
 import _ from 'lodash';
-import CheckAnswer from './_CheckAnswer';
+import OptInCheckbox from './_OptInCheckbox';
 
 import { defaultCopyTop, defaultCopyBottom } from './_DefaultCopy';
 import {
-  TopCopyWrapper, BottomCopyWrapper, Head, FormField,
+  TopCopyWrapper, BottomCopyWrapper, CheckboxWrapper, FormField,
   ShowHideInputWrapper, ExtraInfo, OuterWrapper, MPTextInput
 } from './MarketingPreferencesDS.style';
 
@@ -67,16 +67,16 @@ const MarketingPreferencesDS = ({
 
       {/* Render Email checkboxes and input if not removed in config */}
       {!mp_permissionEmail.disableOption && (
-      <FormField className="field-email">
-        <Head>
-          <CheckAnswer
+      <FormField className={`field-email ${emailChoice && 'selected'}`}>
+        <CheckboxWrapper>
+          <OptInCheckbox
             mpValidationOptions={mpValidationOptions}
             name="mp_permissionEmail"
             id="mp_permissionEmail"
             userSelection={emailChoice}
             formContext={formContext}
           />
-        </Head>
+        </CheckboxWrapper>
 
         <MaybeDisabled disabled={disableEmailInput}>
           <ShowHideInputWrapper show={showEmailField}>
@@ -102,16 +102,16 @@ const MarketingPreferencesDS = ({
 
       {/* Render Post checkboxes and inputs if not removed in config */}
       {!mp_permissionPost.disableOption && (
-      <FormField className="field-post">
-        <Head>
-          <CheckAnswer
+      <FormField className={`field-post ${postChoice && 'selected'}`}>
+        <CheckboxWrapper>
+          <OptInCheckbox
             name="mp_permissionPost"
             mpValidationOptions={mpValidationOptions}
             id="mp_permissionPost"
             userSelection={postChoice}
             formContext={formContext}
           />
-        </Head>
+        </CheckboxWrapper>
         <MaybeDisabled disabled={disablePostInput}>
           <ShowHideInputWrapper show={showPostFields}>
             <ExtraInfo>
@@ -174,16 +174,16 @@ const MarketingPreferencesDS = ({
 
       {/* Render SMS checkboxes and inputs if not removed in config */}
       {!mp_permissionSMS.disableOption && (
-      <FormField className="field-sms">
-        <Head>
-          <CheckAnswer
+      <FormField className={`field-sms ${smsChoice && 'selected'}`}>
+        <CheckboxWrapper>
+          <OptInCheckbox
             name="mp_permissionSMS"
             id="mp_permissionSMS"
             mpValidationOptions={mpValidationOptions}
             userSelection={smsChoice}
             formContext={formContext}
           />
-        </Head>
+        </CheckboxWrapper>
         <MaybeDisabled disabled={disableSMSInput}>
           <ShowHideInputWrapper show={showSMSField}>
             <ExtraInfo>
@@ -206,16 +206,16 @@ const MarketingPreferencesDS = ({
 
       {/* Render Phone checkboxes and input if not removed in config */}
       {!mp_permissionPhone.disableOption && (
-      <FormField className="field-phone">
-        <Head>
-          <CheckAnswer
+      <FormField className={`field-phone ${phoneChoice && 'selected'}`}>
+        <CheckboxWrapper>
+          <OptInCheckbox
             name="mp_permissionPhone"
             mpValidationOptions={mpValidationOptions}
             id="mp_permissionPhone"
             userSelection={phoneChoice}
             formContext={formContext}
           />
-        </Head>
+        </CheckboxWrapper>
         <MaybeDisabled disabled={disablePhoneInput}>
           <ShowHideInputWrapper show={showPhoneField}>
             <ExtraInfo>

package/src/components/Organisms/MarketingPreferencesDS/{_CheckAnswer.js → _OptInCheckbox.js}

@@ -5,10 +5,11 @@ import AssociatedFields from './_AssociatedFields';
 import {
   CheckContainer,
   CheckLabel,
-  CheckInput
+  CheckInput,
+  AssociatedFieldsName
 } from './MarketingPreferencesDS.style';
 
-const CheckAnswer = ({
+const OptInCheckbox = ({
   name, mpValidationOptions, userSelection = null, formContext = null
 }) => {
   const { setValue, clearErrors, register } = formContext;
@@ -48,6 +49,9 @@ const CheckAnswer = ({
   return (
     <CheckContainer>
       <CheckLabel htmlFor={`${name}-yes`} userSelection={userSelection}>
+        <AssociatedFieldsName className={`icon-${name}`}>
+          { AssociatedFields[name].label }
+        </AssociatedFieldsName>
         <CheckInput
           type="checkbox"
           name={name}
@@ -56,14 +60,14 @@ const CheckAnswer = ({
           {...register(name)}
           onChange={onChange}
         />
+        {/* What our custom checkbox is built on: */}
         <span />
-        { AssociatedFields[name].label }
       </CheckLabel>
     </CheckContainer>
   );
 };
 
-CheckAnswer.propTypes = {
+OptInCheckbox.propTypes = {
   name: PropTypes.string.isRequired,
   /* These options are created in _MarketingPrefsConfig.js, passed to react-hook-form
   in the parent to set-up the validation, but also required here for additional functionality */
@@ -75,4 +79,4 @@ CheckAnswer.propTypes = {
   formContext: PropTypes.shape()
 };
 
-export default CheckAnswer;
+export default OptInCheckbox;

package/src/components/Organisms/MarketingPreferencesDS/assets/Email--white.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 3.5H2C1.4475 3.5 1 3.9475 1 4.5V19.5C1 20.052 1.448 20.5 2 20.5H22C22.552 20.5 23 20.052 23 19.5V4.5C23 3.9475 22.552 3.5 22 3.5ZM19.9495 5.5L12 12.6545L4.0505 5.5H19.9495ZM3 18.5V7.2455L11.331 14.7435C11.521 14.9145 11.7605 15 12 15C12.2395 15 12.479 14.9145 12.669 14.7435L21 7.2455V18.5H3Z" fill="#FFFFFF"/>
+</svg>

package/src/components/Organisms/MarketingPreferencesDS/assets/Email.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 3.5H2C1.4475 3.5 1 3.9475 1 4.5V19.5C1 20.052 1.448 20.5 2 20.5H22C22.552 20.5 23 20.052 23 19.5V4.5C23 3.9475 22.552 3.5 22 3.5ZM19.9495 5.5L12 12.6545L4.0505 5.5H19.9495ZM3 18.5V7.2455L11.331 14.7435C11.521 14.9145 11.7605 15 12 15C12.2395 15 12.479 14.9145 12.669 14.7435L21 7.2455V18.5H3Z" fill="#222222"/>
+</svg>

package/src/components/Organisms/MarketingPreferencesDS/assets/Phone--white.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.4995 3.5C11.4995 2.948 11.9475 2.5 12.4995 2.5C17.0415 2.5 21.4995 6.958 21.4995 11.5C21.4995 12.052 21.0515 12.5 20.4995 12.5C19.9475 12.5 19.4995 12.052 19.4995 11.5C19.4995 8.0325 15.967 4.5 12.4995 4.5C11.9475 4.5 11.4995 4.052 11.4995 3.5Z" fill="#FFFFFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.8065 17.3886C18.012 15.5851 16.576 14.1631 14.882 14.2541C13.932 14.3056 13.071 14.8226 12.25 15.8346C12.0505 15.8816 11.1785 15.7606 9.70854 14.2906C8.23804 12.8201 8.11454 11.9496 8.16454 11.7491C9.17604 10.9286 9.69354 10.0676 9.74454 9.11755C9.83751 7.40352 8.41382 5.98733 6.61102 4.19403L6.60954 4.19255L6.20954 3.79305C5.93154 3.51505 5.51704 3.42655 5.15154 3.56405C3.32754 4.24805 2.08754 5.70855 1.66204 7.67605C0.960038 10.9181 2.54404 14.9526 5.79604 18.2046C8.53754 20.9466 11.8355 22.5026 14.7455 22.5026C15.2875 22.5026 15.816 22.4486 16.3245 22.3386C18.292 21.9121 19.752 20.6731 20.4365 18.8486C20.574 18.4816 20.4845 18.0676 20.207 17.7906L19.8065 17.3886ZM15.9005 20.3836C13.358 20.9351 9.94454 19.5246 7.20954 16.7901C4.47504 14.0556 3.06504 10.6441 3.61604 8.09905C3.78504 7.31805 4.21604 6.31955 5.29054 5.70055C6.59004 6.99305 7.79154 8.20805 7.74804 9.00955C7.72904 9.36455 7.43604 9.77105 6.87804 10.2181C6.45104 10.5596 6.19704 11.0826 6.16304 11.6896C6.11804 12.5036 6.45104 13.8611 8.29504 15.7046C10.139 17.5486 11.5 17.8816 12.3105 17.8366C12.918 17.8031 13.4405 17.5491 13.7815 17.1221C14.2285 16.5636 14.635 16.2706 14.99 16.2511C15.81 16.2126 17.007 17.4101 18.2985 18.7086C17.68 19.7831 16.6815 20.2141 15.9005 20.3836Z" fill="#FFFFFF"/>
+<path d="M15.4995 11.5C15.4995 12.052 15.9475 12.5 16.4995 12.5C17.0515 12.5 17.4995 12.052 17.4995 11.5C17.4995 8.93 15.07 6.5 12.4995 6.5C11.9475 6.5 11.4995 6.948 11.4995 7.5C11.4995 8.052 11.9475 8.5 12.4995 8.5C13.9575 8.5 15.4995 10.042 15.4995 11.5Z" fill="#FFFFFF"/>
+</svg>

package/src/components/Organisms/MarketingPreferencesDS/assets/Phone.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.4995 3.5C11.4995 2.948 11.9475 2.5 12.4995 2.5C17.0415 2.5 21.4995 6.958 21.4995 11.5C21.4995 12.052 21.0515 12.5 20.4995 12.5C19.9475 12.5 19.4995 12.052 19.4995 11.5C19.4995 8.0325 15.967 4.5 12.4995 4.5C11.9475 4.5 11.4995 4.052 11.4995 3.5Z" fill="#222222"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.8065 17.3886C18.012 15.5851 16.576 14.1631 14.882 14.2541C13.932 14.3056 13.071 14.8226 12.25 15.8346C12.0505 15.8816 11.1785 15.7606 9.70854 14.2906C8.23804 12.8201 8.11454 11.9496 8.16454 11.7491C9.17604 10.9286 9.69354 10.0676 9.74454 9.11755C9.83751 7.40352 8.41382 5.98733 6.61102 4.19403L6.60954 4.19255L6.20954 3.79305C5.93154 3.51505 5.51704 3.42655 5.15154 3.56405C3.32754 4.24805 2.08754 5.70855 1.66204 7.67605C0.960038 10.9181 2.54404 14.9526 5.79604 18.2046C8.53754 20.9466 11.8355 22.5026 14.7455 22.5026C15.2875 22.5026 15.816 22.4486 16.3245 22.3386C18.292 21.9121 19.752 20.6731 20.4365 18.8486C20.574 18.4816 20.4845 18.0676 20.207 17.7906L19.8065 17.3886ZM15.9005 20.3836C13.358 20.9351 9.94454 19.5246 7.20954 16.7901C4.47504 14.0556 3.06504 10.6441 3.61604 8.09905C3.78504 7.31805 4.21604 6.31955 5.29054 5.70055C6.59004 6.99305 7.79154 8.20805 7.74804 9.00955C7.72904 9.36455 7.43604 9.77105 6.87804 10.2181C6.45104 10.5596 6.19704 11.0826 6.16304 11.6896C6.11804 12.5036 6.45104 13.8611 8.29504 15.7046C10.139 17.5486 11.5 17.8816 12.3105 17.8366C12.918 17.8031 13.4405 17.5491 13.7815 17.1221C14.2285 16.5636 14.635 16.2706 14.99 16.2511C15.81 16.2126 17.007 17.4101 18.2985 18.7086C17.68 19.7831 16.6815 20.2141 15.9005 20.3836Z" fill="#222222"/>
+<path d="M15.4995 11.5C15.4995 12.052 15.9475 12.5 16.4995 12.5C17.0515 12.5 17.4995 12.052 17.4995 11.5C17.4995 8.93 15.07 6.5 12.4995 6.5C11.9475 6.5 11.4995 6.948 11.4995 7.5C11.4995 8.052 11.9475 8.5 12.4995 8.5C13.9575 8.5 15.4995 10.042 15.4995 11.5Z" fill="#222222"/>
+</svg>

package/src/components/Organisms/MarketingPreferencesDS/assets/Post--white.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.4045 5.91958C23.4395 5.84458 23.464 5.76358 23.4795 5.67908C23.483 5.65908 23.488 5.63958 23.49 5.61958C23.492 5.60508 23.4965 5.59158 23.4975 5.57708C23.5035 5.49758 23.4975 5.42008 23.486 5.34408C23.4835 5.32858 23.479 5.31458 23.4755 5.29908C23.4565 5.20708 23.427 5.11908 23.384 5.03758C23.3815 5.03258 23.3815 5.02708 23.3785 5.02208C23.3775 5.02058 23.376 5.01908 23.375 5.01758C23.328 4.93308 23.2675 4.85808 23.1985 4.79058C23.1855 4.77758 23.173 4.76508 23.1595 4.75308C23.09 4.69158 23.0135 4.63958 22.9285 4.59908C22.9165 4.59358 22.904 4.58958 22.892 4.58458C22.8125 4.55058 22.728 4.52658 22.639 4.51408C22.6265 4.51208 22.615 4.50858 22.6025 4.50758C22.5935 4.50658 22.5855 4.50358 22.5765 4.50308L3.0765 3.00308C2.677 2.97108 2.286 3.19058 2.1045 3.55608C1.9235 3.92108 1.9825 4.36008 2.253 4.66458L5.353 8.15208L1.291 9.02258C0.881497 9.11058 0.569497 9.44458 0.509997 9.85958C0.450997 10.2746 0.656997 10.6821 1.026 10.8806L7.102 14.1526L8.016 19.1791C8.0825 19.5451 8.3465 19.8436 8.7015 19.9546C8.8005 19.9856 8.901 20.0006 9.0005 20.0006C9.2615 20.0006 9.517 19.8981 9.7075 19.7076L23.2075 6.20758C23.218 6.19708 23.223 6.18258 23.2335 6.17158C23.2945 6.10558 23.3495 6.03358 23.3915 5.95208C23.3965 5.94158 23.3995 5.93058 23.4045 5.91958ZM5.3935 5.18758L15.5445 5.96858L7.601 7.67058L5.3935 5.18758ZM9.643 16.9441L8.9845 13.3216C8.9305 13.0226 8.7425 12.7641 8.4745 12.6201L4.368 10.4086L19.399 7.18758L9.643 16.9441ZM3.0015 18.0006C2.6345 18.0006 2.2815 17.7981 2.106 17.4476C1.859 16.9536 2.059 16.3531 2.5535 16.1056L4.5535 15.1056C5.0485 14.8576 5.6485 15.0591 5.8955 15.5531C6.1425 16.0471 5.9425 16.6476 5.448 16.8951L3.448 17.8951C3.304 17.9671 3.1515 18.0006 3.0015 18.0006ZM6.7075 18.2936C7.098 18.6841 7.098 19.3171 6.7075 19.7076L4.7075 21.7076C4.512 21.9031 4.2565 22.0006 4.0005 22.0006C3.7445 22.0006 3.489 21.9031 3.2935 21.7076C2.903 21.3171 2.903 20.6841 3.2935 20.2936L5.2935 18.2936C5.684 17.9031 6.317 17.9031 6.7075 18.2936Z" fill="#FFFFFF"/>
+</svg>

package/src/components/Organisms/MarketingPreferencesDS/assets/Post.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.4045 5.91958C23.4395 5.84458 23.464 5.76358 23.4795 5.67908C23.483 5.65908 23.488 5.63958 23.49 5.61958C23.492 5.60508 23.4965 5.59158 23.4975 5.57708C23.5035 5.49758 23.4975 5.42008 23.486 5.34408C23.4835 5.32858 23.479 5.31458 23.4755 5.29908C23.4565 5.20708 23.427 5.11908 23.384 5.03758C23.3815 5.03258 23.3815 5.02708 23.3785 5.02208C23.3775 5.02058 23.376 5.01908 23.375 5.01758C23.328 4.93308 23.2675 4.85808 23.1985 4.79058C23.1855 4.77758 23.173 4.76508 23.1595 4.75308C23.09 4.69158 23.0135 4.63958 22.9285 4.59908C22.9165 4.59358 22.904 4.58958 22.892 4.58458C22.8125 4.55058 22.728 4.52658 22.639 4.51408C22.6265 4.51208 22.615 4.50858 22.6025 4.50758C22.5935 4.50658 22.5855 4.50358 22.5765 4.50308L3.0765 3.00308C2.677 2.97108 2.286 3.19058 2.1045 3.55608C1.9235 3.92108 1.9825 4.36008 2.253 4.66458L5.353 8.15208L1.291 9.02258C0.881497 9.11058 0.569497 9.44458 0.509997 9.85958C0.450997 10.2746 0.656997 10.6821 1.026 10.8806L7.102 14.1526L8.016 19.1791C8.0825 19.5451 8.3465 19.8436 8.7015 19.9546C8.8005 19.9856 8.901 20.0006 9.0005 20.0006C9.2615 20.0006 9.517 19.8981 9.7075 19.7076L23.2075 6.20758C23.218 6.19708 23.223 6.18258 23.2335 6.17158C23.2945 6.10558 23.3495 6.03358 23.3915 5.95208C23.3965 5.94158 23.3995 5.93058 23.4045 5.91958ZM5.3935 5.18758L15.5445 5.96858L7.601 7.67058L5.3935 5.18758ZM9.643 16.9441L8.9845 13.3216C8.9305 13.0226 8.7425 12.7641 8.4745 12.6201L4.368 10.4086L19.399 7.18758L9.643 16.9441ZM3.0015 18.0006C2.6345 18.0006 2.2815 17.7981 2.106 17.4476C1.859 16.9536 2.059 16.3531 2.5535 16.1056L4.5535 15.1056C5.0485 14.8576 5.6485 15.0591 5.8955 15.5531C6.1425 16.0471 5.9425 16.6476 5.448 16.8951L3.448 17.8951C3.304 17.9671 3.1515 18.0006 3.0015 18.0006ZM6.7075 18.2936C7.098 18.6841 7.098 19.3171 6.7075 19.7076L4.7075 21.7076C4.512 21.9031 4.2565 22.0006 4.0005 22.0006C3.7445 22.0006 3.489 21.9031 3.2935 21.7076C2.903 21.3171 2.903 20.6841 3.2935 20.2936L5.2935 18.2936C5.684 17.9031 6.317 17.9031 6.7075 18.2936Z" fill="#222222"/>
+</svg>

package/src/components/Organisms/MarketingPreferencesDS/assets/Text--white.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.5 10.5C8.5 11.327 7.827 12 7 12C6.173 12 5.5 11.327 5.5 10.5C5.5 9.673 6.173 9 7 9C7.827 9 8.5 9.673 8.5 10.5ZM12 9C11.173 9 10.5 9.673 10.5 10.5C10.5 11.327 11.173 12 12 12C12.827 12 13.5 11.327 13.5 10.5C13.5 9.673 12.827 9 12 9ZM17 9C16.173 9 15.5 9.673 15.5 10.5C15.5 11.327 16.173 12 17 12C17.827 12 18.5 11.327 18.5 10.5C18.5 9.673 17.827 9 17 9ZM23 5V16C23 16.1075 22.983 16.2145 22.9485 16.316L20.9485 22.316C20.8205 22.7 20.474 22.9685 20.0705 22.9975C20.047 22.9995 20.0235 23 19.9995 23C19.623 23 19.276 22.7875 19.1055 22.4475L17.382 19H4C2.318 19 1 17.682 1 16V5C1 3.318 2.318 2 4 2H20C21.682 2 23 3.318 23 5ZM21 5C21 4.4205 20.5795 4 20 4H4C3.4205 4 3 4.4205 3 5V16C3 16.5795 3.4205 17 4 17H18C18.379 17 18.725 17.214 18.8945 17.5525L19.815 19.3935L21 15.8375V5Z" fill="#FFFFFF"/>
+</svg>

package/src/components/Organisms/MarketingPreferencesDS/assets/Text.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.5 10.5C8.5 11.327 7.827 12 7 12C6.173 12 5.5 11.327 5.5 10.5C5.5 9.673 6.173 9 7 9C7.827 9 8.5 9.673 8.5 10.5ZM12 9C11.173 9 10.5 9.673 10.5 10.5C10.5 11.327 11.173 12 12 12C12.827 12 13.5 11.327 13.5 10.5C13.5 9.673 12.827 9 12 9ZM17 9C16.173 9 15.5 9.673 15.5 10.5C15.5 11.327 16.173 12 17 12C17.827 12 18.5 11.327 18.5 10.5C18.5 9.673 17.827 9 17 9ZM23 5V16C23 16.1075 22.983 16.2145 22.9485 16.316L20.9485 22.316C20.8205 22.7 20.474 22.9685 20.0705 22.9975C20.047 22.9995 20.0235 23 19.9995 23C19.623 23 19.276 22.7875 19.1055 22.4475L17.382 19H4C2.318 19 1 17.682 1 16V5C1 3.318 2.318 2 4 2H20C21.682 2 23 3.318 23 5ZM21 5C21 4.4205 20.5795 4 20 4H4C3.4205 4 3 4.4205 3 5V16C3 16.5795 3.4205 17 4 17H18C18.379 17 18.725 17.214 18.8945 17.5525L19.815 19.3935L21 15.8375V5Z" fill="#222222"/>
+</svg>

package/dist/components/Organisms/MarketingPreferencesDS/assets/CR_Mail.svg

@@ -1 +0,0 @@
-<svg version="1.1" id="Content" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 48 48" xml:space="preserve"><style></style><path d="M44 7H4a2 2 0 0 0-2 2v30a2 2 0 0 0 2 2h40a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zm-4.101 4L24 25.309 8.101 11h31.798zM6 37V14.491l16.662 14.996c.38.342.859.513 1.338.513s.958-.171 1.338-.513L42 14.491V37H6z"/></svg>

package/dist/components/Organisms/MarketingPreferencesDS/assets/CR_Phone.svg

@@ -1 +0,0 @@
-<svg version="1.1" id="Content" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 48 48" xml:space="preserve"><style></style><path d="M39.614 34.777c-3.589-3.607-6.461-6.451-9.849-6.269-1.9.103-3.622 1.137-5.264 3.161-.399.094-2.143-.148-5.083-3.088-2.941-2.941-3.188-4.682-3.088-5.083 2.023-1.641 3.058-3.363 3.16-5.263.186-3.429-2.663-6.262-6.27-9.85l-.8-.799a2 2 0 0 0-2.116-.458c-3.648 1.368-6.128 4.289-6.979 8.224-1.404 6.484 1.764 14.553 8.268 21.057 5.483 5.484 12.079 8.596 17.899 8.596 1.084 0 2.141-.108 3.158-.328 3.935-.853 6.855-3.331 8.224-6.98a2 2 0 0 0-.459-2.116l-.801-.804zm-7.812 5.99C26.717 41.87 19.89 39.049 14.42 33.58c-5.469-5.469-8.289-12.292-7.187-17.382.338-1.562 1.2-3.559 3.349-4.797 2.599 2.585 5.002 5.015 4.915 6.618-.038.71-.624 1.523-1.74 2.417-.854.683-1.362 1.729-1.43 2.943-.09 1.628.576 4.343 4.264 8.03 3.688 3.688 6.41 4.354 8.031 4.264 1.215-.067 2.26-.575 2.942-1.429.894-1.117 1.707-1.703 2.417-1.742 1.64-.077 4.034 2.318 6.617 4.915-1.237 2.149-3.234 3.011-4.796 3.35zM25 17a2 2 0 0 1 0-4c5.141 0 10 4.86 10 10a2 2 0 0 1-4 0c0-2.916-3.084-6-6-6zm18 6a2 2 0 0 1-4 0c0-6.935-7.065-14-14-14a2 2 0 0 1 0-4c9.084 0 18 8.916 18 18z"/></svg>

package/dist/components/Organisms/MarketingPreferencesDS/assets/CR_Post.svg

@@ -1 +0,0 @@
-<svg version="1.1" id="Content" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 48 48" xml:space="preserve"><style></style><path d="M46.808 11.838c.07-.15.119-.312.15-.481.007-.04.017-.079.021-.119.004-.029.013-.056.015-.085.012-.159 0-.314-.023-.466-.005-.031-.014-.059-.021-.09a1.969 1.969 0 0 0-.183-.523c-.005-.01-.005-.021-.011-.031l-.007-.009a1.993 1.993 0 0 0-.353-.454c-.026-.026-.051-.051-.078-.075a1.98 1.98 0 0 0-.462-.308c-.024-.011-.049-.019-.073-.029a1.986 1.986 0 0 0-.506-.141c-.025-.004-.048-.011-.073-.013-.018-.002-.034-.008-.052-.009l-39-3a2.01 2.01 0 0 0-1.944 1.106 2.001 2.001 0 0 0 .297 2.217l6.2 6.975-8.124 1.741a1.999 1.999 0 0 0-.53 3.716l12.152 6.544 1.828 10.053a2 2 0 0 0 3.383 1.057l27-27c.021-.021.031-.05.052-.072.122-.132.232-.276.316-.439.01-.021.016-.043.026-.065zm-36.022-1.464l20.302 1.562-15.887 3.404-4.415-4.966zm8.499 23.513l-1.317-7.245a1.997 1.997 0 0 0-1.02-1.403l-8.213-4.423 30.062-6.442-19.512 19.513zM6.002 36a2 2 0 0 1-.896-3.79l4-2a2 2 0 1 1 1.789 3.579l-4 2a1.99 1.99 0 0 1-.893.211zm7.412.586a2 2 0 0 1 0 2.828l-4 4C9.023 43.805 8.512 44 8 44s-1.023-.195-1.414-.586a2 2 0 0 1 0-2.828l4-4a2 2 0 0 1 2.828 0z"/></svg>

package/dist/components/Organisms/MarketingPreferencesDS/assets/CR_SMS.svg

@@ -1 +0,0 @@
-<svg version="1.1" id="Content" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 48 48" xml:space="preserve"><style></style><path d="M17 21c0 1.654-1.346 3-3 3s-3-1.346-3-3 1.346-3 3-3 3 1.346 3 3zm7-3c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zm10 0c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zm12-8v22c0 .215-.034.429-.103.632l-4 12a2.001 2.001 0 0 1-3.686.263L34.764 38H8c-3.364 0-6-2.636-6-6V10c0-3.364 2.636-6 6-6h32c3.364 0 6 2.636 6 6zm-4 0c0-1.159-.841-2-2-2H8c-1.159 0-2 .841-2 2v22c0 1.159.841 2 2 2h28a2 2 0 0 1 1.789 1.105l1.841 3.682L42 31.675V10z"/></svg>

package/src/components/Organisms/MarketingPreferencesDS/assets/CR_Mail.svg

@@ -1 +0,0 @@
-<svg version="1.1" id="Content" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 48 48" xml:space="preserve"><style></style><path d="M44 7H4a2 2 0 0 0-2 2v30a2 2 0 0 0 2 2h40a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zm-4.101 4L24 25.309 8.101 11h31.798zM6 37V14.491l16.662 14.996c.38.342.859.513 1.338.513s.958-.171 1.338-.513L42 14.491V37H6z"/></svg>

package/src/components/Organisms/MarketingPreferencesDS/assets/CR_Phone.svg

@@ -1 +0,0 @@
-<svg version="1.1" id="Content" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 48 48" xml:space="preserve"><style></style><path d="M39.614 34.777c-3.589-3.607-6.461-6.451-9.849-6.269-1.9.103-3.622 1.137-5.264 3.161-.399.094-2.143-.148-5.083-3.088-2.941-2.941-3.188-4.682-3.088-5.083 2.023-1.641 3.058-3.363 3.16-5.263.186-3.429-2.663-6.262-6.27-9.85l-.8-.799a2 2 0 0 0-2.116-.458c-3.648 1.368-6.128 4.289-6.979 8.224-1.404 6.484 1.764 14.553 8.268 21.057 5.483 5.484 12.079 8.596 17.899 8.596 1.084 0 2.141-.108 3.158-.328 3.935-.853 6.855-3.331 8.224-6.98a2 2 0 0 0-.459-2.116l-.801-.804zm-7.812 5.99C26.717 41.87 19.89 39.049 14.42 33.58c-5.469-5.469-8.289-12.292-7.187-17.382.338-1.562 1.2-3.559 3.349-4.797 2.599 2.585 5.002 5.015 4.915 6.618-.038.71-.624 1.523-1.74 2.417-.854.683-1.362 1.729-1.43 2.943-.09 1.628.576 4.343 4.264 8.03 3.688 3.688 6.41 4.354 8.031 4.264 1.215-.067 2.26-.575 2.942-1.429.894-1.117 1.707-1.703 2.417-1.742 1.64-.077 4.034 2.318 6.617 4.915-1.237 2.149-3.234 3.011-4.796 3.35zM25 17a2 2 0 0 1 0-4c5.141 0 10 4.86 10 10a2 2 0 0 1-4 0c0-2.916-3.084-6-6-6zm18 6a2 2 0 0 1-4 0c0-6.935-7.065-14-14-14a2 2 0 0 1 0-4c9.084 0 18 8.916 18 18z"/></svg>

package/src/components/Organisms/MarketingPreferencesDS/assets/CR_Post.svg

@@ -1 +0,0 @@
-<svg version="1.1" id="Content" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 48 48" xml:space="preserve"><style></style><path d="M46.808 11.838c.07-.15.119-.312.15-.481.007-.04.017-.079.021-.119.004-.029.013-.056.015-.085.012-.159 0-.314-.023-.466-.005-.031-.014-.059-.021-.09a1.969 1.969 0 0 0-.183-.523c-.005-.01-.005-.021-.011-.031l-.007-.009a1.993 1.993 0 0 0-.353-.454c-.026-.026-.051-.051-.078-.075a1.98 1.98 0 0 0-.462-.308c-.024-.011-.049-.019-.073-.029a1.986 1.986 0 0 0-.506-.141c-.025-.004-.048-.011-.073-.013-.018-.002-.034-.008-.052-.009l-39-3a2.01 2.01 0 0 0-1.944 1.106 2.001 2.001 0 0 0 .297 2.217l6.2 6.975-8.124 1.741a1.999 1.999 0 0 0-.53 3.716l12.152 6.544 1.828 10.053a2 2 0 0 0 3.383 1.057l27-27c.021-.021.031-.05.052-.072.122-.132.232-.276.316-.439.01-.021.016-.043.026-.065zm-36.022-1.464l20.302 1.562-15.887 3.404-4.415-4.966zm8.499 23.513l-1.317-7.245a1.997 1.997 0 0 0-1.02-1.403l-8.213-4.423 30.062-6.442-19.512 19.513zM6.002 36a2 2 0 0 1-.896-3.79l4-2a2 2 0 1 1 1.789 3.579l-4 2a1.99 1.99 0 0 1-.893.211zm7.412.586a2 2 0 0 1 0 2.828l-4 4C9.023 43.805 8.512 44 8 44s-1.023-.195-1.414-.586a2 2 0 0 1 0-2.828l4-4a2 2 0 0 1 2.828 0z"/></svg>

package/src/components/Organisms/MarketingPreferencesDS/assets/CR_SMS.svg

@@ -1 +0,0 @@
-<svg version="1.1" id="Content" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 48 48" xml:space="preserve"><style></style><path d="M17 21c0 1.654-1.346 3-3 3s-3-1.346-3-3 1.346-3 3-3 3 1.346 3 3zm7-3c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zm10 0c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zm12-8v22c0 .215-.034.429-.103.632l-4 12a2.001 2.001 0 0 1-3.686.263L34.764 38H8c-3.364 0-6-2.636-6-6V10c0-3.364 2.636-6 6-6h32c3.364 0 6 2.636 6 6zm-4 0c0-1.159-.841-2-2-2H8c-1.159 0-2 .841-2 2v22c0 1.159.841 2 2 2h28a2 2 0 0 1 1.789 1.105l1.841 3.682L42 31.675V10z"/></svg>