fontdue-js 2.22.3 → 3.0.0-alpha1

package/dist/components/Icons/FrowningFace.js

@@ -1,25 +1,17 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const FrowningFace = () => /*#__PURE__*/_react.default.createElement("span", {
+import React from 'react';
+const FrowningFace = () => /*#__PURE__*/React.createElement("span", {
   className: "icon",
   "data-label": "FrowningFace"
-}, /*#__PURE__*/_react.default.createElement("svg", {
+}, /*#__PURE__*/React.createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 43.32 43.319"
-}, /*#__PURE__*/_react.default.createElement("path", {
+}, /*#__PURE__*/React.createElement("path", {
   d: "M21.66,43.319A21.66,21.66,0,1,1,43.32,21.66,21.684,21.684,0,0,1,21.66,43.319Zm0-41.759a20.1,20.1,0,1,0,20.1,20.1A20.122,20.122,0,0,0,21.66,1.56Z"
-}), /*#__PURE__*/_react.default.createElement("path", {
+}), /*#__PURE__*/React.createElement("path", {
   d: "M18.3,16.08a3.24,3.24,0,1,1-3.24-3.24,3.24,3.24,0,0,1,3.24,3.24"
-}), /*#__PURE__*/_react.default.createElement("path", {
+}), /*#__PURE__*/React.createElement("path", {
   d: "M31.5,16.08a3.24,3.24,0,1,1-3.24-3.24,3.24,3.24,0,0,1,3.24,3.24"
-}), /*#__PURE__*/_react.default.createElement("path", {
+}), /*#__PURE__*/React.createElement("path", {
   d: "M12.39,31.648a.779.779,0,0,1-.611-1.264C14.617,26.8,17.664,25.2,21.66,25.2s7.04,1.6,9.881,5.186a.78.78,0,0,1-1.223.969c-2.516-3.178-5.186-4.6-8.658-4.6S15.517,28.175,13,31.352A.776.776,0,0,1,12.39,31.648Z"
 })));
-var _default = FrowningFace;
-exports.default = _default;
+export default FrowningFace;

package/dist/components/Icons/License.js

@@ -1,19 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const License = () => /*#__PURE__*/_react.default.createElement("span", {
+import React from 'react';
+const License = () => /*#__PURE__*/React.createElement("span", {
   className: "icon",
   "data-label": "License"
-}, /*#__PURE__*/_react.default.createElement("svg", {
+}, /*#__PURE__*/React.createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 31.621 30.826"
-}, /*#__PURE__*/_react.default.createElement("path", {
+}, /*#__PURE__*/React.createElement("path", {
   d: "M20.967,11.907l-1.032-1.235,1.412-1.69L19.481,7.811l.82-2.044-2.135-.538.147-2.2-2.2.147-.538-2.134-2.044.819L12.364,0,10.673,1.411,8.982,0,7.811,1.864,5.768,1.045,5.229,3.179l-2.2-.147.148,2.2-2.135.538.819,2.044L0,8.982l1.411,1.69L0,12.362l1.865,1.172-.819,2.044,2.135.538-.148,2.2,2.2-.147.079.309V30.826l5.365-3.141,5.365,3.141V21.988l7.986,7.987L25.6,23.959l6.023-1.575ZM4.107,17.239l.126-1.888L2.4,14.888l.7-1.756L1.5,12.125l1.212-1.453L1.5,9.22,3.1,8.213,2.4,6.457l1.834-.463L4.107,4.106,6,4.233,6.457,2.4,8.214,3.1,9.221,1.5l1.452,1.211L12.126,1.5l1.007,1.6,1.757-.7.462,1.835,1.887-.127-.126,1.888,1.834.463-.7,1.756,1.6,1.007-1.212,1.452,1.212,1.453-1.6,1.007.7,1.756-1.834.463.126,1.888-1.887-.127-.306,1.212h-.008v.033l-.148.589-1.757-.7-1.007,1.6-1.453-1.213L9.221,19.844l-1.007-1.6-1.757.7-.149-.593v-.029H6.3L6,17.112Zm6.566,9.287L6.308,29.082v-9l1.5-.6,1.171,1.865,1.691-1.411,1.691,1.411,1.171-1.865,1.5.6v9Zm14.1-3.386L23.5,28.034l-7.46-7.46v-2.1l.079-.313,2.2.147-.147-2.2,2.135-.538-.82-2.044,1.046-.657,9.137,8.986Z"
 })));
-var _default = License;
-exports.default = _default;
+export default License;

package/dist/components/Icons/Receipt.js

@@ -1,34 +1,26 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Receipt = () => /*#__PURE__*/_react.default.createElement("span", {
+import React from 'react';
+const Receipt = () => /*#__PURE__*/React.createElement("span", {
   className: "icon",
   "data-label": "Receipt"
-}, /*#__PURE__*/_react.default.createElement("svg", {
+}, /*#__PURE__*/React.createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 21.791 25.333"
-}, /*#__PURE__*/_react.default.createElement("path", {
+}, /*#__PURE__*/React.createElement("path", {
   d: "M0,25.333V3.79A3.794,3.794,0,0,1,3.79,0h18V1A2.792,2.792,0,0,0,19,3.79V25.333l-3.5-3.5-3,3-3-3-3,3-3-3Zm9.5-4.914,3,3,3-3,2.5,2.5V3.79A3.784,3.784,0,0,1,19.229,1H3.79A2.793,2.793,0,0,0,1,3.79V22.919l2.5-2.5,3,3Z"
-}), /*#__PURE__*/_react.default.createElement("rect", {
+}), /*#__PURE__*/React.createElement("rect", {
   x: "3.669",
   y: "6.084",
   width: "9.235",
   height: "1"
-}), /*#__PURE__*/_react.default.createElement("rect", {
+}), /*#__PURE__*/React.createElement("rect", {
   x: "3.669",
   y: "9.228",
   width: "11.024",
   height: "1"
-}), /*#__PURE__*/_react.default.createElement("rect", {
+}), /*#__PURE__*/React.createElement("rect", {
   x: "3.669",
   y: "12.372",
   width: "9.235",
   height: "1"
 })));
-var _default = Receipt;
-exports.default = _default;
+export default Receipt;

package/dist/components/Icons/User.js

@@ -1,19 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const User = () => /*#__PURE__*/_react.default.createElement("span", {
+import React from 'react';
+const User = () => /*#__PURE__*/React.createElement("span", {
   className: "icon",
   "data-label": "User"
-}, /*#__PURE__*/_react.default.createElement("svg", {
+}, /*#__PURE__*/React.createElement("svg", {
   viewBox: "0 0 20.127 21.771",
   xmlns: "http://www.w3.org/2000/svg"
-}, /*#__PURE__*/_react.default.createElement("path", {
+}, /*#__PURE__*/React.createElement("path", {
   d: "m20.127 21.771h-20.127v-2.542c0-2.643.691-3.621 3.521-4.984a23.853 23.853 0 0 1 3.252-1.245 8.539 8.539 0 0 1 -2.39-6.47c0-4.151 2.071-6.53 5.68-6.53 3.579 0 5.631 2.379 5.631 6.527a8.54 8.54 0 0 1 -2.394 6.473 26.633 26.633 0 0 1 3.3 1.242c2.8 1.3 3.529 2.323 3.529 4.987zm-19.127-1h18.127v-1.542c0-2.136-.366-2.884-2.947-4.079a24.342 24.342 0 0 0 -4.141-1.463l-.124-.923c1.74-.958 2.779-3.289 2.779-6.237 0-2.521-.8-5.527-4.631-5.527-3.863 0-4.68 3.006-4.68 5.527 0 2.948 1.039 5.279 2.78 6.237l-.124.923a22.383 22.383 0 0 0 -4.085 1.46c-2.606 1.253-2.954 1.953-2.954 4.082z"
 })));
-var _default = User;
-exports.default = _default;
+export default User;

package/dist/components/Icons/X.js

@@ -1,19 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const X = () => /*#__PURE__*/_react.default.createElement("span", {
+import React from 'react';
+const X = () => /*#__PURE__*/React.createElement("span", {
   className: "icon",
   "data-label": "X"
-}, /*#__PURE__*/_react.default.createElement("svg", {
+}, /*#__PURE__*/React.createElement("svg", {
   viewBox: "0 0 19.552 19.552",
   xmlns: "http://www.w3.org/2000/svg"
-}, /*#__PURE__*/_react.default.createElement("path", {
+}, /*#__PURE__*/React.createElement("path", {
   d: "m19.552.707-.707-.707-9.069 9.069-9.069-9.069-.707.707 9.069 9.069-9.069 9.069.707.707 9.069-9.069 9.069 9.069.707-.707-9.069-9.069z"
 })));
-var _default = X;
-exports.default = _default;
+export default X;

package/dist/components/Icons/index.d.ts

@@ -1,23 +1,23 @@
-export { default as ArrowDownRight } from './ArrowDownRight';
-export { default as ArrowLeft } from './ArrowLeft';
-export { default as ArrowRight } from './ArrowRight';
-export { default as CarrotDown } from './CarrotDown';
-export { default as CarrotUp } from './CarrotUp';
-export { default as Cart } from './Cart';
-export { default as CartNew } from './CartNew';
-export { default as Check } from './Check';
-export { default as Checkbox } from './Checkbox';
-export { default as CheckboxChecked } from './CheckboxChecked';
-export { default as CheckboxCrossed } from './CheckboxCrossed';
-export { default as CircledCheck } from './CircledCheck';
-export { default as CircledInfo } from './CircledInfo';
-export { default as CircledMinus } from './CircledMinus';
-export { default as ColorPicker } from './ColorPicker';
-export { default as CreditCard } from './CreditCard';
-export { default as DownArrow } from './DownArrow';
-export { default as DownloadFonts } from './DownloadFonts';
-export { default as FrowningFace } from './FrowningFace';
-export { default as License } from './License';
-export { default as Receipt } from './Receipt';
-export { default as User } from './User';
-export { default as X } from './X';
+export { default as ArrowDownRight } from './ArrowDownRight.js';
+export { default as ArrowLeft } from './ArrowLeft.js';
+export { default as ArrowRight } from './ArrowRight.js';
+export { default as CarrotDown } from './CarrotDown.js';
+export { default as CarrotUp } from './CarrotUp.js';
+export { default as Cart } from './Cart.js';
+export { default as CartNew } from './CartNew.js';
+export { default as Check } from './Check.js';
+export { default as Checkbox } from './Checkbox.js';
+export { default as CheckboxChecked } from './CheckboxChecked.js';
+export { default as CheckboxCrossed } from './CheckboxCrossed.js';
+export { default as CircledCheck } from './CircledCheck.js';
+export { default as CircledInfo } from './CircledInfo.js';
+export { default as CircledMinus } from './CircledMinus.js';
+export { default as ColorPicker } from './ColorPicker.js';
+export { default as CreditCard } from './CreditCard.js';
+export { default as DownArrow } from './DownArrow.js';
+export { default as DownloadFonts } from './DownloadFonts.js';
+export { default as FrowningFace } from './FrowningFace.js';
+export { default as License } from './License.js';
+export { default as Receipt } from './Receipt.js';
+export { default as User } from './User.js';
+export { default as X } from './X.js';

package/dist/components/Icons/index.js

@@ -1,167 +1,23 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "ArrowDownRight", {
-  enumerable: true,
-  get: function () {
-    return _ArrowDownRight.default;
-  }
-});
-Object.defineProperty(exports, "ArrowLeft", {
-  enumerable: true,
-  get: function () {
-    return _ArrowLeft.default;
-  }
-});
-Object.defineProperty(exports, "ArrowRight", {
-  enumerable: true,
-  get: function () {
-    return _ArrowRight.default;
-  }
-});
-Object.defineProperty(exports, "CarrotDown", {
-  enumerable: true,
-  get: function () {
-    return _CarrotDown.default;
-  }
-});
-Object.defineProperty(exports, "CarrotUp", {
-  enumerable: true,
-  get: function () {
-    return _CarrotUp.default;
-  }
-});
-Object.defineProperty(exports, "Cart", {
-  enumerable: true,
-  get: function () {
-    return _Cart.default;
-  }
-});
-Object.defineProperty(exports, "CartNew", {
-  enumerable: true,
-  get: function () {
-    return _CartNew.default;
-  }
-});
-Object.defineProperty(exports, "Check", {
-  enumerable: true,
-  get: function () {
-    return _Check.default;
-  }
-});
-Object.defineProperty(exports, "Checkbox", {
-  enumerable: true,
-  get: function () {
-    return _Checkbox.default;
-  }
-});
-Object.defineProperty(exports, "CheckboxChecked", {
-  enumerable: true,
-  get: function () {
-    return _CheckboxChecked.default;
-  }
-});
-Object.defineProperty(exports, "CheckboxCrossed", {
-  enumerable: true,
-  get: function () {
-    return _CheckboxCrossed.default;
-  }
-});
-Object.defineProperty(exports, "CircledCheck", {
-  enumerable: true,
-  get: function () {
-    return _CircledCheck.default;
-  }
-});
-Object.defineProperty(exports, "CircledInfo", {
-  enumerable: true,
-  get: function () {
-    return _CircledInfo.default;
-  }
-});
-Object.defineProperty(exports, "CircledMinus", {
-  enumerable: true,
-  get: function () {
-    return _CircledMinus.default;
-  }
-});
-Object.defineProperty(exports, "ColorPicker", {
-  enumerable: true,
-  get: function () {
-    return _ColorPicker.default;
-  }
-});
-Object.defineProperty(exports, "CreditCard", {
-  enumerable: true,
-  get: function () {
-    return _CreditCard.default;
-  }
-});
-Object.defineProperty(exports, "DownArrow", {
-  enumerable: true,
-  get: function () {
-    return _DownArrow.default;
-  }
-});
-Object.defineProperty(exports, "DownloadFonts", {
-  enumerable: true,
-  get: function () {
-    return _DownloadFonts.default;
-  }
-});
-Object.defineProperty(exports, "FrowningFace", {
-  enumerable: true,
-  get: function () {
-    return _FrowningFace.default;
-  }
-});
-Object.defineProperty(exports, "License", {
-  enumerable: true,
-  get: function () {
-    return _License.default;
-  }
-});
-Object.defineProperty(exports, "Receipt", {
-  enumerable: true,
-  get: function () {
-    return _Receipt.default;
-  }
-});
-Object.defineProperty(exports, "User", {
-  enumerable: true,
-  get: function () {
-    return _User.default;
-  }
-});
-Object.defineProperty(exports, "X", {
-  enumerable: true,
-  get: function () {
-    return _X.default;
-  }
-});
-var _ArrowDownRight = _interopRequireDefault(require("./ArrowDownRight"));
-var _ArrowLeft = _interopRequireDefault(require("./ArrowLeft"));
-var _ArrowRight = _interopRequireDefault(require("./ArrowRight"));
-var _CarrotDown = _interopRequireDefault(require("./CarrotDown"));
-var _CarrotUp = _interopRequireDefault(require("./CarrotUp"));
-var _Cart = _interopRequireDefault(require("./Cart"));
-var _CartNew = _interopRequireDefault(require("./CartNew"));
-var _Check = _interopRequireDefault(require("./Check"));
-var _Checkbox = _interopRequireDefault(require("./Checkbox"));
-var _CheckboxChecked = _interopRequireDefault(require("./CheckboxChecked"));
-var _CheckboxCrossed = _interopRequireDefault(require("./CheckboxCrossed"));
-var _CircledCheck = _interopRequireDefault(require("./CircledCheck"));
-var _CircledInfo = _interopRequireDefault(require("./CircledInfo"));
-var _CircledMinus = _interopRequireDefault(require("./CircledMinus"));
-var _ColorPicker = _interopRequireDefault(require("./ColorPicker"));
-var _CreditCard = _interopRequireDefault(require("./CreditCard"));
-var _DownArrow = _interopRequireDefault(require("./DownArrow"));
-var _DownloadFonts = _interopRequireDefault(require("./DownloadFonts"));
-var _FrowningFace = _interopRequireDefault(require("./FrowningFace"));
-var _License = _interopRequireDefault(require("./License"));
-var _Receipt = _interopRequireDefault(require("./Receipt"));
-var _User = _interopRequireDefault(require("./User"));
-var _X = _interopRequireDefault(require("./X"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+export { default as ArrowDownRight } from './ArrowDownRight.js';
+export { default as ArrowLeft } from './ArrowLeft.js';
+export { default as ArrowRight } from './ArrowRight.js';
+export { default as CarrotDown } from './CarrotDown.js';
+export { default as CarrotUp } from './CarrotUp.js';
+export { default as Cart } from './Cart.js';
+export { default as CartNew } from './CartNew.js';
+export { default as Check } from './Check.js';
+export { default as Checkbox } from './Checkbox.js';
+export { default as CheckboxChecked } from './CheckboxChecked.js';
+export { default as CheckboxCrossed } from './CheckboxCrossed.js';
+export { default as CircledCheck } from './CircledCheck.js';
+export { default as CircledInfo } from './CircledInfo.js';
+export { default as CircledMinus } from './CircledMinus.js';
+export { default as ColorPicker } from './ColorPicker.js';
+export { default as CreditCard } from './CreditCard.js';
+export { default as DownArrow } from './DownArrow.js';
+export { default as DownloadFonts } from './DownloadFonts.js';
+export { default as FrowningFace } from './FrowningFace.js';
+export { default as License } from './License.js';
+export { default as Receipt } from './Receipt.js';
+export { default as User } from './User.js';
+export { default as X } from './X.js';

package/dist/components/NewsletterSignup/NewsletterSignupElement.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NewsletterSignup_props } from './index';
+import { NewsletterSignup_props } from './index.js';
 interface NewsletterSignupElement_props {
     optInCheckboxChecked?: string;
 }

package/dist/components/NewsletterSignup/NewsletterSignupElement.js

@@ -1,15 +1,8 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = NewsletterSignupElement;
-var _react = _interopRequireDefault(require("react"));
-var _index = _interopRequireDefault(require("./index"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function NewsletterSignupElement(props) {
-  return /*#__PURE__*/_react.default.createElement(_index.default, _extends({}, props, {
+import React from 'react';
+import NewsletterSignup from './index.js';
+export default function NewsletterSignupElement(props) {
+  return /*#__PURE__*/React.createElement(NewsletterSignup, _extends({}, props, {
     optInCheckboxChecked: props.optInCheckboxChecked === 'true'
   }));
 }

package/dist/components/NewsletterSignup/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { SerializablePreloadedQuery } from '../../relay/loadSerializableQuery';
-import { NewsletterSignupQuery } from '__generated__/NewsletterSignupQuery.graphql';
+import { SerializablePreloadedQuery } from '../../relay/loadSerializableQuery.js';
+import { NewsletterSignupQuery } from '__generated__/NewsletterSignupQuery.graphql.js';
 type PreloadedQuery = SerializablePreloadedQuery<NewsletterSignupQuery>;
 export interface NewsletterSignup_props {
     optInLabel?: string;

package/dist/components/NewsletterSignup/index.js

@@ -1,25 +1,16 @@
-"use strict";
 'use client';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.NewsletterSignupPreloadedQueryRenderer = NewsletterSignupPreloadedQueryRenderer;
-exports.default = NewsletterSignup;
-var _NewsletterSignupQuery2 = _interopRequireDefault(require("../../__generated__/NewsletterSignupQuery.graphql"));
-var _NewsletterSignupUpdateCustomerMutation2 = _interopRequireDefault(require("../../__generated__/NewsletterSignupUpdateCustomerMutation.graphql"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactRelay = require("react-relay");
-var _reactGoogleRecaptcha = _interopRequireDefault(require("react-google-recaptcha"));
-var _TextField = _interopRequireDefault(require("../TextField"));
-var _Check = _interopRequireDefault(require("../Icons/Check"));
-var _useSerializablePreloadedQuery = _interopRequireDefault(require("../../relay/useSerializablePreloadedQuery"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const updateCustomerMutation = (_NewsletterSignupUpdateCustomerMutation2.default.hash && _NewsletterSignupUpdateCustomerMutation2.default.hash !== "769087891b6f263122bbb630b3f2ca6c" && console.error("The definition of 'NewsletterSignupUpdateCustomerMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NewsletterSignupUpdateCustomerMutation2.default);
-const query = (_NewsletterSignupQuery2.default.hash && _NewsletterSignupQuery2.default.hash !== "24b303198a6038318723fc0124548862" && console.error("The definition of 'NewsletterSignupQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NewsletterSignupQuery2.default);
+import _NewsletterSignupQuery from "../../__generated__/NewsletterSignupQuery.graphql.js";
+import _NewsletterSignupUpdateCustomerMutation from "../../__generated__/NewsletterSignupUpdateCustomerMutation.graphql.js";
+import React, { useState, useRef, useCallback } from 'react';
+import { graphql, commitMutation, useRelayEnvironment, useLazyLoadQuery, usePreloadedQuery } from 'react-relay';
+import { ReCAPTCHA } from 'react-google-recaptcha';
+import TextField from '../TextField/index.js';
+import Check from '../Icons/Check.js';
+import useSerializablePreloadedQuery from '../../relay/useSerializablePreloadedQuery.js';
+const updateCustomerMutation = (_NewsletterSignupUpdateCustomerMutation.hash && _NewsletterSignupUpdateCustomerMutation.hash !== "769087891b6f263122bbb630b3f2ca6c" && console.error("The definition of 'NewsletterSignupUpdateCustomerMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NewsletterSignupUpdateCustomerMutation);
+const query = (_NewsletterSignupQuery.hash && _NewsletterSignupQuery.hash !== "24b303198a6038318723fc0124548862" && console.error("The definition of 'NewsletterSignupQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NewsletterSignupQuery);
 function NewsletterSignupComponent(_ref) {
   var _data$viewer, _data$viewer$settings, _data$viewer2, _data$viewer2$setting, _data$viewer3, _data$viewer3$setting, _data$viewer4, _data$viewer4$setting;
   let {
@@ -31,23 +22,23 @@ function NewsletterSignupComponent(_ref) {
     intro,
     data
   } = _ref;
-  const [name, setName] = (0, _react.useState)('');
-  const [email, setEmail] = (0, _react.useState)('');
-  const [newsletterOptIn, setNewsletterOptIn] = (0, _react.useState)(optInCheckboxChecked);
-  const [error, setError] = (0, _react.useState)(null);
-  const [submitting, setSubmitting] = (0, _react.useState)(false);
-  const [submitted, setSubmitted] = (0, _react.useState)(false);
-  const [recaptchaToken, setRecaptchaToken] = (0, _react.useState)(null);
-  const [pendingSubmit, setPendingSubmit] = (0, _react.useState)(false);
-  const recaptchaRef = (0, _react.useRef)(null);
-  const environment = (0, _reactRelay.useRelayEnvironment)();
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [newsletterOptIn, setNewsletterOptIn] = useState(optInCheckboxChecked);
+  const [error, setError] = useState(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const [recaptchaToken, setRecaptchaToken] = useState(null);
+  const [pendingSubmit, setPendingSubmit] = useState(false);
+  const recaptchaRef = useRef(null);
+  const environment = useRelayEnvironment();
   const recaptchaEnabled = ((_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : (_data$viewer$settings = _data$viewer.settings) === null || _data$viewer$settings === void 0 ? void 0 : _data$viewer$settings.recaptchaEnabled) ?? false;
   const recaptchaSiteKey = (_data$viewer2 = data.viewer) === null || _data$viewer2 === void 0 ? void 0 : (_data$viewer2$setting = _data$viewer2.settings) === null || _data$viewer2$setting === void 0 ? void 0 : _data$viewer2$setting.recaptchaSiteKey;
-  const submitForm = (0, _react.useCallback)(token => {
+  const submitForm = useCallback(token => {
     setSubmitting(true);
     setPendingSubmit(false);
     setError(null);
-    (0, _reactRelay.commitMutation)(environment, {
+    commitMutation(environment, {
       mutation: updateCustomerMutation,
       variables: {
         input: {
@@ -84,14 +75,14 @@ function NewsletterSignupComponent(_ref) {
       }
     });
   }, [environment, name, email, newsletterOptIn]);
-  const handleRecaptchaChange = (0, _react.useCallback)(token => {
+  const handleRecaptchaChange = useCallback(token => {
     setRecaptchaToken(token);
     // If we were waiting for a token to submit, do it now
     if (token && pendingSubmit) {
       submitForm(token);
     }
   }, [pendingSubmit, submitForm]);
-  const handleRecaptchaExpired = (0, _react.useCallback)(() => {
+  const handleRecaptchaExpired = useCallback(() => {
     setRecaptchaToken(null);
   }, []);
   const handleSubmit = e => {
@@ -113,87 +104,87 @@ function NewsletterSignupComponent(_ref) {
   const optInLabel = optInLabelProp || ((_data$viewer3 = data.viewer) === null || _data$viewer3 === void 0 ? void 0 : (_data$viewer3$setting = _data$viewer3.settings) === null || _data$viewer3$setting === void 0 ? void 0 : _data$viewer3$setting.newsletterOptInLabel);
   const successLabel = (successLabelProp || ((_data$viewer4 = data.viewer) === null || _data$viewer4 === void 0 ? void 0 : (_data$viewer4$setting = _data$viewer4.settings) === null || _data$viewer4$setting === void 0 ? void 0 : _data$viewer4$setting.newsletterSuccessLabel)) ?? 'Success!';
   if (submitted) {
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: "newsletter-signup"
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: "newsletter-signup__success",
       dangerouslySetInnerHTML: {
         __html: successLabel
       }
     }));
   }
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "newsletter-signup"
-  }, /*#__PURE__*/_react.default.createElement("h2", {
+  }, /*#__PURE__*/React.createElement("h2", {
     className: "newsletter-signup__title"
-  }, title), /*#__PURE__*/_react.default.createElement("p", {
+  }, title), /*#__PURE__*/React.createElement("p", {
     className: "newsletter-signup__intro"
-  }, intro), error && /*#__PURE__*/_react.default.createElement("p", {
+  }, intro), error && /*#__PURE__*/React.createElement("p", {
     className: "newsletter-signup__error"
-  }, error), /*#__PURE__*/_react.default.createElement("form", {
+  }, error), /*#__PURE__*/React.createElement("form", {
     onSubmit: handleSubmit
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "newsletter-signup__section"
-  }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+  }, /*#__PURE__*/React.createElement(TextField, {
     label: "Name *",
     placeholder: "Your name",
     autocomplete: "name",
     value: name,
     onChange: value => setName(value)
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: "newsletter-signup__section"
-  }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+  }, /*#__PURE__*/React.createElement(TextField, {
     label: "Email *",
     placeholder: "Your email",
     type: "email",
     autocomplete: "email",
     value: email,
     onChange: value => setEmail(value)
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: "newsletter-signup__section newsletter-signup__checkbox-field"
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "checkbox"
-  }, /*#__PURE__*/_react.default.createElement("input", {
+  }, /*#__PURE__*/React.createElement("input", {
     type: "checkbox",
     id: "customer-newsletter-opt-in",
     checked: newsletterOptIn,
     onChange: e => setNewsletterOptIn(e.target.checked)
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: "checkbox__icon"
-  }, /*#__PURE__*/_react.default.createElement(_Check.default, null))), /*#__PURE__*/_react.default.createElement("label", {
+  }, /*#__PURE__*/React.createElement(Check, null))), /*#__PURE__*/React.createElement("label", {
     htmlFor: "customer-newsletter-opt-in",
     dangerouslySetInnerHTML: {
       __html: optInLabel ?? ''
     }
-  })), recaptchaEnabled && recaptchaSiteKey && /*#__PURE__*/_react.default.createElement(_reactGoogleRecaptcha.default, {
+  })), recaptchaEnabled && recaptchaSiteKey && /*#__PURE__*/React.createElement(ReCAPTCHA, {
     ref: recaptchaRef,
     sitekey: recaptchaSiteKey,
     size: "invisible",
     onChange: handleRecaptchaChange,
     onExpired: handleRecaptchaExpired
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: "newsletter-signup__section"
-  }, /*#__PURE__*/_react.default.createElement("button", {
+  }, /*#__PURE__*/React.createElement("button", {
     className: "submit-button",
     disabled: submitting || pendingSubmit || disabled
-  }, submitting || pendingSubmit ? 'Submitting...' : buttonLabel, ' ', /*#__PURE__*/_react.default.createElement("span", {
+  }, submitting || pendingSubmit ? 'Submitting...' : buttonLabel, ' ', /*#__PURE__*/React.createElement("span", {
     className: "submit-button__arrow"
   }, ' →')))));
 }
-function NewsletterSignupPreloadedQueryRenderer(_ref3) {
+export function NewsletterSignupPreloadedQueryRenderer(_ref3) {
   let {
     preloadedQuery,
     ...props
   } = _ref3;
-  const queryRef = (0, _useSerializablePreloadedQuery.default)(preloadedQuery);
-  const data = (0, _reactRelay.usePreloadedQuery)(query, queryRef);
-  return /*#__PURE__*/_react.default.createElement(NewsletterSignupComponent, _extends({
+  const queryRef = useSerializablePreloadedQuery(preloadedQuery);
+  const data = usePreloadedQuery(query, queryRef);
+  return /*#__PURE__*/React.createElement(NewsletterSignupComponent, _extends({
     data: data
   }, props));
 }
-function NewsletterSignup(props) {
-  const data = (0, _reactRelay.useLazyLoadQuery)(query, {});
-  return /*#__PURE__*/_react.default.createElement(NewsletterSignupComponent, _extends({}, props, {
+export default function NewsletterSignup(props) {
+  const data = useLazyLoadQuery(query, {});
+  return /*#__PURE__*/React.createElement(NewsletterSignupComponent, _extends({}, props, {
     data: data
   }));
 }