@comicrelief/component-library 7.38.0 → 7.39.0

package/dist/components/Atoms/Button/Button.js

@@ -9,11 +9,10 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
-var _breakpoint = _interopRequireDefault(require("../../../theme/shared/breakpoint"));
 const StyledButton = _styledComponents.default.button.withConfig({
   displayName: "Button__StyledButton",
   componentId: "sc-1gm5vj0-0"
-})(["display:inline-flex;position:relative;padding:0.5rem 1.25rem;text-decoration:none;font-weight:700;font-size:", ";border-radius:2rem;transition:all 0.3s;height:3.125rem;width:100%;justify-content:center;align-items:center;border:none;cursor:pointer;> a{text-decoration:none;}", ";@media ", "{width:auto;}", "{width:auto;padding:", " ", ";margin:0 auto ", ";}"], _ref => {
+})(["display:inline-flex;position:relative;padding:0.5rem 1.25rem;text-decoration:none;font-weight:700;font-size:", ";border-radius:2rem;transition:all 0.3s;height:3.125rem;width:100%;justify-content:center;align-items:center;border:none;cursor:pointer;> a{text-decoration:none;}", ";@media ", "{width:auto;}@media ", "{width:auto;padding:", " ", ";margin:0 auto ", ";}"], _ref => {
   let {
     theme
   } = _ref;
@@ -29,13 +28,18 @@ const StyledButton = _styledComponents.default.button.withConfig({
     theme
   } = _ref3;
   return theme.allBreakpoints('M');
-}, (0, _breakpoint.default)('medium'), (0, _spacing.default)('md'), (0, _spacing.default)('l'), (0, _spacing.default)('l'));
-const Button = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.allBreakpoints('L');
+}, (0, _spacing.default)('md'), (0, _spacing.default)('l'), (0, _spacing.default)('l'));
+const Button = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   let {
     children,
     wrapper,
     ...rest
-  } = _ref4;
+  } = _ref5;
   return /*#__PURE__*/_react.default.createElement(StyledButton, Object.assign({}, rest, {
     as: wrapper ? 'span' : 'button',
     ref: ref

package/dist/components/Atoms/Button/Button.test.js

@@ -5,9 +5,9 @@ var _react = _interopRequireDefault(require("react"));
 require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWithTheme"));
 var _Button = _interopRequireDefault(require("./Button"));
-it('renders a standard styled link correctly', () => {
+it("renders a standard styled link correctly", () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Button.default, {
     type: "submit"
   }, "A standard link")).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      display: -webkit-inline-box;\n      display: -webkit-inline-flex;\n      display: -ms-inline-flexbox;\n      display: inline-flex;\n      position: relative;\n      padding: 0.5rem 1.25rem;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      font-weight: 700;\n      font-size: 1rem;\n      border-radius: 2rem;\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s;\n      height: 3.125rem;\n      width: 100%;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      border: none;\n      cursor: pointer;\n      background-color: #E52630;\n      color: #FFFFFF;\n    }\n\n    .c0 > a {\n      -webkit-text-decoration: none;\n      text-decoration: none;\n    }\n\n    .c0:hover {\n      background-color: #890B11;\n      color: #FFFFFF;\n    }\n\n    .c0 (min-width:1024px) {\n      width: auto;\n      padding: 1rem 2rem;\n      margin: 0 auto 2rem;\n    }\n\n    @media (min-width:740px) {\n      .c0 {\n        width: auto;\n      }\n    }\n\n    <button\n      className=\"c0\"\n      type=\"submit\"\n    >\n      A standard link\n    </button>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      display: -webkit-inline-box;\n      display: -webkit-inline-flex;\n      display: -ms-inline-flexbox;\n      display: inline-flex;\n      position: relative;\n      padding: 0.5rem 1.25rem;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      font-weight: 700;\n      font-size: 1rem;\n      border-radius: 2rem;\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s;\n      height: 3.125rem;\n      width: 100%;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      border: none;\n      cursor: pointer;\n      background-color: #E52630;\n      color: #FFFFFF;\n    }\n\n    .c0 > a {\n      -webkit-text-decoration: none;\n      text-decoration: none;\n    }\n\n    .c0:hover {\n      background-color: #890B11;\n      color: #FFFFFF;\n    }\n\n    @media (min-width:740px) {\n      .c0 {\n        width: auto;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 {\n        width: auto;\n        padding: 1rem 2rem;\n        margin: 0 auto 2rem;\n      }\n    }\n\n    <button\n      className=\"c0\"\n      type=\"submit\"\n    >\n      A standard link\n    </button>\n  ");
 });

package/dist/components/Molecules/Chip/Chip.style.js

@@ -8,7 +8,6 @@ exports.Overlay = exports.LabelGroup = exports.ClearButton = exports.CheckLabel
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
-var _breakpoint = _interopRequireDefault(require("../../../theme/shared/breakpoint"));
 var _CR_RedShed = _interopRequireDefault(require("./assets/CR_RedShed.svg"));
 var _CR_Funding = _interopRequireDefault(require("./assets/CR_Funding.svg"));
 var _CR_MentalHealth = _interopRequireDefault(require("./assets/CR_MentalHealth.svg"));
@@ -50,67 +49,72 @@ const LabelGroup = exports.LabelGroup = _styledComponents.default.div.withConfig
 const CheckLabel = exports.CheckLabel = _styledComponents.default.label.withConfig({
   displayName: "Chipstyle__CheckLabel",
   componentId: "sc-6s9oo3-1"
-})(["display:flex;align-items:center;width:auto;height:48px;border-radius:2rem;background-color:#d5d5d5;margin:", " ", " 0 0;padding:4px;padding-right:1rem;flex:0 0 auto;position:relative;", "{margin:", " ", " 0 0;}"], (0, _spacing.default)('sm'), (0, _spacing.default)('sm'), (0, _breakpoint.default)('small'), (0, _spacing.default)('md'), (0, _spacing.default)('md'));
+})(["display:flex;align-items:center;width:auto;height:48px;border-radius:2rem;background-color:#d5d5d5;margin:", " ", " 0 0;padding:4px;padding-right:1rem;flex:0 0 auto;position:relative;@media ", "{margin:", " ", " 0 0;}"], (0, _spacing.default)('sm'), (0, _spacing.default)('sm'), _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.allBreakpoints('M');
+}, (0, _spacing.default)('md'), (0, _spacing.default)('md'));
 const Overlay = exports.Overlay = _styledComponents.default.span.withConfig({
   displayName: "Chipstyle__Overlay",
   componentId: "sc-6s9oo3-2"
-})(["display:block;position:absolute;width:100%;height:100%;opacity:0.2;border-radius:2rem;left:0;top:0;right:0;bottom:0;", ";:hover{background:", ";}"], (0, _zIndex.default)('low'), _ref => {
+})(["display:block;position:absolute;width:100%;height:100%;opacity:0.2;border-radius:2rem;left:0;top:0;right:0;bottom:0;", ";:hover{background:", ";}"], (0, _zIndex.default)('low'), _ref2 => {
   let {
     theme
-  } = _ref;
+  } = _ref2;
   return theme.color('grey_medium');
 });
 const CheckInput = exports.CheckInput = _styledComponents.default.input.withConfig({
   displayName: "Chipstyle__CheckInput",
   componentId: "sc-6s9oo3-3"
-})(["font-size:", ";display:block;box-sizing:border-box;opacity:0;position:absolute;left:0px;width:40px;height:40px;margin:0;border:1px solid ", ";+ span{background:url(", ") no-repeat center;background-size:24px;margin-right:", ";width:40px;height:40px;border-radius:50%;background-color:", ";float:left;", ";}:checked ~ span{background-size:24px;background-color:", ";}:focus + span{border-color:", ";border-width:3px;}:focus + span{border-color:", ";border-width:3px;}"], _ref2 => {
+})(["font-size:", ";display:block;box-sizing:border-box;opacity:0;position:absolute;left:0px;width:40px;height:40px;margin:0;border:1px solid ", ";+ span{background:url(", ") no-repeat center;background-size:24px;margin-right:", ";width:40px;height:40px;border-radius:50%;background-color:", ";float:left;", ";}:checked ~ span{background-size:24px;background-color:", ";}:focus + span{border-color:", ";border-width:3px;}:focus + span{border-color:", ";border-width:3px;}"], _ref3 => {
   let {
     theme
-  } = _ref2;
+  } = _ref3;
   return theme.fontSize('sm');
-}, _ref3 => {
+}, _ref4 => {
   let {
     theme
-  } = _ref3;
+  } = _ref4;
   return theme.color('grey_for_forms');
