fontdue-js 3.7.0 → 3.8.0

package/dist/__tests__/storeModalPackUnlisted.test.js

@@ -0,0 +1,112 @@
+// @vitest-environment happy-dom
+
+// A pack page renders a block per member. An unlisted collection has no block
+// anywhere in the Store Modal (FD-1239), so the pack page leaves it out too –
+// the pack still grants it, and the pack button still sells it.
+
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const {
+  stateRef
+} = vi.hoisted(() => ({
+  stateRef: {
+    current: null
+  }
+}));
+
+// The fragment reader hands back the data it was given; the redux selector
+// runs against a default store's state.
+vi.mock('react-relay', () => ({
+  graphql: () => null,
+  fetchQuery: vi.fn(),
+  useFragment: (_fragment, key) => key
+}));
+vi.mock('react-redux', async importOriginal => ({
+  ...(await importOriginal()),
+  useSelector: selector => selector(stateRef.current)
+}));
+import StoreModalPack from '../components/StoreModal/StoreModalPack.js';
+import { createDefaultStore } from '../reducer.js';
+const money = amount => ({
+  amount,
+  currency: 'USD'
+});
+const style = name => ({
+  id: `style:${name}`,
+  name: 'Regular',
+  supportedLanguages: ['en'],
+  variableInstances: [],
+  sku: {
+    id: `sku:style:${name}`,
+    price: money(4000)
+  },
+  cssFamily: name,
+  cssWeight: '400',
+  cssStretch: 'normal',
+  cssStyle: 'normal'
+});
+const family = function (name, visibility) {
+  let children = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  return {
+    __typename: 'FontCollection',
+    id: `collection:${name}`,
+    name,
+    visibility,
+    collectionType: 'family',
+    isVariableFont: false,
+    sku: {
+      id: `sku:${name}`,
+      price: money(20000)
+    },
+    totalStyles: 1,
+    totalStylesPrice: money(4000),
+    featureStyle: null,
+    bundles: [],
+    fontStyles: [style(name)],
+    children
+  };
+};
+const styleMember = (familyName, visibility) => ({
+  __typename: 'FontStyle',
+  ...style(familyName),
+  family: {
+    id: `collection:${familyName}`,
+    name: familyName,
+    isVariableFont: false,
+    visibility
+  }
+});
+const pack = {
+  name: 'Anniversary pack',
+  sku: {
+    id: 'sku:pack',
+    price: money(30000)
+  },
+  featureStyle: null,
+  totalStyles: 6,
+  totalStylesPrice: money(60000),
+  members: [family('Alpha', 'VISIBLE', [family('Bravo', 'VISIBLE'), family('Charlie', 'UNLISTED')]), family('Delta', 'UNLISTED'), styleMember('Echo', 'VISIBLE'), styleMember('Foxtrot', 'UNLISTED')]
+};
+describe('StoreModalPack member blocks', () => {
+  beforeEach(() => {
+    stateRef.current = createDefaultStore(undefined).getState();
+  });
+  const markup = () => renderToStaticMarkup( /*#__PURE__*/React.createElement(StoreModalPack, {
+    pack: pack,
+    onSelect: () => {}
+  }));
+  it('renders a block for each visible member and child family', () => {
+    expect(markup()).toContain('Alpha');
+    expect(markup()).toContain('Bravo');
+    expect(markup()).toContain('Echo');
+  });
+  it('leaves out an unlisted member, an unlisted child and an unlisted style member', () => {
+    expect(markup()).not.toContain('Charlie');
+    expect(markup()).not.toContain('Delta');
+    expect(markup()).not.toContain('Foxtrot');
+  });
+  it('still sells the pack as a whole', () => {
+    expect(markup()).toContain('Anniversary pack');
+  });
+});

package/dist/__tests__/storeModalRoutes.test.js

