fontdue-js 2.5.0 → 2.7.0

package/dist/components/CharacterViewer/index.js

@@ -23,7 +23,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function useSize() {
   const ref = (0, _react.useRef)(null);
   const [size, setSize] = _react.default.useState();
-  _react.default.useLayoutEffect(() => {
+  (0, _react.useEffect)(() => {
     if (!ref.current) return;
     setSize(ref.current.getBoundingClientRect());
   }, [ref]);
@@ -117,13 +117,30 @@ function Character(props) {
     "data-size": size
   }));
 }
+function useUnicodeData() {
+  const [data, setData] = (0, _react.useState)();
+  (0, _react.useEffect)(() => {
+    function fetchData() {
+      Promise.resolve().then(() => _interopRequireWildcard(require('../../data/unicodeData'))).then(data => {
+        if (!ignore) setData(data.default);
+      });
+    }
+    let ignore = false;
+    fetchData();
+    return () => {
+      ignore = true;
+    };
+  }, []);
+  return data;
+}
 function CharacterViewerComponent(_ref3) {
-  var _collection$children, _collection$fontStyle, _collection$children2, _collection$children3, _collection$children4, _fontStyle$characterB, _fontStyle$characterB2, _fontStyle$featureCha, _fontStyle$featureCha2, _fontStyle$featureCha3, _fontStyle$featureCha4, _fontStyle$featureCha5, _fontStyle$characterB3, _fontStyle$featureCha6, _fontStyle$featureCha7, _fontStyle$featureCha8;
+  var _collection$children, _collection$fontStyle, _collection$children2, _collection$children3, _collection$children4, _fontStyle$glyphNames, _fontStyle$glyphNames2, _fontStyle$featureCha, _fontStyle$featureCha2, _fontStyle$featureCha3, _fontStyle$featureCha4, _fontStyle$glyphNames3, _fontStyle$glyphNames4, _fontStyle$featureCha5, _fontStyle$characterB, _fontStyle$featureCha6, _fontStyle$featureCha7, _fontStyle$featureCha8;
   let {
     collection: collectionKey
   } = _ref3;
   const collection = (0, _reactRelay.useFragment)(_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), collectionKey);
   const allCollections = [collectionInfo(collection)].concat(((_collection$children = collection.children) === null || _collection$children === void 0 ? void 0 : _collection$children.map(collectionInfo)) ?? []);
