newspack-components 3.0.0 → 4.0.0

package/dist/cjs/section-header/index.js

@@ -26,7 +26,25 @@ var _jsxRuntime = require("react/jsx-runtime");
  * External dependencies
  */
 
-const SectionHeader = ({
+/**
+ * Represents a section header component.
+ *
+ * @typedef {Object} SectionHeaderProps
+ * @property {boolean}           [centered=false] - Indicates if the header is centered.
+ * @property {?string}           [className=null] - Additional CSS class name.
+ * @property {string|Function|*} [description]    - Description of the section.
+ * @property {number}            [heading=2]      - HTML heading level, e.g., 1 for h1, 2 for h2, etc.
+ * @property {boolean}           [isWhite=false]  - Indicates if the header should use a white theme.
+ * @property {boolean}           [noMargin=false] - Indicates if the header should have no margin.
+ * @property {string}            title            - The title of the section.
+ * @property {?string}           [id=null]        - Optional ID for the header element.
+ */
+
+/**
+ * Creates a section header.
+ *
+ * @param {SectionHeaderProps} props - The properties for the section header.
+ */const SectionHeader = ({
   centered = false,
   className = null,
   description = '',
@@ -68,6 +86,8 @@ const SectionHeader = ({
         children: description
       }), typeof description === 'function' && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         children: description()
+      }), description && typeof description !== 'string' && typeof description !== 'function' && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: description
       })]
     })
   });

package/dist/cjs/select-control/ButtonGroupControl.js