-}, _ref4 => {
+}, _ref5 => {
   let {
     value
-  } = _ref4;
+  } = _ref5;
   return selectIcon(value);
-}, (0, _spacing.default)('md'), _ref5 => {
+}, (0, _spacing.default)('md'), _ref6 => {
   let {
     theme
-  } = _ref5;
+  } = _ref6;
   return theme.color('grey');
-}, (0, _zIndex.default)('medium'), _ref6 => {
+}, (0, _zIndex.default)('medium'), _ref7 => {
   let {
     theme,
     color
-  } = _ref6;
+  } = _ref7;
   return theme.color(color);
-}, _ref7 => {
+}, _ref8 => {
   let {
     theme
-  } = _ref7;
+  } = _ref8;
   return theme.color('grey_for_forms');
-}, _ref8 => {
+}, _ref9 => {
   let {
     theme
-  } = _ref8;
+  } = _ref9;
   return theme.color('grey_for_forms');
 });
 const ClearButton = exports.ClearButton = _styledComponents.default.button.withConfig({
   displayName: "Chipstyle__ClearButton",
   componentId: "sc-6s9oo3-4"
-})(["border-radius:2rem;background:none;padding:", " ", ";margin:", " 0 0 0;border:1px solid ", ";outline:none;padding-left:3rem;position:relative;height:48px;:focus{border-color:", ";}:before{content:'';background:url(", ") no-repeat center;width:20px;height:20px;display:block;position:absolute;left:1rem;}"], (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('md'), _ref9 => {
+})(["border-radius:2rem;background:none;padding:", " ", ";margin:", " 0 0 0;border:1px solid ", ";outline:none;padding-left:3rem;position:relative;height:48px;:focus{border-color:", ";}:before{content:'';background:url(", ") no-repeat center;width:20px;height:20px;display:block;position:absolute;left:1rem;}"], (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('md'), _ref10 => {
   let {
     theme
-  } = _ref9;
+  } = _ref10;
   return theme.color('grey_medium');
-}, _ref10 => {
+}, _ref11 => {
   let {
     theme
-  } = _ref10;
+  } = _ref11;
   return theme.color('grey_for_forms');
 }, _clear.default);

