fontdue-js 2.19.1 → 2.20.0

package/dist/__tests__/collectionBundleSelection.test.js

@@ -14,7 +14,6 @@ _vitest.vi.mock('react-relay', () => ({
 function makeState() {
   let overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return {
-    stylesheets: [],
     cartOpen: false,
     precartOpen: false,
     selectedSkuIds: {},
@@ -910,6 +909,86 @@ function makeThunderState() {
     });
     (0, _vitest.expect)(newState.selectedSkuIds['text-bundle-sku']).toBe(false);
   });
+  (0, _vitest.it)('deselecting a family bundle deselects the parent collection bundle (transitive)', () => {
+    // Collection bundle is selected. A family bundle (style package) within
+    // it is shown as selected via transitive isSelected. Clicking to deselect
+    // it should find and deselect the collection bundle.
+    const state = makeState({
+      selectedSkuIds: {
+        'coll-bundle-sku': true,
+        'family-sku': false,
+        'var-sku': false,
+        'pkg-upright-sku': false,
+        'pkg-italic-sku': false,
+        s1: false,
+        s2: false,
+        si1: false,
+        si2: false,
+        vs1: false
+      },
+      collectionStyleSkus: {
+        'coll-bundle-sku': {
+          fontStyleSkuIds: ['s1', 's2', 'si1', 'si2', 'vs1'],
+          fontStyleIds: ['f1', 'f2', 'fi1', 'fi2', 'vf1'],
+          childrenSkuIds: ['family-sku', 'var-sku'],
+          name: 'Text + Variable'
+        },
+        'family-sku': {
+          fontStyleSkuIds: ['s1', 's2', 'si1', 'si2'],
+          fontStyleIds: ['f1', 'f2', 'fi1', 'fi2'],
+          childrenSkuIds: ['pkg-upright-sku', 'pkg-italic-sku'],
+          name: 'Text Family'
+        },
+        'var-sku': {
+          fontStyleSkuIds: ['vs1'],
+          fontStyleIds: ['vf1'],
+          childrenSkuIds: [],
+          name: 'Variable'
+        },
+        'pkg-upright-sku': {
+          fontStyleSkuIds: ['s1', 's2'],
+          fontStyleIds: ['f1', 'f2'],
+          childrenSkuIds: [],
+          name: 'Package Text'
+        },
+        'pkg-italic-sku': {
+          fontStyleSkuIds: ['si1', 'si2'],
+          fontStyleIds: ['fi1', 'fi2'],
+          childrenSkuIds: [],
+          name: 'Package Italic'
+        }
+      },
+      skuPrices: {
+        'coll-bundle-sku': 500,
+        'family-sku': 500,
+        'var-sku': 300,
+        'pkg-upright-sku': 250,
+        'pkg-italic-sku': 250,
+        s1: 100,
+        s2: 100,
+        si1: 100,
+        si2: 100,
+        vs1: 100
+      }
+    });
+
+    // Bundle shows as selected via transitive isSelected
+    (0, _vitest.expect)((0, _utils.isSelected)('pkg-upright-sku')(state)).toBe(true);
+
+    // Click to deselect the bundle
+    const newState = (0, _reducer.default)(state, {
+      type: 'SELECT_SKU_ID',
+      skuId: 'pkg-upright-sku',
+      selected: false
+    });
+
+    // Collection bundle should be deselected
+    (0, _vitest.expect)(newState.selectedSkuIds['coll-bundle-sku']).toBe(false);
+    // Nothing should be selected anymore
+    (0, _vitest.expect)((0, _utils.isSelected)('pkg-upright-sku')(newState)).toBe(false);
+    (0, _vitest.expect)((0, _utils.isSelected)('family-sku')(newState)).toBe(false);
+    (0, _vitest.expect)((0, _utils.isSelected)('s1')(newState)).toBe(false);
+  });
   (0, _vitest.it)('deselecting a bundle does not affect other bundles', () => {
     const state = makeThunderState({
       selectedSkuIds: {
@@ -1178,4 +1257,377 @@ function makeThunderState() {
     });
     (0, _vitest.expect)(Object.keys(newState.selectedSkuIds)).toHaveLength(0);
   });
+});
+
+// =========================================================================
+// isSelected — family bundles (style packages within a family)
+// =========================================================================
+(0, _vitest.describe)('isSelected with family bundles (style packages)', () => {
+  // Helper: a family with two style bundles (upright + italic packages)
+  function makeFamilyWithBundlesState() {
+    let overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return makeState({
+      collectionStyleSkus: {
+        'family-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5', 'si1', 'si2', 'si3', 'si4', 'si5'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5', 'fi1', 'fi2', 'fi3', 'fi4', 'fi5'],
+          childrenSkuIds: ['pkg-upright-sku', 'pkg-italic-sku'],
+          name: 'Thunder Text Family'
+        },
+        'pkg-upright-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5'],
+          childrenSkuIds: [],
+          name: 'Package Text'
+        },
+        'pkg-italic-sku': {
+          fontStyleSkuIds: ['si1', 'si2', 'si3', 'si4', 'si5'],
+          fontStyleIds: ['fi1', 'fi2', 'fi3', 'fi4', 'fi5'],
+          childrenSkuIds: [],
+          name: 'Package Text Italic'
+        }
+      },
+      skuPrices: {
+        'family-sku': 500,
+        'pkg-upright-sku': 250,
+        'pkg-italic-sku': 250,
+        s1: 100,
+        s2: 100,
+        s3: 100,
+        s4: 100,
+        s5: 100,
+        si1: 100,
+        si2: 100,
+        si3: 100,
+        si4: 100,
+        si5: 100
+      },
+      ...overrides
+    });
+  }
+  (0, _vitest.it)('bundles show selected when family is directly selected', () => {
+    const state = makeFamilyWithBundlesState({
+      selectedSkuIds: {
+        'family-sku': true,
+        'pkg-upright-sku': false,
+        'pkg-italic-sku': false,
+        s1: false,
+        s2: false,
+        s3: false,
+        s4: false,
+        s5: false,
+        si1: false,
+        si2: false,
+        si3: false,
+        si4: false,
+        si5: false
+      }
+    });
+    (0, _vitest.expect)((0, _utils.isSelected)('pkg-upright-sku')(state)).toBe(true);
+    (0, _vitest.expect)((0, _utils.isSelected)('pkg-italic-sku')(state)).toBe(true);
+    (0, _vitest.expect)((0, _utils.isSelected)('s1')(state)).toBe(true);
+    (0, _vitest.expect)((0, _utils.isSelected)('si1')(state)).toBe(true);
+  });
+  (0, _vitest.it)('bundles show selected when collection bundle is selected (transitive)', () => {
+    // Collection bundle is selected → family is false → family bundles should
+    // still show selected because the collection bundle covers all styles
+    const state = makeFamilyWithBundlesState({
+      collectionStyleSkus: {
+        // Collection bundle: groups family + variable family
+        'coll-bundle-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5', 'si1', 'si2', 'si3', 'si4', 'si5', 'vs1'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5', 'fi1', 'fi2', 'fi3', 'fi4', 'fi5', 'vf1'],
+          childrenSkuIds: ['family-sku', 'var-sku'],
+          name: 'Thunder Text + Variable'
+        },
+        'family-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5', 'si1', 'si2', 'si3', 'si4', 'si5'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5', 'fi1', 'fi2', 'fi3', 'fi4', 'fi5'],
+          childrenSkuIds: ['pkg-upright-sku', 'pkg-italic-sku'],
+          name: 'Thunder Text Family'
+        },
+        'var-sku': {
+          fontStyleSkuIds: ['vs1'],
+          fontStyleIds: ['vf1'],
+          childrenSkuIds: [],
+          name: 'Thunder Text Variable'
+        },
+        'pkg-upright-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5'],
+          childrenSkuIds: [],
+          name: 'Package Text'
+        },
+        'pkg-italic-sku': {
+          fontStyleSkuIds: ['si1', 'si2', 'si3', 'si4', 'si5'],
+          fontStyleIds: ['fi1', 'fi2', 'fi3', 'fi4', 'fi5'],
+          childrenSkuIds: [],
+          name: 'Package Text Italic'
+        }
+      },
+      selectedSkuIds: {
+        'coll-bundle-sku': true,
+        'family-sku': false,
+        'var-sku': false,
+        'pkg-upright-sku': false,
+        'pkg-italic-sku': false,
+        s1: false,
+        s2: false,
+        s3: false,
+        s4: false,
+        s5: false,
+        si1: false,
+        si2: false,
+        si3: false,
+        si4: false,
+        si5: false,
+        vs1: false
+      }
+    });
+
+    // Family shows selected (direct child of collection bundle)
+    (0, _vitest.expect)((0, _utils.isSelected)('family-sku')(state)).toBe(true);
+    // Bundles should show selected (grandchildren — family is child of
+    // collection bundle, bundles are children of family)
+    (0, _vitest.expect)((0, _utils.isSelected)('pkg-upright-sku')(state)).toBe(true);
+    (0, _vitest.expect)((0, _utils.isSelected)('pkg-italic-sku')(state)).toBe(true);
+    // Individual styles should also show selected
+    (0, _vitest.expect)((0, _utils.isSelected)('s1')(state)).toBe(true);
+  });
+  (0, _vitest.it)('selecting one bundle then another upgrades to family via reducer', () => {
+    const state = makeFamilyWithBundlesState();
+
+    // Select first bundle
+    let newState = (0, _reducer.default)(state, {
+      type: 'SELECT_SKU_ID',
+      skuId: 'pkg-upright-sku',
+      selected: true
+    });
+    (0, _vitest.expect)(newState.selectedSkuIds['pkg-upright-sku']).toBe(true);
+
+    // Select second bundle — should upgrade to family
+    newState = (0, _reducer.default)(newState, {
+      type: 'SELECT_SKU_ID',
+      skuId: 'pkg-italic-sku',
+      selected: true
+    });
+
+    // Family should be selected since family ($500) = two bundles ($250+$250)
+    (0, _vitest.expect)(newState.selectedSkuIds['family-sku']).toBe(true);
+    // Both bundles should report as selected
+    (0, _vitest.expect)((0, _utils.isSelected)('pkg-upright-sku')(newState)).toBe(true);
+    (0, _vitest.expect)((0, _utils.isSelected)('pkg-italic-sku')(newState)).toBe(true);
+  });
+  (0, _vitest.it)('auto-upgrades transitively: bundle → family → collection bundle', () => {
+    // When a collection bundle exists at the same price as the family,
+    // selecting both bundles should upgrade all the way to the collection
+    // bundle (not stop at the family)
+    const state = makeFamilyWithBundlesState({
+      collectionStyleSkus: {
+        'coll-bundle-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5', 'si1', 'si2', 'si3', 'si4', 'si5', 'vs1'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5', 'fi1', 'fi2', 'fi3', 'fi4', 'fi5', 'vf1'],
+          childrenSkuIds: ['family-sku', 'var-sku'],
+          name: 'Thunder Text + Variable'
+        },
+        'family-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5', 'si1', 'si2', 'si3', 'si4', 'si5'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5', 'fi1', 'fi2', 'fi3', 'fi4', 'fi5'],
+          childrenSkuIds: ['pkg-upright-sku', 'pkg-italic-sku'],
+          name: 'Thunder Text Family'
+        },
+        'var-sku': {
+          fontStyleSkuIds: ['vs1'],
+          fontStyleIds: ['vf1'],
+          childrenSkuIds: [],
+          name: 'Thunder Text Variable'
+        },
+        'pkg-upright-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5'],
+          childrenSkuIds: [],
+          name: 'Package Text'
+        },
+        'pkg-italic-sku': {
+          fontStyleSkuIds: ['si1', 'si2', 'si3', 'si4', 'si5'],
+          fontStyleIds: ['fi1', 'fi2', 'fi3', 'fi4', 'fi5'],
+          childrenSkuIds: [],
+          name: 'Package Text Italic'
+        }
+      },
+      skuPrices: {
+        'coll-bundle-sku': 500,
+        'family-sku': 500,
+        'var-sku': 300,
+        'pkg-upright-sku': 250,
+        'pkg-italic-sku': 250,
+        s1: 100,
+        s2: 100,
+        s3: 100,
+        s4: 100,
+        s5: 100,
+        si1: 100,
+        si2: 100,
+        si3: 100,
+        si4: 100,
+        si5: 100,
+        vs1: 100
+      },
+      selectedSkuIds: {
+        'pkg-upright-sku': true
+      }
+    });
+    const newState = (0, _reducer.default)(state, {
+      type: 'SELECT_SKU_ID',
+      skuId: 'pkg-italic-sku',
+      selected: true
+    });
+
+    // Should transitively upgrade: bundle → family → collection bundle
+    (0, _vitest.expect)(newState.selectedSkuIds['coll-bundle-sku']).toBe(true);
+    (0, _vitest.expect)(newState.selectedSkuIds['family-sku']).toBe(false);
+    (0, _vitest.expect)(newState.selectedSkuIds['pkg-upright-sku']).toBe(false);
+    (0, _vitest.expect)(newState.selectedSkuIds['pkg-italic-sku']).toBe(false);
+
+    // All items should report as selected via isSelected
+    (0, _vitest.expect)((0, _utils.isSelected)('family-sku')(newState)).toBe(true);
+    (0, _vitest.expect)((0, _utils.isSelected)('pkg-upright-sku')(newState)).toBe(true);
+    (0, _vitest.expect)((0, _utils.isSelected)('pkg-italic-sku')(newState)).toBe(true);
+    (0, _vitest.expect)((0, _utils.isSelected)('s1')(newState)).toBe(true);
+    (0, _vitest.expect)((0, _utils.isSelected)('vs1')(newState)).toBe(true);
+  });
+  (0, _vitest.it)('prefers collection bundle over family when family has duplicate fontStyleSkuIds from bundles', () => {
+    // In production data, flattenSkuData produces a family entry whose
+    // fontStyleSkuIds includes BOTH the family's own styles AND the
+    // overlapping styles from its child bundles, creating duplicates.
+    // The tie-breaker must use non-self preference (not raw array length)
+    // to avoid the family's inflated count beating the collection bundle.
+    const state = makeState({
+      collectionStyleSkus: {
+        'family-sku': {
+          // 10 unique styles, but listed 20 times (family's own + bundle overlap)
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5', 'si1', 'si2', 'si3', 'si4', 'si5', 's1', 's2', 's3', 's4', 's5', 'si1', 'si2', 'si3', 'si4', 'si5'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5', 'fi1', 'fi2', 'fi3', 'fi4', 'fi5'],
+          childrenSkuIds: ['pkg-upright-sku', 'pkg-italic-sku'],
+          name: 'Thunder Caption Family'
+        },
+        'coll-bundle-sku': {
+          // 12 unique styles (family 10 + variable 2)
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5', 'si1', 'si2', 'si3', 'si4', 'si5', 'vs1', 'vs2'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5', 'fi1', 'fi2', 'fi3', 'fi4', 'fi5', 'vf1', 'vf2'],
+          childrenSkuIds: ['family-sku', 'var-sku'],
+          name: 'Thunder Caption Family + Variable'
+        },
+        'var-sku': {
+          fontStyleSkuIds: ['vs1', 'vs2'],
+          fontStyleIds: ['vf1', 'vf2'],
+          childrenSkuIds: [],
+          name: 'Thunder Caption Variable'
+        },
+        'pkg-upright-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5'],
+          childrenSkuIds: [],
+          name: 'Package Caption'
+        },
+        'pkg-italic-sku': {
+          fontStyleSkuIds: ['si1', 'si2', 'si3', 'si4', 'si5'],
+          fontStyleIds: ['fi1', 'fi2', 'fi3', 'fi4', 'fi5'],
+          childrenSkuIds: [],
+          name: 'Package Caption Italic'
+        }
+      },
+      skuPrices: {
+        'family-sku': 500,
+        'coll-bundle-sku': 500,
+        'var-sku': 500,
+        'pkg-upright-sku': 300,
+        'pkg-italic-sku': 300,
+        s1: 100,
+        s2: 100,
+        s3: 100,
+        s4: 100,
+        s5: 100,
+        si1: 100,
+        si2: 100,
+        si3: 100,
+        si4: 100,
+        si5: 100,
+        vs1: 100,
+        vs2: 100
+      }
+    });
+
+    // family-sku fontStyleSkuIds.length is 20 (duplicates), coll-bundle is 12.
+    // A naive .length comparison would pick the family. The non-self
+    // preference must win so the collection bundle is auto-selected.
+    const [collId] = (0, _reducer.collectionSkuIdWithDiscount)(state, 'family-sku');
+    (0, _vitest.expect)(collId).toBe('coll-bundle-sku');
+  });
+  (0, _vitest.it)('transitive upgrade prefers the collection with the most font styles', () => {
+    // When two collections have the same price difference, prefer the one
+    // covering more font styles
+    const state = makeFamilyWithBundlesState({
+      collectionStyleSkus: {
+        'small-bundle-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5', 'si1', 'si2', 'si3', 'si4', 'si5'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5', 'fi1', 'fi2', 'fi3', 'fi4', 'fi5'],
+          childrenSkuIds: ['family-sku'],
+          name: 'Small Bundle'
+        },
+        'big-bundle-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5', 'si1', 'si2', 'si3', 'si4', 'si5', 'vs1'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5', 'fi1', 'fi2', 'fi3', 'fi4', 'fi5', 'vf1'],
+          childrenSkuIds: ['family-sku', 'var-sku'],
+          name: 'Big Bundle'
+        },
+        'family-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5', 'si1', 'si2', 'si3', 'si4', 'si5'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5', 'fi1', 'fi2', 'fi3', 'fi4', 'fi5'],
+          childrenSkuIds: ['pkg-upright-sku', 'pkg-italic-sku'],
+          name: 'Thunder Text Family'
+        },
+        'var-sku': {
+          fontStyleSkuIds: ['vs1'],
+          fontStyleIds: ['vf1'],
+          childrenSkuIds: [],
+          name: 'Variable'
+        },
+        'pkg-upright-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5'],
+          childrenSkuIds: [],
+          name: 'Package Text'
+        },
+        'pkg-italic-sku': {
+          fontStyleSkuIds: ['si1', 'si2', 'si3', 'si4', 'si5'],
+          fontStyleIds: ['fi1', 'fi2', 'fi3', 'fi4', 'fi5'],
+          childrenSkuIds: [],
+          name: 'Package Text Italic'
+        }
+      },
+      skuPrices: {
+        'small-bundle-sku': 500,
+        'big-bundle-sku': 500,
+        'family-sku': 500,
+        'var-sku': 300,
+        'pkg-upright-sku': 250,
+        'pkg-italic-sku': 250,
+        s1: 100,
+        s2: 100,
+        s3: 100,
+        s4: 100,
+        s5: 100,
+        si1: 100,
+        si2: 100,
+        si3: 100,
+        si4: 100,
+        si5: 100,
+        vs1: 100
+      }
+    });
+    const [collId] = (0, _reducer.collectionSkuIdWithDiscount)(state, 'family-sku');
+    // Both bundles have the same price, but big-bundle has more styles
+    (0, _vitest.expect)(collId).toBe('big-bundle-sku');
+  });
 });

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

