newspack-components 4.2.0 → 4.4.0-epic-editor-refactor.1

package/dist/esm/info-button/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; })(); }
 /**
  * Info Button
  */
@@ -19,24 +31,31 @@ import classnames from 'classnames';
  */
 import './style.scss';
 import { jsx as _jsx } from "react/jsx-runtime";
-class InfoButton extends Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      ...otherProps
-    } = this.props;
-    return /*#__PURE__*/_jsx(Tooltip, {
-      ...otherProps,
-      children: /*#__PURE__*/_jsx("span", {
-        className: classnames('newspack-info-button', className),
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: info
-        })
-      })
-    });
+var InfoButton = /*#__PURE__*/function (_Component) {
+  function InfoButton() {
+    _classCallCheck(this, InfoButton);
+    return _callSuper(this, InfoButton, arguments);
   }
-}
+  _inherits(InfoButton, _Component);
+  return _createClass(InfoButton, [{
+    key: "render",
+    value:
+    /**
+     * Render.
+     */
+    function render() {
+      var _this$props = this.props,
+        className = _this$props.className,
+        otherProps = _objectWithoutProperties(_this$props, _excluded);
+      return /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({}, otherProps), {}, {
+        children: /*#__PURE__*/_jsx("span", {
+          className: classnames('newspack-info-button', className),
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: info
+          })
+        })
+      }));
+    }
+  }]);
+}(Component);
 export default InfoButton;

package/dist/esm/integration-icons/active-campaign.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var activeCampaign = /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M16.6934 10.5811C17.1772 10.9036 17.4355 11.4194 17.4355 11.9678C17.4355 12.516 17.1449 13.0319 16.6934 13.3545L6.56445 20V18.6133C6.56445 18.1939 6.75844 17.7746 7.14551 17.5166L15.5 11.9678L7.14551 6.38672C6.79063 6.16086 6.56445 5.74175 6.56445 5.29004V4L16.6934 10.5811Z",
+    fill: "white"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M6.56445 8.77441C6.56445 8.35519 7.04853 8.12873 7.37109 8.35449L12.6611 11.9355L11.9512 12.4189C11.4996 12.7091 10.9193 12.7092 10.4678 12.4189L9.30664 11.6777L6.56445 9.83887V8.77441Z",
+    fill: "white"
+  })]
+});
+export default activeCampaign;

package/dist/esm/integration-icons/constant-contact.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var constantContact = /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M11.3261 20.9997C6.36799 20.9997 3 16.9581 3 12.6626C3 8.30073 6.43425 4.5352 11.0059 4.35852C11.1826 4.34748 11.3372 4.50207 11.3372 4.67875V6.01491C11.3372 6.18055 11.2047 6.3241 11.028 6.33514C7.67102 6.48974 4.96558 9.23935 4.96558 12.6736C4.96558 16.0305 7.61581 19.0341 11.3261 19.0341C14.9371 19.0341 17.4989 16.152 17.6535 12.9717C17.6646 12.8061 17.7971 12.6626 17.9738 12.6626H19.3099C19.4866 12.6626 19.6302 12.8061 19.6302 12.9938C19.4756 17.2342 16.0634 20.9997 11.3261 20.9997Z",
+    fill: "#1856ED"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M11.3372 16.5827C9.12864 16.5827 7.41704 14.8269 7.41704 12.6625C7.41704 10.6417 8.97405 8.95223 10.9948 8.78659C11.1826 8.77555 11.3372 8.9191 11.3372 9.10683V10.443C11.3372 10.5976 11.2267 10.7411 11.0611 10.7632C10.0894 10.8957 9.38262 11.7239 9.38262 12.6736C9.38262 13.7337 10.2108 14.6281 11.3372 14.6281C12.2758 14.6281 13.115 13.9214 13.2475 12.9497C13.2696 12.7951 13.4132 12.6736 13.5678 12.6736H14.9039C15.0916 12.6736 15.2352 12.8282 15.2242 13.0159C15.0475 14.9925 13.3911 16.5827 11.3372 16.5827Z",
+    fill: "#1856ED"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M19.0339 11.0283C18.8793 7.79277 16.2953 5.12046 12.9715 4.96586C12.8058 4.95482 12.6623 4.82231 12.6623 4.64563V3.32051C12.6623 3.14383 12.8058 3.00028 12.9936 3.00028C17.3112 3.16592 20.8338 6.62225 20.9994 11.0062C21.0105 11.1828 20.8559 11.3374 20.6792 11.3374H19.3431C19.1885 11.3374 19.0449 11.2049 19.0339 11.0283Z",
+    fill: "#FF9E1A"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M13.0267 9.41602C12.8279 9.38289 12.6844 9.21725 12.6844 9.05161V7.74859C12.6844 7.56086 12.839 7.41731 13.0267 7.42835C14.9481 7.59399 16.4278 9.12891 16.5934 10.9841C16.6045 11.1718 16.4609 11.3264 16.2732 11.3264H14.8708C14.7383 11.3264 14.6389 11.238 14.6168 11.1055C14.5174 10.3215 13.9211 9.57062 13.0267 9.41602Z",
+    fill: "#FF9E1A"
+  })]
+});
+export default constantContact;