package/dist/components/Molecules/Chip/Chip.test.js

@@ -5,11 +5,11 @@ var _react = _interopRequireDefault(require("react"));
 require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWithTheme"));
 var _Chip = _interopRequireDefault(require("./Chip"));
-it('renders article teaser correctly', () => {
+it("renders article teaser correctly", () => {
   const handleToggle = e => e.target.value;
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Chip.default, {
     category: "Gender Justice",
     handleToggle: handleToggle
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      width: auto;\n      height: 48px;\n      border-radius: 2rem;\n      background-color: #d5d5d5;\n      margin: 0.5rem 0.5rem 0 0;\n      padding: 4px;\n      padding-right: 1rem;\n      -webkit-flex: 0 0 auto;\n      -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n      position: relative;\n    }\n\n    .c0 (min-width:740px) {\n      margin: 1rem 1rem 0 0;\n    }\n\n    .c2 {\n      display: block;\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      opacity: 0.2;\n      border-radius: 2rem;\n      left: 0;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n    }\n\n    .c2:hover {\n      background: #E1E2E3;\n    }\n\n    .c1 {\n      display: block;\n      box-sizing: border-box;\n      opacity: 0;\n      position: absolute;\n      left: 0px;\n      width: 40px;\n      height: 40px;\n      margin: 0;\n      border: 1px solid #666;\n    }\n\n    .c1 + span {\n      background: url(mock.asset) no-repeat center;\n      background-size: 24px;\n      margin-right: 1rem;\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      background-color: #969598;\n      float: left;\n      z-index: 2;\n    }\n\n    .c1:checked ~ span {\n      background-size: 24px;\n      background-color: #6F3AAB;\n    }\n\n    .c1:focus + span {\n      border-color: #666;\n      border-width: 3px;\n    }\n\n    .c1:focus + span {\n      border-color: #666;\n      border-width: 3px;\n    }\n\n    <label\n      className=\"c0\"\n    >\n      <input\n        checked={false}\n        className=\"c1\"\n        color=\"purple\"\n        onChange={[Function]}\n        type=\"checkbox\"\n        value=\"Gender Justice\"\n      />\n      <span />\n      <span\n        className=\"c2\"\n      />\n      Gender Justice\n    </label>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      width: auto;\n      height: 48px;\n      border-radius: 2rem;\n      background-color: #d5d5d5;\n      margin: 0.5rem 0.5rem 0 0;\n      padding: 4px;\n      padding-right: 1rem;\n      -webkit-flex: 0 0 auto;\n      -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n      position: relative;\n    }\n\n    .c2 {\n      display: block;\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      opacity: 0.2;\n      border-radius: 2rem;\n      left: 0;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n    }\n\n    .c2:hover {\n      background: #E1E2E3;\n    }\n\n    .c1 {\n      display: block;\n      box-sizing: border-box;\n      opacity: 0;\n      position: absolute;\n      left: 0px;\n      width: 40px;\n      height: 40px;\n      margin: 0;\n      border: 1px solid #666;\n    }\n\n    .c1 + span {\n      background: url(mock.asset) no-repeat center;\n      background-size: 24px;\n      margin-right: 1rem;\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      background-color: #969598;\n      float: left;\n      z-index: 2;\n    }\n\n    .c1:checked ~ span {\n      background-size: 24px;\n      background-color: #6F3AAB;\n    }\n\n    .c1:focus + span {\n      border-color: #666;\n      border-width: 3px;\n    }\n\n    .c1:focus + span {\n      border-color: #666;\n      border-width: 3px;\n    }\n\n    @media (min-width:740px) {\n      .c0 {\n        margin: 1rem 1rem 0 0;\n      }\n    }\n\n    <label\n      className=\"c0\"\n    >\n      <input\n        checked={false}\n        className=\"c1\"\n        color=\"purple\"\n        onChange={[Function]}\n        type=\"checkbox\"\n        value=\"Gender Justice\"\n      />\n      <span />\n      <span\n        className=\"c2\"\n      />\n      Gender Justice\n    </label>\n  ");
 });

package/dist/components/Molecules/Promo/Promo.style.js

@@ -7,56 +7,96 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Wrapper = exports.Video = exports.Media = exports.Gradient = exports.Copy = exports.Container = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _size = require("../../../theme/shared/size");
+var _allContainers = _interopRequireDefault(require("../../../theme/shared/allContainers"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
 const Container = exports.Container = _styledComponents.default.div.withConfig({
   displayName: "Promostyle__Container",
   componentId: "sc-kk4nna-0"
-})(["width:100%;display:flex;position:relative;flex-direction:column;overflow:hidden;background:", ";", "{flex-direction:row;}", " ", " ", ""], _ref => {
+})(["width:100%;display:flex;position:relative;flex-direction:column;overflow:hidden;background:", ";@media ", "{flex-direction:row;}", " ", " ", ""], _ref => {
   let {
     theme,
     backgroundColor
   } = _ref;
   return theme.color(backgroundColor);
-}, (0, _size.media)('medium'), _ref2 => {
+}, _ref2 => {
   let {
-    position
+    theme
   } = _ref2;
-  return position === 'upper' && (0, _styledComponents.css)(["clip-path:polygon(0 0,100% 0,100% 90%,0 100%);", "{clip-path:polygon(0 0,100% 0,100% 85%,0 100%);}"], (0, _size.media)('medium'));
+  return theme.allBreakpoints('L');
 }, _ref3 => {
   let {
     position
   } = _ref3;
-  return position === 'lower' && (0, _styledComponents.css)(["clip-path:polygon(0 10%,100% 0,100% 100%,0 100%);", "{clip-path:polygon(0 15%,100% 0,100% 100%,0 100%);}"], (0, _size.media)('medium'));
-}, _ref4 => {
+  return position === 'upper' && (0, _styledComponents.css)(["clip-path:polygon(0 0,100% 0,100% 90%,0 100%);@media ", "{clip-path:polygon(0 0,100% 0,100% 85%,0 100%);}"], _ref4 => {
+    let {
+      theme
+    } = _ref4;
+    return theme.allBreakpoints('L');
+  });
+}, _ref5 => {
+  let {
+    position
+  } = _ref5;
+  return position === 'lower' && (0, _styledComponents.css)(["clip-path:polygon(0 10%,100% 0,100% 100%,0 100%);@media ", "{clip-path:polygon(0 15%,100% 0,100% 100%,0 100%);}"], _ref6 => {
+    let {
+      theme
+    } = _ref6;
+    return theme.allBreakpoints('L');
+  });
+}, _ref7 => {
   let {
     position
-  } = _ref4;
-  return position === 'end' && (0, _styledComponents.css)(["clip-path:polygon(0 0,100% 0,100% 90%,0 101%);border-radius:0 0 0 2rem;", "{clip-path:polygon(0 0,100% 0,100% 85%,0% 101%);border-radius:0 0 0 4rem;}"], (0, _size.media)('medium'));
+  } = _ref7;
+  return position === 'end' && (0, _styledComponents.css)(["clip-path:polygon(0 0,100% 0,100% 90%,0 101%);border-radius:0 0 0 2rem;@media ", "{clip-path:polygon(0 0,100% 0,100% 85%,0% 101%);border-radius:0 0 0 4rem;}"], _ref8 => {
+    let {
+      theme
+    } = _ref8;
+    return theme.allBreakpoints('L');
+  });
 });
 const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
   displayName: "Promostyle__Wrapper",
   componentId: "sc-kk4nna-1"
-})(["width:100%;max-width:", ";height:100%;left:0;right:0;margin:0 auto;display:flex;align-items:center;position:relative;", ";", "{min-height:calc(100vh - 90px);}"], _size.container.medium, _ref5 => {
+})(["width:100%;max-width:", ";height:100%;left:0;right:0;margin:0 auto;display:flex;align-items:center;position:relative;", ";@media ", "{min-height:calc(100vh - 90px);}"], _allContainers.default.medium, _ref9 => {
   let {
     copyLeft
-  } = _ref5;
+  } = _ref9;
   return !copyLeft && 'justify-content: flex-end';
-}, (0, _size.media)('medium'));
+}, _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.allBreakpoints('L');
+});
 const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   displayName: "Promostyle__Copy",
   componentId: "sc-kk4nna-2"
