@comicrelief/component-library 8.34.4 → 8.35.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/components/Molecules/Lookup/Lookup.js +1 -0
  2. package/dist/components/Organisms/Donate/Donate.style.js +2 -2
  3. package/dist/components/Organisms/Donate/Form/PopUpComponent.js +1 -1
  4. package/dist/components/Organisms/Donate/MoneyBuy/MoneyBuy.js +1 -1
  5. package/dist/components/Organisms/Donate/__snapshots__/Donate.test.js.snap +10 -10
  6. package/dist/components/Organisms/ImpactSlider/ImpactMoneybuys.style.js +1 -1
  7. package/dist/components/Organisms/ImpactSlider/Slider.style.js +1 -1
  8. package/dist/components/Organisms/MarketingPreferencesDS/MarketingPreferencesDS.style.js +2 -2
  9. package/dist/components/Organisms/MarketingPreferencesDS/_DefaultCopy.js +7 -8
  10. package/dist/components/Organisms/MarketingPreferencesDS/assets/Email.svg +1 -1
  11. package/dist/components/Organisms/MarketingPreferencesDS/assets/Phone.svg +3 -3
  12. package/dist/components/Organisms/MarketingPreferencesDS/assets/Post.svg +1 -1
  13. package/dist/components/Organisms/MarketingPreferencesDS/assets/Text.svg +1 -1
  14. package/dist/theme/crTheme/Colors.md +1 -1
  15. package/package.json +1 -1
  16. package/src/components/Molecules/Lookup/Lookup.js +1 -0
  17. package/src/components/Organisms/Donate/Donate.style.js +2 -2
  18. package/src/components/Organisms/Donate/Form/PopUpComponent.js +1 -1
  19. package/src/components/Organisms/Donate/MoneyBuy/MoneyBuy.js +1 -1
  20. package/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap +10 -10
  21. package/src/components/Organisms/ImpactSlider/ImpactMoneybuys.style.js +1 -1
  22. package/src/components/Organisms/ImpactSlider/Slider.style.js +2 -2
  23. package/src/components/Organisms/MarketingPreferencesDS/MarketingPreferencesDS.style.js +2 -2
  24. package/src/components/Organisms/MarketingPreferencesDS/_DefaultCopy.js +4 -4
  25. package/src/components/Organisms/MarketingPreferencesDS/assets/Email.svg +1 -1
  26. package/src/components/Organisms/MarketingPreferencesDS/assets/Phone.svg +3 -3
  27. package/src/components/Organisms/MarketingPreferencesDS/assets/Post.svg +1 -1
  28. package/src/components/Organisms/MarketingPreferencesDS/assets/Text.svg +1 -1
  29. package/src/theme/crTheme/Colors.md +1 -1
