fontdue-js 0.1.1 → 1.0.0

package/CharacterViewer.d.ts

@@ -0,0 +1,3 @@
+import CharacterViewer from './dist/components/CharacterViewer';
+export * from './dist/components/CharacterViewer';
+export default CharacterViewer;

package/CharacterViewer.js

@@ -0,0 +1 @@
+module.exports = require('./dist/components/CharacterViewer');

package/README.md

@@ -5,7 +5,7 @@ This package exports [Fontdue.js](https://docs.fontdue.com/fontduejs) components
 ## Usage
 
 1. Wrap the root of your project with the [`FontdueProvider`](#fontdueprovider) component. For example in a Next.js app, add it to your `_app.tsx`. 
-2. Replace the `url` property with your Fontdue store URL.
+2. Include the `url` property with your Fontdue store URL.
 3. Render the [`StoreModal`](#storemodal) component so that is it available on every page.
 4. Import the `fontdue-js/fontdue.css` CSS file. (This example uses Next.js)
 
@@ -21,13 +21,11 @@ import 'fontdue-js/fontdue.css';
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <React.Fragment>
-      <FontdueProvider url="https://example.fontdue.com" config={{}}>
-        <Component {...pageProps} />
+    <FontdueProvider url="https://example.fontdue.com" config={{}}>
+      <Component {...pageProps} />
 
-        <StoreModal />
-      </FontdueProvider>
-    </React.Fragment>
+      <StoreModal />
+    </FontdueProvider>
   );
 }
 
@@ -69,7 +67,9 @@ import StoreModal from 'fontdue-js/StoreModal';
 
 ## `BuyButton`
 
-Show a **Buy** button for a particular collection. When clicked, opens the StoreModal showing that collection.
+A button which when clicked opens the Cart to the relevant collection, and selects the collection.
+
+Renders a button with the text `Buy {collectionName}`
 
 ```tsx
 import BuyButton from 'fontdue-js/BuyButton';
@@ -78,11 +78,11 @@ import BuyButton from 'fontdue-js/BuyButton';
 | Prop | Description |
 | --- | --- |
 | `collectionId` or `collectionSlug` | (Required) `string` Collection identifier |
-| `collectionName` | (Optional) `string` Name to display as a suffix in the button: `Buy {collectionName}` |
+| `collectionName` | (Optional) `string` The name to render in the button: `Buy {collectionName}` |
 
 ## `CartButton`
 
-A cart button. When clicked, it opens the StoreModal. If a user has items in their cart, it will show the current cart. Otherwise, it shows the index "Browse" page of the StoreModal.
+A button to open the Store Modal. If the user has items in their cart, the button will navigate straight to the Cart screen. Otherwise it opens the fonts index.
 
 ```tsx
 import CartButton from 'fontdue-js/CartButton';
@@ -90,12 +90,24 @@ import CartButton from 'fontdue-js/CartButton';
 
 | Prop | Description |
 | --- | --- |
-| `buttonStyle` | (Optional) `'icon' \| 'inline'` Style of the button. Defaults to an unstyled button. |
-| `label` | (Optional) `string` Text label instead of "Cart" when `buttonStyle` is not `icon`. |
+| `buttonStyle` | (Optional) `'icon' \| 'inline'` Button style. If left blank, the button is unstyled. |
+| `label` | (Optional) `string` For non-icon style buttons, the text to render inside the button. Defaults to "Cart" |
+
+## `CharacterViewer`
+
+An interactive character/glyph explorer.
+
+```tsx
+import CharacterViewer from 'fontdue-js/CharacterViewer';
+```
+
+| Prop | Description |
+| --- | --- |
+| `collectionId` or `collectionSlug` | (Required) `string` Identifier for collection |
 
 ## `TypeTesters`
 
-Displays a list of type testers for a collection, by pulling data from the Fontdue CMS for that collection.
+A group of type tester components for a collection. You must first add content for the collection's type testers through the Fontdue dashboard.
 
 ```tsx
 import TypeTesters from 'fontdue-js/TypeTesters';
@@ -122,33 +134,33 @@ The props accepted for this compnenent will change and be documented thereafter.
 import TypeTester from 'fontdue-js/TypeTester';
 ```
 
-## `NewsletterSignup`
+## `TestFontsForm`
 
-A newsletter signup form. Customers entering their information here simply adds them as a Customer in the Fontdue CMS.
+Displays a form for users to enter their information and download test fonts. Make sure you have configured [Test Fonts](https://docs.fontdue.com/test-fonts) for this to work.
 
 ```tsx
-import NewsletterSignup from 'fontdue-js/NewsletterSignup';
+import TestFontsForm from 'fontdue-js/TestFontsForm';
 ```
 
 | Prop | Description |
 | --- | --- |
-| `optInLabel` | (Required) `string` Label that appears with the checkbox required to be checked. |
-| `buttonLabel` | (Optional) `string` Label for the button. Defaults to "Subscribe" |
-| `optInCheckboxChecked` | (Optional) `boolean` Set the checkbox checked by default. |
+| `agreementLabel` | (Optional) `string` Label for required checkbox. Defaults to the field "EULA agreement text" in your Fontdue Labels settings |
+| `downloadLabel` | (Optional) `string` Download button label. Defaults to "Download test fonts" |
+| `newsletterCheckboxChecked` | (Optional) `boolean` Set the newsletter opt-in checkbox checked by default |
 
-## `TestFontsForm`
+## `NewsletterSignup`
 
-Displays a form for users to enter their information in order to download test fonts. Make sure you have configured [Test Fonts](https://docs.fontdue.com/test-fonts) for this to work.
+A newsletter signup form. Customers entering their information here simply adds them as a Customer in the Fontdue CMS.
 
 ```tsx
-import TestFontsForm from 'fontdue-js/TestFontsForm';
+import NewsletterSignup from 'fontdue-js/NewsletterSignup';
 ```
 
 | Prop | Description |
 | --- | --- |
-| `agreementLabel` | (Optional) `string` Label for required checkbox. Defaults to the field "EULA agreement text" in your Fontdue Labels settings |
-| `downloadLabel` | (Optional) `string` Download button label. Defaults to "Download test fonts" |
-| `newsletterCheckboxChecked` | (Optional) `boolean` Set the newsletter opt-in checkbox checked by default |
+| `optInLabel` | (Required) `string` Label that appears with the checkbox required to be checked. |
+| `buttonLabel` | (Optional) `string` Label for the button. Defaults to "Subscribe" |
+| `optInCheckboxChecked` | (Optional) `boolean` Set the checkbox checked by default. |
 
 ## `useFontStyle`
 

package/dist/__generated__/CharacterViewer_SlugQuery.graphql.d.ts

@@ -0,0 +1,20 @@
+import { ConcreteRequest } from "relay-runtime";
+import { FragmentRefs } from "relay-runtime";
+export declare type CharacterViewer_SlugQueryVariables = {
+    collectionSlug: string;
+};
+export declare type CharacterViewer_SlugQueryResponse = {
+    readonly viewer: {
+        readonly slug: {
+            readonly fontCollection: {
+                readonly " $fragmentRefs": FragmentRefs<"CharacterViewer_collection">;
+            } | null;
+        } | null;
+    } | null;
+};
+export declare type CharacterViewer_SlugQuery = {
+    readonly response: CharacterViewer_SlugQueryResponse;
+    readonly variables: CharacterViewer_SlugQueryVariables;
+};
+declare const node: ConcreteRequest;
+export default node;

package/dist/__generated__/CharacterViewer_SlugQuery.graphql.js

@@ -0,0 +1,289 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/* tslint:disable */
+
+/* eslint-disable */
+// @ts-nocheck
+
+/*
+query CharacterViewer_SlugQuery(
+  $collectionSlug: String!
+) {
+  viewer {
+    slug(name: $collectionSlug) {
+      fontCollection {
+        ...CharacterViewer_collection
+        id
+      }
+      id
+    }
+    id
+  }
+}
+
+fragment CharacterViewer_collection on FontCollection {
+  featureStyle {
+    id
+  }
+  id
+  name
+  fontStyles {
+    id
+    cssFamily
+    name
+    characterBlocks {
+      name
+      characters
+    }
+    featureCharacters {
+      feature
+      name
+      characters
+    }
+  }
+  children(collectionTypes: [FAMILY]) {
+    id
+    name
+    fontStyles {
+      id
+      cssFamily
+      name
+      characterBlocks {
+        name
+        characters
+      }
+      featureCharacters {
+        feature
+        name
+        characters
+      }
+    }
+  }
+}
+*/
+const node = function () {
+  var v0 = [{
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "collectionSlug"
+  }],
+      v1 = [{
+    "kind": "Variable",
+    "name": "name",
+    "variableName": "collectionSlug"
+  }],
+      v2 = {
+    "alias": null,
+    "args": null,
+    "kind": "ScalarField",
+    "name": "id",
+    "storageKey": null
+  },
+      v3 = {
+    "alias": null,
+    "args": null,
+    "kind": "ScalarField",
+    "name": "name",
+    "storageKey": null
+  },
+      v4 = {
+    "alias": null,
+    "args": null,
+    "kind": "ScalarField",
+    "name": "characters",
+    "storageKey": null
+  },
+      v5 = {
+    "alias": null,
+    "args": null,
+    "concreteType": "FontStyle",
+    "kind": "LinkedField",
+    "name": "fontStyles",
+    "plural": true,
+    "selections": [v2
+    /*: any*/
+    , {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "cssFamily",
+      "storageKey": null
+    }, v3
+    /*: any*/
+    , {
+      "alias": null,
+      "args": null,
+      "concreteType": "CharacterBlock",
+      "kind": "LinkedField",
+      "name": "characterBlocks",
+      "plural": true,
+      "selections": [v3
+      /*: any*/
+      , v4
+      /*: any*/
+      ],
+      "storageKey": null
+    }, {
+      "alias": null,
+      "args": null,
+      "concreteType": "FeatureCharacters",
+      "kind": "LinkedField",
+      "name": "featureCharacters",
+      "plural": true,
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "feature",
+        "storageKey": null
+      }, v3
+      /*: any*/
+      , v4
+      /*: any*/
+      ],
+      "storageKey": null
+    }],
+    "storageKey": null
+  };
+  return {
+    "fragment": {
+      "argumentDefinitions": v0
+      /*: any*/
+      ,
+      "kind": "Fragment",
+      "metadata": null,
+      "name": "CharacterViewer_SlugQuery",
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "concreteType": "Viewer",
+        "kind": "LinkedField",
+        "name": "viewer",
+        "plural": false,
+        "selections": [{
+          "alias": null,
+          "args": v1
+          /*: any*/
+          ,
+          "concreteType": "Slug",
+          "kind": "LinkedField",
+          "name": "slug",
+          "plural": false,
+          "selections": [{
+            "alias": null,
+            "args": null,
+            "concreteType": "FontCollection",
+            "kind": "LinkedField",
+            "name": "fontCollection",
+            "plural": false,
+            "selections": [{
+              "args": null,
+              "kind": "FragmentSpread",
+              "name": "CharacterViewer_collection"
+            }],
+            "storageKey": null
+          }],
+          "storageKey": null
+        }],
+        "storageKey": null
+      }],
+      "type": "RootQueryType",
+      "abstractKey": null
+    },
+    "kind": "Request",
+    "operation": {
+      "argumentDefinitions": v0
+      /*: any*/
+      ,
+      "kind": "Operation",
+      "name": "CharacterViewer_SlugQuery",
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "concreteType": "Viewer",
+        "kind": "LinkedField",
+        "name": "viewer",
+        "plural": false,
+        "selections": [{
+          "alias": null,
+          "args": v1
+          /*: any*/
+          ,
+          "concreteType": "Slug",
+          "kind": "LinkedField",
+          "name": "slug",
+          "plural": false,
+          "selections": [{
+            "alias": null,
+            "args": null,
+            "concreteType": "FontCollection",
+            "kind": "LinkedField",
+            "name": "fontCollection",
+            "plural": false,
+            "selections": [{
+              "alias": null,
+              "args": null,
+              "concreteType": "FontStyle",
+              "kind": "LinkedField",
+              "name": "featureStyle",
+              "plural": false,
+              "selections": [v2
+              /*: any*/
+              ],
+              "storageKey": null
+            }, v2
+            /*: any*/
+            , v3
+            /*: any*/
+            , v5
+            /*: any*/
+            , {
+              "alias": null,
+              "args": [{
+                "kind": "Literal",
+                "name": "collectionTypes",
+                "value": ["FAMILY"]
+              }],
+              "concreteType": "FontCollection",
+              "kind": "LinkedField",
+              "name": "children",
+              "plural": true,
+              "selections": [v2
+              /*: any*/
+              , v3
+              /*: any*/
+              , v5
+              /*: any*/
+              ],
+              "storageKey": "children(collectionTypes:[\"FAMILY\"])"
+            }],
+            "storageKey": null
+          }, v2
+          /*: any*/
+          ],
+          "storageKey": null
+        }, v2
+        /*: any*/
+        ],
+        "storageKey": null
+      }]
+    },
+    "params": {
+      "cacheID": "f69a908fd095e2408ba06adeeb8cd0f0",
+      "id": null,
+      "metadata": {},
+      "name": "CharacterViewer_SlugQuery",
+      "operationKind": "query",
+      "text": "query CharacterViewer_SlugQuery(\n  $collectionSlug: String!\n) {\n  viewer {\n    slug(name: $collectionSlug) {\n      fontCollection {\n        ...CharacterViewer_collection\n        id\n      }\n      id\n    }\n    id\n  }\n}\n\nfragment CharacterViewer_collection on FontCollection {\n  featureStyle {\n    id\n  }\n  id\n  name\n  fontStyles {\n    id\n    cssFamily\n    name\n    characterBlocks {\n      name\n      characters\n    }\n    featureCharacters {\n      feature\n      name\n      characters\n    }\n  }\n  children(collectionTypes: [FAMILY]) {\n    id\n    name\n    fontStyles {\n      id\n      cssFamily\n      name\n      characterBlocks {\n        name\n        characters\n      }\n      featureCharacters {\n        feature\n        name\n        characters\n      }\n    }\n  }\n}\n"
+    }
+  };
+}();
+
+node.hash = 'de903e7c2640562aee374a900e089c9c';
+var _default = node;
+exports.default = _default;

