newspack-components 4.3.0 → 4.4.0-alpha.1

package/dist/esm/confirm-dialog/index.js

@@ -1,3 +1,9 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "size", "hideTitle", "isDestructive", "onConfirm", "onCancel", "when", "isOpen"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * Modal
  */
@@ -5,8 +11,14 @@
 /**
  * WordPress dependencies.
  */
-import { forwardRef } from '@wordpress/element';
 import { __experimentalConfirmDialog as BaseComponent } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
+import { forwardRef, useCallback, useEffect, useRef, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
+import Router from '../proxied-imports/router';
+var useHistory = Router.useHistory;
 
 /**
  * External dependencies.
@@ -18,32 +30,87 @@ import classnames from 'classnames';
  * https://wordpress.github.io/gutenberg/?path=/docs/components-modal--docs for all supported props.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const sizeClassMap = {
+var sizeClassMap = {
   small: 'newspack-modal--size-small',
   medium: 'newspack-modal--size-medium',
   large: 'newspack-modal--size-large',
   'x-large': 'newspack-modal--size-x-large',
   full: 'newspack-modal--size-full'
 };
-function ConfirmDialog({
-  className,
-  size = 'small',
-  hideTitle,
-  isDestructive,
-  onConfirm,
-  onCancel,
-  ...otherProps
-}, ref) {
-  const classes = classnames('newspack-modal', sizeClassMap[size], hideTitle && 'newspack-modal--hide-title',
+var noOp = function noOp() {};
+function ConfirmDialog(_ref, ref) {
+  var className = _ref.className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size,
+    hideTitle = _ref.hideTitle,
+    isDestructive = _ref.isDestructive,
+    _ref$onConfirm = _ref.onConfirm,
+    onConfirm = _ref$onConfirm === void 0 ? noOp : _ref$onConfirm,
+    _ref$onCancel = _ref.onCancel,
+    onCancel = _ref$onCancel === void 0 ? noOp : _ref$onCancel,
+    _ref$when = _ref.when,
+    when = _ref$when === void 0 ? false : _ref$when,
+    _ref$isOpen = _ref.isOpen,
+    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(isOpen),
+    _useState2 = _slicedToArray(_useState, 2),
+    showDialog = _useState2[0],
+    setShowDialog = _useState2[1];
+  var history = useHistory();
+  var pendingNavigation = useRef(null);
+  var handleOnConfirm = useCallback(function () {
+    var _pendingNavigation$cu;
+    setShowDialog(false);
+    (_pendingNavigation$cu = pendingNavigation.current) === null || _pendingNavigation$cu === void 0 || _pendingNavigation$cu.call(pendingNavigation);
+    pendingNavigation.current = null;
+    onConfirm();
+  }, [onConfirm, pendingNavigation]);
+  var handleOnCancel = useCallback(function () {
+    setShowDialog(false);
+    pendingNavigation.current = null;
+    onCancel();
+  }, [onCancel, pendingNavigation]);
+
+  // Block navigation when there are unsaved changes.
+  useEffect(function () {
+    if (!when) {
+      return;
+    }
+    var unblock = history.block(function (location, action) {
+      pendingNavigation.current = function () {
+        unblock();
+        if (action === 'REPLACE') {
+          history.replace(location);
+        } else {
+          history.push(location);
+        }
+      };
+      setShowDialog(true);
+      return false;
+    });
+    return unblock;
+  }, [when, history]);
+
+  // Show the dialog imperatively without blocking navigation.
+  useEffect(function () {
+    if (isOpen) {
+      setShowDialog(true);
+    }
+  }, [isOpen]);
+  if (!showDialog) {
+    return null;
+  }
+  var classes = classnames('newspack-modal', sizeClassMap[size], hideTitle && 'newspack-modal--hide-title',
   // Note: also hides the X close button.
   isDestructive && 'newspack-modal--destructive', className);
-  return /*#__PURE__*/_jsx(BaseComponent, {
-    className: classes,
-    ...otherProps,
+  return /*#__PURE__*/_jsx(BaseComponent, _objectSpread(_objectSpread({
+    className: classes
+  }, otherProps), {}, {
     ref: ref,
-    onConfirm: onConfirm,
-    onCancel: onCancel,
+    onConfirm: handleOnConfirm,
+    onCancel: handleOnCancel,
     __experimentalHideHeader: false
-  });
+  }));
 }
 export default forwardRef(ConfirmDialog);