+  const unicodeData = useUnicodeData();
   const initialFontStyle = collection.featureStyle ?? ((_collection$fontStyle = collection.fontStyles) === null || _collection$fontStyle === void 0 ? void 0 : _collection$fontStyle[0]) ?? ((_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) {
@@ -149,15 +166,28 @@ function CharacterViewerComponent(_ref3) {
       ...(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 [selectedCharacter, setSelectedCharacter] = (0, _react.useState)('A');
+  const [activeCharacter, setActiveCharacter] = (0, _react.useState)('A');
   const visibleCharacter = activeCharacter ?? selectedCharacter;
+  const visibleCharacterGlyphName = fontStyle === null || fontStyle === void 0 ? void 0 : (_fontStyle$glyphNames = fontStyle.glyphNames) === null || _fontStyle$glyphNames === void 0 ? void 0 : (_fontStyle$glyphNames2 = _fontStyle$glyphNames.find(_ref4 => {
+    let {
+      characters,
+      feature
+    } = _ref4;
+    return feature === null && visibleCharacter === characters;
+  })) === null || _fontStyle$glyphNames2 === void 0 ? void 0 : _fontStyle$glyphNames2.name;
   const [selectedFeatureCharacter, setSelectedFeatureCharacter] = (0, _react.useState)();
   const [activeFeatureCharacter, setActiveFeatureCharacter] = (0, _react.useState)([(fontStyle === null || fontStyle === void 0 ? void 0 : (_fontStyle$featureCha = fontStyle.featureCharacters) === null || _fontStyle$featureCha === void 0 ? void 0 : (_fontStyle$featureCha2 = _fontStyle$featureCha[0]) === null || _fontStyle$featureCha2 === void 0 ? void 0 : _fontStyle$featureCha2.characters[0]) ?? '', fontStyle === null || fontStyle === void 0 ? void 0 : (_fontStyle$featureCha3 = fontStyle.featureCharacters) === null || _fontStyle$featureCha3 === void 0 ? void 0 : (_fontStyle$featureCha4 = _fontStyle$featureCha3[0]) === null || _fontStyle$featureCha4 === void 0 ? void 0 : _fontStyle$featureCha4.feature]);
   const visibleFeatureCharacter = activeFeatureCharacter ?? selectedFeatureCharacter;
+  const visibleFeatureCharacterGlyphName = fontStyle === null || fontStyle === void 0 ? void 0 : (_fontStyle$glyphNames3 = fontStyle.glyphNames) === null || _fontStyle$glyphNames3 === void 0 ? void 0 : (_fontStyle$glyphNames4 = _fontStyle$glyphNames3.find(_ref5 => {
+    let {
+      characters,
+      feature
+    } = _ref5;
+    return feature === (visibleFeatureCharacter === null || visibleFeatureCharacter === void 0 ? void 0 : visibleFeatureCharacter[1]) && (visibleFeatureCharacter === null || visibleFeatureCharacter === void 0 ? void 0 : visibleFeatureCharacter[0]) === characters;
+  })) === null || _fontStyle$glyphNames4 === void 0 ? void 0 : _fontStyle$glyphNames4.name;
   const featureUnicodeDecimal = visibleFeatureCharacter === null || visibleFeatureCharacter === void 0 ? void 0 : visibleFeatureCharacter[0].split('').map(char => char.charCodeAt(0).toString(10)).join(', ');
   const featureUnicodeHex = visibleFeatureCharacter === null || visibleFeatureCharacter === void 0 ? void 0 : visibleFeatureCharacter[0].split('').map(char => char.charCodeAt(0).toString(16).padStart(4, '0')).join(', ');
-  const featureHtmlEntities = visibleFeatureCharacter === null || visibleFeatureCharacter === void 0 ? void 0 : visibleFeatureCharacter[0].split('').map(char => `&#x${char.charCodeAt(0).toString(16)};`).join('');
   const handleMouseLeave = () => {
     if (selectedCharacter) setActiveCharacter(undefined);
   };
@@ -172,19 +202,60 @@ function CharacterViewerComponent(_ref3) {
     ref: monitorRef,
     width: monitorWidth
   } = useSize();
-  const {
-    ref: featureMonitorRef,
-    width: featureMonitorWidth
-  } = useSize();
   if (!fontStyle) return null;
-  const characterVariants = (_fontStyle$featureCha5 = fontStyle.featureCharacters) === null || _fontStyle$featureCha5 === void 0 ? void 0 : _fontStyle$featureCha5.filter(_ref4 => {
+  const characterVariants = (_fontStyle$featureCha5 = fontStyle.featureCharacters) === null || _fontStyle$featureCha5 === void 0 ? void 0 : _fontStyle$featureCha5.filter(_ref6 => {
     let {
       feature
-    } = _ref4;
+    } = _ref6;
     return feature.startsWith('cv');
   });
+  const lines = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "character-viewer__monitor__line",
+    "data-name": "baseline"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "character-viewer__monitor__line__label"
+  }, "Baseline"), /*#__PURE__*/_react.default.createElement("span", {
+    className: "character-viewer__monitor__line__value"
+  }, "0")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "character-viewer__monitor__line",
+    "data-name": "descender"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "character-viewer__monitor__line__label"
+  }, "Descender"), /*#__PURE__*/_react.default.createElement("span", {
+    className: "character-viewer__monitor__line__value"
+  }, fontStyle.verticalMetrics.descender)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "character-viewer__monitor__line",
+    "data-name": "ascender"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "character-viewer__monitor__line__label"
+  }, "Ascender"), /*#__PURE__*/_react.default.createElement("span", {
+    className: "character-viewer__monitor__line__value"
+  }, fontStyle.verticalMetrics.ascender)), fontStyle.verticalMetrics.capHeight && /*#__PURE__*/_react.default.createElement("div", {
+    className: "character-viewer__monitor__line",
+    "data-name": "cap-height"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "character-viewer__monitor__line__label"
+  }, "Cap height"), /*#__PURE__*/_react.default.createElement("span", {
+    className: "character-viewer__monitor__line__value"
+  }, fontStyle.verticalMetrics.capHeight)), fontStyle.verticalMetrics.xHeight && /*#__PURE__*/_react.default.createElement("div", {
+    className: "character-viewer__monitor__line",
+    "data-name": "x-height"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "character-viewer__monitor__line__label"
+  }, "x-Height"), /*#__PURE__*/_react.default.createElement("span", {
+    className: "character-viewer__monitor__line__value"
+  }, fontStyle.verticalMetrics.xHeight)));
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer"
+    className: "character-viewer",
+    style: {
+      '--units-per-em': fontStyle.verticalMetrics.unitsPerEm,
+      '--ascender': fontStyle.verticalMetrics.ascender,
+      '--descender': fontStyle.verticalMetrics.descender,
+      '--cap-height': fontStyle.verticalMetrics.capHeight ?? undefined,
+      '--x-height': fontStyle.verticalMetrics.xHeight ?? undefined,
+      '--line-gap': fontStyle.verticalMetrics.lineGap ?? undefined,
+      '--monitor-width': monitorWidth
+    }
   }, allCollections.filter(coll => coll.collectionType === 'family').map(coll => /*#__PURE__*/_react.default.createElement(_Stylesheet.default, {
     key: coll.id,
     href: coll.cssUrl
@@ -197,13 +268,12 @@ function CharacterViewerComponent(_ref3) {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer__monitor__title"
   }, "Character map"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "character-viewer__monitor__character-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer__monitor__character",
-    style: {
-      ...style,
-      '--width': monitorWidth
-    },
+    style: style,
     ref: monitorRef
-  }, /*#__PURE__*/_react.default.createElement("span", null, visibleCharacter)), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("span", null, visibleCharacter)), lines), /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer__monitor__details"
   }, /*#__PURE__*/_react.default.createElement("span", null, "Font style"), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(StyleSelect, {
     collections: allCollections,
@@ -212,20 +282,23 @@ function CharacterViewerComponent(_ref3) {
       fontStyleId,
       variableSettings
     }
-  })), /*#__PURE__*/_react.default.createElement("span", null, "Unicode decimal"), /*#__PURE__*/_react.default.createElement("span", null, visibleCharacter.charCodeAt(0).toString(10)), /*#__PURE__*/_react.default.createElement("span", null, "Unicode hex"), /*#__PURE__*/_react.default.createElement("span", null, visibleCharacter.charCodeAt(0).toString(16).padStart(4, '0')), /*#__PURE__*/_react.default.createElement("span", null, "HTML entity"), /*#__PURE__*/_react.default.createElement("span", null, "&#x", visibleCharacter.charCodeAt(0).toString(16), ";")))), /*#__PURE__*/_react.default.createElement("div", {
+  })), /*#__PURE__*/_react.default.createElement("span", null, "Glyph name"), /*#__PURE__*/_react.default.createElement("span", null, visibleCharacterGlyphName), /*#__PURE__*/_react.default.createElement("span", null, "Unicode name"), /*#__PURE__*/_react.default.createElement("span", {
+    title: (unicodeData === null || unicodeData === void 0 ? void 0 : unicodeData[visibleCharacter.charCodeAt(0)]) ?? ''
+  }, unicodeData ? unicodeData[visibleCharacter.charCodeAt(0)] ?? '' : 'Loading...'), /*#__PURE__*/_react.default.createElement("span", null, "Unicode decimal"), /*#__PURE__*/_react.default.createElement("span", null, visibleCharacter.charCodeAt(0).toString(10)), /*#__PURE__*/_react.default.createElement("span", null, "Unicode hex"), /*#__PURE__*/_react.default.createElement("span", null, visibleCharacter.charCodeAt(0).toString(16).padStart(4, '0'))))), /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer_blocks",
     ref: blocksRef,
     style: {
-      '--width': blocksWidth
+      '--width': blocksWidth ?? 600
     }