@@ -89,6 +89,7 @@ const Lookup = _ref2 => {
89
89
  options: options.map(mapOptionToString),
90
90
  label: label,
91
91
  placeholder: placeholder,
92
+ "data-test": "lookupDropdown",
92
93
  onChange: e => {
93
94
  setQuery(e.target.value);
94
95
  setErrorMessage('');
@@ -127,7 +127,7 @@ const Error = exports.Error = (0, _styledComponents.default)(_Text.default).with
127
127
  const Form = exports.Form = _styledComponents.default.form.withConfig({
128
128
  displayName: "Donatestyle__Form",
129
129
  componentId: "sc-8rjm3t-8"
130
- })(["position:relative;width:100%;background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:10px;margin-top:", ";h3{margin-top:", ";}input{max-width:100%;margin:0;}input[type='submit']{margin:", " 0;}@media ", "{width:450px;margin-right:auto;margin-left:auto;}"], _ref16 => {
130
+ })(["position:relative;width:100%;background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:0.5rem;margin-top:", ";h3{margin-top:", ";}input{max-width:100%;margin:0;}input[type='submit']{margin:", " 0;}@media ", "{width:450px;margin-right:auto;margin-left:auto;}"], _ref16 => {
131
131
  let {
132
132
  theme
133
133
  } = _ref16;
@@ -176,7 +176,7 @@ const Label = exports.Label = (0, _styledComponents.default)(_Text.default).with
176
176
  const AmountField = exports.AmountField = (0, _styledComponents.default)(_Input.default).withConfig({
177
177
  displayName: "Donatestyle__AmountField",
178
178
  componentId: "sc-8rjm3t-14"
179
- })(["position:relative;flex-basis:50%;flex-shrink:0;flex-grow:0;font-weight:400;display:block;@media ", "{flex-basis:60%;}span{position:absolute;font-size:20px;top:50%;transform:translateY(-50%);left:0px;font-weight:500;padding:0px 15px;", ";}input{height:48px;border:2px solid ", ";background:", ";border-radius:10px;padding:", " ", " ", " ", ";&:focus{outline:none;border:2px solid ", ";}}"], _ref21 => {
179
+ })(["position:relative;flex-basis:50%;flex-shrink:0;flex-grow:0;font-weight:400;display:block;@media ", "{flex-basis:60%;}span{position:absolute;font-size:20px;top:50%;transform:translateY(-50%);left:0px;font-weight:500;padding:0px 15px;", ";}input{height:48px;border:2px solid ", ";background:", ";border-radius:0.5rem;padding:", " ", " ", " ", ";&:focus{outline:none;border:2px solid ", ";}}"], _ref21 => {
180
180
  let {
181
181
  theme
182
182
  } = _ref21;
@@ -16,7 +16,7 @@ const fadeOpen = (0, _styledComponents.keyframes)(["0%{opacity:0;max-height:0px;
16
16
  const StyledPopUp = _styledComponents.default.div.withConfig({
17
17
  displayName: "PopUpComponent__StyledPopUp",
18
18
  componentId: "sc-1d7imlo-0"
19
- })(["display:grid;overflow:hidden;max-height:350px;opacity:1;animation:0.4s ", " ease;", " background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:10px;@media ", "{width:450px;margin-right:auto;margin-left:auto;}"], props => props.fadeOpen, props => props.isClosed && (0, _styledComponents.css)(["animation:", "s ", " ease forwards;"], closeDuration, props.fadeClose), _ref => {
19
+ })(["display:grid;overflow:hidden;max-height:350px;opacity:1;animation:0.4s ", " ease;", " background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:0.5rem;@media ", "{width:450px;margin-right:auto;margin-left:auto;}"], props => props.fadeOpen, props => props.isClosed && (0, _styledComponents.css)(["animation:", "s ", " ease forwards;"], closeDuration, props.fadeClose), _ref => {
20
20
  let {
21
21
  theme
22
22
  } = _ref;
@@ -13,7 +13,7 @@ var _spacing = _interopRequireDefault(require("../../../../theme/shared/spacing"
13
13
  const MoneyBuyButton = (0, _styledComponents.default)(_Input.default).withConfig({
14
14
  displayName: "MoneyBuy__MoneyBuyButton",
15
15
  componentId: "sc-38g5hn-0"
16
- })(["display:block;input{border:none;background-color:", ";color:", ";font-size:", ";font-family:", ";font-weight:normal;border-radius:10px;padding:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);height:auto;@media ", "{font-size:", ";padding:", ";}&:focus{border:none;outline:none;box-shadow:inset 0 0 0 4px ", ";}&:active:focus{box-shadow:0px 0px 16px rgba(0,0,0,0.3);}", "}"], _ref => {
16
+ })(["display:block;input{border:none;background-color:", ";color:", ";font-size:", ";font-family:", ";font-weight:normal;border-radius:0.5rem;padding:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);height:auto;@media ", "{font-size:", ";padding:", ";}&:focus{border:none;outline:none;box-shadow:inset 0 0 0 4px ", ";}&:active:focus{box-shadow:0px 0px 16px rgba(0,0,0,0.3);}", "}"], _ref => {
17
17
  let {
18
18
  theme
19
19
  } = _ref;
@@ -164,7 +164,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
164
164
  width: 100%;
165
165
  background-color: #FFFFFF;
166
166
  box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
167
- border-radius: 10px;
167
+ border-radius: 0.5rem;
168
168
  margin-top: 1rem;
169
169
  }
170
170
 
@@ -246,7 +246,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
246
246
  height: 48px;
247
247
  border: 2px solid #969598;
248
248
  background: #F4F3F5;
249
- border-radius: 10px;
249
+ border-radius: 0.5rem;
250
250
  padding: 0.5rem 1rem 0.5rem 2rem;
251
251
  }
252
252
 
@@ -863,7 +863,7 @@ exports[`Monthly donation renders correctly 1`] = `
863
863
  width: 100%;
864
864
  background-color: #FFFFFF;
865
865
  box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
866
- border-radius: 10px;
866
+ border-radius: 0.5rem;
867
867
  margin-top: 1rem;
868
868
  }
869
869
 
@@ -949,7 +949,7 @@ exports[`Monthly donation renders correctly 1`] = `
949
949
  height: 48px;
950
950
  border: 2px solid #969598;
951
951
  background: #F4F3F5;
952
- border-radius: 10px;
952
+ border-radius: 0.5rem;
953
953
  padding: 0.5rem 1rem 0.5rem 2rem;
954
954
  }
955
955
 
@@ -1481,7 +1481,7 @@ exports[`Single donation renders correctly 1`] = `
1481
1481
  font-size: 1.5rem;
1482
1482
  font-family: 'Anton',Impact,sans-serif;
1483
1483
  font-weight: normal;
1484
- border-radius: 10px;
1484
+ border-radius: 0.5rem;
1485
1485
  box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
1486
1486
  height: auto;
1487
1487
  }
@@ -1507,7 +1507,7 @@ exports[`Single donation renders correctly 1`] = `
1507
1507
  font-size: 1.5rem;
1508
1508
  font-family: 'Anton',Impact,sans-serif;
1509
1509
  font-weight: normal;
1510
- border-radius: 10px;
1510
+ border-radius: 0.5rem;
1511
1511
  box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
1512
1512
  height: auto;
1513
1513
  background-color: #2042AD;
@@ -1588,7 +1588,7 @@ exports[`Single donation renders correctly 1`] = `
1588
1588
  width: 100%;
1589
1589
  background-color: #FFFFFF;
1590
1590
  box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
1591
- border-radius: 10px;
1591
+ border-radius: 0.5rem;
1592
1592
  margin-top: 1rem;
1593
1593
  }
1594
1594
 
@@ -1701,7 +1701,7 @@ exports[`Single donation renders correctly 1`] = `
1701
1701
  height: 48px;
1702
1702
  border: 2px solid #969598;
1703
1703
  background: #F4F3F5;
1704
- border-radius: 10px;
1704
+ border-radius: 0.5rem;
1705
1705
  padding: 0.5rem 1rem 0.5rem 2rem;
1706
1706
  }
1707
1707
 
@@ -2281,7 +2281,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
2281
2281
  width: 100%;
2282
2282
  background-color: #FFFFFF;
2283
2283
  box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
2284
- border-radius: 10px;
2284
+ border-radius: 0.5rem;
2285
2285
  margin-top: 1rem;
2286
2286
  }
2287
2287
 
@@ -2363,7 +2363,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
2363
2363
  height: 48px;
2364
2364
  border: 2px solid #969598;
2365
2365
  background: #F4F3F5;
2366
- border-radius: 10px;
2366
+ border-radius: 0.5rem;
2367
2367
  padding: 0.5rem 1rem 0.5rem 2rem;
2368
2368
  }
2369
2369
 
@@ -20,7 +20,7 @@ const MoneybuyWrapper = exports.MoneybuyWrapper = _styledComponents.default.div.
20
20
  const Moneybuy = exports.Moneybuy = _styledComponents.default.div.withConfig({
21
21
  displayName: "ImpactMoneybuysstyle__Moneybuy",
22
22
  componentId: "sc-1lsmpzi-1"
23
- })(["display:inherit;width:100%;padding:8px 20px;height:auto;background-color:white;border-radius:10px;border:1px solid ", ";position:relative;flex-direction:row;align-items:center;justify-content:flex-start;opacity:1;", " @media ", "{width:70%;padding:8px 40px;}@media ", "{padding:20px 14px;flex-direction:column;width:18%;max-height:none;}"], props => props.theme.color('black'), props => props.isInactive && (0, _styledComponents.css)(["opacity:0.5;"]), _ref2 => {
23
+ })(["display:inherit;width:100%;padding:8px 20px;height:auto;background-color:white;border-radius:0.5rem;border:1px solid ", ";position:relative;flex-direction:row;align-items:center;justify-content:flex-start;opacity:1;", " @media ", "{width:70%;padding:8px 40px;}@media ", "{padding:20px 14px;flex-direction:column;width:18%;max-height:none;}"], props => props.theme.color('black'), props => props.isInactive && (0, _styledComponents.css)(["opacity:0.5;"]), _ref2 => {
24
24
  let {
25
25
  theme
26
26
  } = _ref2;
@@ -13,7 +13,7 @@ const sizeMultiplier = 1.4;
13
13
  const StyledRangerSlider = exports.StyledRangerSlider = (0, _styledComponents.default)(_reactRangeSliderInput.default).withConfig({
14
14
  displayName: "Sliderstyle__StyledRangerSlider",
15
15
  componentId: "sc-pyds3x-0"
16
- })(["background:white;height:16px;border-radius:16px;border:1px solid ", ";.range-slider__range{height:14px;border-radius:10px;background-color:", ";z-index:2;}.range-slider__thumb[data-upper]{&:after{background-color:white;width:", "px;height:", "px;content:\"\";position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;border-radius:50%;border:", "px solid ", ";transition-property:width,height,border-width;transition-duration:0.15s;}&:hover{&:after{width:", "px;height:", "px;border-width:", "px;}}}.range-slider__thumb[data-lower]{width:0;}"], props => props.theme.color('black'), props => props.theme.color('red'), thumbSize, thumbSize, outlineSize, props => props.theme.color('red'), thumbSize * sizeMultiplier, thumbSize * sizeMultiplier, outlineSize);
16
+ })(["background:white;height:16px;border-radius:1rem;border:1px solid ", ";.range-slider__range{height:14px;border-radius:0.5rem;background-color:", ";z-index:2;}.range-slider__thumb[data-upper]{&:after{background-color:white;width:", "px;height:", "px;content:\"\";position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;border-radius:50%;border:", "px solid ", ";transition-property:width,height,border-width;transition-duration:0.15s;}&:hover{&:after{width:", "px;height:", "px;border-width:", "px;}}}.range-slider__thumb[data-lower]{width:0;}"], props => props.theme.color('black'), props => props.theme.color('red'), thumbSize, thumbSize, outlineSize, props => props.theme.color('red'), thumbSize * sizeMultiplier, thumbSize * sizeMultiplier, outlineSize);
17
17
  const SliderWrapper = exports.SliderWrapper = _styledComponents.default.div.withConfig({
18
18
  displayName: "Sliderstyle__SliderWrapper",
19
19
  componentId: "sc-pyds3x-1"
@@ -51,7 +51,7 @@ const FormField = exports.FormField = _styledComponents.default.div.withConfig({
51
51
  theme,
52
52
  isError
53
53
  } = _ref2;
54
- return (0, _styledComponents.css)(["position:relative;margin-bottom:", ";width:100%;display:flex;flex-direction:column;padding:", ";background-color:", ";transition:background-color 0.3s,color 0.3s;border-radius:10px;border:1px solid ", ";&.selected{background-color:", ";&:hover{background-color:", ";border-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:", ";}}}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_light'), theme.color('grey'), isError ? theme.color('red') : theme.color('blue_donate'), isError ? theme.color('red_dark') : theme.color('blue_donate'), theme.color('grey_4'), _EmailWhite.default, _PhoneWhite.default, _PostWhite.default, _TextWhite.default, theme.color('white'), theme.color('black'), (0, _spacing.default)('md'));
54
+ return (0, _styledComponents.css)(["position:relative;margin-bottom:", ";width:100%;display:flex;flex-direction:column;padding:", ";background-color:", ";transition:background-color 0.3s,color 0.3s;border-radius:0.5rem;border:1px solid ", ";&.selected{background-color:", ";&:hover{background-color:", ";border-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:", ";}}}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_light'), theme.color('grey'), isError ? theme.color('red') : theme.color('blue_donate'), isError ? theme.color('red_dark') : theme.color('blue_donate'), theme.color('grey_4'), _EmailWhite.default, _PhoneWhite.default, _PostWhite.default, _TextWhite.default, theme.color('white'), theme.color('black'), (0, _spacing.default)('md'));
55
55
  });
56
56
  const CheckContainer = exports.CheckContainer = _styledComponents.default.div.withConfig({
57
57
  displayName: "MarketingPreferencesDSstyle__CheckContainer",
@@ -74,7 +74,7 @@ const CheckLabel = exports.CheckLabel = _styledComponents.default.label.withConf
74
74
  const CheckInput = exports.CheckInput = _styledComponents.default.input.withConfig({
75
75
  displayName: "MarketingPreferencesDSstyle__CheckInput",
76
76
  componentId: "sc-68n85q-8"
77
- })(["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 => {
77
+ })(["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:0.5rem;}:checked + span{background:url(", ") no-repeat center ", ";background-size:contain;}"], _ref5 => {
78
78
  let {
79
79
  theme
80
80
  } = _ref5;
@@ -10,24 +10,23 @@ var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
10
10
  var _Link = _interopRequireDefault(require("../../Atoms/Link/Link"));
11
11
  const defaultCopyTop = exports.defaultCopyTop = /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Text.default, {
12
12
  tag: "h3",
13
- size: "xl",
14
- family: "Anton",
15
- uppercase: true,
16
- weight: "400",
17
- color: "grey_dark"
13
+ size: "m",
14
+ family: "Montserrat",
15
+ weight: "600",
16
+ color: "black"
18
17
  }, "Stay up to date with Comic Relief?"), /*#__PURE__*/_react.default.createElement(_Text.default, {
19
18
  tag: "p",
20
19
  size: "md",
21
- color: "grey_dark"
20
+ color: "black"
22
21
  }, "We\u2019d like to send you updates on the work we\u2019re funding and how your support makes a difference in the UK and around the world."), /*#__PURE__*/_react.default.createElement(_Text.default, {
23
22
  tag: "p",
24
23
  size: "md",
25
- color: "grey_dark"
24
+ color: "black"
26
25
  }, "Please tick the relevant boxes below if you would like to hear from us."));
27
26
  const defaultCopyBottom = exports.defaultCopyBottom = /*#__PURE__*/_react.default.createElement(_Text.default, {
28
27
  tag: "p",
29
28
  size: "xs",
30
- color: "grey_dark"
29
+ color: "black"
31
30
  }, "Update your preferences at any time by visiting our", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
32
31
  type: "standard",
33
32
  href: "https://www.comicrelief.com/update-your-preferences",
@@ -1,3 +1,3 @@
1
1
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <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"/>
2
+ <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="#000000"/>
3
3
  </svg>
@@ -1,5 +1,5 @@
1
1
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <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"/>
3
- <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"/>
4
- <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"/>
2
+ <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="#000000"/>
3
+ <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="#000000"/>
4
+ <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="#000000"/>
5
5
  </svg>
@@ -1,3 +1,3 @@
1
1
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <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"/>
2
+ <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="#000000"/>
3
3
  </svg>
@@ -1,3 +1,3 @@
1
1
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <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"/>
2
+ <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="#000000"/>
3
3
  </svg>
@@ -23,7 +23,7 @@ const Item = styled.div`
23
23
  div {
24
24
  width: 160px;
25
25
  height: 160px;
26
- border-radius: 10px;
26
+ border-radius: 0.5rem;
27
27
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
28
28
  justify-content: flex-end;
29
29
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@comicrelief/component-library",
3
3
  "author": "Comic Relief Engineering Team",
4
- "version": "8.34.4",
4
+ "version": "8.35.0",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
@@ -90,6 +90,7 @@ const Lookup = ({
90
90
  options={options.map(mapOptionToString)}
91
91
  label={label}
92
92
  placeholder={placeholder}
93
+ data-test="lookupDropdown"
93
94
  onChange={e => {
94
95
  setQuery(e.target.value);
95
96
  setErrorMessage('');
@@ -102,7 +102,7 @@ const Form = styled.form`
102
102
  width: 100%;
103
103
  background-color: ${({ theme }) => theme.color('white')};
104
104
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.15);
105
- border-radius: 10px;
105
+ border-radius: 0.5rem;
106
106
  margin-top: ${spacing('md')};
107
107
 
108
108
  h3 {
@@ -202,7 +202,7 @@ const AmountField = styled(Input)`
202
202
  height: 48px;
203
203
  border: 2px solid ${({ theme }) => theme.color('grey')};
204
204
  background: ${({ theme }) => theme.color('grey_light')};
205
- border-radius: 10px;
205
+ border-radius: 0.5rem;
206
206
  padding: ${spacing('sm')} ${spacing('md')} ${spacing('sm')} ${spacing('l')};
207
207
  &:focus {
208
208
  outline: none;
@@ -43,7 +43,7 @@ const StyledPopUp = styled.div`
43
43
  `}
44
44
  background-color: ${({ theme }) => theme.color('blue_light')};
45
45
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.15);
46
- border-radius: 10px;
46
+ border-radius: 0.5rem;
47
47
 
48
48
  @media ${({ theme }) => theme.allBreakpoints('M')} {
49
49
  width: 450px;
@@ -14,7 +14,7 @@ const MoneyBuyButton = styled(Input)`
14
14
  font-size: ${({ theme }) => theme.fontSize('l')};
15
15
  font-family: ${({ theme }) => theme.fontFamilies('Anton')};
16
16
  font-weight: normal;
17
- border-radius: 10px;
17
+ border-radius: 0.5rem;
18
18
  padding: ${spacing('s')};
19
19
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.15);
20
20
  height: auto;
@@ -164,7 +164,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
164
164
  width: 100%;
165
165
  background-color: #FFFFFF;
166
166
  box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
167
- border-radius: 10px;
167
+ border-radius: 0.5rem;
168
168
  margin-top: 1rem;
169
169
  }
170
170
 
@@ -246,7 +246,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
246
246
  height: 48px;
247
247
  border: 2px solid #969598;
248
248
  background: #F4F3F5;
249
- border-radius: 10px;
249
+ border-radius: 0.5rem;
250
250
  padding: 0.5rem 1rem 0.5rem 2rem;
251
251
  }
252
252
 
@@ -863,7 +863,7 @@ exports[`Monthly donation renders correctly 1`] = `
863
863
  width: 100%;
864
864
  background-color: #FFFFFF;
865
865
  box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
866
- border-radius: 10px;
866
+ border-radius: 0.5rem;
867
867
  margin-top: 1rem;
868
868
  }
869
869
 
@@ -949,7 +949,7 @@ exports[`Monthly donation renders correctly 1`] = `
949
949
  height: 48px;
950
950
  border: 2px solid #969598;
951
951
  background: #F4F3F5;
952
- border-radius: 10px;
952
+ border-radius: 0.5rem;
953
953
  padding: 0.5rem 1rem 0.5rem 2rem;
954
954
  }
955
955
 
@@ -1481,7 +1481,7 @@ exports[`Single donation renders correctly 1`] = `
1481
1481
  font-size: 1.5rem;
1482
1482
  font-family: 'Anton',Impact,sans-serif;
1483
1483
  font-weight: normal;
1484
- border-radius: 10px;
1484
+ border-radius: 0.5rem;
1485
1485
  box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
1486
1486
  height: auto;
1487
1487
  }
@@ -1507,7 +1507,7 @@ exports[`Single donation renders correctly 1`] = `
1507
1507
  font-size: 1.5rem;
1508
1508
  font-family: 'Anton',Impact,sans-serif;
1509
1509
  font-weight: normal;
1510
- border-radius: 10px;
1510
+ border-radius: 0.5rem;
1511
1511
  box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
1512
1512
  height: auto;
1513
1513
  background-color: #2042AD;
@@ -1588,7 +1588,7 @@ exports[`Single donation renders correctly 1`] = `
1588
1588
  width: 100%;
1589
1589
  background-color: #FFFFFF;
1590
1590
  box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
1591
- border-radius: 10px;
1591
+ border-radius: 0.5rem;
1592
1592
  margin-top: 1rem;
1593
1593
  }
1594
1594
 
@@ -1701,7 +1701,7 @@ exports[`Single donation renders correctly 1`] = `
1701
1701
  height: 48px;
1702
1702
  border: 2px solid #969598;
1703
1703
  background: #F4F3F5;
1704
- border-radius: 10px;
1704
+ border-radius: 0.5rem;
1705
1705
  padding: 0.5rem 1rem 0.5rem 2rem;
1706
1706
  }
1707
1707
 
@@ -2281,7 +2281,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
2281
2281
  width: 100%;
2282
2282
  background-color: #FFFFFF;
2283
2283
  box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
2284
- border-radius: 10px;
2284
+ border-radius: 0.5rem;
2285
2285
  margin-top: 1rem;
2286
2286
  }
2287
2287
 
@@ -2363,7 +2363,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
2363
2363
  height: 48px;
2364
2364
  border: 2px solid #969598;
2365
2365
  background: #F4F3F5;
2366
- border-radius: 10px;
2366
+ border-radius: 0.5rem;
2367
2367
  padding: 0.5rem 1rem 0.5rem 2rem;
2368
2368
  }
2369
2369
 
@@ -22,7 +22,7 @@ const Moneybuy = styled.div`
22
22
  padding: 8px 20px;
23
23
  height: auto;
24
24
  background-color: white;
25
- border-radius: 10px;
25
+ border-radius: 0.5rem;
26
26
  border: 1px solid ${props => props.theme.color('black')};
27
27
  position: relative;
28
28
  flex-direction: row;
@@ -8,12 +8,12 @@ const sizeMultiplier = 1.4;
8
8
  const StyledRangerSlider = styled(RangeSlider)`
9
9
  background: white;
10
10
  height: 16px;
11
- border-radius: 16px;
11
+ border-radius: 1rem;
12
12
  border: 1px solid ${props => props.theme.color('black')};
13
13
 
14
14
  .range-slider__range {
15
15
  height: 14px;
16
- border-radius: 10px;
16
+ border-radius: 0.5rem;
17
17
  background-color: ${props => props.theme.color('red')};
18
18
  z-index: 2;
19
19
  }
@@ -84,7 +84,7 @@ const FormField = styled.div`${({ theme, isError }) => css`
84
84
  padding: ${spacing('m')};
85
85
  background-color: ${theme.color('grey_light')};
86
86
  transition: background-color 0.3s, color 0.3s;
87
- border-radius: 10px;
87
+ border-radius: 0.5rem;
88
88
  border: 1px solid ${theme.color('grey')};
89
89
 
90
90
  &.selected {
@@ -179,7 +179,7 @@ const CheckInput = styled.input`
179
179
  background-color: ${({ theme }) => theme.color('white')};
180
180
  border: 1px solid ${({ theme }) => theme.color('grey')};
181
181
  float: left;
182
- border-radius: 8px;
182
+ border-radius: 0.5rem;
183
183
  }
184
184
  :checked + span {
185
185
  background: url(${checkBoxIcon}) no-repeat center ${({ theme }) => theme.color('white')};
@@ -4,21 +4,21 @@ import Link from '../../Atoms/Link/Link';
4
4
 
5
5
  const defaultCopyTop = (
6
6
  <div>
7
- <Text tag="h3" size="xl" family="Anton" uppercase weight="400" color="grey_dark">
7
+ <Text tag="h3" size="m" family="Montserrat" weight="600" color="black">
8
8
  Stay up to date with Comic Relief?
9
9
  </Text>
10
- <Text tag="p" size="md" color="grey_dark">
10
+ <Text tag="p" size="md" color="black">
11
11
  We’d like to send you updates on the work we’re funding and how
12
12
  your support makes a difference in the UK and around the world.
13
13
  </Text>
14
- <Text tag="p" size="md" color="grey_dark">
14
+ <Text tag="p" size="md" color="black">
15
15
  Please tick the relevant boxes below if you would like to hear from us.
16
16
  </Text>
17
17
  </div>
18
18
  );
19
19
 
20
20
  const defaultCopyBottom = (
21
- <Text tag="p" size="xs" color="grey_dark">
21
+ <Text tag="p" size="xs" color="black">
22
22
  Update your preferences at any time by visiting our
23
23
  {' '}
24
24
  <Link
@@ -1,3 +1,3 @@
1
1
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <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"/>
2
+ <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="#000000"/>
3
3
  </svg>
@@ -1,5 +1,5 @@
1
1
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <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"/>
3
- <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"/>
4
- <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"/>
2
+ <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="#000000"/>
3
+ <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="#000000"/>
4
+ <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="#000000"/>
5
5
  </svg>
@@ -1,3 +1,3 @@
1
1
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <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"/>
2
+ <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="#000000"/>
3
3
  </svg>
@@ -1,3 +1,3 @@
1
1
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <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"/>
2
+ <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="#000000"/>
3
3
  </svg>
@@ -23,7 +23,7 @@ const Item = styled.div`
23
23
  div {
24
24
  width: 160px;
25
25
  height: 160px;
26
- border-radius: 10px;
26
+ border-radius: 0.5rem;
27
27
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
28
28
  justify-content: flex-end;
29
29
  }