fontdue-js 3.7.0 → 3.9.0

package/dist/components/BuyButton/index.js

@@ -1,9 +1,11 @@
 'use client';
 
 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); }
+import _BuyButtonPackSlugQuery from "../../__generated__/BuyButtonPackSlugQuery.graphql.js";
+import _BuyButtonPackIDQuery from "../../__generated__/BuyButtonPackIDQuery.graphql.js";
 import _BuyButtonSlugQuery from "../../__generated__/BuyButtonSlugQuery.graphql.js";
 import _BuyButtonIDQuery from "../../__generated__/BuyButtonIDQuery.graphql.js";
-import _BuyButton_collection from "../../__generated__/BuyButton_collection.graphql.js";
+import _BuyButton_product from "../../__generated__/BuyButton_product.graphql.js";
 import React, { useCallback, useContext, useEffect } from 'react';
 import { graphql, useRelayEnvironment, useLazyLoadQuery, useFragment, usePreloadedQuery } from 'react-relay';
 import { useDispatch, useStore } from 'react-redux';
@@ -11,37 +13,41 @@ import ComponentsContext from '../ComponentsContext.js';
 import { populateProductState } from '../Root/productState.js';
 import BuyButtonIDQueryNode from '../../__generated__/BuyButtonIDQuery.graphql.js';
 import BuyButtonSlugQueryNode from '../../__generated__/BuyButtonSlugQuery.graphql.js';