-  }, (_fontStyle$characterB3 = fontStyle.characterBlocks) === null || _fontStyle$characterB3 === void 0 ? void 0 : _fontStyle$characterB3.map((_ref5, i) => {
+  }, (_fontStyle$characterB = fontStyle.characterBlocks) === null || _fontStyle$characterB === void 0 ? void 0 : _fontStyle$characterB.map((_ref7, i) => {
     let {
       name,
       characters
-    } = _ref5;
+    } = _ref7;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "character-viewer__block",
-      key: i
+      key: i,
+      "data-name": name
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "character-viewer__block__name"
     }, name), /*#__PURE__*/_react.default.createElement("div", {
@@ -247,30 +320,30 @@ function CharacterViewerComponent(_ref3) {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer__feature-monitor__title"
   }, "OpenType features"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer__feature-monitor__characters",
-    ref: featureMonitorRef,
-    style: {
-      '--width': featureMonitorWidth
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer__feature-monitor__characters__off"
+    className: "character-viewer__feature-monitor__labels"
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "character-viewer__feature-monitor__label"
-  }, "OFF"), /*#__PURE__*/_react.default.createElement("div", {
+  }, "OFF"), /*#__PURE__*/_react.default.createElement("span", {
+    className: "character-viewer__feature-monitor__label"
+  }, "ON")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "character-viewer__feature-monitor__characters"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "character-viewer__feature-monitor__characters__off"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "character-viewer__feature-monitor__character",
     style: {
       ...style,
       fontFeatureSettings: `'calt' off, 'liga' off, '${visibleFeatureCharacter[1]}' off`
     }
   }, visibleFeatureCharacter[0])), /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer__feature-monitor__characters__on"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "character-viewer__feature-monitor__label"