-})(["width:100%;padding:", " ", " ", ";", ";", "{width:100%;padding:", " ", ";}", ""], (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _spacing.default)('xl'), (0, _zIndex.default)('low'), (0, _size.media)('medium'), (0, _spacing.default)('xxl'), (0, _spacing.default)('m'), _ref6 => {
+})(["width:100%;padding:", " ", " ", ";", ";@media ", "{width:100%;padding:", " ", ";}", ""], (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _spacing.default)('xl'), (0, _zIndex.default)('low'), _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.allBreakpoints('L');
+}, (0, _spacing.default)('xxl'), (0, _spacing.default)('m'), _ref12 => {
   let {
     position
-  } = _ref6;
-  return position === 'lower' && (0, _styledComponents.css)(["padding:", " ", ";", "{padding:6rem ", ";margin-top:6rem;}"], (0, _spacing.default)('xl'), (0, _spacing.default)('m'), (0, _size.media)('medium'), (0, _spacing.default)('m'));
+  } = _ref12;
+  return position === 'lower' && (0, _styledComponents.css)(["padding:", " ", ";@media ", "{padding:6rem ", ";margin-top:6rem;}"], (0, _spacing.default)('xl'), (0, _spacing.default)('m'), _ref13 => {
+    let {
+      theme
+    } = _ref13;
+    return theme.allBreakpoints('L');
+  }, (0, _spacing.default)('m'));
 });
 const Media = exports.Media = _styledComponents.default.div.withConfig({
   displayName: "Promostyle__Media",
   componentId: "sc-kk4nna-3"
-})(["width:100%;height:auto;img{object-position:center;}", "{height:100%;position:absolute;}"], (0, _size.media)('medium'));
+})(["width:100%;height:auto;img{object-position:center;}@media ", "{height:100%;position:absolute;}"], _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.allBreakpoints('L');
+});
 const Video = exports.Video = _styledComponents.default.video.attrs(() => ({
   playsInline: true
 })).withConfig({
@@ -66,15 +106,20 @@ const Video = exports.Video = _styledComponents.default.video.attrs(() => ({
 const Gradient = exports.Gradient = _styledComponents.default.div.withConfig({
   displayName: "Promostyle__Gradient",
   componentId: "sc-kk4nna-5"
-})(["width:100%;height:100%;display:flex;align-items:center;", "{width:50%;position:absolute;top:0;left:0;", ";", ";}"], (0, _size.media)('medium'), _ref7 => {
+})(["width:100%;height:100%;display:flex;align-items:center;@media ", "{width:50%;position:absolute;top:0;left:0;", ";", ";}"], _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.allBreakpoints('L');
+}, _ref16 => {
   let {
     copyLeft
-  } = _ref7;
+  } = _ref16;
   return !copyLeft && (0, _styledComponents.css)(["left:auto;right:0;"]);
-}, _ref8 => {
+}, _ref17 => {
   let {
     hasVideo,
     behindTextGradient
-  } = _ref8;
+  } = _ref17;
   return hasVideo !== false && behindTextGradient !== 'none' && (0, _styledComponents.css)(["overflow:hidden;background-color:", ";box-shadow:0px 0px 50px 60px ", ";"], behindTextGradient === 'black' ? 'rgba(0,0,0,0.5)' : 'rgba(255, 255, 255, 0.5)', behindTextGradient === 'black' ? 'rgba(0,0,0,0.5)' : 'rgba(255, 255, 255, 0.5)');
 });

package/dist/components/Molecules/SearchInput/SearchInput.style.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.Wrapper = exports.SearchWrapper = exports.SearchField = exports.SearchBox = exports.InnerWrapper = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Input = _interopRequireDefault(require("../../Atoms/Input/Input"));
-var _size = require("../../../theme/shared/size");
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
   displayName: "SearchInputstyle__Wrapper",
@@ -33,7 +32,7 @@ const SearchWrapper = exports.SearchWrapper = _styledComponents.default.div.with
 const SearchField = exports.SearchField = (0, _styledComponents.default)(_Input.default).withConfig({
   displayName: "SearchInputstyle__SearchField",
   componentId: "sc-1y1iity-4"
-})(["input{padding:13px 0;margin:0;font-size:", ";max-width:100%;border:0;outline:", ";background:none;:focus{border:0;}", "{height:100px;font-size:", ";}}"], _ref2 => {
+})(["input{padding:13px 0;margin:0;font-size:", ";max-width:100%;border:0;outline:", ";background:none;:focus{border:0;}@media ", "{height:100px;font-size:", ";}}"], _ref2 => {
   let {
     theme
   } = _ref2;
@@ -43,9 +42,14 @@ const SearchField = exports.SearchField = (0, _styledComponents.default)(_Input.
     theme
   } = _ref3;
   return theme.color('red');
-}, (0, _size.media)('small'), _ref4 => {
+}, _ref4 => {
   let {
     theme
   } = _ref4;
+  return theme.allBreakpoints('M');
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
   return theme.fontSize('xxl');
 });

package/dist/components/Molecules/SingleMessage/SingleMessage.style.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.VideoWrapper = exports.PlayButton = exports.Media = exports.Image = exports.Copy = exports.Container = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
-var _size = require("../../../theme/shared/size");
+var _allContainers = _interopRequireDefault(require("../../../theme/shared/allContainers"));
 var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
 var _videoPlayIcon = _interopRequireDefault(require("./assets/video--play-icon.svg"));
 var _videoPlayIcon__hover = _interopRequireDefault(require("./assets/video--play-icon__hover.svg"));
@@ -17,178 +17,208 @@ var _utils = _interopRequireDefault(require("../../../utils/_utils"));
 const Container = exports.Container = _styledComponents.default.div.withConfig({
   displayName: "SingleMessagestyle__Container",
   componentId: "sc-86zg20-0"
-})(["display:flex;position:relative;flex-direction:column;overflow:hidden;background:", ";", "{flex-direction:", ";", ";}iframe{height:100%;width:100%;position:absolute;top:0;", ";", ";}"], _ref => {
+})(["display:flex;position:relative;flex-direction:column;overflow:hidden;background:", ";@media ", "{flex-direction:", ";", ";}iframe{height:100%;width:100%;position:absolute;top:0;", ";", ";}"], _ref => {
   let {
     theme,
     backgroundColor
   } = _ref;
   return theme.color(backgroundColor);
-}, (0, _size.media)('small'), _ref2 => {
+}, _ref2 => {
   let {
-    copyFirst
+    theme
   } = _ref2;
-  return copyFirst === true ? 'row-reverse' : 'row';
+  return theme.allBreakpoints('M');
 }, _ref3 => {
+  let {
+    copyFirst
+  } = _ref3;
+  return copyFirst === true ? 'row-reverse' : 'row';
+}, _ref4 => {
   let {
     landscapeVideo,
     hasVideo,
     fullImage
-  } = _ref3;
+  } = _ref4;
   return landscapeVideo && hasVideo && !fullImage ? 'min-height: 0;' : null;
-}, _ref4 => {
+}, _ref5 => {
   let {
     copyFirst
-  } = _ref4;
+  } = _ref5;
   return copyFirst === true ? 'left: auto; right: 0;' : 'left: 0; right: auto;';
-}, _ref5 => {
+}, _ref6 => {
   let {
     isPlaying
-  } = _ref5;
+  } = _ref6;
   return isPlaying ? (0, _zIndex.default)('high') : (0, _zIndex.default)('base');
 });
 const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   displayName: "SingleMessagestyle__Copy",
   componentId: "sc-86zg20-1"