package/dist/esm/integration-icons/fundraise-up.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var fundraiseUp = /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M4.90143 6.11914C4.90143 4.94655 5.85727 4 7.03802 4H19.0985V5.75182C19.0985 6.92441 18.1427 7.87098 16.9619 7.87098H4.90143V6.11914Z",
+    fill: "white"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M4.90143 11.4721C4.90143 10.6979 5.53463 10.0645 6.33667 10.0645H14.8778V11.824C14.8778 12.9924 13.921 13.9355 12.739 13.9355H4.90143V11.4721Z",
+    fill: "white"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M4.90143 16.8329C4.90143 16.4387 5.22775 16.1291 5.62502 16.1291L10.657 16.129V17.8886C10.657 19.0569 9.69221 20 8.50045 20H4.90143V16.8329Z",
+    fill: "white"
+  })]
+});
+export default fundraiseUp;

package/dist/esm/integration-icons/index.js

@@ -0,0 +1,6 @@
+export { default as activeCampaign } from './active-campaign';
+export { default as constantContact } from './constant-contact';
+export { default as fundraiseUp } from './fundraise-up';
+export { default as mailchimp } from './mailchimp';
+export { default as salesforce } from './salesforce';
+export { default as wisepops } from './wisepops';

package/dist/esm/integration-icons/mailchimp.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+var mailchimp = /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M21.5694 14.9382L21.214 13.9313C21.214 13.9313 22.6947 11.6807 19.0226 10.9108C19.0226 10.9108 19.2595 8.12707 17.9565 6.82408C20.7995 4.04046 20.148 -0.16465 13.6922 2.55975C10.3755 -3.77748 -2.41746 11.0884 2.91293 13.4575C2.37994 14.1683 2.37994 17.7218 6.05198 18.0772C8.53946 23.4076 14.5806 23.763 18.075 22.1638C21.5694 20.5647 23.5831 15.4712 21.5694 14.9382ZM5.99277 17.3072C2.97214 17.0111 2.67608 12.8653 5.28199 12.4506C7.88797 12.036 8.53946 17.5442 5.99277 17.3072ZM5.10435 11.6807C4.27514 11.6807 3.26829 12.806 3.26829 12.806C-0.759109 10.8516 10.5532 -2.11914 12.9815 2.91511C12.9815 2.91511 7.05883 5.75802 5.10435 11.6807ZM16.9497 16.7149C16.9497 16.4781 15.7059 17.0703 13.4553 16.3004C13.633 15.0566 16.2982 17.3664 20.7402 14.3459L21.0956 15.5897C22.7539 15.2935 21.0956 20.9201 15.7651 20.8608C11.4416 20.8016 10.0794 16.3596 12.4484 13.9313C12.9223 13.4575 10.7309 12.5099 11.1454 10.4369C11.3232 9.54857 12.0931 8.24557 14.0476 8.60093C16.0021 8.95628 16.4166 7.17944 17.7196 7.83093C19.0226 8.48243 18.2527 10.97 18.4303 11.3253C18.608 11.6807 20.5033 11.7399 20.8587 12.7468C21.214 13.7536 18.4303 15.945 14.1068 15.3527C13.0999 15.2343 12.5077 16.5373 13.1591 17.3664C14.4621 19.2617 19.7926 18.0179 20.681 16.1819C18.4303 17.8995 13.8106 18.551 13.4553 16.7149C14.7583 17.3072 16.9497 16.9519 16.9497 16.7149ZM9.19096 7.35715C10.494 5.75802 12.2116 4.81038 12.2116 4.81038L11.8562 5.69881C11.8562 5.69881 13.0999 4.75117 14.4621 4.75117L13.9884 5.22495C15.5283 5.28424 16.1798 5.87644 16.1798 5.87644C16.1798 5.87644 12.5669 4.81038 9.19096 7.35715ZM17.1866 9.66699C17.9565 9.60778 17.7196 11.3846 17.7196 11.3846H17.2458C17.2458 11.3846 16.4166 9.72621 17.1866 9.66699ZM13.6922 11.6215C13.1591 11.6807 12.5669 11.9768 12.6262 11.7399C12.8631 10.7923 15.0544 11.0292 14.9952 11.8584C14.936 12.6875 14.4621 11.5031 13.6922 11.6215ZM14.936 12.3322C14.9952 12.4506 14.5214 12.3322 14.166 12.3914C13.8106 12.4506 13.4553 12.6283 13.4553 12.5099C13.4553 12.3914 14.8175 11.8584 14.936 12.3322ZM16.1205 12.5099C16.2982 12.1545 17.0089 12.5099 16.8313 12.8653C16.6536 13.2206 15.9428 12.8653 16.1205 12.5099ZM17.6012 12.6283C17.2458 12.6283 17.2458 11.8584 17.6012 11.8584C17.9565 11.8584 17.9565 12.6875 17.6012 12.6875V12.6283ZM6.94033 15.7674C7.11805 15.945 6.58498 16.3004 6.17041 16.0042C5.75584 15.7081 6.64427 14.2867 5.57813 13.9313C4.51206 13.576 4.8082 14.9382 4.51206 14.7605C4.21592 14.5828 4.92663 12.6875 6.17041 13.4575C7.41419 14.2275 5.81505 15.412 6.52576 15.7674C7.23647 16.1227 6.82191 15.6489 6.94033 15.7674Z",
+    fill: "#241C15"
+  })
+});
+export default mailchimp;