-  }, "ON"), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "character-viewer__feature-monitor__character",
     style: {
       ...style,
       fontFeatureSettings: `'${visibleFeatureCharacter[1]}' on`
     }
-  }, visibleFeatureCharacter[0]))), /*#__PURE__*/_react.default.createElement("div", {
+  }, visibleFeatureCharacter[0])), lines), /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer__monitor__details"
   }, /*#__PURE__*/_react.default.createElement("span", null, "Font style"), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(StyleSelect, {
     collections: allCollections,
@@ -279,31 +352,31 @@ function CharacterViewerComponent(_ref3) {
       fontStyleId,
       variableSettings
     }
-  })), /*#__PURE__*/_react.default.createElement("span", null, "Unicode decimal"), /*#__PURE__*/_react.default.createElement("span", {
+  })), /*#__PURE__*/_react.default.createElement("span", null, "Glyph name"), /*#__PURE__*/_react.default.createElement("span", null, visibleFeatureCharacterGlyphName), /*#__PURE__*/_react.default.createElement("span", null, "Unicode decimal"), /*#__PURE__*/_react.default.createElement("span", {
     title: featureUnicodeDecimal
   }, featureUnicodeDecimal), /*#__PURE__*/_react.default.createElement("span", null, "Unicode hex"), /*#__PURE__*/_react.default.createElement("span", {
     title: featureUnicodeHex
-  }, featureUnicodeHex), /*#__PURE__*/_react.default.createElement("span", null, "OpenType feature"), /*#__PURE__*/_react.default.createElement("span", null, visibleFeatureCharacter[1]), /*#__PURE__*/_react.default.createElement("span", null, "HTML entities"), /*#__PURE__*/_react.default.createElement("span", {
-    title: featureHtmlEntities
-  }, featureHtmlEntities)))), /*#__PURE__*/_react.default.createElement("div", {
+  }, featureUnicodeHex), /*#__PURE__*/_react.default.createElement("span", null, "OpenType feature"), /*#__PURE__*/_react.default.createElement("span", null, visibleFeatureCharacter[1])))), /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer_blocks",
     style: {
-      '--width': blocksWidth
+      '--width': blocksWidth ?? 600
     }