-})(["width:100%;", ";", ";padding:", ";", "{", ";", ";flex-direction:column;justify-content:center;padding:", ";}", ";", ";", "{", ";}"], (0, _zIndex.default)('low'), _ref6 => {
+})(["width:100%;", ";", ";padding:", ";@media ", "{", ";", ";flex-direction:column;justify-content:center;padding:", ";}", ";", ";@media ", "{", ";}"], (0, _zIndex.default)('low'), _ref7 => {
   let {
     hasVideo,
     fullImage
-  } = _ref6;
+  } = _ref7;
   return hasVideo === true && fullImage === true ? 'display: none;' : null;
-}, (0, _spacing.default)('l'), (0, _size.media)('small'), _ref7 => {
+}, (0, _spacing.default)('l'), _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.allBreakpoints('M');
+}, _ref9 => {
   let {
     vhFull,
     fullImage
-  } = _ref7;
+  } = _ref9;
   return vhFull || fullImage ? 'min-height: calc(100vh - 5.625rem); flex-direction: column; justify-content: center;' : 'height: auto;';
-}, _ref8 => {
+}, _ref10 => {
   let {
     hasVideo,
     fullImage
-  } = _ref8;
+  } = _ref10;
   return hasVideo === true && fullImage === true ? 'display: none;' : 'display: flex;';