package/dist/esm/consts.js

@@ -1 +1 @@
-export const HANDOFF_KEY = 'newspack_wizard_handoff_message';
+export var HANDOFF_KEY = 'newspack_wizard_handoff_message';

package/dist/esm/custom-select-control/index.js

@@ -1,3 +1,15 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+var _excluded = ["className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /**
  * Custom Select Control
  */
@@ -18,20 +30,27 @@ import classnames from 'classnames';
  */
 import './style.scss';
 import { jsx as _jsx } from "react/jsx-runtime";
-class CustomSelectControl extends Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      ...otherProps
-    } = this.props;
-    const classes = classnames('newspack-custom-select-control', className);
-    return /*#__PURE__*/_jsx(BaseComponent, {
-      className: classes,
-      ...otherProps
-    });
+var CustomSelectControl = /*#__PURE__*/function (_Component) {
+  function CustomSelectControl() {
+    _classCallCheck(this, CustomSelectControl);
+    return _callSuper(this, CustomSelectControl, arguments);
   }
-}
+  _inherits(CustomSelectControl, _Component);
+  return _createClass(CustomSelectControl, [{
+    key: "render",
+    value:
+    /**
+     * Render.
+     */
+    function render() {
+      var _this$props = this.props,
+        className = _this$props.className,
+        otherProps = _objectWithoutProperties(_this$props, _excluded);
+      var classes = classnames('newspack-custom-select-control', className);
+      return /*#__PURE__*/_jsx(BaseComponent, _objectSpread({
+        className: classes
+      }, otherProps));
+    }
+  }]);
+}(Component);
 export default CustomSelectControl;

package/dist/esm/dataviews/index.js

@@ -0,0 +1,34 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * DataViews
+ *
+ * Wrapper around @wordpress/dataviews with Newspack styling.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { DataViews as BaseDataViews } from '@wordpress/dataviews';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function DataViews(_ref) {
+  var className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx("div", {
+    className: classnames('newspack-dataviews', className),
+    children: /*#__PURE__*/_jsx(BaseDataViews, _objectSpread({}, props))
+  });
+}

package/dist/esm/dataviews/style.scss

@@ -0,0 +1,9 @@
+/* stylelint-disable no-invalid-position-at-import-rule */
+@import "@wordpress/dataviews/build-style/style.css";
+
+.newspack-dataviews {
+	/* Make sure full-width DataViews aligns with the 48px margin. */
+	.newspack-wizard__content--full-width & {
+		margin-top: -16px;
+	}
+}

package/dist/esm/divider/index.js

