fontdue-js 1.10.0 → 1.10.2

package/dist/components/CartButton/index.js

@@ -4,31 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _reactRedux = require("react-redux");
-
 var _reactRelay = require("react-relay");
-
 var _ComponentsContext = _interopRequireDefault(require("../ComponentsContext"));
-
 var _Icons = require("../Icons");
-
 var _CartButton_order, _CartButtonQuery;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 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; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function getOrderCount(order) {
   return order.orderItems ? order.orderItems.length : 0;
 }
-
 const cartButtonCount = order => {
   if (!order) return 0;
   return getOrderCount(order); // TODO: add a `count` field to schema
@@ -37,13 +25,13 @@ const cartButtonCount = order => {
 const openCart = () => ({
   type: 'OPEN_CART'
 });
-
-const CartButtonBase = ({
-  label,
-  buttonStyle,
-  order,
-  children
-}) => {
+const CartButtonBase = _ref => {
+  let {
+    label,
+    buttonStyle,
+    order,
+    children
+  } = _ref;
   const dispatch = (0, _reactRedux.useDispatch)();
   const count = cartButtonCount(order);
   const handleClick = (0, _react.useCallback)(() => {
@@ -53,7 +41,6 @@ const CartButtonBase = ({
         route: 'cart'
       });
     }
-
     dispatch(openCart());
   }, [count, dispatch]);
   if (!order) return null;
@@ -73,38 +60,33 @@ const CartButtonBase = ({
     className: "cart-button__label"
   }, label || 'Cart')));
 };
