fontdue-js 2.21.0 → 2.22.1

package/dist-cjs/components/ConfigContext.js

@@ -0,0 +1,86 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.makeConfig = exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const makeTypeTesterConfig = config => {
+  let shy = config?.shy ?? false;
+  if (shy === true) shy = 'hover';
+  let toolsPosition = config?.toolsPosition ?? 'inline';
+  if (shy !== 'focus') toolsPosition = 'inline';
+  return {
+    autofitOnChange: config?.autofitOnChange ?? false,
+    truncate: config?.truncate ?? false,
+    priceText: config?.priceText ?? false,
+    selectButtonStyle: config?.selectButtonStyle ?? 'inline',
+    selectButtonLabel: config?.selectButtonLabel ?? 'Select',
+    selectButton: config?.selectButton ?? config?.buyButton ?? true,
+    shy,
+    toolsPosition,
+    selectable: config?.selectable ?? false,
+    priceBar: config?.priceBar ?? false,
+    textInput: config?.textInput ?? false,
+    initialMode: config?.initialMode ?? 'local',
+    groupEdit: config?.groupEdit ?? false,
+    bulletStyle: config?.bulletStyle ?? 'square',
+    openTypeFeatures: {
+      buttonLabel: config?.openTypeFeatures?.buttonLabel ?? 'OT Features',
+      interactionStyle: config?.openTypeFeatures?.interactionStyle ?? 'panel',
+      columns: config?.openTypeFeatures?.columns,
+      selectionStyle: config?.openTypeFeatures?.selectionStyle ?? 'bullet'
+    },
+    variableAxesPosition: config?.variableAxesPosition ?? 'auto',
+    alignmentButtons: config?.alignmentButtons ?? false,
+    initialAlignment: config?.initialAlignment ?? 'left',
+    size: {
+      label: config?.size?.label ?? 'Size',
+      min: config?.size?.min ?? config?.min ?? 10,
+      max: config?.size?.max ?? config?.max ?? 200
+    },
+    lineHeight: config?.lineHeight ? {
+      label: config?.lineHeight?.label ?? 'Line height',
+      min: config?.lineHeight?.min ?? 0.7,
+      max: config?.lineHeight?.max ?? 2
+    } : undefined,
+    letterSpacing: config?.letterSpacing ? {
+      label: config?.letterSpacing?.label ?? 'Letter spacing',
+      min: config?.letterSpacing?.min ?? -0.05,
+      max: config?.letterSpacing?.max ?? 0.2
+    } : undefined,
+    columns: config?.columns === false ? false : {
+      count: config?.columns?.count ?? 'auto',
+      width: config?.columns?.width ?? '40ch',
+      gap: config?.columns?.gap ?? '1em'
+    }
+  };
+};
+const makeConfig = config => {
+  return {
+    typeTester: makeTypeTesterConfig(config?.typeTester),
+    form: {
+      checkboxStyle: config?.form?.checkboxStyle ?? 'check'
+    },
+    storeModal: {
+      indexLayout: config?.storeModal?.indexLayout ?? 'styled-aa',
+      indexExcludeTags: config?.storeModal?.indexExcludeTags,
+      productLicensesPosition: config?.storeModal?.productLicensesPosition ?? 'top'
+    },
+    stripe: {
+      appearance: config?.stripe?.appearance ?? null
+    },
+    tracking: {
+      enabled: config?.tracking?.enabled ?? false,
+      // Explicit opt-in required
+      consentRequired: config?.tracking?.consentRequired ?? false,
+      consentMessage: config?.tracking?.consentMessage,
+      segment: config?.tracking?.segment
+    }
+  };
+};
+exports.makeConfig = makeConfig;
+var _default = /*#__PURE__*/_react.default.createContext(makeConfig());
+exports.default = _default;