package/dist/__generated__/TypeTesterStandalone_StyleQuery.graphql.d.ts

@@ -7,6 +7,12 @@ export declare type TypeTesterStandalone_StyleQueryResponse = {
     readonly viewer: {
         readonly fontStyle: {
             readonly id: string;
+            readonly family: {
+                readonly id: string;
+                readonly parent: {
+                    readonly id: string;
+                } | null;
+            } | null;
         } | null;
     } | null;
 };

package/dist/__generated__/TypeTesterStandalone_StyleQuery.graphql.js

@@ -18,6 +18,12 @@ query TypeTesterStandalone_StyleQuery(
   viewer {
     fontStyle(familyName: $familyName, styleName: $styleName) {
       id
+      family {
+        id
+        parent {
+          id
+        }
+      }
     }
     id
   }
@@ -57,7 +63,29 @@ const node = function () {
     "plural": false,
     "selections": [v1
     /*: any*/
-    ],
+    , {
+      "alias": null,
+      "args": null,
+      "concreteType": "FontCollection",
+      "kind": "LinkedField",
+      "name": "family",
+      "plural": false,
+      "selections": [v1
+      /*: any*/
+      , {
+        "alias": null,
+        "args": null,
+        "concreteType": "FontCollection",
+        "kind": "LinkedField",
+        "name": "parent",
+        "plural": false,
+        "selections": [v1
+        /*: any*/
+        ],
+        "storageKey": null
+      }],
+      "storageKey": null
+    }],
     "storageKey": null
   };
   return {
@@ -106,16 +134,16 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "0d9868456784e33a2e96e5e6c74d07c8",
+      "cacheID": "55ed0cd020e94e2c67fcbb7d3507fe25",
       "id": null,
       "metadata": {},
       "name": "TypeTesterStandalone_StyleQuery",
       "operationKind": "query",
-      "text": "query TypeTesterStandalone_StyleQuery(\n  $familyName: String!\n  $styleName: String!\n) {\n  viewer {\n    fontStyle(familyName: $familyName, styleName: $styleName) {\n      id\n    }\n    id\n  }\n}\n"
+      "text": "query TypeTesterStandalone_StyleQuery(\n  $familyName: String!\n  $styleName: String!\n) {\n  viewer {\n    fontStyle(familyName: $familyName, styleName: $styleName) {\n      id\n      family {\n        id\n        parent {\n          id\n        }\n      }\n    }\n    id\n  }\n}\n"
     }
   };
 }();
 