-  }, (_fontStyle$featureCha7 = fontStyle.featureCharacters) === null || _fontStyle$featureCha7 === void 0 ? void 0 : (_fontStyle$featureCha8 = _fontStyle$featureCha7.filter(_ref6 => {
+  }, (_fontStyle$featureCha7 = fontStyle.featureCharacters) === null || _fontStyle$featureCha7 === void 0 ? void 0 : (_fontStyle$featureCha8 = _fontStyle$featureCha7.filter(_ref8 => {
     let {
       feature
-    } = _ref6;
+    } = _ref8;
     return !feature.startsWith('cv');
-  })) === null || _fontStyle$featureCha8 === void 0 ? void 0 : _fontStyle$featureCha8.map((_ref7, i) => {
+  })) === null || _fontStyle$featureCha8 === void 0 ? void 0 : _fontStyle$featureCha8.map((_ref9, i) => {
     let {
       name,
       feature,
       characters
-    } = _ref7;
+    } = _ref9;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "character-viewer__block",
-      key: i
+      key: i,
+      "data-feature": feature,
+      "data-name": name
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "character-viewer__block__name"
     }, name), /*#__PURE__*/_react.default.createElement("div", {
@@ -330,11 +403,11 @@ function CharacterViewerComponent(_ref3) {
       ...style
     },
     onMouseLeave: handleFeatureCharacterMouseLeave
-  }, characterVariants.flatMap((_ref8, i) => {
+  }, characterVariants.flatMap((_ref10, i) => {
     let {
       feature,
       characters
-    } = _ref8;
+    } = _ref10;
     return characters.map((chars, j) => /*#__PURE__*/_react.default.createElement(Character, {
       key: `${i}${j}`,
       style: {
@@ -346,12 +419,12 @@ function CharacterViewerComponent(_ref3) {
     }, chars));
   }))) : null)) : null);
 }
-_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);
+_CharacterViewer_family !== void 0 ? _CharacterViewer_family : (_CharacterViewer_family = require("../../__generated__/CharacterViewer_family.graphql"), _CharacterViewer_family.hash && _CharacterViewer_family.hash !== "d940cabe9ed658d5cbed547287f2de0e" && 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 idQuery = _CharacterViewerIDQuery !== void 0 ? _CharacterViewerIDQuery : (_CharacterViewerIDQuery = require("../../__generated__/CharacterViewerIDQuery.graphql"), _CharacterViewerIDQuery.hash && _CharacterViewerIDQuery.hash !== "f90b09a4df6d95307b0a5d5fda487cdc" && console.error("The definition of 'CharacterViewerIDQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewerIDQuery);
-function CharacterViewerIdQueryRenderer(_ref9) {
+function CharacterViewerIdQueryRenderer(_ref11) {
   let {
     collectionId
-  } = _ref9;
+  } = _ref11;
   const data = (0, _reactRelay.useLazyLoadQuery)(idQuery, {
     collectionId
   });
@@ -360,11 +433,11 @@ function CharacterViewerIdQueryRenderer(_ref9) {
     collection: data.node
   });
 }
-function CharacterViewerPreloadedIDQueryRenderer(_ref10) {
+function CharacterViewerPreloadedIDQueryRenderer(_ref12) {
   let {
     preloadedQuery,
     ...rest
-  } = _ref10;
+  } = _ref12;
   const queryRef = (0, _useSerializablePreloadedQuery.default)(preloadedQuery);
   const data = (0, _reactRelay.usePreloadedQuery)(idQuery, queryRef);
   if (!data.node) return null;
@@ -372,11 +445,11 @@ function CharacterViewerPreloadedIDQueryRenderer(_ref10) {
     collection: data.node
   }));
 }