-}, (0, _spacing.default)('xl'), props => props.fullImage && (0, _styledComponents.css)(["", "{position:absolute;width:100%;right:0;top:50%;transform:translateY(-50%);", " width:50%;}"], (0, _size.media)('small'), props.copyFirst ? (0, _styledComponents.css)(["left:0;"]) : null), props => props.hasImage ? (0, _styledComponents.css)(["@media ", "{width:50%;}"], _ref9 => {
+}, (0, _spacing.default)('xl'), props => props.fullImage && (0, _styledComponents.css)(["@media ", "{position:absolute;width:100%;right:0;top:50%;transform:translateY(-50%);", " width:50%;}"], _ref11 => {
   let {
     theme
-  } = _ref9;
+  } = _ref11;
   return theme.allBreakpoints('M');
-}) : (0, _styledComponents.css)(["@media ", "{width:100%;max-width ", ";padding:", ";}margin:auto;padding:", ";"], _ref10 => {
+}, props.copyFirst ? (0, _styledComponents.css)(["left:0;"]) : null), props => props.hasImage ? (0, _styledComponents.css)(["@media ", "{width:50%;}"], _ref12 => {
   let {
     theme
-  } = _ref10;
+  } = _ref12;
+  return theme.allBreakpoints('M');
+}) : (0, _styledComponents.css)(["@media ", "{width:100%;max-width ", ";padding:", ";}margin:auto;padding:", ";"], _ref13 => {
+  let {
+    theme
+  } = _ref13;
   return theme.allBreakpoints('M');
-}, _size.container.small, (0, _spacing.default)('xl'), (0, _spacing.default)('md')), (0, _size.media)('medium'), _ref11 => {
+}, _allContainers.default.small, (0, _spacing.default)('xl'), (0, _spacing.default)('md')), _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.allBreakpoints('L');
+}, _ref15 => {
   let {
     paddingOption
-  } = _ref11;
+  } = _ref15;
   return (0, _utils.default)(paddingOption);
 });
 const Media = exports.Media = _styledComponents.default.div.withConfig({
   displayName: "SingleMessagestyle__Media",
   componentId: "sc-86zg20-2"
-})(["width:100%;", ";@media ", "{height:auto;width:", ";", ";", ";}position:relative;", ";", ";", "{padding-bottom:", ";}"], _ref12 => {
+})(["width:100%;", ";@media ", "{height:auto;width:", ";", ";", ";}position:relative;", ";", ";@media ", "{padding-bottom:", ";}"], _ref16 => {
   let {
     fullImage
-  } = _ref12;
+  } = _ref16;
   return fullImage ? 'height: 200px;' : 'height: 280px;';
-}, _ref13 => {
+}, _ref17 => {
   let {
     theme
-  } = _ref13;
+  } = _ref17;
   return theme.allBreakpoints('M');