package/dist/esm/integration-icons/salesforce.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+var salesforce = /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 32 32",
+  fill: "none",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M13.3173 7.24314C14.3498 6.16866 15.7848 5.50017 17.3737 5.50017C19.4877 5.50017 21.3287 6.67965 22.3122 8.42612C23.1661 8.04463 24.1111 7.83113 25.1016 7.83113C28.913 7.83113 32 10.9461 32 14.7925C32 18.639 28.9095 21.7539 25.1016 21.7539C24.6361 21.7539 24.1811 21.7084 23.7436 21.6174C22.8791 23.1574 21.2307 24.2004 19.3407 24.2004C18.5497 24.2004 17.8007 24.0184 17.1357 23.6929C16.2607 25.7543 14.2168 27.1998 11.8403 27.1998C9.46385 27.1998 7.25189 25.6319 6.4399 23.4339C6.0864 23.5074 5.71891 23.5494 5.34092 23.5494C2.39046 23.5494 0 21.1344 0 18.1525C0 16.154 1.07448 14.411 2.67046 13.4765C2.34146 12.7206 2.15947 11.8841 2.15947 11.0091C2.15947 7.57913 4.94192 4.80018 8.37537 4.80018C10.3913 4.80018 12.1833 5.75916 13.3173 7.24314Z",
+    fill: "var(--integration-icon-color, #0D9DDA)"
+  })
+});
+export default salesforce;