@@ -6,29 +6,23 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = CartItemProduct;
 var _CartItemProduct_product2 = _interopRequireDefault(require("../../../__generated__/CartItemProduct_product.graphql"));
 var _react = _interopRequireDefault(require("react"));
-var _Stylesheet = _interopRequireDefault(require("../../Stylesheet"));
 var _CollectionAa = require("../../CollectionAa");
 var _FontStyle = _interopRequireDefault(require("../../FontStyle"));
 var _reactRelay = require("react-relay");
 var _utils = require("../../../utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function CartItemProduct(_ref) {
-  var _product$family, _product$featureStyle, _product$featureStyle2, _product$name, _product$variableInst;
+  var _product$name, _product$variableInst;
   let {
     product: productKey
   } = _ref;
-  const product = (0, _reactRelay.useFragment)((_CartItemProduct_product2.default.hash && _CartItemProduct_product2.default.hash !== "b28cd421e634ecb1162252d953233456" && 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_product2.default), productKey);
-  let productCss;
-  if ((product === null || product === void 0 ? void 0 : product.__typename) === 'FontStyle') productCss = (_product$family = product.family) === null || _product$family === void 0 ? void 0 : _product$family.cssUrl;
-  if ((product === null || product === void 0 ? void 0 : product.__typename) === 'FontCollection') productCss = (_product$featureStyle = product.featureStyle) === null || _product$featureStyle === void 0 ? void 0 : (_product$featureStyle2 = _product$featureStyle.family) === null || _product$featureStyle2 === void 0 ? void 0 : _product$featureStyle2.cssUrl;
+  const product = (0, _reactRelay.useFragment)((_CartItemProduct_product2.default.hash && _CartItemProduct_product2.default.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_product2.default), 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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "cart-item__aa"
-  }, product ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Stylesheet.default, {
-    href: productCss
-  }), ['FontCollection', 'Bundle', 'CollectionBundle'].indexOf(product.__typename) >= 0 ? /*#__PURE__*/_react.default.createElement(_CollectionAa.CollectionAa, {
+  }, product ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ['FontCollection', 'Bundle', 'CollectionBundle'].indexOf(product.__typename) >= 0 ? /*#__PURE__*/_react.default.createElement(_CollectionAa.CollectionAa, {
     product: product
   }) : /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
     fontStyle: product

package/dist/components/CharacterViewer/index.js

@@ -17,7 +17,6 @@ var _reactRelay = require("react-relay");
 var _resizeObserver = _interopRequireDefault(require("@react-hook/resize-observer"));
 var _utils = require("../../utils");
 var _useFontStyle = _interopRequireDefault(require("../useFontStyle"));
-var _Stylesheet = _interopRequireDefault(require("../Stylesheet"));
 var _useSerializablePreloadedQuery = _interopRequireDefault(require("../../relay/useSerializablePreloadedQuery"));
 var _StyleSelect = _interopRequireDefault(require("./StyleSelect"));
 var _Checkbox = _interopRequireDefault(require("../Checkbox"));
@@ -143,7 +142,7 @@ function flattenCharacterList(charSet, glyphNames) {
     }))
   };
 }