-
 const CartButton = (0, _reactRelay.createFragmentContainer)(CartButtonBase, {
   order: _CartButton_order !== void 0 ? _CartButton_order : (_CartButton_order = require("../../__generated__/CartButton_order.graphql"), _CartButton_order.hash && _CartButton_order.hash !== "fe52953705bed993f9f94c1ae33d801a" && console.error("The definition of 'CartButton_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartButton_order)
 });
-
 const CartButtonQueryRenderer = params => {
   const environment = (0, _reactRelay.useRelayEnvironment)();
   return /*#__PURE__*/_react.default.createElement(_reactRelay.QueryRenderer, {
     environment: environment,
     query: _CartButtonQuery !== void 0 ? _CartButtonQuery : (_CartButtonQuery = require("../../__generated__/CartButtonQuery.graphql"), _CartButtonQuery.hash && _CartButtonQuery.hash !== "5c0da5849bf1215a9d1f264831830f71" && console.error("The definition of 'CartButtonQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartButtonQuery),
     variables: {},
-    render: ({
-      error,
-      props
-    }) => {
+    render: _ref2 => {
+      let {
+        error,
+        props
+      } = _ref2;
       if (error) {
         console.error(error);
         return null;
       }
-
       if (props) {
         var _props$viewer$current, _props$viewer;
-
         return /*#__PURE__*/_react.default.createElement(CartButton, _extends({}, params, {
           order: (_props$viewer$current = (_props$viewer = props.viewer) === null || _props$viewer === void 0 ? void 0 : _props$viewer.currentOrder) !== null && _props$viewer$current !== void 0 ? _props$viewer$current : null
         }));
       }
-
       return null;
     }
   });
 };
-
 var _default = CartButtonQueryRenderer;
 exports.default = _default;

package/dist/components/CharacterViewer/index.js

@@ -4,37 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _reactRelay = require("react-relay");
-
 var _resizeObserver = _interopRequireDefault(require("@react-hook/resize-observer"));
-
 var _utils = require("../../utils");
-
 var _Select = _interopRequireDefault(require("../Select"));
-
 var _useFontStyle = _interopRequireDefault(require("../useFontStyle"));
-
+var _Stylesheet = _interopRequireDefault(require("../Stylesheet"));
 var _CharacterViewer_family, _CharacterViewer_collection, _CharacterViewer_Query, _CharacterViewer_SlugQuery;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 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; }
-
 function useSize() {
   const ref = (0, _react.useRef)(null);
-
   const [size, setSize] = _react.default.useState();
-
   _react.default.useLayoutEffect(() => {
     if (!ref.current) return;
     setSize(ref.current.getBoundingClientRect());
   }, [ref]);
-
   (0, _resizeObserver.default)(ref, entry => setSize(entry.contentRect));
   return {
     ref,
@@ -42,29 +29,32 @@ function useSize() {
     height: size === null || size === void 0 ? void 0 : size.height
   };
 }
-
 const collectionInfo = collection => ({
+  id: collection.id,
   name: collection.name,
   fontStyles: collection.fontStyles,
-  isVariableFont: collection.isVariableFont
+  isVariableFont: collection.isVariableFont,
+  cssUrl: collection.cssUrl,
+  collectionType: collection.collectionType
 });
-
-const StyleSelect = ({
-  collections,
-  value,
-  onChange
-}) => {
+const StyleSelect = _ref => {
+  let {
+    collections,
+    value,
+    onChange
+  } = _ref;
   const handleChange = e => {
     const value = e.target.value;
-
     if (value.includes(':::')) {
       var _fontStyle$variableIn;
-
       const [fontStyleId, variableInstanceName] = value.split(':::');
       const fontStyle = collections.flatMap(coll => coll.fontStyles).find(style => style.id === fontStyleId);
-      const instance = fontStyle === null || fontStyle === void 0 ? void 0 : (_fontStyle$variableIn = fontStyle.variableInstances) === null || _fontStyle$variableIn === void 0 ? void 0 : _fontStyle$variableIn.find(({
-        name
-      }) => name === variableInstanceName);
+      const instance = fontStyle === null || fontStyle === void 0 ? void 0 : (_fontStyle$variableIn = fontStyle.variableInstances) === null || _fontStyle$variableIn === void 0 ? void 0 : _fontStyle$variableIn.find(_ref2 => {
+        let {
+          name
+        } = _ref2;
+        return name === variableInstanceName;
+      });
       let variableSettings;
       if (instance) variableSettings = (0, _utils.variableInstanceSettings)(instance);
       onChange({
@@ -77,37 +67,28 @@ const StyleSelect = ({
       });
     }
   };
-
   let selectValue = value.fontStyleId;
-
   if (value.variableSettings) {
     var _fontStyle$variableIn2;
-
     const fontStyle = collections.flatMap(coll => coll.fontStyles).find(style => style.id === value.fontStyleId);
     const instance = fontStyle === null || fontStyle === void 0 ? void 0 : (_fontStyle$variableIn2 = fontStyle.variableInstances) === null || _fontStyle$variableIn2 === void 0 ? void 0 : _fontStyle$variableIn2.find(instance => (0, _utils.compareVariableSettings)(instance, value.variableSettings));
-
     if (instance) {
       selectValue = `${value.fontStyleId}:::${instance.name}`;
     }
   }
-
   return /*#__PURE__*/_react.default.createElement(_Select.default, {
     options: collections.flatMap(coll => {
       var _coll$fontStyles$map$, _coll$fontStyles2;
-
       if (coll.isVariableFont) {
         var _coll$fontStyles$flat, _coll$fontStyles;
-
         return (_coll$fontStyles$flat = (_coll$fontStyles = coll.fontStyles) === null || _coll$fontStyles === void 0 ? void 0 : _coll$fontStyles.flatMap(style => {
           var _style$variableInstan;
-
           return (_style$variableInstan = style.variableInstances) === null || _style$variableInstan === void 0 ? void 0 : _style$variableInstan.map(instance => ({
             value: `${style.id}:::${instance.name}`,
             text: `${coll.name} ${instance.name}`
           })).filter(_utils.notEmpty);
         }).filter(_utils.notEmpty)) !== null && _coll$fontStyles$flat !== void 0 ? _coll$fontStyles$flat : [];
       }
-
       return (_coll$fontStyles$map$ = (_coll$fontStyles2 = coll.fontStyles) === null || _coll$fontStyles2 === void 0 ? void 0 : _coll$fontStyles2.map(style => ({
         value: style.id,
         text: `${coll.name} ${style.name}`
@@ -117,28 +98,23 @@ const StyleSelect = ({
     onChange: handleChange
   });
 };
-
-const CharacterViewerComponent = ({
-  collection
-}) => {
-  var _collection$children$, _collection$children, _ref, _collection$featureSt, _collection$fontStyle, _collection$children2, _collection$children3, _collection$children4, _initialFontStyle$id, _fontStyle$characterB, _fontStyle$characterB2, _fontStyle$featureCha, _fontStyle$featureCha2, _fontStyle$featureCha3, _fontStyle$featureCha4, _fontStyle$featureCha5, _fontStyle$characterB3, _fontStyle$featureCha6, _fontStyle$featureCha7;
-
+const CharacterViewerComponent = _ref3 => {
+  var _collection$children$, _collection$children, _ref4, _collection$featureSt, _collection$fontStyle, _collection$children2, _collection$children3, _collection$children4, _initialFontStyle$id, _fontStyle$characterB, _fontStyle$characterB2, _fontStyle$featureCha, _fontStyle$featureCha2, _fontStyle$featureCha3, _fontStyle$featureCha4, _fontStyle$featureCha5, _fontStyle$characterB3, _fontStyle$featureCha6, _fontStyle$featureCha7;
+  let {
+    collection
+  } = _ref3;
   const allCollections = [collectionInfo(collection)].concat((_collection$children$ = (_collection$children = collection.children) === null || _collection$children === void 0 ? void 0 : _collection$children.map(collectionInfo)) !== null && _collection$children$ !== void 0 ? _collection$children$ : []);
-  const initialFontStyle = (_ref = (_collection$featureSt = collection.featureStyle) !== null && _collection$featureSt !== void 0 ? _collection$featureSt : (_collection$fontStyle = collection.fontStyles) === null || _collection$fontStyle === void 0 ? void 0 : _collection$fontStyle[0]) !== null && _ref !== void 0 ? _ref : (_collection$children2 = collection.children) === null || _collection$children2 === void 0 ? void 0 : (_collection$children3 = _collection$children2[0]) === null || _collection$children3 === void 0 ? void 0 : (_collection$children4 = _collection$children3.fontStyles) === null || _collection$children4 === void 0 ? void 0 : _collection$children4[0];
+  const initialFontStyle = (_ref4 = (_collection$featureSt = collection.featureStyle) !== null && _collection$featureSt !== void 0 ? _collection$featureSt : (_collection$fontStyle = collection.fontStyles) === null || _collection$fontStyle === void 0 ? void 0 : _collection$fontStyle[0]) !== null && _ref4 !== void 0 ? _ref4 : (_collection$children2 = collection.children) === null || _collection$children2 === void 0 ? void 0 : (_collection$children3 = _collection$children2[0]) === null || _collection$children3 === void 0 ? void 0 : (_collection$children4 = _collection$children3.fontStyles) === null || _collection$children4 === void 0 ? void 0 : _collection$children4[0];
   let initialVariableSettings;
-
   if (initialFontStyle && initialFontStyle.variableInstances) {
     initialVariableSettings = (0, _utils.variableInstanceSettings)(initialFontStyle.variableInstances[0]);
   }
-
   const [fontStyleId, setFontStyleId] = (0, _react.useState)((_initialFontStyle$id = initialFontStyle === null || initialFontStyle === void 0 ? void 0 : initialFontStyle.id) !== null && _initialFontStyle$id !== void 0 ? _initialFontStyle$id : null);
   const [variableSettings, setVariableSettings] = (0, _react.useState)(initialVariableSettings);
-
   const handleStyleSelect = value => {
     setFontStyleId(value.fontStyleId);
     setVariableSettings(value.variableSettings);
   };
-
   const fontStyle = allCollections.flatMap(coll => coll.fontStyles).find(style => style.id === fontStyleId);
   let {
     style
@@ -147,28 +123,24 @@ const CharacterViewerComponent = ({
     fontWeight: '400',
     fontStyle: 'normal'
   });
-
   if (variableSettings) {
-    style = { ...style,
+    style = {
+      ...style,
       ...(0, _utils.variableSettingsCSS)(variableSettings)
     };
   }
-
   const [selectedCharacter, setSelectedCharacter] = (0, _react.useState)();
   const [activeCharacter, setActiveCharacter] = (0, _react.useState)(fontStyle === null || fontStyle === void 0 ? void 0 : (_fontStyle$characterB = fontStyle.characterBlocks) === null || _fontStyle$characterB === void 0 ? void 0 : (_fontStyle$characterB2 = _fontStyle$characterB[0]) === null || _fontStyle$characterB2 === void 0 ? void 0 : _fontStyle$characterB2.characters[0]);
   const visibleCharacter = activeCharacter !== null && activeCharacter !== void 0 ? activeCharacter : selectedCharacter;
   const [selectedFeatureCharacter, setSelectedFeatureCharacter] = (0, _react.useState)();
   const [activeFeatureCharacter, setActiveFeatureCharacter] = (0, _react.useState)([(_fontStyle$featureCha = fontStyle === null || fontStyle === void 0 ? void 0 : (_fontStyle$featureCha2 = fontStyle.featureCharacters) === null || _fontStyle$featureCha2 === void 0 ? void 0 : (_fontStyle$featureCha3 = _fontStyle$featureCha2[0]) === null || _fontStyle$featureCha3 === void 0 ? void 0 : _fontStyle$featureCha3.characters[0]) !== null && _fontStyle$featureCha !== void 0 ? _fontStyle$featureCha : '', fontStyle === null || fontStyle === void 0 ? void 0 : (_fontStyle$featureCha4 = fontStyle.featureCharacters) === null || _fontStyle$featureCha4 === void 0 ? void 0 : (_fontStyle$featureCha5 = _fontStyle$featureCha4[0]) === null || _fontStyle$featureCha5 === void 0 ? void 0 : _fontStyle$featureCha5.feature]);
   const visibleFeatureCharacter = activeFeatureCharacter !== null && activeFeatureCharacter !== void 0 ? activeFeatureCharacter : selectedFeatureCharacter;
-
   const handleMouseLeave = () => {
     if (selectedCharacter) setActiveCharacter(undefined);
   };
-
   const handleFeatureCharacterMouseLeave = () => {
     if (selectedFeatureCharacter) setActiveFeatureCharacter(undefined);
   };
-
   const {
     ref: blocksRef,
     width: blocksWidth
@@ -184,7 +156,10 @@ const CharacterViewerComponent = ({
   if (!fontStyle) return null;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer"
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, allCollections.filter(coll => coll.collectionType === 'family').map(coll => /*#__PURE__*/_react.default.createElement(_Stylesheet.default, {
+    key: coll.id,
+    href: coll.cssUrl
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer__character-map"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer__monitor"
@@ -194,7 +169,8 @@ const CharacterViewerComponent = ({
     className: "character-viewer__monitor__title"
   }, "Character map"), /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer__monitor__character",
-    style: { ...style,
+    style: {
+      ...style,
       '--width': monitorWidth
     },
     ref: monitorRef
@@ -213,24 +189,27 @@ const CharacterViewerComponent = ({
     style: {
       '--width': blocksWidth
     }
-  }, (_fontStyle$characterB3 = fontStyle.characterBlocks) === null || _fontStyle$characterB3 === void 0 ? void 0 : _fontStyle$characterB3.map(({
-    name,
-    characters
-  }, i) => /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer__block",
-    key: i
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer__block__name"
-  }, name), /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer__block__characters",
-    style: style,
-    onMouseLeave: handleMouseLeave
-  }, characters.map((chars, j) => /*#__PURE__*/_react.default.createElement("div", {
-    key: j,
-    onClick: () => setSelectedCharacter(chars),
-    onMouseEnter: () => setActiveCharacter(chars),
-    "data-selected": selectedCharacter === chars
-  }, chars))))))), (_fontStyle$featureCha6 = fontStyle.featureCharacters) !== null && _fontStyle$featureCha6 !== void 0 && _fontStyle$featureCha6.length ? /*#__PURE__*/_react.default.createElement("div", {
+  }, (_fontStyle$characterB3 = fontStyle.characterBlocks) === null || _fontStyle$characterB3 === void 0 ? void 0 : _fontStyle$characterB3.map((_ref5, i) => {
+    let {
+      name,
+      characters
+    } = _ref5;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "character-viewer__block",
+      key: i
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "character-viewer__block__name"
+    }, name), /*#__PURE__*/_react.default.createElement("div", {
+      className: "character-viewer__block__characters",
+      style: style,
+      onMouseLeave: handleMouseLeave
+    }, characters.map((chars, j) => /*#__PURE__*/_react.default.createElement("div", {
+      key: j,
+      onClick: () => setSelectedCharacter(chars),
+      onMouseEnter: () => setActiveCharacter(chars),
+      "data-selected": selectedCharacter === chars
+    }, chars))));
+  }))), (_fontStyle$featureCha6 = fontStyle.featureCharacters) !== null && _fontStyle$featureCha6 !== void 0 && _fontStyle$featureCha6.length ? /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer__features-map"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer__feature-monitor"
@@ -249,7 +228,8 @@ const CharacterViewerComponent = ({
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "character-viewer__feature-monitor__label"
   }, "OFF"), /*#__PURE__*/_react.default.createElement("div", {
-    style: { ...style,
+    style: {
+      ...style,
       fontFeatureSettings: `'calt' off, 'liga' off, '${visibleFeatureCharacter[1]}' off`
     }
   }, visibleFeatureCharacter[0])), /*#__PURE__*/_react.default.createElement("div", {
@@ -257,7 +237,8 @@ const CharacterViewerComponent = ({
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "character-viewer__feature-monitor__label"
   }, "ON"), /*#__PURE__*/_react.default.createElement("div", {
-    style: { ...style,
+    style: {
+      ...style,
       fontFeatureSettings: `'${visibleFeatureCharacter[1]}' on`
     }
   }, visibleFeatureCharacter[0]))), /*#__PURE__*/_react.default.createElement("div", {
@@ -274,40 +255,42 @@ const CharacterViewerComponent = ({
     style: {
       '--width': blocksWidth
     }
-  }, (_fontStyle$featureCha7 = fontStyle.featureCharacters) === null || _fontStyle$featureCha7 === void 0 ? void 0 : _fontStyle$featureCha7.map(({
-    name,
-    feature,
-    characters
-  }, i) => /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer__block",
-    key: i
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer__block__name"
-  }, name), /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer__block__characters",
-    style: { ...style,
-      fontFeatureSettings: `'${feature}' 1`
-    },
-    onMouseLeave: handleFeatureCharacterMouseLeave
-  }, characters.map((chars, j) => /*#__PURE__*/_react.default.createElement("div", {
-    key: j,
-    onClick: () => setSelectedFeatureCharacter([chars, feature]),
-    onMouseEnter: () => setActiveFeatureCharacter([chars, feature]),
-    "data-selected": (selectedFeatureCharacter === null || selectedFeatureCharacter === void 0 ? void 0 : selectedFeatureCharacter[0]) === chars && (selectedFeatureCharacter === null || selectedFeatureCharacter === void 0 ? void 0 : selectedFeatureCharacter[1]) === feature
-  }, chars))))))) : null);
+  }, (_fontStyle$featureCha7 = fontStyle.featureCharacters) === null || _fontStyle$featureCha7 === void 0 ? void 0 : _fontStyle$featureCha7.map((_ref6, i) => {
+    let {
+      name,
+      feature,
+      characters
+    } = _ref6;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "character-viewer__block",
+      key: i
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "character-viewer__block__name"
+    }, name), /*#__PURE__*/_react.default.createElement("div", {
+      className: "character-viewer__block__characters",
+      style: {
+        ...style,
+        fontFeatureSettings: `'${feature}' 1`
+      },
+      onMouseLeave: handleFeatureCharacterMouseLeave
+    }, characters.map((chars, j) => /*#__PURE__*/_react.default.createElement("div", {
+      key: j,
+      onClick: () => setSelectedFeatureCharacter([chars, feature]),
+      onMouseEnter: () => setActiveFeatureCharacter([chars, feature]),
+      "data-selected": (selectedFeatureCharacter === null || selectedFeatureCharacter === void 0 ? void 0 : selectedFeatureCharacter[0]) === chars && (selectedFeatureCharacter === null || selectedFeatureCharacter === void 0 ? void 0 : selectedFeatureCharacter[1]) === feature
+    }, chars))));
+  }))) : null);
 };
-
-_CharacterViewer_family !== void 0 ? _CharacterViewer_family : (_CharacterViewer_family = require("../../__generated__/CharacterViewer_family.graphql"), _CharacterViewer_family.hash && _CharacterViewer_family.hash !== "ffc50602f0336356a24c0678b22360a8" && 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_family);
+_CharacterViewer_family !== void 0 ? _CharacterViewer_family : (_CharacterViewer_family = require("../../__generated__/CharacterViewer_family.graphql"), _CharacterViewer_family.hash && _CharacterViewer_family.hash !== "5f4b83f16d13a07812c8dcb035fbf47c" && 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_family);
 const CharacterViewer = (0, _reactRelay.createFragmentContainer)(CharacterViewerComponent, {
   collection: _CharacterViewer_collection !== void 0 ? _CharacterViewer_collection : (_CharacterViewer_collection = require("../../__generated__/CharacterViewer_collection.graphql"), _CharacterViewer_collection.hash && _CharacterViewer_collection.hash !== "2f49d241268129a888942889cad0bebb" && 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_collection)
 });
-
-const CharacterViewerQueryRenderer = ({
-  collectionId,
-  collectionSlug
-}) => {
+const CharacterViewerQueryRenderer = _ref7 => {
+  let {
+    collectionId,
+    collectionSlug
+  } = _ref7;
   const environment = (0, _reactRelay.useRelayEnvironment)();
-
   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),
@@ -315,9 +298,10 @@ const CharacterViewerQueryRenderer = ({
         collectionId
       },
       environment: environment,
-      render: ({
-        props
-      }) => {
+      render: _ref8 => {
+        let {
+          props
+        } = _ref8;
         const node = props === null || props === void 0 ? void 0 : props.node;
         if (!node) return null;
         return /*#__PURE__*/_react.default.createElement(CharacterViewer, {
@@ -326,7 +310,6 @@ const CharacterViewerQueryRenderer = ({
       }
     });
   }
-
   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),
@@ -334,11 +317,11 @@ const CharacterViewerQueryRenderer = ({
         collectionSlug
       },
       environment: environment,
-      render: ({
-        props
-      }) => {
+      render: _ref9 => {
         var _props$viewer, _props$viewer$slug;
-
+        let {
+          props
+        } = _ref9;
         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, {
@@ -347,9 +330,7 @@ const CharacterViewerQueryRenderer = ({
       }
     });
   }
-
   throw new Error('Unable to render CharacterViewer without a collectionId or collectionSlug');
 };
-
 var _default = CharacterViewerQueryRenderer;
 exports.default = _default;

package/dist/components/Checkbox/index.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
-
 var _Icons = require("../Icons");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 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; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const Checkbox = props => {
   const {
     form: config
@@ -31,6 +23,5 @@ const Checkbox = props => {
     className: "checkbox__icon"
   }, config.checkboxStyle === 'check' ? /*#__PURE__*/_react.default.createElement(_Icons.Check, null) : /*#__PURE__*/_react.default.createElement(_Icons.X, null)));
 };
-
 var _default = Checkbox;
 exports.default = _default;

package/dist/components/CollectionAa/index.js

@@ -4,44 +4,35 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.CollectionAaFragment = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _reactRelay = require("react-relay");
-
 var _FontStyle = _interopRequireDefault(require("../FontStyle"));
-
 var _CollectionAa_product, _CollectionAa_Query;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-const CollectionAaBase = ({
-  product
-}) => {
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const CollectionAaBase = _ref => {
+  let {
+    product
+  } = _ref;
   let fontStyle;
-
   if (product.__typename === 'Bundle') {
     fontStyle = product.fontStyles[0];
   } else {
     fontStyle = product.featureStyle;
   }
-
   return /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
     fontStyle: fontStyle
   }, /*#__PURE__*/_react.default.createElement("span", null, "A"), /*#__PURE__*/_react.default.createElement("span", null, "a"));
 };
-
 const CollectionAaFragment = (0, _reactRelay.createFragmentContainer)(CollectionAaBase, {
   product: _CollectionAa_product !== void 0 ? _CollectionAa_product : (_CollectionAa_product = require("../../__generated__/CollectionAa_product.graphql"), _CollectionAa_product.hash && _CollectionAa_product.hash !== "6322983997385dc8b7be1d2a52b74996" && 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)
 });
 exports.CollectionAaFragment = CollectionAaFragment;
-
-const CollectionAaQueryRenderer = ({
-  collectionId,
-  ...rest
-}) => {
+const CollectionAaQueryRenderer = _ref2 => {
+  let {
+    collectionId,
+    ...rest
+  } = _ref2;
   const environment = (0, _reactRelay.useRelayEnvironment)();
   return /*#__PURE__*/_react.default.createElement(_reactRelay.QueryRenderer, {
     environment: environment,
@@ -49,23 +40,21 @@ const CollectionAaQueryRenderer = ({
     variables: {
       collectionId
     },
-    render: ({
-      error,
-      props
-    }) => {
+    render: _ref3 => {
+      let {
+        error,
+        props
+      } = _ref3;
       if (error) {
         console.error(error);
         return null;
       }
-
       if (props) {
         return /*#__PURE__*/_react.default.createElement(CollectionAaFragment, _extends({}, rest, props));
       }
-
       return null;
     }
   });
 };
-
 var _default = CollectionAaQueryRenderer;
 exports.default = _default;

package/dist/components/ComponentsContext.js

@@ -4,12 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const ComponentsContext = /*#__PURE__*/_react.default.createContext({});
-
 var _default = ComponentsContext;
 exports.default = _default;