@@ -1,3 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["alignment", "className", "marginBottom", "marginTop", "variant"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * Divider
  */
@@ -12,23 +17,26 @@ import './style.scss';
  */
 import classNames from 'classnames';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Divider = ({
-  alignment = 'none',
-  className = undefined,
-  marginBottom = 64,
-  marginTop = 64,
-  variant = 'default',
-  ...otherProps
-}) => {
-  const classes = classNames('newspack-divider', className, alignment && `newspack-divider--alignment-${alignment}`, variant && `newspack-divider--variant-${variant}`);
-  const style = {
-    '--divider-margin-bottom': typeof marginBottom === 'number' ? `${marginBottom}px` : marginBottom,
-    '--divider-margin-top': typeof marginTop === 'number' ? `${marginTop}px` : marginTop
+var Divider = function Divider(_ref) {
+  var _ref$alignment = _ref.alignment,
+    alignment = _ref$alignment === void 0 ? 'none' : _ref$alignment,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? undefined : _ref$className,
+    _ref$marginBottom = _ref.marginBottom,
+    marginBottom = _ref$marginBottom === void 0 ? 64 : _ref$marginBottom,
+    _ref$marginTop = _ref.marginTop,
+    marginTop = _ref$marginTop === void 0 ? 64 : _ref$marginTop,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var classes = classNames('newspack-divider', className, alignment && "newspack-divider--alignment-".concat(alignment), variant && "newspack-divider--variant-".concat(variant));
+  var style = {
+    '--divider-margin-bottom': typeof marginBottom === 'number' ? "".concat(marginBottom, "px") : marginBottom,
+    '--divider-margin-top': typeof marginTop === 'number' ? "".concat(marginTop, "px") : marginTop
   };
-  return /*#__PURE__*/_jsx("hr", {
+  return /*#__PURE__*/_jsx("hr", _objectSpread({
     className: classes,
-    style: style,
-    ...otherProps
-  });
+    style: style
+  }, otherProps));
 };
 export default Divider;

package/dist/esm/footer/index.js

@@ -13,21 +13,26 @@ import { ExternalLink } from '@wordpress/components';
  */
 import './style.scss';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Footer = ({
-  simple = undefined
-}) => {
-  const {
-    components_demo: componentsDemo = false,
-    support = false,
-    setup_wizard: setupWizard = false,
-    reset_url: resetUrl = false,
-    plugin_version: pluginVersion = {
+var Footer = function Footer(_ref) {
+  var _ref$simple = _ref.simple,
+    simple = _ref$simple === void 0 ? undefined : _ref$simple;
+  var _ref2 = window.newspack_urls || {},
+    _ref2$components_demo = _ref2.components_demo,
+    componentsDemo = _ref2$components_demo === void 0 ? false : _ref2$components_demo,
+    _ref2$support = _ref2.support,
+    support = _ref2$support === void 0 ? false : _ref2$support,
+    _ref2$setup_wizard = _ref2.setup_wizard,
+    setupWizard = _ref2$setup_wizard === void 0 ? false : _ref2$setup_wizard,
+    _ref2$reset_url = _ref2.reset_url,
+    resetUrl = _ref2$reset_url === void 0 ? false : _ref2$reset_url,
+    _ref2$plugin_version = _ref2.plugin_version,
+    pluginVersion = _ref2$plugin_version === void 0 ? {
       label: 'Newspack'
-    },
-    remove_starter_content: removeStarterContent = false,
-    support_email: supportEmail
-  } = window.newspack_urls || {};
-  const footerElements = [{
+    } : _ref2$plugin_version,
+    _ref2$remove_starter_ = _ref2.remove_starter_content,
+    removeStarterContent = _ref2$remove_starter_ === void 0 ? false : _ref2$remove_starter_,
+    supportEmail = _ref2.support_email;
+  var footerElements = [{
     label: pluginVersion.label,
     url: 'https://newspack.com/category/release-notes/',
     external: true
@@ -67,25 +72,26 @@ const Footer = ({
   if (supportEmail) {
     footerElements.push({
       label: __('Contact Support', 'newspack-plugin'),
-      url: `mailto:${supportEmail}`
+      url: "mailto:".concat(supportEmail)
     });
   }
   return /*#__PURE__*/_jsx("div", {
     className: "newspack-footer",
     children: !simple && /*#__PURE__*/_jsx("ul", {
-      children: footerElements.map(({
-        url,
-        label,
-        external
-      }, index) => /*#__PURE__*/_jsx("li", {
-        children: external ? /*#__PURE__*/_jsx(ExternalLink, {
-          href: url,
-          children: label
-        }) : /*#__PURE__*/_jsx("a", {
-          href: url,
-          children: label
-        })
-      }, index))
+      children: footerElements.map(function (_ref3, index) {
+        var url = _ref3.url,
+          label = _ref3.label,
+          external = _ref3.external;
+        return /*#__PURE__*/_jsx("li", {
+          children: external ? /*#__PURE__*/_jsx(ExternalLink, {
+            href: url,
+            children: label
+          }) : /*#__PURE__*/_jsx("a", {
+            href: url,
+            children: label
+          })
+        }, index);
+      })
     })
   });
 };

package/dist/esm/form-token-field/index.js

@@ -1,3 +1,15 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+var _excluded = ["className", "description", "hideHelpFromVision", "hideLabelFromVision"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /**
  * Form Token Field
  */
@@ -18,32 +30,39 @@ import './style.scss';
  */
 import classnames from 'classnames';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-class FormTokenField extends Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      description,
-      hideHelpFromVision,
-      hideLabelFromVision,
-      ...otherProps
-    } = this.props;
-    const classes = classnames('newspack-form-token-field__input-container', className);
-    return /*#__PURE__*/_jsxs("div", {
-      className: classnames({
-        'newspack-form-token-field--label-hidden': hideLabelFromVision,
-        'newspack-form-token-field--help-hidden': hideHelpFromVision
-      }, 'newspack-form-token-field'),
-      children: [/*#__PURE__*/_jsx(BaseComponent, {
-        className: classes,
-        ...otherProps
-      }), description && /*#__PURE__*/_jsx("p", {
-        className: "newspack-form-token-field__help",
-        children: description
-      })]
-    });
+var FormTokenField = /*#__PURE__*/function (_Component) {
+  function FormTokenField() {
+    _classCallCheck(this, FormTokenField);
+    return _callSuper(this, FormTokenField, arguments);
   }
-}
+  _inherits(FormTokenField, _Component);
+  return _createClass(FormTokenField, [{
+    key: "render",
+    value:
+    /**
+     * Render.
+     */
+    function render() {
+      var _this$props = this.props,
+        className = _this$props.className,
+        description = _this$props.description,
+        hideHelpFromVision = _this$props.hideHelpFromVision,
+        hideLabelFromVision = _this$props.hideLabelFromVision,
+        otherProps = _objectWithoutProperties(_this$props, _excluded);
+      var classes = classnames('newspack-form-token-field__input-container', className);
+      return /*#__PURE__*/_jsxs("div", {
+        className: classnames({
+          'newspack-form-token-field--label-hidden': hideLabelFromVision,
+          'newspack-form-token-field--help-hidden': hideHelpFromVision
+        }, 'newspack-form-token-field'),
+        children: [/*#__PURE__*/_jsx(BaseComponent, _objectSpread({
+          className: classes
+        }, otherProps)), description && /*#__PURE__*/_jsx("p", {
+          className: "newspack-form-token-field__help",
+          children: description
+        })]
+      });
+    }
+  }]);
+}(Component);
 export default FormTokenField;

package/dist/esm/global-notices/index.js

@@ -8,12 +8,12 @@ import { parse } from 'qs';
  */
 import { Notice } from '../';
 import { jsx as _jsx } from "react/jsx-runtime";
-const GlobalNotices = () => {
-  const notice = parse(window.location.search)['newspack-notice'];
+var GlobalNotices = function GlobalNotices() {
+  var notice = parse(window.location.search)['newspack-notice'];
   if (!notice) {
     return null;
   }
-  return notice.split(',').map((text, i) => {
+  return notice.split(',').map(function (text, i) {
     if (text.indexOf('_error_') === 0) {
       return /*#__PURE__*/_jsx(Notice, {
         isError: true,

package/dist/esm/grid/index.js

@@ -1,3 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "borders", "columns", "gutter", "noMargin", "rowGap"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * Grid
  */
@@ -12,19 +17,23 @@ import './style.scss';
  */
 import classnames from 'classnames';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Grid = ({
-  className = '',
-  borders = false,
-  columns = 2,
-  gutter = 32,
-  noMargin = false,
-  rowGap = 0,
-  ...otherProps
-}) => {
-  const classes = classnames('newspack-grid', borders && 'newspack-grid__borders', noMargin && 'newspack-grid--no-margin', columns && 'newspack-grid__columns-' + columns, gutter && 'newspack-grid__gutter-' + gutter, rowGap && 'newspack-grid__row-gap-' + rowGap, className);
-  return /*#__PURE__*/_jsx("div", {
-    className: classes,
-    ...otherProps
-  });
+var Grid = function Grid(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$borders = _ref.borders,
+    borders = _ref$borders === void 0 ? false : _ref$borders,
+    _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? 2 : _ref$columns,
+    _ref$gutter = _ref.gutter,
+    gutter = _ref$gutter === void 0 ? 32 : _ref$gutter,
+    _ref$noMargin = _ref.noMargin,
+    noMargin = _ref$noMargin === void 0 ? false : _ref$noMargin,
+    _ref$rowGap = _ref.rowGap,
+    rowGap = _ref$rowGap === void 0 ? 0 : _ref$rowGap,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var classes = classnames('newspack-grid', borders && 'newspack-grid__borders', noMargin && 'newspack-grid--no-margin', columns && 'newspack-grid__columns-' + columns, gutter && 'newspack-grid__gutter-' + gutter, rowGap && 'newspack-grid__row-gap-' + rowGap, className);
+  return /*#__PURE__*/_jsx("div", _objectSpread({
+    className: classes
+  }, otherProps));
 };
 export default Grid;

package/dist/esm/grid/style.scss

@@ -117,6 +117,11 @@
 			grid-template-columns: repeat(6, 1fr);
 		}
 
+		// Columns 12
+		&__columns-12 {
+			grid-template-columns: repeat(12, 1fr);
+		}
+
 		// Gutter 48
 		&__gutter-48 {
 			grid-gap: 48px;
@@ -217,4 +222,4 @@
 	&__tbody + &__tbody {
 		margin-top: -32px;
 	}
-}
+}