package/dist-cjs/components/ConsentBanner/consent.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.activateScripts = activateScripts;
+exports.getClientAnonymousId = getClientAnonymousId;
+exports.hasConsent = hasConsent;
+exports.onConsent = onConsent;
+exports.setClientAnonymousId = setClientAnonymousId;
+exports.setConsent = setConsent;
+const CONSENT_COOKIE = '_fontdue_cc';
+const CONSENT_EVENT = 'fontdue:consent';
+const MAX_AGE = 60 * 60 * 24 * 365; // 1 year
+
+/** Store the client-generated anonymous_id so it can be sent with consent events. */
+let clientAnonymousId;
+function setClientAnonymousId(id) {
+  clientAnonymousId = id;
+}
+function getClientAnonymousId() {
+  return clientAnonymousId;
+}
+
+/** Parse the _fontdue_cc cookie and check if it contains the given category. */
+function hasConsent(category) {
+  const match = document.cookie.match(new RegExp('(?:^|;\\s*)' + CONSENT_COOKIE + '=([^;]*)'));
+  if (!match) return false;
+  return match[1].split(',').includes(category);
+}
+
+/** Set the _fontdue_cc cookie with the given categories. */
+function setConsent(categories) {
+  document.cookie = CONSENT_COOKIE + '=' + categories.join(',') + ';path=/;max-age=' + MAX_AGE + ';SameSite=Lax;Secure';
+  window.dispatchEvent(new CustomEvent(CONSENT_EVENT, {
+    detail: {
+      categories
+    }
+  }));
+}
+
+/**
+ * Call callback when the given consent category is granted.
+ * If already granted, calls immediately. Otherwise polls (500ms) and
+ * listens for the fontdue:consent event. Returns a cleanup function.
+ */
+function onConsent(category, callback) {
+  if (hasConsent(category)) {
+    callback();
+    return () => {};
+  }
+  let called = false;
+  const check = () => {
+    if (!called && hasConsent(category)) {
+      called = true;
+      callback();
+      cleanup();
+    }
+  };
+  const interval = setInterval(check, 500);
+  window.addEventListener(CONSENT_EVENT, check);
+  const cleanup = () => {
+    clearInterval(interval);
+    window.removeEventListener(CONSENT_EVENT, check);
+  };
+  return cleanup;
+}
+
+/**
+ * Activate blocked scripts for the given consent category.
+ * Finds all <script type="text/plain" data-consent-category="<category>">
+ * elements and replaces them with executable copies.
+ */
+function activateScripts(category) {
+  const scripts = document.querySelectorAll(`script[type="text/plain"][data-consent-category="${category}"]`);
+  scripts.forEach(blocked => {
+    const script = document.createElement('script');
+
+    // Copy all attributes except type and data-consent-category
+    for (const attr of Array.from(blocked.attributes)) {
+      if (attr.name !== 'type' && attr.name !== 'data-consent-category') {
+        script.setAttribute(attr.name, attr.value);
+      }
+    }
+
+    // Copy inline content
+    if (blocked.textContent) {
+      script.textContent = blocked.textContent;
+    }
+    blocked.parentNode?.replaceChild(script, blocked);
+  });
+}

package/dist-cjs/components/ConsentBanner/index.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
+var _UrlContext = require("../UrlContext");
+var _consent = require("./consent");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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; }
+const DEFAULT_MESSAGE = 'We use cookies to analyze site usage and improve your\u00A0experience.';
+const ConsentBanner = () => {
+  const config = (0, _react.useContext)(_ConfigContext.default);
+  const url = (0, _UrlContext.useFontdueUrl)();
+
+  // Start dismissed to avoid hydration mismatch (server has no document.cookie).
+  // Check on the client in useEffect.
+  const [dismissed, setDismissed] = (0, _react.useState)(true);
+  (0, _react.useEffect)(() => {
+    if (!config.tracking.consentRequired) return;
+    if (!document.cookie.includes('_fontdue_cc=')) {
+      setDismissed(false);
+    }
+  }, [config.tracking.consentRequired]);
+  if (dismissed) return null;
+  const message = config.tracking.consentMessage || DEFAULT_MESSAGE;
+  const sendConsentEvent = categories => {
+    // Fire a tracking event so the server sets the _fontdue_state cookie
+    // on this response (rather than waiting for the next page load).
+    // Include the client anonymous_id so it gets synced to the cookie.
+    const body = {
+      event: 'Consent Granted',
+      properties: {
+        categories: categories.join(',')
+      }
+    };
+    const anonId = (0, _consent.getClientAnonymousId)();
+    if (anonId) body.anonymous_id = anonId;
+    fetch(`${url}/api/track`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      credentials: 'include',
+      body: JSON.stringify(body)
+    }).catch(() => {});
+  };
+  const handleAcceptAll = () => {
+    (0, _consent.setConsent)(['necessary', 'analytics']);
+    (0, _consent.activateScripts)('analytics');
+    if (config.tracking.enabled) {
+      sendConsentEvent(['necessary', 'analytics']);
+    }
+    setDismissed(true);
+  };
+  const handleReject = () => {
+    (0, _consent.setConsent)(['necessary']);
+    setDismissed(true);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "fontdue-consent-banner",
+    role: "region",
+    "aria-label": "Cookie consent"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "fontdue-consent-banner__container"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "fontdue-consent-banner__message"
+  }, message), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fontdue-consent-banner__actions"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "fontdue-consent-banner__button fontdue-consent-banner__button--secondary",
+    onClick: handleReject
+  }, "Necessary only"), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "fontdue-consent-banner__button fontdue-consent-banner__button--primary",
+    onClick: handleAcceptAll
+  }, "Accept all"))));
+};
+var _default = ConsentBanner;
+exports.default = _default;

