@comicrelief/component-library 7.42.0 → 7.43.0

package/dist/components/Atoms/Text/Text.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.BaseText = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _breakpoint = require("../../../theme/shared/breakpoint");
+var _allBreakpoints = require("../../../theme/shared/allBreakpoints");
 /** Text component */
 const BaseText = exports.BaseText = _styledComponents.default.span.withConfig({
   displayName: "Text__BaseText",
@@ -73,7 +73,7 @@ const BaseText = exports.BaseText = _styledComponents.default.span.withConfig({
     mobileColor,
     theme
   } = _ref11;
-  return mobileColor && (0, _styledComponents.css)(["@media (max-width:", "px){color:", ";}"], _breakpoint.sizes.medium - 1, theme.color(mobileColor));
+  return mobileColor && (0, _styledComponents.css)(["@media (max-width:", "px){color:", ";}"], _allBreakpoints.breakpointValues.L - 1, theme.color(mobileColor));
 }, _ref12 => {
   let {
     size,

package/dist/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.style.js

@@ -8,7 +8,6 @@ exports.TextItalic = exports.DropdownList = exports.DropdownItemSelectable = exp
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
-var _allBreakpoints = require("../../../theme/shared/allBreakpoints");
 var _Text = _interopRequireDefault(require("../Text/Text"));
 const Container = exports.Container = _styledComponents.default.div.withConfig({
   displayName: "TextInputWithDropdownstyle__Container",
@@ -17,7 +16,7 @@ const Container = exports.Container = _styledComponents.default.div.withConfig({
 const Dropdown = exports.Dropdown = _styledComponents.default.div.withConfig({
   displayName: "TextInputWithDropdownstyle__Dropdown",
   componentId: "sc-1s4bv7m-1"
-})(["", " font-family:", ";position:absolute;left:0;max-height:300px;overflow:auto;background-color:", ";border:1px solid;margin-top:-1px;width:100%;@media (min-width:", "px){max-width:500px;}"], (0, _zIndex.default)('high'), _ref => {
+})(["", " font-family:", ";position:absolute;left:0;max-height:300px;overflow:auto;background-color:", ";border:1px solid;margin-top:-1px;width:100%;@media ", "{max-width:500px;}"], (0, _zIndex.default)('high'), _ref => {
   let {
     theme
   } = _ref;
@@ -27,7 +26,12 @@ const Dropdown = exports.Dropdown = _styledComponents.default.div.withConfig({
     theme
   } = _ref2;
   return theme.color('white');
-}, _allBreakpoints.sizes.M);
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.allBreakpoints('M');
+});
 const DropdownList = exports.DropdownList = _styledComponents.default.ul.withConfig({
   displayName: "TextInputWithDropdownstyle__DropdownList",
   componentId: "sc-1s4bv7m-2"
@@ -39,15 +43,15 @@ const DropdownItem = exports.DropdownItem = _styledComponents.default.li.withCon
 const DropdownItemSelectable = exports.DropdownItemSelectable = (0, _styledComponents.default)(DropdownItem).withConfig({
   displayName: "TextInputWithDropdownstyle__DropdownItemSelectable",
   componentId: "sc-1s4bv7m-4"
-})(["cursor:pointer;border-top:1px solid ", ";&:hover,&:focus{background-color:", ";}"], _ref3 => {
+})(["cursor:pointer;border-top:1px solid ", ";&:hover,&:focus{background-color:", ";}"], _ref4 => {
   let {
     theme
-  } = _ref3;
+  } = _ref4;
   return theme.color('grey_light');
-}, _ref4 => {
+}, _ref5 => {
   let {
     theme
-  } = _ref4;
+  } = _ref5;
   return theme.color('grey_light');
 });
 const TextItalic = exports.TextItalic = (0, _styledComponents.default)(_Text.default).withConfig({

package/dist/components/Molecules/Banner/Banner.js

@@ -22,7 +22,7 @@ const Wrapper = _styledComponents.default.div.withConfig({
 const Container = _styledComponents.default.div.withConfig({
   displayName: "Banner__Container",
   componentId: "sc-14ows70-1"
-})(["text-align:center;padding:calc(", " * 2) ", ";margin:0 auto;max-width:", "px;@media ", "{padding:", " ", ";}@media ", "{padding:", " ", ";}"], (0, _spacing.default)('m'), (0, _spacing.default)('m'), _allBreakpoints.sizes.XL, _ref2 => {
+})(["text-align:center;padding:calc(", " * 2) ", ";margin:0 auto;max-width:", "px;@media ", "{padding:", " ", ";}@media ", "{padding:", " ", ";}"], (0, _spacing.default)('m'), (0, _spacing.default)('m'), _allBreakpoints.breakpointValues.XL, _ref2 => {
   let {
     theme
   } = _ref2;

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

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _PromoVideo = _interopRequireDefault(require("./_PromoVideo"));
-var _breakpoint = require("../../../theme/shared/breakpoint");
+var _allBreakpoints = require("../../../theme/shared/allBreakpoints");
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 var _Promo = require("./Promo.style");
 const Promo = _ref => {
@@ -45,7 +45,7 @@ const Promo = _ref => {
   (0, _react.useEffect)(() => {
     if (hasVideo) {
       // Checks size on load ONLY; don't want to mess about with listeners:
-      const isDesktop = window.innerWidth >= _breakpoint.sizes.nav; // 1024+ px
+      const isDesktop = window.innerWidth >= _allBreakpoints.breakpointValues.Nav; // 1024+ px
       let currentPoster;
       let currentSrc;
 

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

@@ -7,7 +7,7 @@ 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 _allContainers = _interopRequireDefault(require("../../../theme/shared/allContainers"));
+var _containers = _interopRequireDefault(require("../../../theme/shared/containers"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
 const Container = exports.Container = _styledComponents.default.div.withConfig({
@@ -58,7 +58,7 @@ const Container = exports.Container = _styledComponents.default.div.withConfig({
 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;", ";@media ", "{min-height:calc(100vh - 90px);}"], _allContainers.default.medium, _ref9 => {
+})(["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);}"], _containers.default.medium, _ref9 => {
   let {
     copyLeft
   } = _ref9;

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 _allContainers = _interopRequireDefault(require("../../../theme/shared/allContainers"));
+var _containers = _interopRequireDefault(require("../../../theme/shared/containers"));
 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"));
@@ -92,7 +92,7 @@ const Copy = exports.Copy = _styledComponents.default.div.withConfig({
     theme
   } = _ref13;
   return theme.allBreakpoints('M');
-}, _allContainers.default.small, (0, _spacing.default)('xl'), (0, _spacing.default)('md')), _ref14 => {
+}, _containers.default.small, (0, _spacing.default)('xl'), (0, _spacing.default)('md')), _ref14 => {
   let {
     theme
   } = _ref14;

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

@@ -53,7 +53,7 @@ const Donate = _ref => {
     monthlyOtherAmountText: monthlyOther
   } = _ref;
   let isDesktop = (0, _reactResponsive.useMediaQuery)({
-    query: "(min-width: ".concat(_allBreakpoints.sizes.L, "px)")
+    query: "(min-width: ".concat(_allBreakpoints.breakpointValues.L, "px)")
   });
 
   // To let us store any updated override, and force a re-render

package/dist/components/Organisms/Footer/Nav/Nav.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
-var _breakpoint = require("../../../../theme/shared/breakpoint");
+var _allBreakpoints = require("../../../../theme/shared/allBreakpoints");
 var _navHelper = _interopRequireDefault(require("../../../../utils/navHelper"));
 var _internalLinkHelper = require("../../../../utils/internalLinkHelper");
 var _Nav = require("./Nav.style");
@@ -28,7 +28,7 @@ const FooterNav = _ref => {
   const resize = () => {
     const screenSize = typeof window !== 'undefined' ? window.innerWidth : null;
     if (screenSize !== null) {
-      setIsSmallBreakpoint(screenSize < parseFloat(_breakpoint.sizes.small));
+      setIsSmallBreakpoint(screenSize < parseFloat(_allBreakpoints.breakpointValues.M));
     }
   };
   if (typeof window !== 'undefined') {
@@ -50,7 +50,7 @@ const FooterNav = _ref => {
   (0, _react.useEffect)(() => {
     // Detect window screen size when page load
     const width = typeof window !== 'undefined' ? window.innerWidth : null;
-    setIsSmallBreakpoint(width < parseFloat(_breakpoint.sizes.small));
+    setIsSmallBreakpoint(width < parseFloat(_allBreakpoints.breakpointValues.M));
   }, []);
   return /*#__PURE__*/_react.default.createElement(_Nav.Nav, {
     "aria-label": "main-menu",

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.MetaIcons = exports.InnerWrapper = exports.HeaderWrapper = exports.Brand = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
-var _allContainers = _interopRequireDefault(require("../../../theme/shared/allContainers"));
+var _containers = _interopRequireDefault(require("../../../theme/shared/containers"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 const HeaderWrapper = exports.HeaderWrapper = _styledComponents.default.header.attrs(() => ({
   role: 'banner'
@@ -28,7 +28,7 @@ const HeaderWrapper = exports.HeaderWrapper = _styledComponents.default.header.a
 const InnerWrapper = exports.InnerWrapper = _styledComponents.default.div.withConfig({
   displayName: "Headerstyle__InnerWrapper",
   componentId: "sc-11ghppe-1"
-})(["display:flex;align-items:center;height:100%;padding:0 12px;cursor:pointer;max-width:", ";@media ", "{margin:0 auto;}"], _allContainers.default.large, _ref3 => {
+})(["display:flex;align-items:center;height:100%;padding:0 12px;cursor:pointer;max-width:", ";@media ", "{margin:0 auto;}"], _containers.default.large, _ref3 => {
   let {
     theme
   } = _ref3;

package/dist/components/Organisms/Header/Nav/Nav.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
 var _BurgerMenu = _interopRequireDefault(require("../Burger/BurgerMenu"));
-var _breakpoint = require("../../../../theme/shared/breakpoint");
+var _allBreakpoints = require("../../../../theme/shared/allBreakpoints");
 var _navHelper = _interopRequireDefault(require("../../../../utils/navHelper"));
 var _internalLinkHelper = require("../../../../utils/internalLinkHelper");
 var _allowListed = _interopRequireDefault(require("../../../../utils/allowListed"));
@@ -51,7 +51,7 @@ const MainNav = _ref => {
   };
   (0, _react.useEffect)(() => {
     const width = window.innerWidth;
-    setIsMobile(width < _breakpoint.sizes.nav);
+    setIsMobile(width < _allBreakpoints.breakpointValues.Nav);
     window.addEventListener('onkeyup', setIsKeyPressed);
     return () => {
       window.removeEventListener('onkeyup', setIsKeyPressed);

package/dist/components/Organisms/WYMDCarousel/WYMDCarousel.js

@@ -12,7 +12,7 @@ var _utils = _interopRequireDefault(require("./_utils"));
 require("pure-react-carousel/dist/react-carousel.es.css");
 var _WYMDCarousel = require("./WYMDCarousel.style");
 var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
-var _breakpoint = require("../../../theme/shared/breakpoint");
+var _allBreakpoints = require("../../../theme/shared/allBreakpoints");
 const WYMDCarousel = _ref => {
   let {
     data,
@@ -30,7 +30,7 @@ const WYMDCarousel = _ref => {
   // Custom function to let us update the carousel config dynamically
   const screenResize = (0, _react.useCallback)(() => {
     const screenSize = typeof window !== 'undefined' ? window.innerWidth : null;
-    const isCurrentlyMobile = window.innerWidth < _breakpoint.sizes.small;
+    const isCurrentlyMobile = window.innerWidth < _allBreakpoints.breakpointValues.M;
     if (screenSize !== null && isMobile !== isCurrentlyMobile) {
       setIsMobile(isCurrentlyMobile);
       setVisibleSlides(isCurrentlyMobile ? 1 : 3);
@@ -43,7 +43,7 @@ const WYMDCarousel = _ref => {
     setTheseItems((0, _utils.default)(data));
   }, [setTheseItems, data]);
   (0, _react.useEffect)(() => {
-    if (window !== 'undefined' && window.innerWidth >= _breakpoint.sizes.small) {
+    if (window !== 'undefined' && window.innerWidth >= _allBreakpoints.breakpointValues.M) {
       // On inital render, update carousel plugin config
       // to suit the non-mobile layout and functionality:
       setIsMobile(false);

package/dist/index.js

@@ -334,24 +334,12 @@ Object.defineProperty(exports, "allBreakpoints", {
     return _allBreakpoints.default;
   }
 });
-Object.defineProperty(exports, "allContainers", {
-  enumerable: true,
-  get: function () {
-    return _allContainers.default;
-  }
-});
 Object.defineProperty(exports, "allowListed", {
   enumerable: true,
   get: function () {
     return _allowListed.default;
   }
 });
-Object.defineProperty(exports, "breakpoint", {
-  enumerable: true,
-  get: function () {
-    return _breakpoint.default;
-  }
-});
 Object.defineProperty(exports, "buildEsuValidationSchema", {
   enumerable: true,
   get: function () {
@@ -364,10 +352,10 @@ Object.defineProperty(exports, "buildValidationSchema", {
     return _MarketingPreferencesDS.buildValidationSchema;
   }
 });
-Object.defineProperty(exports, "container", {
+Object.defineProperty(exports, "containers", {
   enumerable: true,
   get: function () {
-    return _size.container;
+    return _containers.default;
   }
 });
 Object.defineProperty(exports, "crTheme", {
@@ -382,18 +370,6 @@ Object.defineProperty(exports, "hideVisually", {
     return _hideVisually.default;
   }
 });
-Object.defineProperty(exports, "media", {
-  enumerable: true,
-  get: function () {
-    return _size.media;
-  }
-});
-Object.defineProperty(exports, "screen", {
-  enumerable: true,
-  get: function () {
-    return _size.screen;
-  }
-});
 Object.defineProperty(exports, "setInitialValues", {
   enumerable: true,
   get: function () {
@@ -425,10 +401,8 @@ var _hideVisually = _interopRequireDefault(require("./theme/shared/hideVisually"
 var _zIndex = _interopRequireDefault(require("./theme/shared/zIndex"));
 var _allowListed = _interopRequireDefault(require("./utils/allowListed"));
 var _spacing = _interopRequireDefault(require("./theme/shared/spacing"));
-var _breakpoint = _interopRequireDefault(require("./theme/shared/breakpoint"));
 var _allBreakpoints = _interopRequireDefault(require("./theme/shared/allBreakpoints"));
-var _size = require("./theme/shared/size");
-var _allContainers = _interopRequireDefault(require("./theme/shared/allContainers"));
+var _containers = _interopRequireDefault(require("./theme/shared/containers"));
 var _Text = _interopRequireDefault(require("./components/Atoms/Text/Text"));
 var _Logo = _interopRequireDefault(require("./components/Atoms/Logo/Logo"));
 var _Picture = _interopRequireDefault(require("./components/Atoms/Picture/Picture"));

package/dist/theme/crTheme/theme.js

@@ -9,7 +9,6 @@ var _colors = _interopRequireDefault(require("./colors"));
 var _buttonColors = _interopRequireDefault(require("./buttonColors"));
 var _linkStyles = _interopRequireDefault(require("./linkStyles"));
 var _fontSizes = _interopRequireDefault(require("./fontSizes"));
-var _breakpoint = _interopRequireDefault(require("../shared/breakpoint"));
 var _allBreakpoints = _interopRequireDefault(require("../shared/allBreakpoints"));
 var _fontFamilies = _interopRequireDefault(require("../shared/fontFamilies"));
 var _default = exports.default = {
@@ -17,7 +16,6 @@ var _default = exports.default = {
   buttonColors: _buttonColors.default,
   linkStyles: _linkStyles.default,
   fontSize: _fontSizes.default,
-  breakpoint: _breakpoint.default,
   allBreakpoints: _allBreakpoints.default,
   fontFamilies: _fontFamilies.default,
   font: {

package/dist/theme/shared/allBreakpoints.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sizes = exports.default = void 0;
+exports.default = exports.breakpointValues = void 0;
 /**
  * For usage and examples see utils.md
  */
 
-const sizes = exports.sizes = {
+const breakpointValues = exports.breakpointValues = {
   S: 0,
   M: 740,
   L: 1024,
@@ -17,7 +17,7 @@ const sizes = exports.sizes = {
 };
 var _default = size => {
   if (size) {
-    return "(min-width: ".concat(sizes[size], "px)");
+    return "(min-width: ".concat(breakpointValues[size], "px)");
   }
   return 'inherit';
 };

package/dist/theme/shared/{allContainers.js → containers.js}

@@ -4,9 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-const allContainers = {
+// These are used in a max-width context
+const containers = {
   small: '880px',
   medium: '1200px',
   large: '1440px'
 };
-var _default = exports.default = allContainers;
+var _default = exports.default = containers;

package/dist/theme/srTheme/theme.js

@@ -9,14 +9,14 @@ var _colors = _interopRequireDefault(require("./colors"));
 var _buttonColors = _interopRequireDefault(require("./buttonColors"));
 var _linkStyles = _interopRequireDefault(require("./linkStyles"));
 var _fontSizes = _interopRequireDefault(require("./fontSizes"));
-var _breakpoint = _interopRequireDefault(require("../shared/breakpoint"));
+var _allBreakpoints = _interopRequireDefault(require("../shared/allBreakpoints"));
 var _fontFamilies = _interopRequireDefault(require("../shared/fontFamilies"));
 var _default = exports.default = {
   color: _colors.default,
   buttonColors: _buttonColors.default,
   linkStyles: _linkStyles.default,
   fontSize: _fontSizes.default,
-  breakpoint: _breakpoint.default,
+  allBreakpoints: _allBreakpoints.default,
   fontFamilies: _fontFamilies.default,
   font: {
     regular: 'Founders',

package/docs/utils.md

@@ -1,11 +1,11 @@
-_Hide Visually_
+## hideVisually
 
 `import { hideVisually } from '@comicrelief/component-library';`
 
-how to use in your styled component
+How to use in your styled component
 `export const Component = styled.span'${hideVisually};';`
 
-_allowListed_
+## allowListed
 
 `import { allowListed } from '@comicrelief/component-library';`
 
@@ -13,14 +13,14 @@ _allowListed_
 
 Check if a url is allowListed. Used to check links and change link target.
 
-_Z Index_
+## zIndex
 
 `import { zIndex } from '@comicrelief/component-library';`
 
-how to use in your styled component
+How to use in your styled component
 `export const Component = styled.span'${zIndex('high')};';`
 
-_Spacing_
+## spacing
 
 `import { spacing } from '@comicrelief/component-library';`
 
@@ -37,25 +37,40 @@ Default spacing scale
 | xxl  |  8rem   |
 | xxxl |  16rem  |
 
-how to use in your styled component
+How to use in your styled component
 
 `export const Component = styled.span'`
 `padding: ${spacing('md)'} ${spacing('l)'};';`
 
-_Width_
+## allBreakpoints, and { breakpointValues } within allBreakpoints
 
-`import { media, container } from '@comicrelief/component-library';`
+| S    | M     | L      | Nav   | XL     |
+|:----:|------:| ------:| -----:| ------:|
+| 0    | 740   | 1024   | 1150  | 1440   |
 
- Breakpoint and container sizes
+### Usage within Component Library itself
+#### media queries (no need to import):
+`@media ${({ theme }) => theme.allBreakpoints('M')} {`
 
-| Name   |      small      |  medium | large |
-|----------|:-------------:|------:| ------:|
-| screen   | 740px           | 1024px  |1440px    |
-| container |   800px        | 1200px  |1440px    |
+#### screen sizes:
+```
+import { breakpointValues } from '../../../theme/shared/allBreakpoints';
+...
+max-width: ${breakpointValues.M}px;
+```
 
-How to use in your styled component
+### Usage within Component Library
+```
+import { breakpointValues } from '@comicrelief/component-library/src/theme/shared/allBreakpoints';
+...
+max-width: ${breakpointValues.M}px);
+```
 
-`const BreakPoint = styled.div'${media('small')}{ font-size: 16px}'`
 
-`const Container = styled.div'max-width: ${container.small}'`
+## containers from containers.js
+| small   | medium  | large  |
+|:-------:|--------:| ------:|
+| 800px   | 1200px  | 1440px |
 
+### Note: These are used in a max-width context:
+`max-width: ${containers.small}`

package/package.json

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

package/src/components/Atoms/Text/Text.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 import PropTypes from 'prop-types';
-import { sizes } from '../../../theme/shared/breakpoint';
+import { breakpointValues } from '../../../theme/shared/allBreakpoints';
 
 /** Text component */
 export const BaseText = styled.span`
@@ -33,7 +33,7 @@ export const BaseText = styled.span`
         `
     : null)};
   ${({ mobileColor, theme }) => mobileColor && css`
-  @media (max-width: ${sizes.medium - 1}px) {
+  @media (max-width: ${breakpointValues.L - 1}px) {
     color: ${theme.color(mobileColor)};
   }
 `};

package/src/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.style.js

@@ -2,7 +2,6 @@ import styled from 'styled-components';
 
 import spacing from '../../../theme/shared/spacing';
 import zIndex from '../../../theme/shared/zIndex';
-import { sizes } from '../../../theme/shared/allBreakpoints';
 import Text from '../Text/Text';
 
 const Container = styled.div`
@@ -21,7 +20,7 @@ const Dropdown = styled.div`
   margin-top: -1px;
   width: 100%;
 
-  @media (min-width: ${sizes.M}px) {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     max-width: 500px;
   }
 `;

package/src/components/Molecules/Banner/Banner.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 import spacing from '../../../theme/shared/spacing';
-import { sizes } from '../../../theme/shared/allBreakpoints';
+import { breakpointValues } from '../../../theme/shared/allBreakpoints';
 
 const Wrapper = styled.div`
   background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
@@ -13,7 +13,7 @@ const Container = styled.div`
   text-align: center;
   padding: calc(${spacing('m')} * 2) ${spacing('m')};
   margin: 0 auto;
-  max-width: ${sizes.XL}px;
+  max-width: ${breakpointValues.XL}px;
 
   @media ${({ theme }) => theme.allBreakpoints('M')} {
     padding: ${spacing('xl')} ${spacing('l')};

package/src/components/Molecules/Promo/Promo.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import PromoVideo from './_PromoVideo';
-import { sizes } from '../../../theme/shared/breakpoint';
+import { breakpointValues } from '../../../theme/shared/allBreakpoints';
 
 import Picture from '../../Atoms/Picture/Picture';
 
@@ -42,7 +42,7 @@ const Promo = ({
   useEffect(() => {
     if (hasVideo) {
       // Checks size on load ONLY; don't want to mess about with listeners:
-      const isDesktop = window.innerWidth >= sizes.nav; // 1024+ px
+      const isDesktop = window.innerWidth >= breakpointValues.Nav; // 1024+ px
       let currentPoster; let currentSrc;
 
       // If we've got both desktop AND mobile videos, let the

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

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import allContainers from '../../../theme/shared/allContainers';
+import containers from '../../../theme/shared/containers';
 import spacing from '../../../theme/shared/spacing';
 import zIndex from '../../../theme/shared/zIndex';
 
@@ -37,7 +37,7 @@ const Container = styled.div`
 
 const Wrapper = styled.div`
   width: 100%;
-  max-width: ${allContainers.medium};
+  max-width: ${containers.medium};
   height: 100%;
   left: 0;
   right: 0;

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

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 import spacing from '../../../theme/shared/spacing';
-import allContainers from '../../../theme/shared/allContainers';
+import containers from '../../../theme/shared/containers';
 import zIndex from '../../../theme/shared/zIndex';
 import playIcon from './assets/video--play-icon.svg';
 import playIconHover from './assets/video--play-icon__hover.svg';
@@ -68,7 +68,7 @@ const Copy = styled.div`
     : css`
           @media ${({ theme }) => theme.allBreakpoints('M')} {
             width: 100%;
-            max-width ${allContainers.small};
+            max-width ${containers.small};
             padding: ${spacing('xl')};
           }
           margin: auto;

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import PropTypes from 'prop-types';
 
-import { sizes } from '../../../theme/shared/allBreakpoints';
+import { breakpointValues } from '../../../theme/shared/allBreakpoints';
 import Text from '../../Atoms/Text/Text';
 import Picture from '../../Atoms/Picture/Picture';
 import Form from './Form/Form';
@@ -53,7 +53,7 @@ const Donate = ({
   monthlyChooseAmountText: monthlyChoose,
   monthlyOtherAmountText: monthlyOther
 }) => {
-  let isDesktop = useMediaQuery({ query: `(min-width: ${sizes.L}px)` });
+  let isDesktop = useMediaQuery({ query: `(min-width: ${breakpointValues.L}px)` });
 
   // To let us store any updated override, and force a re-render
   const [overrideValue, setOverrideValue] = useState(null);

package/src/components/Organisms/Footer/Nav/Nav.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
 import Text from '../../../Atoms/Text/Text';
-import { sizes } from '../../../../theme/shared/breakpoint';
+import { breakpointValues } from '../../../../theme/shared/allBreakpoints';
 import NavHelper from '../../../../utils/navHelper';
 import { InternalLinkHelper } from '../../../../utils/internalLinkHelper';
 
@@ -26,7 +26,7 @@ const FooterNav = ({ navItems, ...rest }) => {
   const resize = () => {
     const screenSize = typeof window !== 'undefined' ? window.innerWidth : null;
     if (screenSize !== null) {
-      setIsSmallBreakpoint(screenSize < parseFloat(sizes.small));
+      setIsSmallBreakpoint(screenSize < parseFloat(breakpointValues.M));
     }
   };
 
@@ -48,7 +48,7 @@ const FooterNav = ({ navItems, ...rest }) => {
   useEffect(() => {
     // Detect window screen size when page load
     const width = typeof window !== 'undefined' ? window.innerWidth : null;
-    setIsSmallBreakpoint(width < parseFloat(sizes.small));
+    setIsSmallBreakpoint(width < parseFloat(breakpointValues.M));
   }, []);
 
   return (

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 import zIndex from '../../../theme/shared/zIndex';
-import allContainers from '../../../theme/shared/allContainers';
+import containers from '../../../theme/shared/containers';
 import spacing from '../../../theme/shared/spacing';
 
 const HeaderWrapper = styled.header.attrs(() => ({
@@ -23,7 +23,7 @@ const InnerWrapper = styled.div`
   height: 100%;
   padding: 0 12px;
   cursor: pointer;
-  max-width: ${allContainers.large};
+  max-width: ${containers.large};
 
   @media ${({ theme }) => theme.allBreakpoints('Nav')} {
     margin: 0 auto;

package/src/components/Organisms/Header/Nav/Nav.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import Text from '../../../Atoms/Text/Text';
 import BurgerMenu from '../Burger/BurgerMenu';
-import { sizes } from '../../../../theme/shared/breakpoint';
+import { breakpointValues } from '../../../../theme/shared/allBreakpoints';
 import NavHelper from '../../../../utils/navHelper';
 import { InternalLinkHelper } from '../../../../utils/internalLinkHelper';
 import allowListed from '../../../../utils/allowListed';
@@ -55,7 +55,7 @@ const MainNav = ({ navItems }) => {
 
   useEffect(() => {
     const width = window.innerWidth;
-    setIsMobile(width < sizes.nav);
+    setIsMobile(width < breakpointValues.Nav);
     window.addEventListener('onkeyup', setIsKeyPressed);
 
     return () => {

package/src/components/Organisms/WYMDCarousel/WYMDCarousel.js

@@ -11,7 +11,7 @@ import {
   CarouselWrapper, ImageWrapper, AmountWrapper, CopyWrapper, Heading, PeopleHelpedText, Including
 } from './WYMDCarousel.style';
 import Text from '../../Atoms/Text/Text';
-import { sizes } from '../../../theme/shared/breakpoint';
+import { breakpointValues } from '../../../theme/shared/allBreakpoints';
 
 const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
   // Defaults to mobile config:
@@ -23,7 +23,7 @@ const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
   // Custom function to let us update the carousel config dynamically
   const screenResize = useCallback(() => {
     const screenSize = typeof window !== 'undefined' ? window.innerWidth : null;
-    const isCurrentlyMobile = window.innerWidth < sizes.small;
+    const isCurrentlyMobile = window.innerWidth < breakpointValues.M;
 
     if (screenSize !== null && (isMobile !== isCurrentlyMobile)) {
       setIsMobile(isCurrentlyMobile);
@@ -38,7 +38,7 @@ const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
   }, [setTheseItems, data]);
 
   useEffect(() => {
-    if (window !== 'undefined' && window.innerWidth >= sizes.small) {
+    if (window !== 'undefined' && window.innerWidth >= breakpointValues.M) {
       // On inital render, update carousel plugin config
       // to suit the non-mobile layout and functionality:
       setIsMobile(false);

package/src/index.js

@@ -8,10 +8,8 @@ export { default as hideVisually } from './theme/shared/hideVisually';
 export { default as zIndex } from './theme/shared/zIndex';
 export { default as allowListed } from './utils/allowListed';
 export { default as spacing } from './theme/shared/spacing';
-export { default as breakpoint } from './theme/shared/breakpoint';
 export { default as allBreakpoints } from './theme/shared/allBreakpoints';
-export { media, screen, container } from './theme/shared/size';
-export { default as allContainers } from './theme/shared/allContainers';
+export { default as containers } from './theme/shared/containers';
 
 /* Atoms */
 export { default as Text } from './components/Atoms/Text/Text';

package/src/theme/crTheme/theme.js

@@ -2,7 +2,6 @@ import color from './colors';
 import buttonColors from './buttonColors';
 import linkStyles from './linkStyles';
 import fontSize from './fontSizes';
-import breakpoint from '../shared/breakpoint';
 import allBreakpoints from '../shared/allBreakpoints';
 import fontFamilies from '../shared/fontFamilies';
 
@@ -11,7 +10,6 @@ export default {
   buttonColors,
   linkStyles,
   fontSize,
-  breakpoint,
   allBreakpoints,
   fontFamilies,
   font: {

package/src/theme/shared/allBreakpoints.js

@@ -2,7 +2,7 @@
  * For usage and examples see utils.md
  */
 
-export const sizes = {
+export const breakpointValues = {
   S: 0,
   M: 740,
   L: 1024,
@@ -12,7 +12,7 @@ export const sizes = {
 
 export default size => {
   if (size) {
-    return `(min-width: ${sizes[size]}px)`;
+    return `(min-width: ${breakpointValues[size]}px)`;
   }
   return 'inherit';
 };

package/src/theme/shared/containers.js

@@ -0,0 +1,8 @@
+// These are used in a max-width context
+const containers = {
+  small: '880px',
+  medium: '1200px',
+  large: '1440px'
+};
+
+export default containers;

package/src/theme/srTheme/theme.js

@@ -2,7 +2,7 @@ import color from './colors';
 import buttonColors from './buttonColors';
 import linkStyles from './linkStyles';
 import fontSize from './fontSizes';
-import breakpoint from '../shared/breakpoint';
+import allBreakpoints from '../shared/allBreakpoints';
 import fontFamilies from '../shared/fontFamilies';
 
 export default {
@@ -10,7 +10,7 @@ export default {
   buttonColors,
   linkStyles,
   fontSize,
-  breakpoint,
+  allBreakpoints,
   fontFamilies,
   font: {
     regular: 'Founders',

package/dist/theme/shared/breakpoint.js

@@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.sizes = exports.default = void 0;
-const sizes = exports.sizes = {
-  small: 740,
-  medium: 1024,
-  nav: 1150,
-  large: 1440
-};
-var _default = size => {
-  if (size) {
-    return "(min-width: ".concat(sizes[size], "px)");
-  }
-  return 'inherit';
-};
-exports.default = _default;

package/dist/theme/shared/size.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.screen = exports.media = exports.container = void 0;
-const screen = exports.screen = {
-  small: '740px',
-  medium: '1024px',
-  large: '1440px'
-};
-const media = size => {
-  if (size) {
-    return "@media (min-width: ".concat(screen[size], ")");
-  }
-  return 'inherit';
-};
-exports.media = media;
-const container = exports.container = {
-  small: '880px',
-  medium: '1200px',
-  large: '1440px'
-};

package/src/theme/shared/allContainers.js

@@ -1,7 +0,0 @@
-const allContainers = {
-  small: '880px',
-  medium: '1200px',
-  large: '1440px'
-};
-
-export default allContainers;

package/src/theme/shared/breakpoint.js

@@ -1,13 +0,0 @@
-export const sizes = {
-  small: 740,
-  medium: 1024,
-  nav: 1150,
-  large: 1440
-};
-
-export default size => {
-  if (size) {
-    return `(min-width: ${sizes[size]}px)`;
-  }
-  return 'inherit';
-};

package/src/theme/shared/size.js

@@ -1,20 +0,0 @@
-const screen = {
-  small: '740px',
-  medium: '1024px',
-  large: '1440px'
-};
-
-const media = size => {
-  if (size) {
-    return `@media (min-width: ${screen[size]})`;
-  }
-  return 'inherit';
-};
-
-const container = {
-  small: '880px',
-  medium: '1200px',
-  large: '1440px'
-};
-
-export { media, screen, container };