-node.hash = 'aafc4541c04db8a72ac96c7d09e58490';
+node.hash = '6b7470fc7c096c1adc484c7b3d32b126';
 var _default = node;
 exports.default = _default;

package/dist/components/Cart/CustomerFields.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface Customer {
+    name?: string;
+    email?: string;
+    newsletterOptIn?: boolean;
+}
+interface CustomerFields_props {
+    title: string;
+    value: Customer;
+    onChange: (value: Customer) => void;
+    optInLabel?: string;
+}
+declare const CustomerFields: React.FC<CustomerFields_props>;
+export default CustomerFields;

package/dist/components/Cart/CustomerFields.js

@@ -24,16 +24,15 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const CustomerFields = _ref => {
-  var _config$form$checkbox, _config$form;
-
   let {
     title,
     value,
     onChange,
     optInLabel
   } = _ref;
-  const config = (0, _react.useContext)(_ConfigContext.default);
-  const checkboxStyle = (_config$form$checkbox = (_config$form = config.form) === null || _config$form === void 0 ? void 0 : _config$form.checkboxStyle) !== null && _config$form$checkbox !== void 0 ? _config$form$checkbox : 'check';
+  const {
+    form: config
+  } = (0, _react.useContext)(_ConfigContext.default);
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "checkout-modal__section"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -76,7 +75,7 @@ const CustomerFields = _ref => {
     })
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "checkbox__icon"
-  }, checkboxStyle === 'check' ? /*#__PURE__*/_react.default.createElement(_Check.default, null) : /*#__PURE__*/_react.default.createElement(_X.default, null))), /*#__PURE__*/_react.default.createElement("label", {
+  }, config.checkboxStyle === 'check' ? /*#__PURE__*/_react.default.createElement(_Check.default, null) : /*#__PURE__*/_react.default.createElement(_X.default, null))), /*#__PURE__*/_react.default.createElement("label", {
     htmlFor: "customer-newsletter-opt-in"
   }, optInLabel))));
 };

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