+import BuyButtonPackIDQueryNode from '../../__generated__/BuyButtonPackIDQuery.graphql.js';
+import BuyButtonPackSlugQueryNode from '../../__generated__/BuyButtonPackSlugQuery.graphql.js';
 import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
 import useSerializablePreloadedQuery from '../../relay/useSerializablePreloadedQuery.js';
 import { EnsureFontdueContext, LazyQueryBoundary } from '../FontdueContextProvider/index.js';
 function BuyButtonComponent(_ref) {
   let {
-    collection: collectionKey,
+    product: productKey,
     label,
     collectionName
   } = _ref;
-  const collection = useFragment((_BuyButton_collection.hash && _BuyButton_collection.hash !== "9c47030d7450494449d4aa5bda16e27e" && console.error("The definition of 'BuyButton_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _BuyButton_collection), collectionKey);
+  // A collection or a font pack — both open the store modal's product page,
+  // which renders whichever it is given.
+  const product = useFragment((_BuyButton_product.hash && _BuyButton_product.hash !== "007b16f72407229f0f743958a541c39a" && console.error("The definition of 'BuyButton_product' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _BuyButton_product), productKey);
   const store = useStore();
   const components = useContext(ComponentsContext);
   const dispatch = useDispatch();
   const environment = useRelayEnvironment();
   const handleClick = useCallback(() => {
-    if (!collection) return;
+    if (!product) return;
     dispatch({
       type: 'STORE_MODAL_NAVIGATE',
       route: 'product',
       variables: {
-        productId: collection.id
+        productId: product.id
       }
     });
     dispatch({
       type: 'OPEN_CART'
     });
-  }, [dispatch, collection]);
+  }, [dispatch, product]);
   useEffect(() => {
-    if (!collection) return;
-    populateProductState(store, environment, collection.id);
-  }, [collection === null || collection === void 0 ? void 0 : collection.id]);
+    if (!product) return;
+    populateProductState(store, environment, product.id);
+  }, [product === null || product === void 0 ? void 0 : product.id]);
   if (components.BuyButton) {
     return /*#__PURE__*/React.createElement(components.BuyButton, {
       innerProps: {
@@ -49,14 +55,21 @@ function BuyButtonComponent(_ref) {
       }
     });
   }
+
+  // Collections keep their historical label (the fragment never fetched the
+  // collection's name, so `collectionName` fills it in); a pack's name comes
+  // from the query.
+  const productName = collectionName ?? ((product === null || product === void 0 ? void 0 : product.__typename) === 'FontPack' ? product.name : '');
   return /*#__PURE__*/React.createElement("button", {
     className: "buy-button",
     onClick: handleClick,
     type: "button"
-  }, label ? label : `Buy ${collectionName ?? ''}`);
+  }, label ? label : `Buy ${productName}`);
 }
-const idQuery = (_BuyButtonIDQuery.hash && _BuyButtonIDQuery.hash !== "4fbf1dbf9e6c530a5d38c697b174d8b0" && console.error("The definition of 'BuyButtonIDQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _BuyButtonIDQuery);
-const slugQuery = (_BuyButtonSlugQuery.hash && _BuyButtonSlugQuery.hash !== "6e750adea09698f7cb61f435cd88fd26" && console.error("The definition of 'BuyButtonSlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _BuyButtonSlugQuery);
+const idQuery = (_BuyButtonIDQuery.hash && _BuyButtonIDQuery.hash !== "602547ee927b734b5fa2d6d1f2c93765" && console.error("The definition of 'BuyButtonIDQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _BuyButtonIDQuery);
+const slugQuery = (_BuyButtonSlugQuery.hash && _BuyButtonSlugQuery.hash !== "14c9d7a1ef98d03b73b22374983b5fb4" && console.error("The definition of 'BuyButtonSlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _BuyButtonSlugQuery);
+const packIdQuery = (_BuyButtonPackIDQuery.hash && _BuyButtonPackIDQuery.hash !== "7c9a7e75de7c428c5a3aec1235d0516e" && console.error("The definition of 'BuyButtonPackIDQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _BuyButtonPackIDQuery);
+const packSlugQuery = (_BuyButtonPackSlugQuery.hash && _BuyButtonPackSlugQuery.hash !== "7d9d7c6c7343fe13ccb1e79b6696e416" && console.error("The definition of 'BuyButtonPackSlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _BuyButtonPackSlugQuery);
 export async function loadBuyButtonQuery(variables, options) {
   if (variables.collectionId) {
     return loadSerializableQuery(BuyButtonIDQueryNode, {
@@ -68,7 +81,17 @@ export async function loadBuyButtonQuery(variables, options) {
       collectionSlug: variables.collectionSlug
     }, options);
   }
-  throw new Error('loadBuyButtonQuery expected either a collectionId or collectionSlug');
+  if (variables.fontPackId) {
+    return loadSerializableQuery(BuyButtonPackIDQueryNode, {
+      fontPackId: variables.fontPackId
+    }, options);
+  }
+  if (variables.fontPackSlug) {
+    return loadSerializableQuery(BuyButtonPackSlugQueryNode, {
+      fontPackSlug: variables.fontPackSlug
+    }, options);
+  }
+  throw new Error('loadBuyButtonQuery expected one of collectionId, collectionSlug, fontPackId or fontPackSlug');
 }
 function BuyButtonIDQueryRenderer(_ref2) {
   let {
@@ -102,7 +125,7 @@ function BuyButtonSlugQueryRenderer(_ref4) {
     collectionSlug
   });
   return /*#__PURE__*/React.createElement(BuyButtonComponent, _extends({}, rest, {
-    collection: ((_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : (_data$viewer$slug = _data$viewer.slug) === null || _data$viewer$slug === void 0 ? void 0 : _data$viewer$slug.collection) ?? null
+    product: ((_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : (_data$viewer$slug = _data$viewer.slug) === null || _data$viewer$slug === void 0 ? void 0 : _data$viewer$slug.product) ?? null
   }));
 }
 export function BuyButtonPreloadedSlugQueryRenderer(_ref5) {
@@ -117,25 +140,83 @@ export function BuyButtonPreloadedSlugQueryRenderer(_ref5) {
   const queryRef = useSerializablePreloadedQuery(preloadedQuery, 'store-or-network', slugQuery);
   const data = usePreloadedQuery(slugQuery, queryRef);
   return /*#__PURE__*/React.createElement(BuyButtonComponent, _extends({}, rest, {
-    collection: ((_data$viewer2 = data.viewer) === null || _data$viewer2 === void 0 ? void 0 : (_data$viewer2$slug = _data$viewer2.slug) === null || _data$viewer2$slug === void 0 ? void 0 : _data$viewer2$slug.collection) ?? null
+    product: ((_data$viewer2 = data.viewer) === null || _data$viewer2 === void 0 ? void 0 : (_data$viewer2$slug = _data$viewer2.slug) === null || _data$viewer2$slug === void 0 ? void 0 : _data$viewer2$slug.product) ?? null
   }));
 }
-function BuyButtonPreloadedRenderer(_ref6) {
+function BuyButtonPackIDQueryRenderer(_ref6) {
   let {
-    preloadedQuery,
+    fontPackId,
     ...rest
   } = _ref6;
-  if (preloadedQuery.params.name === 'BuyButtonIDQuery') {
-    return /*#__PURE__*/React.createElement(BuyButtonPreloadedIDQueryRenderer, _extends({
-      preloadedQuery: preloadedQuery
-    }, rest));
+  const data = useLazyLoadQuery(packIdQuery, {
+    fontPackId
+  });
+  return /*#__PURE__*/React.createElement(BuyButtonComponent, _extends({}, rest, data));
+}
+export function BuyButtonPreloadedPackIDQueryRenderer(_ref7) {
+  let {
+    preloadedQuery,
+    ...rest
+  } = _ref7;
+  const queryRef = useSerializablePreloadedQuery(preloadedQuery, 'store-or-network', packIdQuery);
+  const data = usePreloadedQuery(packIdQuery, queryRef);
+  return /*#__PURE__*/React.createElement(BuyButtonComponent, _extends({}, rest, data));
+}
+function BuyButtonPackSlugQueryRenderer(_ref8) {
+  var _data$viewer3, _data$viewer3$slug;
+  let {
+    fontPackSlug,
+    ...rest
+  } = _ref8;
+  const data = useLazyLoadQuery(packSlugQuery, {
+    fontPackSlug
+  });
+  return /*#__PURE__*/React.createElement(BuyButtonComponent, _extends({}, rest, {
+    product: ((_data$viewer3 = data.viewer) === null || _data$viewer3 === void 0 ? void 0 : (_data$viewer3$slug = _data$viewer3.slug) === null || _data$viewer3$slug === void 0 ? void 0 : _data$viewer3$slug.product) ?? null
+  }));
+}
+export function BuyButtonPreloadedPackSlugQueryRenderer(_ref9) {
+  var _data$viewer4, _data$viewer4$slug;
+  let {
+    preloadedQuery,
+    ...rest
+  } = _ref9;
+  const queryRef = useSerializablePreloadedQuery(preloadedQuery, 'store-or-network', packSlugQuery);
+  const data = usePreloadedQuery(packSlugQuery, queryRef);
+  return /*#__PURE__*/React.createElement(BuyButtonComponent, _extends({}, rest, {
+    product: ((_data$viewer4 = data.viewer) === null || _data$viewer4 === void 0 ? void 0 : (_data$viewer4$slug = _data$viewer4.slug) === null || _data$viewer4$slug === void 0 ? void 0 : _data$viewer4$slug.product) ?? null
+  }));
+}
+function BuyButtonPreloadedRenderer(_ref10) {
+  let {
+    preloadedQuery,
+    ...rest
+  } = _ref10;
+  switch (preloadedQuery.params.name) {
+    case 'BuyButtonIDQuery':
+      return /*#__PURE__*/React.createElement(BuyButtonPreloadedIDQueryRenderer, _extends({
+        preloadedQuery: preloadedQuery
+      }, rest));
+    case 'BuyButtonPackIDQuery':
+      return /*#__PURE__*/React.createElement(BuyButtonPreloadedPackIDQueryRenderer, _extends({
+        preloadedQuery: preloadedQuery
+      }, rest));
+    case 'BuyButtonPackSlugQuery':
+      return /*#__PURE__*/React.createElement(BuyButtonPreloadedPackSlugQueryRenderer, _extends({
+        preloadedQuery: preloadedQuery
+      }, rest));
+    default:
+      return /*#__PURE__*/React.createElement(BuyButtonPreloadedSlugQueryRenderer, _extends({
+        preloadedQuery: preloadedQuery
+      }, rest));
   }
-  return /*#__PURE__*/React.createElement(BuyButtonPreloadedSlugQueryRenderer, _extends({
-    preloadedQuery: preloadedQuery
-  }, rest));
 }
+
+// A lazy button identifies its product the same way `loadBuyButtonQuery` does.
+
 // Unified BuyButton entry. Accepts a preloaded query (server-side preload
-// path) or `{collectionId}`/`{collectionSlug}` for lazy fetch.
+// path) or one of `{collectionId}`/`{collectionSlug}`/`{fontPackId}`/
+// `{fontPackSlug}` for lazy fetch.
 // `EnsureFontdueContext` only self-wraps with `FontdueContextProvider` when
 // no parent Fontdue context is present, seeding it with `config`.
 export default function BuyButton(props) {
@@ -164,8 +245,24 @@ export default function BuyButton(props) {
     inner = /*#__PURE__*/React.createElement(LazyQueryBoundary, null, /*#__PURE__*/React.createElement(BuyButtonSlugQueryRenderer, _extends({
       collectionSlug: collectionSlug
     }, rest)));
+  } else if ('fontPackId' in props && props.fontPackId) {
+    const {
+      fontPackId,
+      ...rest
+    } = props;
+    inner = /*#__PURE__*/React.createElement(LazyQueryBoundary, null, /*#__PURE__*/React.createElement(BuyButtonPackIDQueryRenderer, _extends({
+      fontPackId: fontPackId
+    }, rest)));
+  } else if ('fontPackSlug' in props && props.fontPackSlug) {
+    const {
+      fontPackSlug,
+      ...rest
+    } = props;
+    inner = /*#__PURE__*/React.createElement(LazyQueryBoundary, null, /*#__PURE__*/React.createElement(BuyButtonPackSlugQueryRenderer, _extends({
+      fontPackSlug: fontPackSlug
+    }, rest)));
   } else {
-    throw new Error('BuyButton expected one of preloadedQuery, collectionId, or collectionSlug');
+    throw new Error('BuyButton expected one of preloadedQuery, collectionId, collectionSlug, fontPackId, or fontPackSlug');
   }
   return /*#__PURE__*/React.createElement(EnsureFontdueContext, {
     config: props.config

package/dist/components/BuyButton/index.server.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 import { BuyButton_props } from './index.js';
 import { Config } from '../ConfigContext.js';
-export type { BuyButtonPreloadedQuery } from './index.js';
+export type { BuyButtonPreloadedQuery, LoadBuyButtonQueryVariables } from './index.js';
 export declare function loadBuyButtonQuery(): never;
-export default function BuyButton({ collectionId, collectionSlug, ...rest }: BuyButton_props & {
+export default function BuyButton({ collectionId, collectionSlug, fontPackId, fontPackSlug, ...rest }: BuyButton_props & {
     collectionId?: string | null;
     collectionSlug?: string | null;
+    fontPackId?: string | null;
+    fontPackSlug?: string | null;
     config?: Config;
 }): Promise<React.JSX.Element | null>;

package/dist/components/BuyButton/index.server.js

@@ -1,9 +1,11 @@
 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); }
 import React from 'react';
 import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
-import { BuyButtonPreloadedIDQueryRenderer, BuyButtonPreloadedSlugQueryRenderer } from './index.js';
+import { BuyButtonPreloadedIDQueryRenderer, BuyButtonPreloadedSlugQueryRenderer, BuyButtonPreloadedPackIDQueryRenderer, BuyButtonPreloadedPackSlugQueryRenderer } from './index.js';
 import BuyButtonIDQueryNode from '../../__generated__/BuyButtonIDQuery.graphql.js';
 import BuyButtonSlugQueryNode from '../../__generated__/BuyButtonSlugQuery.graphql.js';
+import BuyButtonPackIDQueryNode from '../../__generated__/BuyButtonPackIDQuery.graphql.js';
+import BuyButtonPackSlugQueryNode from '../../__generated__/BuyButtonPackSlugQuery.graphql.js';
 // Stub for the RSC export condition. See FontdueProvider/index.server.tsx
 // for the rationale.
 export function loadBuyButtonQuery() {
@@ -12,12 +14,15 @@ export function loadBuyButtonQuery() {
 
 // Next RSC variant: awaits the query on the server and hands the response to
 // the client `*PreloadedQueryRenderer`. Lets pages just write
-// `<BuyButton collectionId={id} />` in an RSC without manually invoking
-// `loadBuyButtonQuery` + threading `preloadedQuery` through props.
+// `<BuyButton collectionId={id} />` (or `fontPackId`) in an RSC without
+// manually invoking `loadBuyButtonQuery` + threading `preloadedQuery` through
+// props.
 export default async function BuyButton(_ref) {
   let {
     collectionId,
     collectionSlug,
+    fontPackId,
+    fontPackSlug,
     ...rest
   } = _ref;
   if (collectionId) {
@@ -36,5 +41,21 @@ export default async function BuyButton(_ref) {
       preloadedQuery: preloadedQuery
     }, rest));
   }
+  if (fontPackId) {
+    const preloadedQuery = await loadSerializableQuery(BuyButtonPackIDQueryNode, {
+      fontPackId
+    });
+    return /*#__PURE__*/React.createElement(BuyButtonPreloadedPackIDQueryRenderer, _extends({
+      preloadedQuery: preloadedQuery
+    }, rest));
+  }
+  if (fontPackSlug) {
+    const preloadedQuery = await loadSerializableQuery(BuyButtonPackSlugQueryNode, {
+      fontPackSlug
+    });
+    return /*#__PURE__*/React.createElement(BuyButtonPreloadedPackSlugQueryRenderer, _extends({
+      preloadedQuery: preloadedQuery
+    }, rest));
+  }
   return null;
 }

package/dist/components/Cart/CartItem/CartItemProduct.js

@@ -9,13 +9,13 @@ export default function CartItemProduct(_ref) {
   let {
     product: productKey
   } = _ref;
-  const product = useFragment((_CartItemProduct_product.hash && _CartItemProduct_product.hash !== "a3931102e3ec08c57abd262038b5d74a" && console.error("The definition of 'CartItemProduct_product' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItemProduct_product), productKey);
+  const product = useFragment((_CartItemProduct_product.hash && _CartItemProduct_product.hash !== "15b269b9bb33a3bfa7b10486e99da183" && console.error("The definition of 'CartItemProduct_product' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItemProduct_product), productKey);
   let productName = (product === null || product === void 0 ? void 0 : product.name) ?? '??';
   if ((product === null || product === void 0 ? void 0 : product.__typename) === 'FontStyle' && product.family) productName = `${product.family.name} ${product.name}`;
   if (((product === null || product === void 0 ? void 0 : product.__typename) === 'Bundle' || (product === null || product === void 0 ? void 0 : product.__typename) === 'CollectionBundle') && product.fontCollection && !((_product$name = product.name) !== null && _product$name !== void 0 && _product$name.startsWith(product.fontCollection.name))) productName = `${product.fontCollection.name} ${product.name}`;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "cart-item__aa"
-  }, product ? /*#__PURE__*/React.createElement(React.Fragment, null, ['FontCollection', 'Bundle', 'CollectionBundle'].indexOf(product.__typename) >= 0 ? /*#__PURE__*/React.createElement(CollectionAa, {
+  }, product ? /*#__PURE__*/React.createElement(React.Fragment, null, ['FontCollection', 'Bundle', 'CollectionBundle', 'FontPack'].indexOf(product.__typename) >= 0 ? /*#__PURE__*/React.createElement(CollectionAa, {
     product: product
   }) : /*#__PURE__*/React.createElement(FontStyle, {
     fontStyle: product
@@ -25,7 +25,7 @@ export default function CartItemProduct(_ref) {
     className: "cart-item__name"
   }, productName), product !== null && product !== void 0 && product.isVariableFont || product !== null && product !== void 0 && (_product$variableInst = product.variableInstances) !== null && _product$variableInst !== void 0 && _product$variableInst.length ? /*#__PURE__*/React.createElement("div", {
     className: "cart-item__label"
-  }, "Variable font") : ((product === null || product === void 0 ? void 0 : product.__typename) === 'FontCollection' || (product === null || product === void 0 ? void 0 : product.__typename) === 'CollectionBundle') && /*#__PURE__*/React.createElement("div", {
+  }, "Variable font") : ((product === null || product === void 0 ? void 0 : product.__typename) === 'FontCollection' || (product === null || product === void 0 ? void 0 : product.__typename) === 'CollectionBundle' || (product === null || product === void 0 ? void 0 : product.__typename) === 'FontPack') && /*#__PURE__*/React.createElement("div", {
     className: "cart-item__label"
   }, "(", pluralize(product.totalStyles ?? 0, 'style'), ")")));
 }

package/dist/components/CollectionAa/index.js

@@ -7,12 +7,12 @@ export const CollectionAa = _ref => {
   let {
     product: productKey
   } = _ref;
-  const product = useFragment((_CollectionAa_product.hash && _CollectionAa_product.hash !== "c6b0113fe8474166dab3649c41880d84" && console.error("The definition of 'CollectionAa_product' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CollectionAa_product), productKey);
+  const product = useFragment((_CollectionAa_product.hash && _CollectionAa_product.hash !== "a3ee4dc4f6eb38b9c24a21cdc2cb6bc0" && console.error("The definition of 'CollectionAa_product' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CollectionAa_product), productKey);
   let fontStyle;
   if ((product === null || product === void 0 ? void 0 : product.__typename) === 'Bundle') {
     var _product$fontStyles;
     fontStyle = (_product$fontStyles = product.fontStyles) === null || _product$fontStyles === void 0 ? void 0 : _product$fontStyles[0];
-  } else if ((product === null || product === void 0 ? void 0 : product.__typename) === 'FontCollection') {
+  } else if ((product === null || product === void 0 ? void 0 : product.__typename) === 'FontCollection' || (product === null || product === void 0 ? void 0 : product.__typename) === 'FontPack') {
     fontStyle = product.featureStyle;
   }
   if (!fontStyle) return null;

package/dist/components/ConfigContext.d.ts

@@ -28,8 +28,13 @@ interface PreviewConfig {
     revalidateEndpoint?: string;
     clientSide?: boolean;
 }
+export type TestFontsFamilySelection = 'all' | 'choice';
+interface TestFontsConfig {
+    familySelection?: TestFontsFamilySelection;
+}
 export interface Config {
     form?: FormConfig;
+    testFonts?: TestFontsConfig;
     storeModal?: StoreModalConfig;
     typeTester?: TypeTesterConfig;
     stripe?: StripeConfig;
@@ -94,6 +99,9 @@ export declare const makeConfig: (config?: Config) => {
     form: {
         checkboxStyle: "check" | "cross";
     };
+    testFonts: {
+        familySelection: TestFontsFamilySelection | undefined;
+    };
     storeModal: {
         indexLayout: "styled-aa" | "styled-font-names";
         indexExcludeTags: string[] | undefined;
@@ -172,6 +180,9 @@ declare const _default: React.Context<{
     form: {
         checkboxStyle: "check" | "cross";
     };
+    testFonts: {
+        familySelection: TestFontsFamilySelection | undefined;
+    };
     storeModal: {
         indexLayout: "styled-aa" | "styled-font-names";
         indexExcludeTags: string[] | undefined;

package/dist/components/ConfigContext.js

@@ -88,12 +88,18 @@ export const mergeConfig = (base, override) => {
   return deepMerge(base, override);
 };
 export const makeConfig = config => {
-  var _config$form, _config$storeModal, _config$storeModal2, _config$storeModal3, _config$storeModal4, _config$stripe, _config$tracking, _config$tracking2, _config$tracking3, _config$tracking4, _config$preview, _config$preview2, _config$preview3;
+  var _config$form, _config$testFonts, _config$storeModal, _config$storeModal2, _config$storeModal3, _config$storeModal4, _config$stripe, _config$tracking, _config$tracking2, _config$tracking3, _config$tracking4, _config$preview, _config$preview2, _config$preview3;
   return {
     typeTester: makeTypeTesterConfig(config === null || config === void 0 ? void 0 : config.typeTester),
     form: {
       checkboxStyle: (config === null || config === void 0 ? void 0 : (_config$form = config.form) === null || _config$form === void 0 ? void 0 : _config$form.checkboxStyle) ?? 'check'
     },
+    testFonts: {
+      // Deliberately no default: the form falls back to the dashboard setting
+      // it reads in its own query (the npm path never merges server config
+      // into `children`'s context – see ServerConfigProvider).
+      familySelection: config === null || config === void 0 ? void 0 : (_config$testFonts = config.testFonts) === null || _config$testFonts === void 0 ? void 0 : _config$testFonts.familySelection
+    },
     storeModal: {
       indexLayout: (config === null || config === void 0 ? void 0 : (_config$storeModal = config.storeModal) === null || _config$storeModal === void 0 ? void 0 : _config$storeModal.indexLayout) ?? 'styled-aa',
       indexExcludeTags: config === null || config === void 0 ? void 0 : (_config$storeModal2 = config.storeModal) === null || _config$storeModal2 === void 0 ? void 0 : _config$storeModal2.indexExcludeTags,

package/dist/components/NodePasswordForm/NodePasswordFormElement.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { NodePasswordForm_props } from './index.js';
-export default function NodePasswordFormElement({ collectionId, collectionSlug, ...rest }: NodePasswordForm_props): React.JSX.Element;
+export default function NodePasswordFormElement(props: NodePasswordForm_props): React.JSX.Element;

package/dist/components/NodePasswordForm/NodePasswordFormElement.js

@@ -1,6 +1,7 @@
 'use client';
 
 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); }
+import _NodePasswordFormElementPackSlugQuery from "../../__generated__/NodePasswordFormElementPackSlugQuery.graphql.js";
 import _NodePasswordFormElementSlugQuery from "../../__generated__/NodePasswordFormElementSlugQuery.graphql.js";
 import _NodePasswordFormElementIDQuery from "../../__generated__/NodePasswordFormElementIDQuery.graphql.js";
 import React from 'react';
@@ -8,25 +9,25 @@ import { graphql, useLazyLoadQuery } from 'react-relay';
 import NodePasswordForm from './index.js';
 // Auto-detecting wrapper behind the <fontdue-node-password-form> custom element.
 // Unlike the presentational React component (the default export of ./index, used
-// when the server has already detected the lock), this queries the collection
-// itself and renders the form only when access is denied — so it works dropped
-// onto any page, hiding itself for a visitor who already has access.
+// when the server has already detected the lock), this queries the product itself
+// – a collection or a font pack – and renders the form only when access is
+// denied, so it works dropped onto any page, hiding itself for a visitor who
+// already has access.
 
-const idQuery = (_NodePasswordFormElementIDQuery.hash && _NodePasswordFormElementIDQuery.hash !== "213a61ae079e4f57b7b197b0d2f5256a" && console.error("The definition of 'NodePasswordFormElementIDQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NodePasswordFormElementIDQuery);
+// `node(id:)` resolves a collection and a pack alike, so one query serves both.
+const idQuery = (_NodePasswordFormElementIDQuery.hash && _NodePasswordFormElementIDQuery.hash !== "fa35f237c6ea919a7afbe22c86ca19b5" && console.error("The definition of 'NodePasswordFormElementIDQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NodePasswordFormElementIDQuery);
 function NodePasswordFormIDQueryRenderer(_ref) {
   let {
-    collectionId,
-    ...rest
+    nodeId,
+    ...props
   } = _ref;
   const data = useLazyLoadQuery(idQuery, {
-    collectionId
+    nodeId
   });
   // The @catch directive surfaces the password-protection error as ok:false; the
   // node is only locked then, so only then do we render the form (we don't want
   // to show it to a visitor who already has access).
-  if (data.collection.ok === false) return /*#__PURE__*/React.createElement(NodePasswordForm, _extends({}, rest, {
-    collectionId: collectionId
-  }));
+  if (data.node.ok === false) return /*#__PURE__*/React.createElement(NodePasswordForm, props);
   return null;
 }
 const slugQuery = (_NodePasswordFormElementSlugQuery.hash && _NodePasswordFormElementSlugQuery.hash !== "200a33ca6a1f9e4e7e95b7100bbdd261" && console.error("The definition of 'NodePasswordFormElementSlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NodePasswordFormElementSlugQuery);
@@ -34,32 +35,55 @@ function NodePasswordFormSlugQueryRenderer(_ref2) {
   var _data$viewer$slug;
   let {
     collectionSlug,
-    ...rest
+    ...props
   } = _ref2;
   const data = useLazyLoadQuery(slugQuery, {
     collectionSlug
   });
   // see note in NodePasswordFormIDQueryRenderer
-  if (((_data$viewer$slug = data.viewer.slug) === null || _data$viewer$slug === void 0 ? void 0 : _data$viewer$slug.collection.ok) === false) return /*#__PURE__*/React.createElement(NodePasswordForm, _extends({}, rest, {
+  if (((_data$viewer$slug = data.viewer.slug) === null || _data$viewer$slug === void 0 ? void 0 : _data$viewer$slug.collection.ok) === false) return /*#__PURE__*/React.createElement(NodePasswordForm, _extends({}, props, {
     collectionSlug: collectionSlug
   }));
   return null;
 }
-export default function NodePasswordFormElement(_ref3) {
+const packSlugQuery = (_NodePasswordFormElementPackSlugQuery.hash && _NodePasswordFormElementPackSlugQuery.hash !== "3186720cb9ad751d233e995a102efcd1" && console.error("The definition of 'NodePasswordFormElementPackSlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NodePasswordFormElementPackSlugQuery);
+function NodePasswordFormPackSlugQueryRenderer(_ref3) {
+  var _data$viewer$slug2;
   let {
+    fontPackSlug,
+    ...props
+  } = _ref3;
+  const data = useLazyLoadQuery(packSlugQuery, {
+    fontPackSlug
+  });
+  // see note in NodePasswordFormIDQueryRenderer
+  if (((_data$viewer$slug2 = data.viewer.slug) === null || _data$viewer$slug2 === void 0 ? void 0 : _data$viewer$slug2.pack.ok) === false) return /*#__PURE__*/React.createElement(NodePasswordForm, _extends({}, props, {
+    fontPackSlug: fontPackSlug
+  }));
+  return null;
+}
+export default function NodePasswordFormElement(props) {
+  const {
     collectionId,
     collectionSlug,
-    ...rest
-  } = _ref3;
-  if (collectionId) {
+    fontPackId,
+    fontPackSlug
+  } = props;
+  const nodeId = collectionId || fontPackId;
+  if (nodeId) {
     return /*#__PURE__*/React.createElement(NodePasswordFormIDQueryRenderer, _extends({
-      collectionId: collectionId
-    }, rest));
+      nodeId: nodeId
+    }, props));
   }
   if (collectionSlug) {
-    return /*#__PURE__*/React.createElement(NodePasswordFormSlugQueryRenderer, _extends({
+    return /*#__PURE__*/React.createElement(NodePasswordFormSlugQueryRenderer, _extends({}, props, {
       collectionSlug: collectionSlug
-    }, rest));
+    }));
+  }
+  if (fontPackSlug) {
+    return /*#__PURE__*/React.createElement(NodePasswordFormPackSlugQueryRenderer, _extends({}, props, {
+      fontPackSlug: fontPackSlug
+    }));
   }
-  throw new Error('NodePasswordForm expected either a collectionId or collectionSlug prop');
+  throw new Error('NodePasswordForm expected a collectionId, collectionSlug, fontPackId or fontPackSlug prop');
 }

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

@@ -2,6 +2,9 @@ import React from 'react';
 export interface NodePasswordForm_props {
     collectionId?: string | null;
     collectionSlug?: string | null;
+    /** A font pack's identifiers, in place of the collection ones. */
+    fontPackId?: string | null;
+    fontPackSlug?: string | null;
     /**
      * Path of the storefront's unlock route (see fontdue-js/next/unlock), e.g.
      * "/api/unlock". On a successful unlock the form POSTs `{ token }` there
@@ -15,10 +18,10 @@ export interface NodePasswordForm_props {
     unlockEndpoint?: string | null;
 }
 /**
- * Password form for a collection you already know is locked. Render it when a
- * collection comes back password-protected (see the per-framework guides): it
- * commits the `accessNode` mutation, remembers the returned access token, and
- * reloads so the now-unlocked collection renders.
+ * Password form for a collection or font pack you already know is locked.
+ * Render it when the product comes back password-protected (see the
+ * per-framework guides): it commits the `accessNode` mutation, remembers the
+ * returned access token, and reloads so the now-unlocked product renders.
  *
  * Unlike the `<fontdue-node-password-form>` custom element (which detects the
  * locked state itself), this does no data fetching of its own, so it renders

package/dist/components/NodePasswordForm/index.js

@@ -8,10 +8,10 @@ import { EnsureFontdueContext } from '../FontdueContextProvider/index.js';
 import { rememberNodeAccessToken } from '../../nodeAccess.js';
 const accessNodeMutation = (_NodePasswordFormAccessNodeMutation.hash && _NodePasswordFormAccessNodeMutation.hash !== "eb0d3828d65a52c727ef60caa67709a1" && console.error("The definition of 'NodePasswordFormAccessNodeMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NodePasswordFormAccessNodeMutation);
 /**
- * Password form for a collection you already know is locked. Render it when a
- * collection comes back password-protected (see the per-framework guides): it
- * commits the `accessNode` mutation, remembers the returned access token, and
- * reloads so the now-unlocked collection renders.
+ * Password form for a collection or font pack you already know is locked.
+ * Render it when the product comes back password-protected (see the
+ * per-framework guides): it commits the `accessNode` mutation, remembers the
+ * returned access token, and reloads so the now-unlocked product renders.
  *
  * Unlike the `<fontdue-node-password-form>` custom element (which detects the
  * locked state itself), this does no data fetching of its own, so it renders
@@ -65,8 +65,8 @@ function NodePasswordFormFields(props) {
       variables: {
         input: {
           password,
-          id: props.collectionId,
-          slug: props.collectionSlug
+          id: props.collectionId || props.fontPackId || undefined,
+          slug: props.collectionSlug || props.fontPackSlug || undefined
         }
       },
       onCompleted: res => {