@@ -69,6 +69,15 @@ describe('storeModalUrlActions', () => {
   it('opens the modal on its default route for ?store=open', () => {
     expect(storeModalUrlActions('?store=open', config(['unlisted']))).toEqual([OPEN]);
   });
+  it('opens the modal on the browse page for ?store=index', () => {
+    expect(storeModalUrlActions('?store=index', config(['unlisted']))).toEqual([{
+      type: 'STORE_MODAL_REPLACE',
+      route: 'index',
+      variables: {
+        excludeTags: ['unlisted']
+      }
+    }, OPEN]);
+  });
   it('opens the modal on a product for ?store=product/<id>', () => {
     expect(storeModalUrlActions(`?store=product/${PRODUCT_ID}`, config())).toEqual([{
       type: 'STORE_MODAL_REPLACE',

package/dist/components/AddToCartBanner/index.js

@@ -21,7 +21,7 @@ const getOrderItemName = item => {
   if ('name' in product) return product.name;
   return null;
 };
-_AddToCartBanner_item.hash && _AddToCartBanner_item.hash !== "93905c08206c30255368dbb06f59ccec" && console.error("The definition of 'AddToCartBanner_item' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _AddToCartBanner_item;
+_AddToCartBanner_item.hash && _AddToCartBanner_item.hash !== "5b6c677fd518073e74b1651f3b872e8a" && console.error("The definition of 'AddToCartBanner_item' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _AddToCartBanner_item;
 function AddToCartBanner(_ref) {
   var _order$orderItems, _order$orderItems2;
   let {

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

@@ -1,19 +1,35 @@
 import React from 'react';
 import { BuyButtonIDQuery } from '../../__generated__/BuyButtonIDQuery.graphql.js';
 import { BuyButtonSlugQuery } from '../../__generated__/BuyButtonSlugQuery.graphql.js';
+import { BuyButtonPackIDQuery } from '../../__generated__/BuyButtonPackIDQuery.graphql.js';
+import { BuyButtonPackSlugQuery } from '../../__generated__/BuyButtonPackSlugQuery.graphql.js';
 import { SerializablePreloadedQuery, type LoadQueryOptions } from '../../relay/loadSerializableQuery.js';
 import { Config } from '../ConfigContext.js';
 export interface BuyButton_props {
     collectionName?: string;
     label?: string;
 }
-export type BuyButtonPreloadedQuery = SerializablePreloadedQuery<BuyButtonIDQuery> | SerializablePreloadedQuery<BuyButtonSlugQuery>;
+export type BuyButtonPreloadedQuery = SerializablePreloadedQuery<BuyButtonIDQuery> | SerializablePreloadedQuery<BuyButtonSlugQuery> | SerializablePreloadedQuery<BuyButtonPackIDQuery> | SerializablePreloadedQuery<BuyButtonPackSlugQuery>;
 export type LoadBuyButtonQueryVariables = {
     collectionId: string;
     collectionSlug?: never;
+    fontPackId?: never;
+    fontPackSlug?: never;
 } | {
     collectionId?: never;
     collectionSlug: string;
+    fontPackId?: never;
+    fontPackSlug?: never;
+} | {
+    collectionId?: never;
+    collectionSlug?: never;
+    fontPackId: string;
+    fontPackSlug?: never;
+} | {
+    collectionId?: never;
+    collectionSlug?: never;
+    fontPackId?: never;
+    fontPackSlug: string;
 };
 export declare function loadBuyButtonQuery(variables: LoadBuyButtonQueryVariables, options?: LoadQueryOptions): Promise<BuyButtonPreloadedQuery>;
 export declare function BuyButtonPreloadedIDQueryRenderer({ preloadedQuery, ...rest }: BuyButton_props & {
@@ -22,19 +38,23 @@ export declare function BuyButtonPreloadedIDQueryRenderer({ preloadedQuery, ...r
 export declare function BuyButtonPreloadedSlugQueryRenderer({ preloadedQuery, ...rest }: BuyButton_props & {
     preloadedQuery: SerializablePreloadedQuery<BuyButtonSlugQuery>;
 }): React.JSX.Element;
+export declare function BuyButtonPreloadedPackIDQueryRenderer({ preloadedQuery, ...rest }: BuyButton_props & {
+    preloadedQuery: SerializablePreloadedQuery<BuyButtonPackIDQuery>;
+}): React.JSX.Element;
+export declare function BuyButtonPreloadedPackSlugQueryRenderer({ preloadedQuery, ...rest }: BuyButton_props & {
+    preloadedQuery: SerializablePreloadedQuery<BuyButtonPackSlugQuery>;
+}): React.JSX.Element;
+type BuyButton_lazyProps = LoadBuyButtonQueryVariables;
 export type BuyButton_unifiedProps = BuyButton_props & {
     config?: Config;
 } & ({
     preloadedQuery: BuyButtonPreloadedQuery;
     collectionId?: never;
     collectionSlug?: never;
-} | {
+    fontPackId?: never;
+    fontPackSlug?: never;
+} | ({
     preloadedQuery?: never;
-    collectionId: string;
-    collectionSlug?: never;
-} | {
-    preloadedQuery?: never;
-    collectionId?: never;
-    collectionSlug: string;
-});
+} & BuyButton_lazyProps));
 export default function BuyButton(props: BuyButton_unifiedProps): React.JSX.Element;
+export {};

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/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;