fontdue-js 2.22.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-bundle/chunks/consent-DMvR5rEh.js → dist-cjs/components/ConsentBanner/consent.js}

@@ -1,3 +1,14 @@
+"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
@@ -78,7 +89,4 @@ function activateScripts(category) {
     }
     blocked.parentNode?.replaceChild(script, blocked);
   });
-}
-
-export { activateScripts as a, setClientAnonymousId as b, getClientAnonymousId as g, hasConsent as h, onConsent as o, setConsent as s };
-//# sourceMappingURL=consent-DMvR5rEh.js.map
+}

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-bundle/chunks/CorsErrorModal-C1g_-3Re.js → dist-cjs/components/CorsErrorModal.js}

@@ -1,6 +1,12 @@
-import React__default from 'react';
-import { createRoot } from 'react-dom/client';
+"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',
@@ -17,7 +23,7 @@ function CorsErrorModal({
   } catch {
     // keep as-is
   }
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       position: 'fixed',
       inset: 0,
@@ -30,7 +36,7 @@ function CorsErrorModal({
       fontSize: 14,
       lineHeight: 1.6
     }
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       background: 'white',
       color: '#1f2937',
@@ -42,22 +48,22 @@ function CorsErrorModal({
       boxShadow: '0 8px 30px rgba(0,0,0,0.12)',
       textAlign: 'left'
     }
-  }, /*#__PURE__*/React__default.createElement("strong", {
+  }, /*#__PURE__*/_react.default.createElement("strong", {
     style: {
       fontSize: 16,
       color: '#dc2626'
     }
-  }, "Cross-origin request blocked"), /*#__PURE__*/React__default.createElement("p", {
+  }, "Cross-origin request blocked"), /*#__PURE__*/_react.default.createElement("p", {
     style: {
       margin: '12px 0 0'
     }
-  }, "Your website (", /*#__PURE__*/React__default.createElement("code", {
+  }, "Your website (", /*#__PURE__*/_react.default.createElement("code", {
     style: code
-  }, origin), ") is not allowed to connect to your Fontdue store."), /*#__PURE__*/React__default.createElement("p", {
+  }, 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", {
+  }, "To fix this, go to", ' ', /*#__PURE__*/_react.default.createElement("a", {
     href: `${settingsOrigin}/admin/settings/security`,
     target: "_blank",
     rel: "noreferrer",
@@ -65,9 +71,9 @@ function CorsErrorModal({
       color: '#dc2626',
       fontWeight: 500
     }
-  }, "Settings \u2192 Security"), ' ', "in your Fontdue dashboard, and add ", /*#__PURE__*/React__default.createElement("code", {
+  }, "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", {
+  }, 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',
@@ -78,7 +84,7 @@ function CorsErrorModal({
 function mount(origin, fontdueUrl) {
   const container = document.createElement('div');
   document.body.appendChild(container);
-  createRoot(container).render(/*#__PURE__*/React__default.createElement(CorsErrorModal, {
+  (0, _client.createRoot)(container).render(/*#__PURE__*/_react.default.createElement(CorsErrorModal, {
     origin: origin,
     fontdueUrl: fontdueUrl
   }));
@@ -89,7 +95,4 @@ function renderCorsErrorModal(origin, fontdueUrl) {
   } else {
     document.addEventListener('DOMContentLoaded', () => mount(origin, fontdueUrl));
   }
-}
-
-export { renderCorsErrorModal };
-//# sourceMappingURL=CorsErrorModal-C1g_-3Re.js.map
+}

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), " "))));
+}

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

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Family;
+var _Family_node2 = _interopRequireDefault(require("../../__generated__/Family_node.graphql"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactRelay = require("react-relay");
+var _reactRedux = require("react-redux");
+var _SelectButton = _interopRequireDefault(require("../SelectButton"));
+var _SKUPrice = _interopRequireDefault(require("../SKUPrice"));
+var _Price = require("../Price");
+var _FamilyList = _interopRequireDefault(require("./FamilyList"));
+var _reducer = require("../../reducer");
+var _utils = require("../../utils");
+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 Family({
+  node: nodeKey,
+  size
+}) {
+  const node = (0, _reactRelay.useFragment)((_Family_node2.default.hash && _Family_node2.default.hash !== "5c49167e8bf2458ab72604ff960636b2" && console.error("The definition of 'Family_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _Family_node2.default), nodeKey);
+  const precartOpen = (0, _reactRedux.useSelector)(state => state.precartOpen);
+  const selector = node.sku ? (0, _reducer.isSelected)(node.sku.id) : () => false;
+  const selected = (0, _reactRedux.useSelector)(selector);
+  const [buyButtonIsHovered, setBuyButtonIsHovered] = (0, _react.useState)(false);
+  const isSuperFamily = node.collectionType === 'superfamily';
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "select-button-hover-parent font-family-block",
+    "data-size": size,
+    "data-selected": selected,
+    "data-buy-button-hovered": buyButtonIsHovered
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "font-family-block__wrapper"
+  }, node.sku && /*#__PURE__*/_react.default.createElement("div", {
+    className: "font-family-block__select-button"
+  }, /*#__PURE__*/_react.default.createElement(_SelectButton.default, {
+    sku: node.sku,
+    productId: node.sku.id,
+    onMouseEnter: () => setBuyButtonIsHovered(true),
+    onMouseLeave: () => setBuyButtonIsHovered(false),
+    className: "font-family-block__select-button-element"
+  }), precartOpen && !selected && /*#__PURE__*/_react.default.createElement("div", {
+    className: "font-family-block__price"
+  }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+    fallback: null
+  }, /*#__PURE__*/_react.default.createElement(_SKUPrice.default, {
+    sku: node.sku,
+    format: _Price.PriceFormat.Truncated
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "font-family-block__label"
+  }, /*#__PURE__*/_react.default.createElement("h3", {
+    className: "font-family-block__name"
+  }, isSuperFamily ? `${node.name} Super family` : node.name), /*#__PURE__*/_react.default.createElement("span", {
+    className: "font-family-block__separator"
+  }), /*#__PURE__*/_react.default.createElement("p", {
+    className: "font-family-block__count"
+  }, (0, _utils.pluralize)(node.totalStyles ?? 0, node.isVariableFont ? 'font' : 'style')), node.isVariableFont ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    className: "font-family-block__separator"
+  }), /*#__PURE__*/_react.default.createElement("p", {
+    className: "font-family-block__count"
+  }, (0, _utils.pluralize)(node.fontStyles?.reduce((total, style) => total + (style.variableAxes?.length ?? 0), 0) ?? 0, 'variable axis', 'variable axes')), /*#__PURE__*/_react.default.createElement("span", {
+    className: "font-family-block__separator"
+  }), /*#__PURE__*/_react.default.createElement("p", {
+    className: "font-family-block__count"
+  }, (0, _utils.pluralize)(node.fontStyles?.reduce((total, style) => total + (style.variableInstances?.length ?? 0), 0) ?? 0, 'named instance'))) : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "font-family-block__lists"
+  }, isSuperFamily ? node.families?.map((family, index) => /*#__PURE__*/_react.default.createElement(_FamilyList.default, {
+    key: index,
+    node: family,
+    text: family.featureStyle?.keyCharacters_localized
+  })) : /*#__PURE__*/_react.default.createElement(_FamilyList.default, {
+    node: node
+  }))));
+}