package/dist/esm/integration-icons/wisepops.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var wisepops = /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 32 32",
+  fill: "none",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M19.0543 10.8641C19.5935 10.8642 19.9806 11.384 19.8262 11.9008L16.1245 24.2947C16.0225 24.6356 15.7087 24.8698 15.3526 24.8698H10.5242C10.5199 24.8699 10.5155 24.8702 10.5112 24.8702H3.28999C2.96651 24.8702 2.67422 24.6766 2.548 24.3789L0.064734 18.5208C-0.160398 17.9896 0.229352 17.4005 0.80633 17.4004H8.02794C8.35135 17.4004 8.64327 17.5941 8.76954 17.8918L8.99143 18.4154L11.0754 11.4393C11.1773 11.0982 11.4911 10.8641 11.8473 10.8641H19.0543Z",
+    fill: "var(--integration-icon-color, #010101)"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M31.1937 7.12976C31.7311 7.12979 32.1179 7.646 31.9671 8.1617L27.2512 24.2907C27.1508 24.6344 26.8355 24.8702 26.4778 24.8702H19.3384C18.8011 24.8702 18.4142 24.3544 18.5649 23.8387L23.2812 7.70967C23.3816 7.36609 23.6965 7.12981 24.0543 7.12976H31.1937Z",
+    fill: "var(--integration-icon-color, #010101)"
+  })]
+});
+export default wisepops;

package/dist/esm/modal/index.js

@@ -1,3 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "size", "hideTitle"];
+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
  */
@@ -18,20 +23,29 @@ import './style.scss';
  */
 import classnames from 'classnames';
 import { jsx as _jsx } from "react/jsx-runtime";
-function Modal({
-  className,
-  isWide,
-  isNarrow,
-  hideTitle,
-  ...otherProps
-}, ref) {
-  const classes = classnames('newspack-modal', isWide && 'newspack-modal--wide', isNarrow && 'newspack-modal--narrow', hideTitle && 'newspack-modal--hide-title',
+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'
+};
+var getSizeClassName = function getSizeClassName(size) {
+  return sizeClassMap[size] || sizeClassMap.medium;
+};
+function Modal(_ref, ref) {
+  var className = _ref.className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    hideTitle = _ref.hideTitle,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var classes = classnames('newspack-modal', hideTitle && 'newspack-modal--hide-title',
   // Note: also hides the X close button.
-  className);
-  return /*#__PURE__*/_jsx(BaseComponent, {
-    className: classes,
-    ...otherProps,
+  getSizeClassName(size), className);
+  return /*#__PURE__*/_jsx(BaseComponent, _objectSpread(_objectSpread({
+    className: classes
+  }, otherProps), {}, {
     ref: ref
-  });
+  }));
 }
 export default forwardRef(Modal);

package/dist/esm/modal/style.scss

@@ -12,20 +12,37 @@
 	--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};
+	--wp-admin-theme-color-lighter-10: #{colors.$primary-000};
+	--wp-admin-theme-color-lighter-10--rgb: #{colors.$primary-000--rgb};
 
-	@media screen and ( min-width: 744px ) {
-		max-width: 680px;
-		width: 680px;
+	border-radius: 8px;
+	margin: auto;
+	max-height: calc(100% - 64px);
+	max-width: 512px;
+	width: calc(100% - 64px);
 
-		&--wide {
-			max-width: 1168px;
-			width: 1168px;
+	&--size-small {
+		max-width: 384px;
+
+		&.newspack-modal--hide-title {
+			max-width: 350px;
 		}
 	}
 
-	&--narrow {
-		max-width: 360px;
-		width: 360px;
+	&--size-medium {
+		max-width: 512px;
+	}
+
+	&--size-large {
+		max-width: 840px;
+	}
+
+	&--size-x-large {
+		max-width: calc(var(--newspack-wizard-section-width) + 64px)
+	}
+
+	&--size-full {
+		max-width: 100%;
 	}
 
 	&--hide-title {
@@ -39,8 +56,15 @@
 		}
 	}
 
-	@media screen and ( min-width: 960px ) {
-		max-height: calc(100% - 128px);
+	&--destructive {
+		.components-button.is-primary {
+			background-color: colors.$error-500;
+			color: colors.$neutral-000;
+			&:hover,
+			&:focus {
+				background-color: colors.$error-600;
+			}
+		}
 	}
 
 	// Links
@@ -60,8 +84,18 @@
 	}
 
 	.components-modal__content {
-		> *:last-child {
-			margin-bottom: 0;
+		> * {
+			&:first-child {
+				margin-top: 0;
+			}
+
+			&:last-child {
+				margin-bottom: 0;
+			}
 		}
 	}
 }
+/** Hide dropdown menus when a modal is open */
+.modal-open .components-popover__content {
+	opacity: 0;
+}

package/dist/esm/newspack-icon/index.js

@@ -1,3 +1,10 @@
+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";
+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; })(); }
 /**
  * Newspack Icon.
  */