-}, _ref14 => {
+}, _ref18 => {
   let {
     fullImage
-  } = _ref14;
+  } = _ref18;
   return fullImage ? '100%' : '50%';
-}, _ref15 => {
+}, _ref19 => {
   let {
     fullImage
-  } = _ref15;
+  } = _ref19;
   return fullImage ? 'min-height: 500px;' : null;
-}, _ref16 => {
+}, _ref20 => {
   let {
     vhFull,
     fullImage
-  } = _ref16;
+  } = _ref20;
   return vhFull && fullImage ? 'min-height: calc(100vh - 5.625rem);' : null;
-}, _ref17 => {
+}, _ref21 => {
   let {
     doubleImage
-  } = _ref17;
+  } = _ref21;
   return doubleImage && 'display: flex; flex-direction: column';
-}, _ref18 => {
+}, _ref22 => {
   let {
     hasVideo
-  } = _ref18;
+  } = _ref22;
   return hasVideo ? 'height: auto; overflow: hidden; padding-bottom: 56.25%;' : null;
-}, (0, _size.media)('small'), _ref19 => {
+}, _ref23 => {
+  let {
+    theme
+  } = _ref23;
+  return theme.allBreakpoints('M');
+}, _ref24 => {
   let {
     landscapeVideo,
     hasVideo
-  } = _ref19;
+  } = _ref24;
   return landscapeVideo && hasVideo ? 'calc(56.25% / 2);' : '0;';
 });
 const PlayButton = exports.PlayButton = _styledComponents.default.button.withConfig({
   displayName: "SingleMessagestyle__PlayButton",
   componentId: "sc-86zg20-3"
-})(["", ";cursor:pointer;width:100%;height:100%;position:absolute;top:0;border:0;margin:0;padding:0;text-indent:-9999px;background:rgba(0,0,0,0) center no-repeat;background-size:70px;background-image:", ";", ";display:", ";&:focus,&:hover{background-image:", ";}", "{background-size:100px;}"], (0, _zIndex.default)('medium'), _ref20 => {
+})(["", ";cursor:pointer;width:100%;height:100%;position:absolute;top:0;border:0;margin:0;padding:0;text-indent:-9999px;background:rgba(0,0,0,0) center no-repeat;background-size:70px;background-image:", ";", ";display:", ";&:focus,&:hover{background-image:", ";}@media ", "{background-size:100px;}"], (0, _zIndex.default)('medium'), _ref25 => {
   let {
     isBuffering
-  } = _ref20;
+  } = _ref25;
   return isBuffering === true ? "url(".concat(_loader.default, ")") : "url(".concat(_videoPlayIcon.default, ")");
-}, _ref21 => {
+}, _ref26 => {
   let {
     copyFirst
-  } = _ref21;
+  } = _ref26;
   return copyFirst === true ? 'left: auto; right: 0;' : 'left: 0; right: auto;';