-_CharacterViewer_family2.default.hash && _CharacterViewer_family2.default.hash !== "02c42505dc4e330bb7c9034ba54e12f6" && console.error("The definition of 'CharacterViewer_family' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_family2.default;
+_CharacterViewer_family2.default.hash && _CharacterViewer_family2.default.hash !== "162b1a99fe187b20ee8560018cd5b3ce" && console.error("The definition of 'CharacterViewer_family' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_family2.default;
 function areCombiningChars(input) {
   for (const char of input) {
     const codePoint = char.codePointAt(0);
@@ -171,8 +170,8 @@ function CharacterViewerComponent(_ref3) {
   let {
     collection: collectionKey
   } = _ref3;
-  const collection = (0, _reactRelay.useFragment)((_CharacterViewer_collection2.default.hash && _CharacterViewer_collection2.default.hash !== "806e33bb73206ac443c6880d2941131d" && console.error("The definition of 'CharacterViewer_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_collection2.default), collectionKey);
-  const [fontStyle, refetchFontStyle] = (0, _reactRelay.useRefetchableFragment)((_CharacterViewer_style2.default.hash && _CharacterViewer_style2.default.hash !== "cd4bc4064dd23132ba3bf3d207fe6cb9" && console.error("The definition of 'CharacterViewer_style' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_style2.default), collection.featureStyle);
+  const collection = (0, _reactRelay.useFragment)((_CharacterViewer_collection2.default.hash && _CharacterViewer_collection2.default.hash !== "c2116c3c2c795e5306c3a2a0ecd60137" && console.error("The definition of 'CharacterViewer_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_collection2.default), collectionKey);
+  const [fontStyle, refetchFontStyle] = (0, _reactRelay.useRefetchableFragment)((_CharacterViewer_style2.default.hash && _CharacterViewer_style2.default.hash !== "8cbf3328030930b88b3ec3601aaf7c45" && console.error("The definition of 'CharacterViewer_style' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_style2.default), collection.featureStyle);
   let families = [];
   if (collection.collectionType === 'family') families = [collection];
   if (collection.collectionType === 'superfamily' && collection.children) families = collection.children;
@@ -201,9 +200,7 @@ function CharacterViewerComponent(_ref3) {
   let {
     style
   } = (0, _useFontStyle.default)({
-    fontFamily: `${fontStyle === null || fontStyle === void 0 ? void 0 : fontStyle.cssFamily} ${fontStyle === null || fontStyle === void 0 ? void 0 : fontStyle.name}`,
-    fontWeight: '400',
-    fontStyle: 'normal'
+    fontStyle: fontStyle
   });
   if (variableSettings) {
     style = {
@@ -326,10 +323,7 @@ function CharacterViewerComponent(_ref3) {
       '--line-gap': fontStyle.verticalMetrics.lineGap ?? undefined,
       '--monitor-width': monitorWidth
     }
-  }, families.filter(coll => coll.collectionType === 'family').map(coll => /*#__PURE__*/_react.default.createElement(_Stylesheet.default, {
-    key: coll.id,
-    href: coll.cssUrl
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer__character-map"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer__monitor"

package/dist/components/ConfigContext.d.ts

@@ -8,12 +8,19 @@ interface FormConfig {
 interface StripeConfig {
     appearance?: Appearance;
 }
+interface SegmentAnalytics {
+    page: Function;
+    setAnonymousId: Function;
+}
 interface SegmentConfig {
     writeKey?: string;
+    analytics?: () => SegmentAnalytics;
     integrations?: Record<string, boolean>;
 }
 interface TrackingConfig {
     enabled?: boolean;
+    consentRequired?: boolean;
+    consentMessage?: string;
     segment?: SegmentConfig;
 }
 export interface Config {
@@ -88,6 +95,9 @@ export declare const makeConfig: (config?: Config) => {
     };
     tracking: {
         enabled: boolean;
+        consentRequired: boolean;
+        consentMessage: string | undefined;
+        segment: SegmentConfig | undefined;
     };
 };
 declare const _default: React.Context<{
@@ -155,6 +165,9 @@ declare const _default: React.Context<{
     };
     tracking: {
         enabled: boolean;
+        consentRequired: boolean;
+        consentMessage: string | undefined;
+        segment: SegmentConfig | undefined;
     };
 }>;
 export default _default;

package/dist/components/ConfigContext.js

@@ -59,7 +59,7 @@ const makeTypeTesterConfig = config => {
   };
 };
 const makeConfig = config => {
-  var _config$form, _config$storeModal, _config$storeModal2, _config$storeModal3, _config$stripe, _config$tracking;
+  var _config$form, _config$storeModal, _config$storeModal2, _config$storeModal3, _config$stripe, _config$tracking, _config$tracking2, _config$tracking3, _config$tracking4;
   return {
     typeTester: makeTypeTesterConfig(config === null || config === void 0 ? void 0 : config.typeTester),
     form: {
@@ -74,7 +74,11 @@ const makeConfig = config => {
       appearance: (config === null || config === void 0 ? void 0 : (_config$stripe = config.stripe) === null || _config$stripe === void 0 ? void 0 : _config$stripe.appearance) ?? null
     },
     tracking: {
-      enabled: (config === null || config === void 0 ? void 0 : (_config$tracking = config.tracking) === null || _config$tracking === void 0 ? void 0 : _config$tracking.enabled) ?? false // Explicit opt-in required
+      enabled: (config === null || config === void 0 ? void 0 : (_config$tracking = config.tracking) === null || _config$tracking === void 0 ? void 0 : _config$tracking.enabled) ?? false,
+      // Explicit opt-in required
+      consentRequired: (config === null || config === void 0 ? void 0 : (_config$tracking2 = config.tracking) === null || _config$tracking2 === void 0 ? void 0 : _config$tracking2.consentRequired) ?? false,
+      consentMessage: config === null || config === void 0 ? void 0 : (_config$tracking3 = config.tracking) === null || _config$tracking3 === void 0 ? void 0 : _config$tracking3.consentMessage,
+      segment: config === null || config === void 0 ? void 0 : (_config$tracking4 = config.tracking) === null || _config$tracking4 === void 0 ? void 0 : _config$tracking4.segment
     }
   };
 };

package/dist/components/ConsentBanner/consent.d.ts

@@ -0,0 +1,18 @@
+export declare function setClientAnonymousId(id: string): void;
+export declare function getClientAnonymousId(): string | undefined;
+/** Parse the _fontdue_cc cookie and check if it contains the given category. */
+export declare function hasConsent(category: string): boolean;
+/** Set the _fontdue_cc cookie with the given categories. */
+export declare function setConsent(categories: string[]): void;
+/**
+ * Call callback when the given consent category is granted.
+ * If already granted, calls immediately. Otherwise polls (500ms) and
+ * listens for the fontdue:consent event. Returns a cleanup function.
+ */
+export declare function onConsent(category: string, callback: () => void): () => void;
+/**
+ * Activate blocked scripts for the given consent category.
+ * Finds all <script type="text/plain" data-consent-category="<category>">
+ * elements and replaces them with executable copies.
+ */
+export declare function activateScripts(category: string): void;