@@ -18,32 +25,40 @@ import classnames from 'classnames';
  */
 import './style.scss';
 import { jsx as _jsx } from "react/jsx-runtime";
-class NewspackIcon extends Component {
-  /**
-   * Render
-   */
-  render() {
-    const {
-      className,
-      simple,
-      size,
-      white
-    } = this.props;
-    const classes = classnames('newspack-icon', simple && 'newspack-icon--simple', white && 'newspack-icon--white', className);
-    return /*#__PURE__*/_jsx(SVG, {
-      xmlns: "http://www.w3.org/2000/svg",
-      height: size,
-      width: size,
-      viewBox: "0 0 24 24",
-      className: classes,
-      children: /*#__PURE__*/_jsx(Path, {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M24 12C24 18.6271 18.6271 24 12 24C5.37213 24 0 18.6271 0 12C0 5.3729 5.3729 0 12 0C18.6271 0 24 5.3729 24 12ZM17.4545 17.4546L6.54545 6.54545V17.4545H8.72727V11.8182L14.3636 17.4546H17.4545ZM11.2727 8.18182H17.4545V6.54545H9.63636L11.2727 8.18182ZM17.4545 11.2727H14.3636L12.7273 9.63636H17.4545V11.2727ZM17.4545 12.7273V14.3636L15.8182 12.7273H17.4545Z"
-      })
-    });
+var NewspackIcon = /*#__PURE__*/function (_Component) {
+  function NewspackIcon() {
+    _classCallCheck(this, NewspackIcon);
+    return _callSuper(this, NewspackIcon, arguments);
   }
-}
+  _inherits(NewspackIcon, _Component);
+  return _createClass(NewspackIcon, [{
+    key: "render",
+    value:
+    /**
+     * Render
+     */
+    function render() {
+      var _this$props = this.props,
+        className = _this$props.className,
+        simple = _this$props.simple,
+        size = _this$props.size,
+        white = _this$props.white;
+      var classes = classnames('newspack-icon', simple && 'newspack-icon--simple', white && 'newspack-icon--white', className);
+      return /*#__PURE__*/_jsx(SVG, {
+        xmlns: "http://www.w3.org/2000/svg",
+        height: size,
+        width: size,
+        viewBox: "0 0 24 24",
+        className: classes,
+        children: /*#__PURE__*/_jsx(Path, {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M24 12C24 18.6271 18.6271 24 12 24C5.37213 24 0 18.6271 0 12C0 5.3729 5.3729 0 12 0C18.6271 0 24 5.3729 24 12ZM17.4545 17.4546L6.54545 6.54545V17.4545H8.72727V11.8182L14.3636 17.4546H17.4545ZM11.2727 8.18182H17.4545V6.54545H9.63636L11.2727 8.18182ZM17.4545 11.2727H14.3636L12.7273 9.63636H17.4545V11.2727ZM17.4545 12.7273V14.3636L15.8182 12.7273H17.4545Z"
+        })
+      });
+    }
+  }]);
+}(Component);
 NewspackIcon.defaultProps = {
   size: 32
 };

package/dist/esm/newspack-icon/style.scss

@@ -1,20 +1,22 @@
+@use '../../../colors/colors.module.scss' as colors;
+
 /**
  * Newspack Icon
  */
 
 .newspack-icon {
-	background: var(--wp-admin-theme-color);
+	background: colors.$primary-600;
 	fill: white;
 	padding: 12px;
 
 	&--white {
 		background: white;
-		fill: var(--wp-admin-theme-color);
+		fill: colors.$primary-600;
 	}
 
 	&--simple {
 		background: none;
-		fill: var(--wp-admin-theme-color);
+		fill: colors.$primary-600;
 		padding: 0;
 	}
 

package/dist/esm/notice/index.js

@@ -1,3 +1,10 @@
+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";
+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; })(); }
 /**
  * Notice
  */
