fontdue-js 2.12.1 → 2.13.0

package/dist/components/StripeProvider/index.js

@@ -15,34 +15,41 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StripeProvider = _ref => {
-  var _data$settings, _data$currentOrder, _data$currentOrder$st, _data$settings2, _data$themeConfig;
+  var _data$settings, _data$settings$uiFont, _data$settings$uiFont2, _data$settings$uiFont3, _data$settings2, _data$currentOrder, _data$currentOrder$st, _data$themeConfig;
   let {
     viewer,
     providerType,
     children,
     requireClientSecret
   } = _ref;
-  const data = (0, _reactRelay.useFragment)((_StripeProvider_viewer2.default.hash && _StripeProvider_viewer2.default.hash !== "f605dbdf8e21abec2830e0ce0c7bcc4a" && console.error("The definition of 'StripeProvider_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StripeProvider_viewer2.default), viewer);
+  const data = (0, _reactRelay.useFragment)((_StripeProvider_viewer2.default.hash && _StripeProvider_viewer2.default.hash !== "dd5fd4cdd75d727050b8d1d6f4269fa8" && console.error("The definition of 'StripeProvider_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StripeProvider_viewer2.default), viewer);
   const stripeKey = data.stripePublishableKey;
   const stripeAccount = data.stripeAccountId;
   const stripePromiseRef = (0, _react.useRef)(stripeKey && stripeAccount ? (0, _stripeJs.loadStripe)(stripeKey, {
     stripeAccount
   }) : null);
-  const cssSrc = (_data$settings = data.settings) === null || _data$settings === void 0 ? void 0 : _data$settings.uiFontUrl;
-
-  // the stripe provider may not be rendered, so we have to conditonally call
-  // useStripe down in the children
-  const clientSecret = ((_data$currentOrder = data.currentOrder) === null || _data$currentOrder === void 0 ? void 0 : (_data$currentOrder$st = _data$currentOrder.stripePaymentIntent) === null || _data$currentOrder$st === void 0 ? void 0 : _data$currentOrder$st.clientSecret) ?? undefined;
-  if (requireClientSecret && !clientSecret) return children;
-
+  let customFontSource;
+  const woffSrc = (_data$settings = data.settings) === null || _data$settings === void 0 ? void 0 : (_data$settings$uiFont = _data$settings.uiFontStyle) === null || _data$settings$uiFont === void 0 ? void 0 : (_data$settings$uiFont2 = _data$settings$uiFont.webfontSources) === null || _data$settings$uiFont2 === void 0 ? void 0 : (_data$settings$uiFont3 = _data$settings$uiFont2.find(source => (source === null || source === void 0 ? void 0 : source.format) === 'woff2')) === null || _data$settings$uiFont3 === void 0 ? void 0 : _data$settings$uiFont3.url;
+  let fontFamily = (_data$settings2 = data.settings) !== null && _data$settings2 !== void 0 && _data$settings2.uiFontStyle ? `${data.settings.uiFontStyle.cssFamily} ${data.settings.uiFontStyle.name}` : undefined;
   // stripe validates that the strings match this pattern and throws an error
   // if they don't, and refuses to render the element. for example if a font
   // family has a special character in the name (which is actually valid).
   // so we just don't try to the fontFamily if it's not gonna be valid.
   // this regex is copied from the stripe js
   const stripeRegex = /^[#a-zA-Z0-9-_\s,"'().]*$/;
-  let fontFamily = `"${(_data$settings2 = data.settings) === null || _data$settings2 === void 0 ? void 0 : _data$settings2.uiFontName}", sans-serif`;
-  if (!stripeRegex.test(fontFamily)) fontFamily = undefined;
+  if (fontFamily && !stripeRegex.test(fontFamily)) fontFamily = undefined;
+  if (woffSrc && fontFamily) {
+    customFontSource = {
+      src: `url(${woffSrc})`,
+      family: fontFamily,
+      weight: '400'
+    };
+  }
+
+  // the stripe provider may not be rendered, so we have to conditonally call
+  // useStripe down in the children
+  const clientSecret = ((_data$currentOrder = data.currentOrder) === null || _data$currentOrder === void 0 ? void 0 : (_data$currentOrder$st = _data$currentOrder.stripePaymentIntent) === null || _data$currentOrder$st === void 0 ? void 0 : _data$currentOrder$st.clientSecret) ?? undefined;
+  if (requireClientSecret && !clientSecret) return children;
   const customProperties = (0, _utils.parseCustomProperties)((_data$themeConfig = data.themeConfig) === null || _data$themeConfig === void 0 ? void 0 : _data$themeConfig.customProperties);
   const environment = (0, _reactRelay.useRelayEnvironment)();
   const fetchClientSecret = (0, _react.useCallback)(() => {
@@ -83,7 +90,7 @@ const StripeProvider = _ref => {
         colorTextPlaceholder: customProperties['--secondary_text_color'],
         focusBoxShadow: `0 0 0 1px ${customProperties['--primary_text_color']}`,
         fontSizeBase: '16px',
-        fontSmooth: 'auto',
+        fontSmooth: 'always',
         gridRowSpacing: '30px',
         spacingUnit: '5px',
         accordionItemSpacing: '20px'
@@ -141,9 +148,7 @@ const StripeProvider = _ref => {
         }
       }
     },
-    fonts: cssSrc ? [{
-      cssSrc
-    }] : undefined,
+    fonts: customFontSource ? [customFontSource] : undefined,
     clientSecret
   };
   if (providerType === 'checkout') {

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

@@ -6,6 +6,7 @@ interface TypeTesterState {
     contentEdited: boolean;
     features: Features;
     size: Size;
+    letterSpacing: number;
     lineHeight: number;
     focused: boolean;
     featuresOpen: boolean;
@@ -22,6 +23,7 @@ export interface TypeTestersInitialState {
         content: string | null;
         size: number | null;
         lineHeight: number | null;
+        letterSpacing: number | null;
         autofit: boolean;
         alignment: Alignment;
         variableSettings: VariableSettings | null;
@@ -63,6 +65,10 @@ type TypeTesterContextAction = {
     type: 'SET_LINE_HEIGHT';
     id: string;
     value: number;
+} | {
+    type: 'SET_LETTER_SPACING';
+    id: string;
+    value: number;
 } | {
     type: 'SET_ALIGNMENT';
     id: string;

package/dist/components/TypeTester/TypeTesterContext.js

@@ -82,6 +82,10 @@ const groupReducer = (state, action) => {
       return updateTester(state, action.id, {
         size: action.value
       }, action.propagate);
+    case 'SET_LETTER_SPACING':
+      return updateTester(state, action.id, {
+        letterSpacing: action.value
+      });
     case 'SET_FEATURES':
       return updateTester(state, action.id, {
         features: action.value
@@ -135,6 +139,7 @@ const TypeTesterContextComponent = _ref => {
       content,
       contentEdited: false,
       size: initialState.size ?? 72,
+      letterSpacing: initialState.letterSpacing ?? 0,
       lineHeight: initialState.lineHeight ?? 1,
       autofit: initialState.autofit,
       features: initialState.features ?? [],

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

@@ -4,6 +4,7 @@ import { SerializablePreloadedQuery } from '../../relay/loadSerializableQuery';
 import { TypeTesterStandaloneQuery } from '__generated__/TypeTesterStandaloneQuery.graphql';
 interface TypeTesterStandaloneComponent_props {
     lineHeight?: number | null;
+    letterSpacing?: number | null;
     fontSize?: number | null;
     axes?: string[] | null;
     features?: string[] | null;

package/dist/components/TypeTester/TypeTesterStandalone.js

@@ -31,6 +31,7 @@ function TypeTesterStandaloneComponent(_ref) {
     featureSettings = null,
     variableSettings = null,
     lineHeight,
+    letterSpacing,
     alignment,
     fontSize,
     autofit,
@@ -77,6 +78,7 @@ function TypeTesterStandaloneComponent(_ref) {
         autofit: autofit ?? false,
         size: fontSize ?? 72,
         lineHeight: lineHeight ?? 1,
+        letterSpacing: letterSpacing ?? 0,
         alignment: alignment ?? defaultAlignment,
         features: (featureSettings === null || featureSettings === void 0 ? void 0 : featureSettings.filter(setting => setting.value === '1').map(setting => setting.feature)) ?? featuresSelected ?? null,
         variableSettings: (variableSettings === null || variableSettings === void 0 ? void 0 : variableSettings.reduce((acc, _ref2) => {

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

@@ -3,6 +3,7 @@ interface TypeTesterElement_props {
     familyName: string;
     styleName: string;
     lineHeight?: string;
+    letterSpacing?: string;
     fontSize?: string;
     features?: string;
     axes?: string;

package/dist/components/TypeTester/TypeTesterStandaloneElement.js

@@ -36,6 +36,7 @@ function parseVariableSettings(input) {
 const TypeTesterStandaloneElement = _ref => {
   let {
     lineHeight,
+    letterSpacing,
     fontSize,
     axes,
     features,
@@ -49,6 +50,7 @@ const TypeTesterStandaloneElement = _ref => {
   return /*#__PURE__*/_react.default.createElement(_TypeTesterStandalone.default, _extends({
     autofit: parseBool(autofit),
     lineHeight: lineHeight ? parseFloat(lineHeight) : undefined,
+    letterSpacing: letterSpacing ? parseFloat(letterSpacing) : undefined,
     fontSize: fontSize ? parseFloat(fontSize) : undefined,
     axes: (axes === null || axes === void 0 ? void 0 : axes.split(',')) ?? [],
     features: (features === null || features === void 0 ? void 0 : features.split(',')) ?? [],

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

@@ -14,6 +14,8 @@ interface TypeTesterState {
     } | undefined) => void;
     lineHeight: LineHeight;
     setLineHeight: (value: LineHeight) => void;
+    letterSpacing: number;
+    setLetterSpacing: (value: number) => void;
     focused: boolean;
     setFocused: (value: boolean) => void;
     features: string[];

package/dist/components/TypeTester/TypeTesterState.js

@@ -28,6 +28,7 @@ const useTypeTesterState = _ref => {
     featuresOpen,
     autofit,
     lineHeight,
+    letterSpacing,
     alignment,
     variableSettings,
     direction
@@ -58,6 +59,12 @@ const useTypeTesterState = _ref => {
       value,
       id
     }),
+    letterSpacing,
+    setLetterSpacing: value => dispatch({
+      type: 'SET_LETTER_SPACING',
+      value,
+      id
+    }),
     alignment,
     setAlignment: value => dispatch({
       type: 'SET_ALIGNMENT',

package/dist/components/TypeTester/TypeTesterToolbar.js

@@ -58,7 +58,18 @@ const TypeTesterToolbar = _ref => {
     onChange: props.setSize,
     stepSize: 1,
     interpolator: "log10"
-  }), config.lineHeight && /*#__PURE__*/_react.default.createElement("div", {
+  })), config.letterSpacing && /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-tester__slider__letter-spacing"
+  }, config.letterSpacing.label && /*#__PURE__*/_react.default.createElement("span", {
+    className: "type-tester__slider__line-height-label"
+  }, config.letterSpacing.label), /*#__PURE__*/_react.default.createElement(_TypeTesterSlider.default, {
+    min: config.letterSpacing.min,
+    max: config.letterSpacing.max,
+    value: props.letterSpacing,
+    onChange: props.setLetterSpacing,
+    stepSize: 0.01,
+    interpolator: "linear"
+  })), config.lineHeight && /*#__PURE__*/_react.default.createElement("div", {
     className: "type-tester__slider__line-height"
   }, config.lineHeight.label && /*#__PURE__*/_react.default.createElement("span", {
     className: "type-tester__slider__line-height-label"
@@ -69,7 +80,7 @@ const TypeTesterToolbar = _ref => {
     onChange: props.setLineHeight,
     stepSize: 0.01,
     interpolator: "log10"
-  }))), axesPosition === 'inline' && /*#__PURE__*/_react.default.createElement(_TypeTesterVariableAxes.default, {
+  })), axesPosition === 'inline' && /*#__PURE__*/_react.default.createElement(_TypeTesterVariableAxes.default, {
     id: id,
     fontStyle: fontStyle,
     axes: axes

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

@@ -45,6 +45,11 @@ export interface TypeTesterConfig {
         min?: number;
         max?: number;
     };
+    letterSpacing?: {
+        label?: string | false;
+        min?: number;
+        max?: number;
+    };
 }
 export interface TypeTesterBaseProps {
     id: string;

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

@@ -12,6 +12,7 @@ export interface UseTypeTesterStylerProps {
     }) => void;
     size: number;
     lineHeight: number;
+    letterSpacing: number;
     features: string[];
     focused: boolean;
     truncate: boolean;
@@ -21,7 +22,7 @@ export interface UseTypeTesterStylerProps {
     alignment: Alignment;
     variableSettings: VariableSettings | null;
 }
-declare const useTypeTesterStyler: ({ size, autofit, autofitOnChange, features, setSize, min, max, truncate, focused, lineHeight, fontStyles, content, contentEdited, alignment, variableSettings, }: UseTypeTesterStylerProps) => {
+declare const useTypeTesterStyler: ({ size, autofit, autofitOnChange, features, setSize, min, max, truncate, focused, lineHeight, letterSpacing, fontStyles, content, contentEdited, alignment, variableSettings, }: UseTypeTesterStylerProps) => {
     ref: import("react").RefObject<HTMLDivElement>;
     style: import("react").CSSProperties;
 };

package/dist/components/TypeTester/useTypeTesterStyler.js

@@ -20,6 +20,7 @@ const createClone = styles => {
   clone.style.fontWeight = `${styles.fontWeight}`;
   clone.style.fontStyle = `${styles.fontStyle}`;
   clone.style.wordWrap = 'normal';
+  clone.style.letterSpacing = `${styles.letterSpacing}`;
   clone.style.fontVariationSettings = styles.fontVariationSettings;
   clone.style.fontFeatureSettings = styles.fontFeatureSettings;
   return clone;
@@ -36,6 +37,7 @@ const useTypeTesterStyler = _ref => {
     truncate,
     focused,
     lineHeight,
+    letterSpacing,
     fontStyles,
     content,
     contentEdited,
@@ -47,6 +49,7 @@ const useTypeTesterStyler = _ref => {
   const fontFeatureSettings = features.map(feature => `"${feature}"`).join(', ');
   const clone = (0, _react.useRef)(createClone({
     ...fontStyles,
+    letterSpacing: `${letterSpacing}em`,
     fontVariationSettings,
     fontFeatureSettings
   }));
@@ -100,6 +103,10 @@ const useTypeTesterStyler = _ref => {
     fps: 60
   });
   (0, _react.useLayoutEffect)(computeSize, [windowWidth, autofit]);
+  (0, _react.useLayoutEffect)(() => {
+    clone.current.style.letterSpacing = `${letterSpacing}em`;
+    computeSize();
+  }, [letterSpacing]);
   (0, _react.useLayoutEffect)(() => {
     var _ref$current2;
     if (!autofitOnChange) return;
@@ -116,7 +123,7 @@ const useTypeTesterStyler = _ref => {
     fontFeatureSettings,
     marginRight: alignment !== 'right' ? -sideBuffer : 0,
     marginLeft: alignment === 'right' ? -sideBuffer : 0,
-    letterSpacing: 0,
+    letterSpacing: `${letterSpacing}em`,
     fontVariationSettings,
     textAlign: alignment
   };

package/dist/components/TypeTesters/TypeTestersElement.js

@@ -24,7 +24,7 @@ function TypeTestersElement(_ref) {
   return /*#__PURE__*/_react.default.createElement(_index.default, _extends({
     tags: tags === null || tags === void 0 ? void 0 : tags.split(','),
     excludeTags: excludeTags === null || excludeTags === void 0 ? void 0 : excludeTags.split(','),
-    autofit: autofit === 'true',
+    autofit: autofit ? autofit === 'true' : undefined,
     defaultMode: getDefaultMode(defaultMode, autofit === 'true')
   }, rest));
 }

package/dist/components/TypeTesters/index.js

@@ -80,7 +80,7 @@ function TypeTestersComponent(_ref) {
     licenseOptionsSpecs,
     orderVariableSelections
   } = (0, _useLicenseAndOrderVariables.useLicenseAndOrderVariables)();
-  const [collection, refetch] = (0, _reactRelay.useRefetchableFragment)((_TypeTesters_collection2.default.hash && _TypeTesters_collection2.default.hash !== "4304ae7b554a9365ab05ba8b984c1bea" && console.error("The definition of 'TypeTesters_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesters_collection2.default), collectionKey);
+  const [collection, refetch] = (0, _reactRelay.useRefetchableFragment)((_TypeTesters_collection2.default.hash && _TypeTesters_collection2.default.hash !== "6f88c9b86f2c60ecc35f1be282b3ee50" && console.error("The definition of 'TypeTesters_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesters_collection2.default), collectionKey);
   const handleStyleSelect = (0, _react.useCallback)((testerId, fontStyleId) => {
     const newChangedStyles = {
       ...changedStyles,
@@ -129,7 +129,8 @@ function TypeTestersComponent(_ref) {
       content: node.content,
       size: node.size ? parseFloat(node.size) : 72,
       lineHeight: node.lineHeight ? parseFloat(node.lineHeight) : 1,
-      autofit: autofit ?? false,
+      autofit: autofit ?? node.autofit ?? false,
+      letterSpacing: node.letterSpacing ? parseFloat(node.letterSpacing) : 0,
       direction,
       alignment,
       variableSettings: ((_node$variableSetting = node.variableSettings) === null || _node$variableSetting === void 0 ? void 0 : _node$variableSetting.reduce((acc, _ref2) => {

package/dist/components/elements/StoreModalUnifiedCheckout.js

@@ -21,6 +21,7 @@ var _reactErrorBoundary = require("react-error-boundary");
 var _StripeLogo = _interopRequireDefault(require("../StripeLogo"));
 var _Icons = require("../Icons");
 var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
+var _Price = require("../Price");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -107,14 +108,14 @@ function EditableSection(_ref) {
   }, "Change")));
 }
 function StoreModalUnifiedCheckout(_ref2) {
-  var _viewer$settings, _viewer$settings2, _viewer$settings3;
+  var _viewer$settings, _viewer$settings2, _viewer$settings3, _order$stripePaymentI, _order$stripePaymentI2;
   let {
     order: orderKey,
     viewer: viewerKey,
     onScrollToTop
   } = _ref2;
   const viewer = (0, _reactRelay.useFragment)((_StoreModalUnifiedCheckout_viewer2.default.hash && _StoreModalUnifiedCheckout_viewer2.default.hash !== "82e9144073b645e6b124db4f559c1ab3" && console.error("The definition of 'StoreModalUnifiedCheckout_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalUnifiedCheckout_viewer2.default), viewerKey);
-  const order = (0, _reactRelay.useFragment)((_StoreModalUnifiedCheckout_order2.default.hash && _StoreModalUnifiedCheckout_order2.default.hash !== "7d57ce77b4bfe26f3131ced66fa07e72" && console.error("The definition of 'StoreModalUnifiedCheckout_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalUnifiedCheckout_order2.default), orderKey);
+  const order = (0, _reactRelay.useFragment)((_StoreModalUnifiedCheckout_order2.default.hash && _StoreModalUnifiedCheckout_order2.default.hash !== "94683a80ba2c7104fd80f9e508cd6d70" && console.error("The definition of 'StoreModalUnifiedCheckout_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalUnifiedCheckout_order2.default), orderKey);
   const initialIdentity = {
     ...defaultIdentity,
     country: viewer.country
@@ -490,5 +491,10 @@ function StoreModalUnifiedCheckout(_ref2) {
     type: "submit",
     className: "store-modal__cart__button",
     disabled: completing || !acceptedEULA
-  }, completing ? 'Submitting...' : zeroOrder ? 'Complete order' : 'Pay'))) : null);
+  }, completing ? 'Submitting...' : zeroOrder ? 'Complete order' : /*#__PURE__*/_react.default.createElement("span", null, "Pay", ' ', (_order$stripePaymentI = order.stripePaymentIntent) !== null && _order$stripePaymentI !== void 0 && _order$stripePaymentI.amount && (_order$stripePaymentI2 = order.stripePaymentIntent) !== null && _order$stripePaymentI2 !== void 0 && _order$stripePaymentI2.currency ? /*#__PURE__*/_react.default.createElement(_Price.Price, {
+    price: {
+      amount: order.stripePaymentIntent.amount,
+      currency: order.stripePaymentIntent.currency
+    }
+  }) : null)))) : null);
 }

package/dist/fontdue.css

@@ -442,12 +442,16 @@ div[data-component=TypeTesters] {
   margin-right: 1em;
 }
 .type-tester__toolbar .type-tester__variable-axes {
+  display: contents;
+}
+.type-tester__toolbar .type-tester__variable-axes__axis {
+  flex: 0 1 250px;
   margin-right: 20px;
 }
 .type-tester__toolbar {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
   margin-bottom: 10px;
   position: relative;
   z-index: 2;
@@ -460,7 +464,7 @@ div[data-component=TypeTesters] {
 .type-tester__toolbar__tools {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
   flex: 1;
 }
 .type-tester__toolbar__tools:not(:last-child) {
@@ -508,14 +512,14 @@ div[data-component=TypeTesters] {
 .type-tester__slider {
   display: flex;
   align-items: center;
-  flex: 1;
+  flex: 0 1 250px;
   margin-right: 20px;
 }
-.type-tester__slider__line-height {
+.type-tester__slider__line-height, .type-tester__slider__letter-spacing {
   display: flex;
   align-items: center;
-  flex: 1;
-  margin-left: 1em;
+  flex: 0 1 250px;
+  margin-right: 20px;
 }
 .type-tester__slider__size-label, .type-tester__slider__line-height-label {
   margin-right: 1em;
@@ -528,8 +532,7 @@ div[data-component=TypeTesters] {
 }
 .type-tester__slider__track {
   width: 100%;
-  min-width: 100px;
-  max-width: 250px;
+  min-width: 50px;
   background-color: currentcolor;
   height: 1px;
   position: relative;
@@ -575,6 +578,7 @@ div[data-component=TypeTesters] {
 }
 .type-tester__features-button {
   white-space: nowrap;
+  margin-left: auto;
 }
 .type-tester__features-button:not(:last-child) {
   margin-right: 20px;
@@ -682,7 +686,6 @@ div[data-component=TypeTesters] {
   display: flex;
 }
 .type-tester__variable-axes .type-tester__slider__track {
-  max-width: none;
   min-width: 50px;
   flex: 1;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "2.12.1",
+  "version": "2.13.0",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",
     "build-js": "babel src --out-dir dist --extensions .ts,.tsx,.js,.jsx",