-function CharacterViewerSlugQueryRenderer(_ref11) {
+function CharacterViewerSlugQueryRenderer(_ref13) {
   var _data$viewer, _data$viewer$slug;
   let {
     collectionSlug
-  } = _ref11;
+  } = _ref13;
   const data = (0, _reactRelay.useLazyLoadQuery)(_CharacterViewerSlugQuery !== void 0 ? _CharacterViewerSlugQuery : (_CharacterViewerSlugQuery = require("../../__generated__/CharacterViewerSlugQuery.graphql"), _CharacterViewerSlugQuery.hash && _CharacterViewerSlugQuery.hash !== "afa08a8f050e0434308892fea6e3c267" && console.error("The definition of 'CharacterViewerSlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewerSlugQuery), {
     collectionSlug
   });
@@ -386,12 +459,12 @@ function CharacterViewerSlugQueryRenderer(_ref11) {
     collection: collection
   });
 }
-function CharacterViewerPreloadedSlugQueryRenderer(_ref12) {
+function CharacterViewerPreloadedSlugQueryRenderer(_ref14) {
   var _data$viewer2, _data$viewer2$slug;
   let {
     preloadedQuery,
     ...rest
-  } = _ref12;
+  } = _ref14;
   const queryRef = (0, _useSerializablePreloadedQuery.default)(preloadedQuery);
   const data = (0, _reactRelay.usePreloadedQuery)(idQuery, queryRef);
   const collection = data === null || data === void 0 ? void 0 : (_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.fontCollection;
@@ -400,11 +473,11 @@ function CharacterViewerPreloadedSlugQueryRenderer(_ref12) {
     collection: collection
   }));
 }