package/dist-cjs/components/CookieNotification/index.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _store = _interopRequireDefault(require("store"));
+var _ComponentsContext = _interopRequireDefault(require("../ComponentsContext"));
+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 DefaultCookieNotification = ({
+  onDismiss,
+  open,
+  siteTitle
+}) => /*#__PURE__*/_react.default.createElement("div", {
+  className: "cookie-notification",
+  "data-open": open
+}, /*#__PURE__*/_react.default.createElement("div", {
+  className: "cookie-notification__container"
+}, /*#__PURE__*/_react.default.createElement("div", {
+  className: "cookie-notification__text-container"
+}, /*#__PURE__*/_react.default.createElement("p", {
+  className: "cookie-notification__label"
+}, siteTitle, " website uses cookies"), /*#__PURE__*/_react.default.createElement("p", {
+  className: "cookie-notification__text"
+}, "We use cookies to ensure that we give you the best experience. By continuing to visit this site you agree to receive cookies from generaltypestudio.com. You can read more about cookies in our ", /*#__PURE__*/_react.default.createElement("a", {
+  href: "/privacy-policy"
+}, "privacy policy"), ".")), /*#__PURE__*/_react.default.createElement("div", {
+  className: "cookie-notification__button-container"
+}, /*#__PURE__*/_react.default.createElement("button", {
+  type: "button",
+  className: "cookie-notification__button",
+  onClick: onDismiss
+}, "Got it"))));
+const GetComponent = ({
+  name,
+  fallback,
+  children
+}) => /*#__PURE__*/_react.default.createElement(_ComponentsContext.default.Consumer, null, components => {
+  const Component = components[name] || fallback;
+  return children(Component);
+});
+const CookieNotificationBase = ({
+  siteTitle,
+  dismiss,
+  open
+}) => {
+  return /*#__PURE__*/_react.default.createElement(GetComponent, {
+    name: "CookieNotification",
+    fallback: DefaultCookieNotification,
+    open: open
+  }, Component => /*#__PURE__*/_react.default.createElement(Component, {
+    onDismiss: dismiss,
+    siteTitle: siteTitle,
+    open: open
+  }));
+};
+class CookieNotification extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dismissed: _store.default.get('userAgreedCookies') || false
+    };
+  }
+  dismiss = () => {
+    _store.default.set('userAgreedCookies', true);
+    this.setState({
+      dismissed: true
+    });
+  };
+  render() {
+    const {
+      dismissed
+    } = this.state;
+    if (dismissed) return null;
+    return /*#__PURE__*/_react.default.createElement(CookieNotificationBase, _extends({
+      dismiss: this.dismiss,
+      open: true
+    }, this.props));
+  }
+}
+exports.default = CookieNotification;