@@ -26,6 +26,7 @@ const ButtonGroupControl = ({
   buttonOptions,
   buttonSmall,
   className,
+  help,
   hideLabelFromVision,
   label,
   onChange,
@@ -34,6 +35,7 @@ const ButtonGroupControl = ({
   const id = _.hooks.useUniqueId('button-group');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl, {
     label: label,
+    help: help,
     hideLabelFromVision: hideLabelFromVision,
     id: id.current,
     className: (0, _classnames.default)(className, 'components-select-control'),

package/dist/cjs/settings/SettingsCard.js

@@ -19,8 +19,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 const SettingsCard = ({
   children,
   className,
-  columns,
-  gutter,
+  columns = 3,
+  gutter = 32,
   noBorder,
   rowGap,
   ...props
@@ -39,8 +39,4 @@ const SettingsCard = ({
     })
   });
 };
-SettingsCard.defaultProps = {
-  columns: 3,
-  gutter: 32
-};
 var _default = exports.default = SettingsCard;

package/dist/cjs/sortable-newsletter-list-control/index.js

@@ -49,9 +49,9 @@ function SortableNewsletterListControl({
         }
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_actionCard.default, {
           title: list.name,
-          description: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-              type: "checkbox",
+          description: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
+              label: (0, _i18n.__)('Checked by default', 'newspack-plugin'),
               checked: selectedList.checked,
               onChange: () => {
                 const index = selected.findIndex(({
@@ -61,16 +61,18 @@ function SortableNewsletterListControl({
                 newSelected[index].checked = !newSelected[index].checked;
                 onChange(newSelected);
               }
-            }), (0, _i18n.__)('Checked by default', 'newspack-plugin')]
+            })
           }),
           isSmall: true,
+          hasWhiteHeader: true,
           actionText: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
               onClick: () => onChange(selected.filter(({
                 id
               }) => id !== selectedList.id)),
               label: (0, _i18n.__)('Remove', 'newspack-plugin'),
-              icon: _icons.trash
+              icon: _icons.trash,
+              isDestructive: true
             })
           }),
           children: selected.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {

package/dist/cjs/sortable-newsletter-list-control/style.scss

@@ -1,10 +1,15 @@
 .newspack__newsletter-list-control {
+	grid-column: span 3;
+
 	&__selected {
 		.newspack-card {
 			display: flex;
 			justify-content: center;
 			min-height: 40px;
 			flex-direction: row;
+			&:first-of-type {
+				margin-top: 0 !important;
+			}
 			.newspack-action-card__region {
 				align-items: center;
 				display: flex;
@@ -14,11 +19,16 @@
 			.newspack-action-card__region-top {
 				flex: 1;
 				order: 2;
+
+				.newspack-grid {
+					margin: 0;
+				}
 			}
 			.newspack-action-card__region-children {
-				padding: 12px;
+				padding: 12px !important;
 			}
 		}
+
 	}
 	&__sort-handle {
 		display: flex;

package/dist/cjs/steps-list/style.scss

@@ -1,6 +1,3 @@
-@use "../../../shared/scss/colors";
-@use "~@wordpress/base-styles/colors" as wp-colors;
-
 .steps-list {
 	margin-left: auto;
 	margin-right: auto;

package/dist/cjs/steps-list-item/style.scss

@@ -1,4 +1,3 @@
-@use "../../../shared/scss/colors";
 @use "~@wordpress/base-styles/colors" as wp-colors;
 
 .steps-list-item {
@@ -35,7 +34,7 @@
 		background: #fff;
 		border: 1px solid currentcolor;
 		border-radius: 100%;
-		color: colors.$primary-500;
+		color: var(--wp-admin-theme-color);
 		display: flex;
 		height: 28px;
 		justify-content: center;

package/dist/cjs/style-card/index.js

@@ -51,6 +51,7 @@ class StyleCard extends _element.Component {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "newspack-style-card__image",
         children: [imageType === 'html' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "newspack-style-card__image-html",
           dangerouslySetInnerHTML: image
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
           src: image,

package/dist/cjs/style-card/style.scss

@@ -2,7 +2,6 @@
  * Style Card
  */
 
-@use "../../../shared/scss/colors";
 @use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-style-card {
@@ -15,7 +14,7 @@
 		text-align: center;
 
 		.newspack-style-card__is-active & {
-			color: colors.$primary-500;
+			color: var(--wp-admin-theme-color);
 		}
 	}
 
@@ -48,8 +47,8 @@
 		}
 
 		.newspack-style-card__is-active & {
-			border-color: colors.$primary-500;
-			box-shadow: inset 0 0 0 1px colors.$primary-500;
+			border-color: var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
 
 			img {
 				position: relative;
@@ -88,7 +87,7 @@
 		}
 
 		.newspack-style-card__is-active & {
-			box-shadow: inset 0 0 0 1px colors.$primary-500;
+			box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
 		}
 	}
 }

package/dist/cjs/style.scss

@@ -1,4 +1,15 @@
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../colors/colors.module" as colors;
+
+:root {
+	// WP Admin
+	--wp-admin-theme-color: #{colors.$primary-600};
+	--wp-admin-theme-color--rgb: #{colors.$primary-600--rgb};
+	--wp-admin-theme-color-darker-10: #{colors.$primary-700};
+	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
+	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
+	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
+}
 
 // Buttons Card
 
@@ -13,6 +24,10 @@
 	&:empty {
 		display: none;
 	}
+
+	+ .newspack-card {
+		margin-top: 64px;
+	}
 }
 
 // Checkboxes

package/dist/cjs/tabbed-navigation/index.js

@@ -33,6 +33,21 @@ const TabbedNavigation = ({
     location
   } = useHistory();
   const currentIndex = (0, _findIndex.default)(displayedItems, ['path', location.pathname]);
+  function isActive(item, match, pathname) {
+    if (item.path === pathname) {
+      return true;
+    }
+    if (Array.isArray(item?.activeTabPaths)) {
+      return item.activeTabPaths.some(path => {
+        if (path.endsWith('*')) {
+          const basePath = path.slice(0, -1);
+          return pathname.startsWith(basePath);
+        }
+        return item.activeTabPaths.includes(pathname);
+      });
+    }
+    return match;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames.default)('newspack-tabbed-navigation', className),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
@@ -41,13 +56,8 @@ const TabbedNavigation = ({
           to: item.path,
           isActive: (match, {
             pathname
-          }) => {
-            if (item.activeTabPaths) {
-              return item.activeTabPaths.includes(pathname);
-            }
-            return match;
-          },
-          exact: true,
+          }) => isActive(item, match, pathname),
+          exact: item.hasOwnProperty('exact') ? item.exact : true,
           activeClassName: 'selected',
           className: (0, _classnames.default)({
             disabled: disableUpcoming && index > currentIndex

package/dist/cjs/tabbed-navigation/style.scss

@@ -39,6 +39,7 @@
 			display: flex;
 			font-weight: bold;
 			height: 48px;
+			outline: none;
 			padding: 12px 15px;
 			text-decoration: none;
 
@@ -51,15 +52,10 @@
 			&:focus,
 			&:hover {
 				color: var(--wp-admin-theme-color);
-				outline: none;
-			}
-
-			&:focus {
-				box-shadow: none;
 			}
 
 			&:focus-visible {
-				outline: 2px solid;
+				outline: 2px solid var(--wp-admin-theme-color);
 				outline-offset: -2px;
 			}
 

package/dist/cjs/utils/color.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getContrast = getContrast;
+/**
+ * Determine if black or white should be used based on a contrast ratio.
+ *
+ * @param hexcolor Hex code for determining contrast
+ * @return black or white string
+ */
+function getContrast(hexcolor) {
+  if (hexcolor.charAt(0) === '#') {
+    hexcolor = hexcolor.slice(1);
+  }
+
+  // Normalize to 6 character hex code if needed
+  if (hexcolor.length === 3) {
+    hexcolor = hexcolor.split('').map(function (hex) {
+      return hex + hex;
+    }).join('');
+  }
+
+  // Convert to RGB value
+  const r = parseInt(hexcolor.substring(0, 2), 16);
+  const g = parseInt(hexcolor.substring(2, 4), 16);
+  const b = parseInt(hexcolor.substring(4), 16);
+
+  // Get YIQ ratio
+  const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+
+  // Check contrast
+  return yiq >= 128 ? 'black' : 'white';
+}

package/dist/cjs/web-preview/index.js

@@ -84,7 +84,7 @@ class WebPreview extends _element.Component {
     }
     const classes = (0, _classnames.default)('newspack-web-preview', device, loaded && 'is-loaded');
     beforeLoad();
-    return (0, _element.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    return (0, _element.createPortal)(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classes,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "newspack-web-preview__interior",

package/dist/cjs/web-preview/style.scss

@@ -2,19 +2,19 @@
  * Web Preview
  */
 
-@use "../../../shared/scss/colors";
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../../colors/colors.module" as colors;
 
 .newspack-web-preview {
 	// Color
-	--wp-admin-theme-color: #{colors.$primary-500};
-	--wp-admin-theme-color--rgb: #{colors.$primary-500--rgb};
-	--wp-admin-theme-color-darker-10: #{colors.$primary-600};
-	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-600--rgb};
-	--wp-admin-theme-color-darker-20: #{colors.$primary-700};
-	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-700--rgb};
-
-	background: rgba(black, 0.7);
+	--wp-admin-theme-color: #{colors.$primary-600};
+	--wp-admin-theme-color--rgb: #{colors.$primary-600--rgb};
+	--wp-admin-theme-color-darker-10: #{colors.$primary-700};
+	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
+	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
+	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
+
+	background: #{colors.$neutral-700};
 	box-sizing: border-box;
 	height: 100%;
 	left: 0;
@@ -102,7 +102,7 @@
 				padding: 0 !important;
 
 				&.is-selected {
-					background: colors.$primary-500;
+					background: var(--wp-admin-theme-color);
 					color: white;
 
 					&:active,
@@ -114,7 +114,7 @@
 					}
 
 					&:focus {
-						box-shadow: inset 0 0 0 1px colors.$primary-500, inset 0 0 0 3px white !important;
+						box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color), inset 0 0 0 3px white !important;
 					}
 				}
 

package/dist/cjs/with-wizard/index.js

@@ -38,7 +38,8 @@ function withWizard(WrappedComponent, requiredPlugins) {
         complete: null,
         error: null,
         loading: requiredPlugins && requiredPlugins.length > 0 ? 1 : 0,
-        quietLoading: false
+        quietLoading: false,
+        confirmation: null
       };
       this.wrappedComponentRef = (0, _element.createRef)();
     }
@@ -259,7 +260,7 @@ function withWizard(WrappedComponent, requiredPlugins) {
                   href: newspack_urls.dashboard,
                   label: (0, _i18n.__)('Return to Dashboard', 'newspack-plugin'),
                   showTooltip: true,
-                  icon: _icons.home,
+                  icon: _icons.category,
                   iconSize: 36,
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.NewspackIcon, {
                     size: 36
@@ -281,6 +282,81 @@ function withWizard(WrappedComponent, requiredPlugins) {
         })
       });
     };
+
+    /**
+     * Build a confirmation modal with the given title & message.
+     * Execute {callback} if confirmed.
+     *
+     * @property {Object}   options             Options for the confirmation modal.
+     * @property {string}   options.title       The title for the modal component.
+     * @property {string}   options.message     The message for the modal component body.
+     * @property {string}   options.confirmText The text for the confirmation button.
+     * @property {string}   options.cancelText  The text for the cancel button.
+     * @property {Function} options.callback    A function to call if the user confirms the action.
+     */
+    confirmAction = options => {
+      const modalOptions = {
+        title: null,
+        message: (0, _i18n.__)('Are you sure?', 'newpack-plugin'),
+        confirmText: (0, _i18n.__)('OK', 'newspack-plugin'),
+        cancelText: (0, _i18n.__)('Cancel', 'newspack-plugin'),
+        callback: null,
+        ...options
+      };
+      this.setState({
+        confirmation: modalOptions
+      });
+    };
+
+    /**
+     * Show a confirmation modal with the given title & message.
+     * Execute {callback} if confirmed.
+     *
+     * @return {Component} <Modal>
+     */
+    getModal = () => {
+      if (!this.state.confirmation) {
+        return null;
+      }
+      const {
+        title,
+        message,
+        confirmText,
+        cancelText,
+        callback
+      } = this.state.confirmation;
+      return message && callback && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Modal, {
+        isNarrow: true,
+        hideTitle: !title,
+        title: title,
+        onRequestClose: () => this.setState({
+          confirmation: null
+        }),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: message
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Card, {
+          buttonsCard: true,
+          noBorder: true,
+          className: "justify-end",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+            variant: "secondary",
+            onClick: () => this.setState({
+              confirmation: null
+            }),
+            children: cancelText
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+            variant: "primary",
+            onClick: () => {
+              this.setState({
+                confirmation: null
+              });
+              callback();
+            },
+            children: confirmText
+          })]
+        })]
+      });
+    };
     getFallbackURL = () => {
       if (typeof newspack_urls !== 'undefined') {
         return newspack_urls.dashboard;
@@ -304,9 +380,10 @@ function withWizard(WrappedComponent, requiredPlugins) {
         loadingClasses.push('newspack-wizard__is-loading-quiet');
       }
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
-        children: [this.getError(), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: [this.getError(), this.getModal(), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: loadingClasses.join(' '),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
+            confirmAction: this.confirmAction,
             pluginRequirements: requiredPlugins && this.pluginRequirements(),
             clearError: this.clearError,
             getError: this.getError,

package/dist/cjs/with-wizard/style.scss

@@ -3,15 +3,13 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
-@use "../../../shared/scss/colors";
 
-// Reset Padding of the Admin Page
+// Styling for full-page-react Wizards (ignoring admin-header-only wizards).
+body.newspack-wizard-page:not(.newspack-admin-header) {
 
-.toplevel_page_newspack:not(.menu-top),
-body[class*="newspack_page_newspack-"],
-body[class*="admin_page_newspack-"] {
 	background: white;
 
+	// Reset Padding
 	#wpcontent {
 		padding-left: 0;
 	}
@@ -20,6 +18,13 @@ body[class*="admin_page_newspack-"] {
 		padding-bottom: 220px;
 		min-height: 100vh;
 
+		// For admin notices directly ">" at top of page above the Wizard header.
+		// PHP code should hide these notices, but just incase add this style.
+		> .notice {
+			margin-bottom: 20px;
+			margin-left: 22px;
+		}
+
 		@media screen and ( min-width: 783px ) {
 			padding-bottom: 202px;
 		}
@@ -30,6 +35,24 @@ body[class*="admin_page_newspack-"] {
 	}
 }
 
+// Styling for wizards that are admin-header-only.
+body.newspack-wizard-page.newspack-admin-header {
+
+	// For mobile.
+	@media screen and (max-width: 600px) {
+
+		// The header bar (and tabs) need padding.
+		#newspack-wizards-admin-header {
+			padding-top: 46px;
+		}
+
+		// Since the padding was added to the header bar, remove from body.
+		#wpbody {
+			padding-top: 0;
+		}
+	}
+}
+
 svg {
 	&.newspack--error {
 		fill: wp-colors.$alert-red;
@@ -41,15 +64,14 @@ svg {
 }
 
 // Blue Screen
-
 .newspack-wizard__blue {
 	#wpwrap {
-		background: colors.$primary-500;
+		background: var(--wp-admin-theme-color);
 	}
 
 	.newspack-footer {
-		background: colors.$primary-500;
-		border-color: colors.$primary-500;
+		background: var(--wp-admin-theme-color);
+		border-color: var(--wp-admin-theme-color);
 		justify-content: center;
 
 		&__logo {
@@ -73,7 +95,6 @@ svg {
 }
 
 // Loading
-
 .newspack-wizard__is-loading {
 	background: white;
 	cursor: wait;
@@ -92,7 +113,7 @@ svg {
 	}
 
 	&::before {
-		background: colors.$primary-500;
+		background: var(--wp-admin-theme-color);
 		box-shadow:
 			24px 0 0 white,
 			69px 0 0 -15px wp-colors.$gray-900,
@@ -137,7 +158,7 @@ svg {
 
 	// Blue Screen
 	.newspack-wizard__blue & {
-		background: colors.$primary-500;
+		background: var(--wp-admin-theme-color);
 
 		&::before {
 			animation: loading-quiet 1.25s ease-in-out infinite;
@@ -193,7 +214,7 @@ svg {
 
 		&::before {
 			animation: loading-quiet 1.25s ease-in-out infinite;
-			background: colors.$primary-500;
+			background: var(--wp-admin-theme-color);
 			height: 8px;
 			right: 100%;
 			z-index: 9999;

package/dist/cjs/with-wizard-screen/index.js

@@ -8,7 +8,7 @@ exports.default = withWizardScreen;
 var _i18n = require("@wordpress/i18n");
 var _icons = require("@wordpress/icons");
 var _ = require("../");
-var _js = require("../../../shared/js/");
+var _buttonProps = require("../button-props");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -43,8 +43,8 @@ var _jsxRuntime = require("react/jsx-runtime");
       renderAboveContent,
       disableUpcomingInTabbedNavigation
     } = props;
-    const retrievedButtonProps = (0, _js.buttonProps)(buttonAction);
-    const retrievedSecondaryButtonProps = (0, _js.buttonProps)(secondaryButtonAction);
+    const retrievedButtonProps = (0, _buttonProps.buttonProps)(buttonAction);
+    const retrievedSecondaryButtonProps = (0, _buttonProps.buttonProps)(secondaryButtonAction);
     const SecondaryCTAComponent = retrievedSecondaryButtonProps.plugin ? _.Handoff : _.Button;
     const shouldRenderPrimaryButton = buttonText && buttonAction;
     const shouldRenderSecondaryButton = secondaryButtonText && secondaryButtonAction;

package/dist/cjs/with-wizard-screen/style.scss

@@ -3,16 +3,16 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
-@use "../../../shared/scss/colors";
+@use "../../../colors/colors.module" as colors;
 
 .newspack-wizard {
 	// Color
-	--wp-admin-theme-color: #{colors.$primary-500};
-	--wp-admin-theme-color--rgb: #{colors.$primary-500--rgb};
-	--wp-admin-theme-color-darker-10: #{colors.$primary-600};
-	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-600--rgb};
-	--wp-admin-theme-color-darker-20: #{colors.$primary-700};
-	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-700--rgb};
+	--wp-admin-theme-color: #{colors.$primary-600};
+	--wp-admin-theme-color--rgb: #{colors.$primary-600--rgb};
+	--wp-admin-theme-color-darker-10: #{colors.$primary-700};
+	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
+	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
+	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
 
 	color: wp-colors.$gray-900;
 
@@ -83,7 +83,7 @@
 			}
 
 			&:not(.newspack-icon) {
-				background: colors.$primary-500;
+				background: var(--wp-admin-theme-color);
 				left: 50%;
 				margin: -28px 0 0 -28px !important;
 				opacity: 0;
@@ -125,7 +125,7 @@
 		padding: 0 16px;
 
 		@media screen and ( min-width: 744px ) {
-			padding: 32px 84px;
+			padding: 40px 84px;
 		}
 
 		// Typography