@@ -1,6 +1,7 @@
 import React from 'react';
 interface CharacterViewer_props {
-    collectionId: string;
+    collectionId?: string;
+    collectionSlug?: string;
 }
 declare const CharacterViewerQueryRenderer: React.FC<CharacterViewer_props>;
 export default CharacterViewerQueryRenderer;

package/dist/components/CharacterViewer/index.js

@@ -9,8 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactRelay = require("react-relay");
 
-var _reactStaticContainer = _interopRequireDefault(require("react-static-container"));
-
 var _resizeObserver = _interopRequireDefault(require("@react-hook/resize-observer"));
 
 var _utils = require("../../utils");
@@ -19,7 +17,7 @@ var _Select = _interopRequireDefault(require("../Select"));
 
 var _useFontStyle = _interopRequireDefault(require("../useFontStyle"));
 
-var _CharacterViewer_family, _CharacterViewer_collection, _CharacterViewer_Query;
+var _CharacterViewer_family, _CharacterViewer_collection, _CharacterViewer_Query, _CharacterViewer_SlugQuery;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -230,26 +228,54 @@ const CharacterViewer = (0, _reactRelay.createFragmentContainer)(CharacterViewer
 
 const CharacterViewerQueryRenderer = _ref5 => {
   let {
-    collectionId
+    collectionId,
+    collectionSlug
   } = _ref5;
   const environment = (0, _reactRelay.useRelayEnvironment)();
-  return /*#__PURE__*/_react.default.createElement(_reactRelay.QueryRenderer, {
-    query: _CharacterViewer_Query !== void 0 ? _CharacterViewer_Query : (_CharacterViewer_Query = require("../../__generated__/CharacterViewer_Query.graphql"), _CharacterViewer_Query.hash && _CharacterViewer_Query.hash !== "10b58f0e5e086adbcd2a0d4cd44c442c" && console.error("The definition of 'CharacterViewer_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_Query),
-    variables: {
-      collectionId
-    },
-    environment: environment,
-    render: _ref6 => {
-      let {
-        props
-      } = _ref6;
-      return /*#__PURE__*/_react.default.createElement(_reactStaticContainer.default, {
-        shouldUpdate: props
-      }, props !== null && props !== void 0 && props.node ? /*#__PURE__*/_react.default.createElement(CharacterViewer, {
-        collection: props.node
-      }) : null);
-    }
-  });
+
+  if (collectionId) {
+    return /*#__PURE__*/_react.default.createElement(_reactRelay.QueryRenderer, {
+      query: _CharacterViewer_Query !== void 0 ? _CharacterViewer_Query : (_CharacterViewer_Query = require("../../__generated__/CharacterViewer_Query.graphql"), _CharacterViewer_Query.hash && _CharacterViewer_Query.hash !== "10b58f0e5e086adbcd2a0d4cd44c442c" && console.error("The definition of 'CharacterViewer_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_Query),
+      variables: {
+        collectionId
+      },
+      environment: environment,
+      render: _ref6 => {
+        let {
+          props
+        } = _ref6;
+        const node = props === null || props === void 0 ? void 0 : props.node;
+        if (!node) return null;
+        return /*#__PURE__*/_react.default.createElement(CharacterViewer, {
+          collection: node
+        });
+      }
+    });
+  }
+
+  if (collectionSlug) {
+    return /*#__PURE__*/_react.default.createElement(_reactRelay.QueryRenderer, {
+      query: _CharacterViewer_SlugQuery !== void 0 ? _CharacterViewer_SlugQuery : (_CharacterViewer_SlugQuery = require("../../__generated__/CharacterViewer_SlugQuery.graphql"), _CharacterViewer_SlugQuery.hash && _CharacterViewer_SlugQuery.hash !== "de903e7c2640562aee374a900e089c9c" && console.error("The definition of 'CharacterViewer_SlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_SlugQuery),
+      variables: {
+        collectionSlug
+      },
+      environment: environment,
+      render: _ref7 => {
+        var _props$viewer, _props$viewer$slug;
+
+        let {
+          props
+        } = _ref7;
+        const collection = props === null || props === void 0 ? void 0 : (_props$viewer = props.viewer) === null || _props$viewer === void 0 ? void 0 : (_props$viewer$slug = _props$viewer.slug) === null || _props$viewer$slug === void 0 ? void 0 : _props$viewer$slug.fontCollection;
+        if (!collection) return null;
+        return /*#__PURE__*/_react.default.createElement(CharacterViewer, {
+          collection: collection
+        });
+      }
+    });
+  }
+
+  throw new Error('Unable to render CharacterViewer without a collectionId or collectionSlug');
 };
 
 var _default = CharacterViewerQueryRenderer;