package/dist-cjs/components/CorsErrorModal.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderCorsErrorModal = renderCorsErrorModal;
+var _react = _interopRequireDefault(require("react"));
+var _client = require("react-dom/client");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const code = {
+  background: '#fef2f2',
+  padding: '2px 6px',
+  borderRadius: 3,
+  fontSize: 13
+};
+function CorsErrorModal({
+  origin,
+  fontdueUrl
+}) {
+  let settingsOrigin = fontdueUrl;
+  try {
+    settingsOrigin = new URL(fontdueUrl).origin;
+  } catch {
+    // keep as-is
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      position: 'fixed',
+      inset: 0,
+      zIndex: 99999,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      background: 'rgba(0,0,0,0.4)',
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      fontSize: 14,
+      lineHeight: 1.6
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      background: 'white',
+      color: '#1f2937',
+      borderRadius: 12,
+      border: '2px solid #fca5a5',
+      padding: '28px 32px',
+      maxWidth: 520,
+      width: '90%',
+      boxShadow: '0 8px 30px rgba(0,0,0,0.12)',
+      textAlign: 'left'
+    }
+  }, /*#__PURE__*/_react.default.createElement("strong", {
+    style: {
+      fontSize: 16,
+      color: '#dc2626'
+    }
+  }, "Cross-origin request blocked"), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      margin: '12px 0 0'
+    }
+  }, "Your website (", /*#__PURE__*/_react.default.createElement("code", {
+    style: code
+  }, origin), ") is not allowed to connect to your Fontdue store."), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      margin: '12px 0 0'
+    }
+  }, "To fix this, go to", ' ', /*#__PURE__*/_react.default.createElement("a", {
+    href: `${settingsOrigin}/admin/settings/security`,
+    target: "_blank",
+    rel: "noreferrer",
+    style: {
+      color: '#dc2626',
+      fontWeight: 500
+    }
+  }, "Settings \u2192 Security"), ' ', "in your Fontdue dashboard, and add ", /*#__PURE__*/_react.default.createElement("code", {
+    style: code
+  }, origin), " to the", ' ', /*#__PURE__*/_react.default.createElement("strong", null, "Cross-origin API access"), " field."), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      margin: '16px 0 0',
+      color: '#6b7280',
+      fontSize: 13
+    }
+  }, "This page will reload automatically once the origin is added.")));
+}
+function mount(origin, fontdueUrl) {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  (0, _client.createRoot)(container).render(/*#__PURE__*/_react.default.createElement(CorsErrorModal, {
+    origin: origin,
+    fontdueUrl: fontdueUrl
+  }));
+}
+function renderCorsErrorModal(origin, fontdueUrl) {
+  if (document.body) {
+    mount(origin, fontdueUrl);
+  } else {
+    document.addEventListener('DOMContentLoaded', () => mount(origin, fontdueUrl));
+  }
+}

package/dist-cjs/components/CouponText/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CouponText;
+var _CouponText_coupon2 = _interopRequireDefault(require("../../__generated__/CouponText_coupon.graphql"));
+var _reactRelay = require("react-relay");
+var _react = _interopRequireWildcard(require("react"));
+var _Price = require("../Price");
+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 CouponText({
+  coupon: couponKey,
+  subtract = 0
+}) {
+  const coupon = (0, _reactRelay.useFragment)((_CouponText_coupon2.default.hash && _CouponText_coupon2.default.hash !== "484f6e7b6a444d53ee056ac4a43a58f3" && console.error("The definition of 'CouponText_coupon' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CouponText_coupon2.default), couponKey);
+  if (coupon.type === 'credit') {
+    const amountRemaining = {
+      ...coupon.creditAmountRemaining,
+      amount: coupon.creditAmountRemaining.amount - subtract,
+      currency: coupon.creditAmountRemaining.currency
+    };
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Price.Price, {
+      price: amountRemaining
+    }), " remaining");
+  }
+  if (coupon.type === 'percent') {
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, `${coupon.percentAmount}% off`);
+  }
+  if (coupon.type === 'static_credit') {
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Price.Price, {
+      price: coupon.creditAmount
+    }), " off");
+  }
+  return null;
+}

package/dist-cjs/components/CustomerLoginForm/index.js