-}, _ref22 => {
+}, _ref27 => {
   let {
     isPlaying
-  } = _ref22;
+  } = _ref27;
   return isPlaying ? 'none' : 'block';
-}, _ref23 => {
+}, _ref28 => {
   let {
     isBuffering
-  } = _ref23;
+  } = _ref28;
   return isBuffering === true ? "url(".concat(_loader.default, ")") : "url(".concat(_videoPlayIcon__hover.default, ")");
-}, (0, _size.media)('small'));
+}, _ref29 => {
+  let {
+    theme
+  } = _ref29;
+  return theme.allBreakpoints('M');
+});
 const Image = exports.Image = _styledComponents.default.div.withConfig({
   displayName: "SingleMessagestyle__Image",
   componentId: "sc-86zg20-4"
-})(["@media ", "{img{position:", ";}}width:100%;height:100%;", ";", ";", ";"], _ref24 => {
+})(["@media ", "{img{position:", ";}}width:100%;height:100%;", ";", ";", ";"], _ref30 => {
   let {
     theme
-  } = _ref24;
+  } = _ref30;
   return theme.allBreakpoints('M');
-}, _ref25 => {
+}, _ref31 => {
   let {
     fullImage,
     vhFull
-  } = _ref25;
+  } = _ref31;
   return fullImage || vhFull ? 'absolute' : null;
-}, _ref26 => {
+}, _ref32 => {
   let {
     doubleImage
-  } = _ref26;
+  } = _ref32;
   return doubleImage && 'height: 50%';
-}, _ref27 => {
+}, _ref33 => {
   let {
     isPlaying
-  } = _ref27;
+  } = _ref33;
   return isPlaying ? (0, _zIndex.default)('base') : (0, _zIndex.default)('low');
-}, _ref28 => {
+}, _ref34 => {
   let {
     hasVideo
-  } = _ref28;
+  } = _ref34;
   return hasVideo ? 'position: absolute; top: 0; left: 0;' : null;
 });
 const VideoWrapper = exports.VideoWrapper = _styledComponents.default.div.withConfig({
   displayName: "SingleMessagestyle__VideoWrapper",
   componentId: "sc-86zg20-5"
-})(["width:100%;height:100%;position:absolute;top:0;left:0;", ";"], _ref29 => {
+})(["width:100%;height:100%;position:absolute;top:0;left:0;", ";"], _ref35 => {
   let {
     isPlaying
-  } = _ref29;
+  } = _ref35;
   return isPlaying ? (0, _zIndex.default)('medium') : (0, _zIndex.default)('base');
 });