@@ -18,47 +25,57 @@ import './style.scss';
  */
 import classnames from 'classnames';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-class Notice extends Component {
-  /**
-   * Render
-   */
-  render() {
-    const {
-      className,
-      debugMode,
-      isError,
-      isHandoff,
-      isHelp,
-      isSuccess,
-      isWarning,
-      noticeText,
-      rawHTML,
-      style = {},
-      children = null
-    } = this.props;
-    const classes = classnames('newspack-notice', className, debugMode && 'newspack-notice__is-debug', isError && 'newspack-notice__is-error', isHandoff && 'newspack-notice__is-handoff', isHelp && 'newspack-notice__is-help', isSuccess && 'newspack-notice__is-success', isWarning && 'newspack-notice__is-warning');
-    let noticeIcon;
-    if (isHelp) {
-      noticeIcon = help;
-    } else if (isSuccess) {
-      noticeIcon = check;
-    } else if (debugMode) {
-      noticeIcon = bug;
-    } else {
-      noticeIcon = info;
-    }
-    return /*#__PURE__*/_jsxs("div", {
-      className: classes,
-      style: style,
-      children: [/*#__PURE__*/_jsx(Icon, {
-        icon: noticeIcon
-      }), /*#__PURE__*/_jsxs("div", {
-        className: "newspack-notice__content",
-        children: [rawHTML ? /*#__PURE__*/_jsx(RawHTML, {
-          children: noticeText
-        }) : noticeText, children || null]
-      })]
-    });
+var Notice = /*#__PURE__*/function (_Component) {
+  function Notice() {
+    _classCallCheck(this, Notice);
+    return _callSuper(this, Notice, arguments);
   }
-}
+  _inherits(Notice, _Component);
+  return _createClass(Notice, [{
+    key: "render",
+    value:
+    /**
+     * Render
+     */
+    function render() {
+      var _this$props = this.props,
+        className = _this$props.className,
+        debugMode = _this$props.debugMode,
+        isError = _this$props.isError,
+        isHandoff = _this$props.isHandoff,
+        isHelp = _this$props.isHelp,
+        isSuccess = _this$props.isSuccess,
+        isWarning = _this$props.isWarning,
+        noticeText = _this$props.noticeText,
+        rawHTML = _this$props.rawHTML,
+        _this$props$style = _this$props.style,
+        style = _this$props$style === void 0 ? {} : _this$props$style,
+        _this$props$children = _this$props.children,
+        children = _this$props$children === void 0 ? null : _this$props$children;
+      var classes = classnames('newspack-notice', className, debugMode && 'newspack-notice__is-debug', isError && 'newspack-notice__is-error', isHandoff && 'newspack-notice__is-handoff', isHelp && 'newspack-notice__is-help', isSuccess && 'newspack-notice__is-success', isWarning && 'newspack-notice__is-warning');
+      var noticeIcon;
+      if (isHelp) {
+        noticeIcon = help;
+      } else if (isSuccess) {
+        noticeIcon = check;
+      } else if (debugMode) {
+        noticeIcon = bug;
+      } else {
+        noticeIcon = info;
+      }
+      return /*#__PURE__*/_jsxs("div", {
+        className: classes,
+        style: style,
+        children: [/*#__PURE__*/_jsx(Icon, {
+          icon: noticeIcon
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "newspack-notice__content",
+          children: [rawHTML ? /*#__PURE__*/_jsx(RawHTML, {
+            children: noticeText
+          }) : noticeText, children || null]
+        })]
+      });
+    }
+  }]);
+}(Component);
 export default Notice;