@@ -0,0 +1,88 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _CustomerLoginFormQuery2 = _interopRequireDefault(require("../../__generated__/CustomerLoginFormQuery.graphql"));
+var _CustomerLoginFormLoginMutation2 = _interopRequireDefault(require("../../__generated__/CustomerLoginFormLoginMutation.graphql"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactRelay = require("react-relay");
+var _TextField = _interopRequireDefault(require("../TextField"));
+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 }; }
+const loginMutation = (_CustomerLoginFormLoginMutation2.default.hash && _CustomerLoginFormLoginMutation2.default.hash !== "975b639fac1e0d88e0f0c9c55acd8b9c" && console.error("The definition of 'CustomerLoginFormLoginMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CustomerLoginFormLoginMutation2.default);
+const query = (_CustomerLoginFormQuery2.default.hash && _CustomerLoginFormQuery2.default.hash !== "f32c7b0b485a2b2a02ddf2cbc5b87a3c" && console.error("The definition of 'CustomerLoginFormQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CustomerLoginFormQuery2.default);
+const DEFAULT_SUBMITTED_LABEL = '<p>Submitted!</p><p>Please check your email inbox for a link to log in.</p><p>If you don\u2019t receive an email, please contact us to retrieve your order information.</p>';
+const CustomerLoginForm = ({
+  submitLabel = 'Submit'
+}) => {
+  const [email, setEmail] = (0, _react.useState)('');
+  const [error, setError] = (0, _react.useState)(null);
+  const [submitting, setSubmitting] = (0, _react.useState)(false);
+  const [submitted, setSubmitted] = (0, _react.useState)(false);
+  const environment = (0, _reactRelay.useRelayEnvironment)();
+  const data = (0, _reactRelay.useLazyLoadQuery)(query, {});
+  const submittedLabel = data.viewer?.settings?.customerLoginSubmittedLabel || DEFAULT_SUBMITTED_LABEL;
+  const handleSubmit = e => {
+    e.preventDefault();
+    setSubmitting(true);
+    (0, _reactRelay.commitMutation)(environment, {
+      mutation: loginMutation,
+      variables: {
+        input: {
+          email
+        }
+      },
+      onCompleted: (_res, errors) => {
+        if (errors && errors.length > 0) {
+          setError(errors[0].message);
+          setSubmitting(false);
+        } else {
+          setSubmitted(true);
+          setSubmitting(false);
+          setError(null);
+        }
+      },
+      onError: ({
+        message
+      }) => {
+        setError(message);
+        setSubmitting(false);
+      }
+    });
+  };
+  const disabled = !email;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "login-form"
+  }, error && /*#__PURE__*/_react.default.createElement("div", {
+    className: "login-form__errors"
+  }, error), submitted ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "login-form__submitted",
+    dangerouslySetInnerHTML: {
+      __html: submittedLabel
+    }
+  }) : /*#__PURE__*/_react.default.createElement("form", {
+    className: "login-form__form",
+    onSubmit: handleSubmit
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "login-form__section"
+  }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    label: "Email *",
+    type: "email",
+    value: email,
+    onChange: value => setEmail(value),
+    autocomplete: "email",
+    placeholder: "Your email"
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
+    className: "submit-button",
+    type: "submit",
+    disabled: submitting || disabled
+  }, submitting ? 'Submitting...' : submitLabel, /*#__PURE__*/_react.default.createElement("span", {
+    className: "submit-button__arrow"
+  }, " \u2192")))));
+};
+var _default = CustomerLoginForm;
+exports.default = _default;

package/dist-cjs/components/Family/FamilyList.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = FamilyList;
+var _FamilyList_node2 = _interopRequireDefault(require("../../__generated__/FamilyList_node.graphql"));
+var _react = _interopRequireDefault(require("react"));
+var _reactRelay = require("react-relay");
+var _FontStyle = _interopRequireDefault(require("../FontStyle"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const styleName = (normal, localized) => {
+  if (normal === localized) return normal;
+  return `${normal} ${localized}`;
+};
+function FamilyList({
+  node: nodeKey,
+  text
+}) {
+  const node = (0, _reactRelay.useFragment)((_FamilyList_node2.default.hash && _FamilyList_node2.default.hash !== "d52770ab2e7aaa83f392a5d80340f3ad" && console.error("The definition of 'FamilyList_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FamilyList_node2.default), nodeKey);
+  return /*#__PURE__*/_react.default.createElement("ul", {
+    className: "font-family-block__list",
+    style: {
+      fontFamily: node.name
+    }
+  }, node.fontStyles?.map((style, i) => /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
+    fontStyle: style,
+    Component: "li",
+    key: i,
+    className: "font-family-block__list__item"
+  }, (style.variableInstances?.length ?? 0) > 0 ? style.variableInstances?.map(({
+    name,
+    coordinates
+  }) => /*#__PURE__*/_react.default.createElement("span", {
+    key: name,
+    style: {
+      fontVariationSettings: coordinates.map(({
+        axis,
+        value
+      }) => `'${axis}' ${value}`).join(',')
+    }
+  }, name, ' ')) : /*#__PURE__*/_react.default.createElement("span", null, text || styleName(style.name, style.name_localized), " "))));
+}