-function CharacterViewer(_ref13) {
+function CharacterViewer(_ref15) {
   let {
     collectionId,
     collectionSlug
-  } = _ref13;
+  } = _ref15;
   if (collectionId) {
     return /*#__PURE__*/_react.default.createElement(CharacterViewerIdQueryRenderer, {
       collectionId: collectionId

package/dist/components/ConfigContext.d.ts

@@ -26,13 +26,14 @@ export declare const makeConfig: (config?: Config) => {
         groupEdit: boolean;
         bulletStyle: "square" | "round";
         openTypeFeatures: {
+            buttonLabel: string;
             interactionStyle: "select" | "panel";
             columns: {
                 features: (string | {
                     code: string;
                     name: string;
                 })[];
-                range?: number | undefined;
+                range: number;
             }[] | undefined;
             selectionStyle: "checkbox" | "bullet";
         };
@@ -76,13 +77,14 @@ declare const _default: React.Context<{
         groupEdit: boolean;
         bulletStyle: "square" | "round";
         openTypeFeatures: {
+            buttonLabel: string;
             interactionStyle: "select" | "panel";
             columns: {
                 features: (string | {
                     code: string;
                     name: string;
                 })[];
-                range?: number | undefined;
+                range: number;
             }[] | undefined;
             selectionStyle: "checkbox" | "bullet";
         };

package/dist/components/ConfigContext.js

@@ -7,7 +7,7 @@ exports.makeConfig = exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const makeTypeTesterConfig = config => {
-  var _config$openTypeFeatu, _config$openTypeFeatu2, _config$openTypeFeatu3, _config$size, _config$size2, _config$size3, _config$lineHeight, _config$lineHeight2, _config$lineHeight3;
+  var _config$openTypeFeatu, _config$openTypeFeatu2, _config$openTypeFeatu3, _config$openTypeFeatu4, _config$size, _config$size2, _config$size3, _config$lineHeight, _config$lineHeight2, _config$lineHeight3;
   let shy = (config === null || config === void 0 ? void 0 : config.shy) ?? false;
   if (shy === true) shy = 'hover';
   let toolsPosition = (config === null || config === void 0 ? void 0 : config.toolsPosition) ?? 'inline';
@@ -28,9 +28,10 @@ const makeTypeTesterConfig = config => {
     groupEdit: (config === null || config === void 0 ? void 0 : config.groupEdit) ?? false,
     bulletStyle: (config === null || config === void 0 ? void 0 : config.bulletStyle) ?? 'square',
     openTypeFeatures: {
-      interactionStyle: (config === null || config === void 0 ? void 0 : (_config$openTypeFeatu = config.openTypeFeatures) === null || _config$openTypeFeatu === void 0 ? void 0 : _config$openTypeFeatu.interactionStyle) ?? 'panel',
-      columns: config === null || config === void 0 ? void 0 : (_config$openTypeFeatu2 = config.openTypeFeatures) === null || _config$openTypeFeatu2 === void 0 ? void 0 : _config$openTypeFeatu2.columns,
-      selectionStyle: (config === null || config === void 0 ? void 0 : (_config$openTypeFeatu3 = config.openTypeFeatures) === null || _config$openTypeFeatu3 === void 0 ? void 0 : _config$openTypeFeatu3.selectionStyle) ?? 'bullet'
+      buttonLabel: (config === null || config === void 0 ? void 0 : (_config$openTypeFeatu = config.openTypeFeatures) === null || _config$openTypeFeatu === void 0 ? void 0 : _config$openTypeFeatu.buttonLabel) ?? 'OT Features',
+      interactionStyle: (config === null || config === void 0 ? void 0 : (_config$openTypeFeatu2 = config.openTypeFeatures) === null || _config$openTypeFeatu2 === void 0 ? void 0 : _config$openTypeFeatu2.interactionStyle) ?? 'panel',
+      columns: config === null || config === void 0 ? void 0 : (_config$openTypeFeatu3 = config.openTypeFeatures) === null || _config$openTypeFeatu3 === void 0 ? void 0 : _config$openTypeFeatu3.columns,
+      selectionStyle: (config === null || config === void 0 ? void 0 : (_config$openTypeFeatu4 = config.openTypeFeatures) === null || _config$openTypeFeatu4 === void 0 ? void 0 : _config$openTypeFeatu4.selectionStyle) ?? 'bullet'
     },
     variableAxesPosition: (config === null || config === void 0 ? void 0 : config.variableAxesPosition) ?? 'auto',
     alignmentButtons: (config === null || config === void 0 ? void 0 : config.alignmentButtons) ?? false,

package/dist/components/NewsletterSignup/NewsletterSignupElement.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { NewsletterSignup_props } from './index';
+interface NewsletterSignupElement_props {
+    optInCheckboxChecked?: string;
+}
+export default function NewsletterSignupElement(props: NewsletterSignup_props & NewsletterSignupElement_props): React.JSX.Element;
+export {};

package/dist/components/NewsletterSignup/NewsletterSignupElement.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = NewsletterSignupElement;
+var _react = _interopRequireDefault(require("react"));
+var _index = _interopRequireDefault(require("./index"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 NewsletterSignupElement(props) {
+  return /*#__PURE__*/_react.default.createElement(_index.default, _extends({}, props, {
+    optInCheckboxChecked: props.optInCheckboxChecked === 'true'
+  }));
+}

package/dist/components/Root/index.js

@@ -29,7 +29,7 @@ const customElementMap = {
   'fontdue-cookie-notification': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../CookieNotification')))),
   'fontdue-font-families': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../FontFamilies')))),
   'fontdue-customer-login-form': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../CustomerLoginForm')))),
-  'fontdue-newsletter-signup': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../NewsletterSignup')))),
+  'fontdue-newsletter-signup': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../NewsletterSignup/NewsletterSignupElement')))),
   // @ts-ignore
   'fontdue-precart': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../Precart')))),
   // @ts-ignore

package/dist/components/Select/index.js

@@ -20,7 +20,7 @@ const Select = _ref => {
     className: "select"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "select__text"
-  }, /*#__PURE__*/_react.default.createElement(_Icons.DownArrow, null), value === null ? nullText : (_options$find = options.find(_ref2 => {
+  }, /*#__PURE__*/_react.default.createElement(_Icons.CarrotDown, null), value === null ? nullText : (_options$find = options.find(_ref2 => {
     let {
       value: v
     } = _ref2;

package/dist/components/StoreModal/StoreModalCart.js

@@ -15,7 +15,7 @@ var _CouponCodeInput = _interopRequireDefault(require("../Cart/CouponCodeInput")
 var _StoreModalCartLayout = _interopRequireDefault(require("../elements/StoreModalCartLayout"));
 var _EmptyCart = _interopRequireDefault(require("../elements/EmptyCart"));
 var _utils = require("../Cart/utils");
-var _StoreModalCartQuery;
+var _StoreModalCartQuery; // @ts-ignore
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const StoreModalCart = _ref => {
   var _order$stripePaymentM, _order$orderItems;

package/dist/components/TypeTester/TypeTesterFeaturesButton.js

@@ -52,7 +52,7 @@ const TypeTesterFeaturesButton = _ref => {
       onClick: () => toggleFeaturesOpen()
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: "type-tester__features-button__text"
-    }, "OT Features"), ' ', featuresOpen ? /*#__PURE__*/_react.default.createElement(_CarrotUp.default, null) : /*#__PURE__*/_react.default.createElement(_CarrotDown.default, null)));
+    }, config.openTypeFeatures.buttonLabel), ' ', featuresOpen ? /*#__PURE__*/_react.default.createElement(_CarrotUp.default, null) : /*#__PURE__*/_react.default.createElement(_CarrotDown.default, null)));
   }
   if (config.openTypeFeatures.interactionStyle === 'select') {
     if (!showFeatures || showFeatures.length === 0) return null;

package/dist/components/TypeTester/TypeTesterStandalone.js

@@ -6,13 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TypeTesterStandalonePreloadedQueryRenderer = TypeTesterStandalonePreloadedQueryRenderer;
 exports.default = TypeTesterStandalone;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactRelay = require("react-relay");
 var _index = _interopRequireDefault(require("./index"));
 var _TypeTesterContext = _interopRequireDefault(require("./TypeTesterContext"));
 var _useSerializablePreloadedQuery = _interopRequireDefault(require("../../relay/useSerializablePreloadedQuery"));
+var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
 var _TypeTesterStandaloneQuery;
 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 ? 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 TypeTesterStandaloneComponent(_ref) {
   var _data$viewer, _data$viewer2, _data$viewer2$fontSty, _data$viewer2$fontSty2, _data$viewer2$fontSty3, _data$viewer3, _data$viewer3$fontSty, _data$viewer3$fontSty2;
@@ -32,7 +35,10 @@ function TypeTesterStandaloneComponent(_ref) {
     onBlur,
     data
   } = _ref;
-  let defaultAlignment = 'left';
+  const {
+    typeTester: config
+  } = (0, _react.useContext)(_ConfigContext.default);
+  let defaultAlignment = config.initialAlignment;
   if (direction === 'rtl') defaultAlignment = 'right';
   return /*#__PURE__*/_react.default.createElement(_TypeTesterContext.default, {
     testers: {

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

@@ -21,13 +21,14 @@ export interface TypeTesterConfig {
     priceText?: boolean;
     autofitOnChange?: boolean;
     openTypeFeatures?: {
-        interactionStyle: 'panel' | 'select';
+        buttonLabel?: string;
+        interactionStyle?: 'panel' | 'select';
         columns?: {
             features: ({
                 code: string;
                 name: string;
             } | string)[];
-            range?: number;
+            range: number;
         }[];
         selectionStyle?: 'bullet' | 'checkbox';
     };

package/dist/data/unicodeData.d.ts

@@ -0,0 +1,4 @@
+declare const data: {
+    [code: string]: string;
+};
+export default data;