fontdue-js 2.21.0 → 2.22.1

package/dist-cjs/components/TestFontsForm/index.js

@@ -0,0 +1,208 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TestFontsFormPreloadedQueryRenderer = TestFontsFormPreloadedQueryRenderer;
+exports.default = TestFontsForm;
+var _TestFontsForm_Query2 = _interopRequireDefault(require("../../__generated__/TestFontsForm_Query.graphql"));
+var _TestFontsFormUpdateCustomerMutation2 = _interopRequireDefault(require("../../__generated__/TestFontsFormUpdateCustomerMutation.graphql"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactRelay = require("react-relay");
+var _reactGoogleRecaptcha = _interopRequireDefault(require("react-google-recaptcha"));
+var _TextField = _interopRequireDefault(require("../TextField"));
+var _Icons = require("../Icons");
+var _Checkbox = _interopRequireDefault(require("../Checkbox"));
+var _useSerializablePreloadedQuery = _interopRequireDefault(require("../../relay/useSerializablePreloadedQuery"));
+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 }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const updateCustomerMutation = (_TestFontsFormUpdateCustomerMutation2.default.hash && _TestFontsFormUpdateCustomerMutation2.default.hash !== "ba56958399f0893bd667ff02c33a6975" && console.error("The definition of 'TestFontsFormUpdateCustomerMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsFormUpdateCustomerMutation2.default);
+const TestFontsDownloading = ({
+  archiveUrl
+}) => /*#__PURE__*/_react.default.createElement("div", {
+  className: "test-fonts__downloading"
+}, /*#__PURE__*/_react.default.createElement("div", {
+  className: "test-fonts__downloading__icon"
+}, /*#__PURE__*/_react.default.createElement(_Icons.DownloadFonts, null)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "The download will start automatically."), /*#__PURE__*/_react.default.createElement("p", null, "If it didn\u2019t start, click ", /*#__PURE__*/_react.default.createElement("a", {
+  href: archiveUrl
+}, "here"), ".")));
+const TestFontsFormComponent = ({
+  data,
+  agreementLabel,
+  downloadLabel = 'Download test fonts',
+  newsletterCheckboxChecked = false
+}) => {
+  const [email, setEmail] = (0, _react.useState)('');
+  const [name, setName] = (0, _react.useState)('');
+  const [newsletterOptIn, setNewsletterOptIn] = (0, _react.useState)(newsletterCheckboxChecked);
+  const [error, setError] = (0, _react.useState)(null);
+  const [eulaAgreed, setEulaAgreed] = (0, _react.useState)(false);
+  const [eulaFail, setEulaFail] = (0, _react.useState)(false);
+  const [submitting, setSubmitting] = (0, _react.useState)(false);
+  const [submitted, setSubmitted] = (0, _react.useState)(false);
+  const [recaptchaToken, setRecaptchaToken] = (0, _react.useState)(null);
+  const [pendingSubmit, setPendingSubmit] = (0, _react.useState)(false);
+  const downloadForm = (0, _react.useRef)(null);
+  const recaptchaRef = (0, _react.useRef)(null);
+  const environment = (0, _reactRelay.useRelayEnvironment)();
+  if (!data.viewer) return null;
+  const recaptchaEnabled = data.viewer.settings?.recaptchaEnabled ?? false;
+  const recaptchaSiteKey = data.viewer.settings?.recaptchaSiteKey;
+  const submitForm = (0, _react.useCallback)(token => {
+    setSubmitting(true);
+    setPendingSubmit(false);
+    setError(null);
+    (0, _reactRelay.commitMutation)(environment, {
+      mutation: updateCustomerMutation,
+      variables: {
+        input: {
+          name,
+          email,
+          newsletterOptIn,
+          recaptchaToken: token ?? undefined
+        }
+      },
+      onCompleted: (res, errors) => {
+        if (errors && errors.length > 0) {
+          setError(errors[0].message);
+          setSubmitting(false);
+          // Reset reCAPTCHA on error so user can retry
+          recaptchaRef.current?.reset();
+          setRecaptchaToken(null);
+        } else {
+          downloadForm.current?.submit();
+          setSubmitted(true);
+          setSubmitting(false);
+          setError(null);
+        }
+      },
+      onError: ({
+        message
+      }) => {
+        setError(message);
+        setSubmitting(false);
+        // Reset reCAPTCHA on error so user can retry
+        recaptchaRef.current?.reset();
+        setRecaptchaToken(null);
+      }
+    });
+  }, [environment, name, email, newsletterOptIn]);
+  const handleRecaptchaChange = (0, _react.useCallback)(token => {
+    setRecaptchaToken(token);
+    // If we were waiting for a token to submit, do it now
+    if (token && pendingSubmit) {
+      submitForm(token);
+    }
+  }, [pendingSubmit, submitForm]);
+  const handleRecaptchaExpired = (0, _react.useCallback)(() => {
+    setRecaptchaToken(null);
+  }, []);
+  const handleSubmit = e => {
+    e.preventDefault();
+    if (!eulaAgreed) {
+      setEulaFail(true);
+      return;
+    }
+
+    // If reCAPTCHA is enabled but no token, execute it and wait for callback
+    if (recaptchaEnabled && recaptchaSiteKey && !recaptchaToken) {
+      setPendingSubmit(true);
+      setError(null);
+      recaptchaRef.current?.execute();
+      return;
+    }
+    submitForm(recaptchaToken);
+  };
+
+  // Button is disabled only while actively submitting or waiting for reCAPTCHA
+  const disabled = !eulaAgreed || !email || !name;
+  const settings = data.viewer.settings;
+  const newsletterOptInLabel = settings?.newsletterOptInLabel;
+  const eulaAgreementLabel = settings?.eulaAgreementLabel;
+  const archiveUrl = data.viewer.testFonts?.archiveUrl;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "test-fonts"
+  }, error && /*#__PURE__*/_react.default.createElement("div", {
+    className: "test-fonts__errors"
+  }, error), submitted ? /*#__PURE__*/_react.default.createElement(TestFontsDownloading, {
+    archiveUrl: archiveUrl
+  }) : /*#__PURE__*/_react.default.createElement("form", {
+    className: "test-fonts__form",
+    onSubmit: handleSubmit
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "test-fonts__section"
+  }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    label: "Name *",
+    value: name,
+    onChange: value => setName(value),
+    autocomplete: "name",
+    placeholder: "Your name"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "test-fonts__section"
+  }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    label: "Email *",
+    type: "email",
+    value: email,
+    onChange: value => setEmail(value),
+    autocomplete: "email",
+    placeholder: "Your email"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "test-fonts__agreement test-fonts__checkbox-field",
+    "data-highlighted": eulaFail && !eulaAgreed
+  }, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
+    id: "test-fonts-eula-agreement",
+    checked: eulaAgreed,
+    onChange: event => setEulaAgreed(event.target.checked)
+  }), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "test-fonts-eula-agreement",
+    dangerouslySetInnerHTML: {
+      __html: (agreementLabel || eulaAgreementLabel) ?? ''
+    }
+  })), newsletterOptInLabel && /*#__PURE__*/_react.default.createElement("div", {
+    className: "test-fonts__newsletter-opt-in test-fonts__checkbox-field"
+  }, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
+    id: "newsletter-opt-in",
+    checked: newsletterOptIn,
+    onChange: event => setNewsletterOptIn(event.target.checked)
+  }), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "newsletter-opt-in",
+    dangerouslySetInnerHTML: {
+      __html: newsletterOptInLabel
+    }
+  })), recaptchaEnabled && recaptchaSiteKey && /*#__PURE__*/_react.default.createElement(_reactGoogleRecaptcha.default, {
+    ref: recaptchaRef,
+    sitekey: recaptchaSiteKey,
+    size: "invisible",
+    onChange: handleRecaptchaChange,
+    onExpired: handleRecaptchaExpired
+  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
+    className: "submit-button",
+    type: "submit",
+    disabled: submitting || pendingSubmit || disabled
+  }, submitting || pendingSubmit ? 'Submitting...' : downloadLabel, /*#__PURE__*/_react.default.createElement("span", {
+    className: "submit-button__arrow"
+  }, " \u2192")))), /*#__PURE__*/_react.default.createElement("form", {
+    action: archiveUrl ?? undefined,
+    ref: downloadForm
+  }));
+};
+const query = (_TestFontsForm_Query2.default.hash && _TestFontsForm_Query2.default.hash !== "cd43f0cacc4dcf01cf94fb1ff97197ca" && console.error("The definition of 'TestFontsForm_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsForm_Query2.default);
+function TestFontsFormPreloadedQueryRenderer({
+  preloadedQuery,
+  ...rest
+}) {
+  const queryRef = (0, _useSerializablePreloadedQuery.default)(preloadedQuery);
+  const data = (0, _reactRelay.usePreloadedQuery)(query, queryRef);
+  return /*#__PURE__*/_react.default.createElement(TestFontsFormComponent, _extends({
+    data: data
+  }, rest));
+}
+function TestFontsForm(props) {
+  const data = (0, _reactRelay.useLazyLoadQuery)(query, {});
+  return /*#__PURE__*/_react.default.createElement(TestFontsFormComponent, _extends({
+    data: data
+  }, props));
+}

package/dist-cjs/components/TestFontsForm/index.server.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TestFontsForm;
+var _react = _interopRequireDefault(require("react"));
+var _loadSerializableQuery = _interopRequireDefault(require("../../relay/loadSerializableQuery"));
+var _index = require("./index");
+var _TestFontsForm_Query = _interopRequireDefault(require("../../__generated__/TestFontsForm_Query.graphql"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+async function TestFontsForm(props) {
+  const preloadedQuery = await (0, _loadSerializableQuery.default)(_TestFontsForm_Query.default, {});
+  return /*#__PURE__*/_react.default.createElement(_index.TestFontsFormPreloadedQueryRenderer, _extends({
+    preloadedQuery: preloadedQuery
+  }, props));
+}

package/dist-cjs/components/TestModeBanner/index.js

@@ -0,0 +1,34 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TestModeBanner;
+var _TestModeBannerQuery2 = _interopRequireDefault(require("../../__generated__/TestModeBannerQuery.graphql"));
+var _react = _interopRequireDefault(require("react"));
+var _reactRelay = require("react-relay");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function TestModeBannerComponent({
+  data
+}) {
+  const isActive = data?.viewer?.testMode?.isActive;
+
+  // hide the banner completely if we're in live mode
+  if (!isActive) return null;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "test-mode-banner__banner",
+    "data-test-mode": isActive
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "test-mode-banner__content"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "test-mode-banner__title"
+  }, "Viewing test data")));
+}
+const query = (_TestModeBannerQuery2.default.hash && _TestModeBannerQuery2.default.hash !== "60ad67ee88ec6b74dd04bdf5572e7faf" && console.error("The definition of 'TestModeBannerQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestModeBannerQuery2.default);
+function TestModeBanner() {
+  const data = (0, _reactRelay.useLazyLoadQuery)(query, {});
+  return /*#__PURE__*/_react.default.createElement(TestModeBannerComponent, {
+    data: data
+  });
+}

package/dist-cjs/components/TextField/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const TextField = ({
+  Component = 'input',
+  autocomplete,
+  label,
+  type = 'text',
+  onChange,
+  errors,
+  // string[] | null
+  prefix,
+  ...rest
+}) => /*#__PURE__*/_react.default.createElement("label", {
+  className: "text-field__label",
+  "data-has-error": errors ? true : undefined
+}, /*#__PURE__*/_react.default.createElement("div", {
+  className: "text-field__label-wrapper"
+}, label), /*#__PURE__*/_react.default.createElement("div", {
+  className: "text-field__input-wrapper"
+}, /*#__PURE__*/_react.default.createElement("span", {
+  className: "text-field__prefix"
+}, prefix), Component === 'input' && /*#__PURE__*/_react.default.createElement("input", _extends({}, rest, {
+  type: type,
+  onChange: e => onChange(e.target.value),
+  className: "text-field__input",
+  autoComplete: autocomplete
+})), Component === 'textarea' && /*#__PURE__*/_react.default.createElement("textarea", _extends({}, rest, {
+  onChange: e => onChange(e.target.value),
+  className: "text-field__input",
+  autoComplete: autocomplete
+}))), errors && errors.length > 0 && /*#__PURE__*/_react.default.createElement("p", {
+  className: "text-field__error"
+}, errors[0]));
+var _default = TextField;
+exports.default = _default;

package/dist-cjs/components/ThemeConfig/index.js

@@ -0,0 +1,41 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ThemeConfigPreloadedQueryRenderer = ThemeConfigPreloadedQueryRenderer;
+exports.default = ThemeConfig;
+var _ThemeConfigQuery2 = _interopRequireDefault(require("../../__generated__/ThemeConfigQuery.graphql"));
+var _react = _interopRequireDefault(require("react"));
+var _reactRelay = require("react-relay");
+var _useSerializablePreloadedQuery = _interopRequireDefault(require("../../relay/useSerializablePreloadedQuery"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// gets the custom properties entered by users in the admin panel,
+// which also includes default values. we put the defaults there instead of
+// every call to var() so that we have defaults all in one place
+
+function ThemeConfigComponent({
+  data
+}) {
+  const props = data.viewer.themeConfig?.customProperties ?? [];
+  return /*#__PURE__*/_react.default.createElement("style", {
+    type: "text/css"
+  }, `:root { ${props.join(';')} }`);
+}
+const query = (_ThemeConfigQuery2.default.hash && _ThemeConfigQuery2.default.hash !== "c259bee038c4d2ea14c758fba3381f57" && console.error("The definition of 'ThemeConfigQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _ThemeConfigQuery2.default);
+function ThemeConfigPreloadedQueryRenderer({
+  preloadedQuery
+}) {
+  const queryRef = (0, _useSerializablePreloadedQuery.default)(preloadedQuery);
+  const data = (0, _reactRelay.usePreloadedQuery)(query, queryRef);
+  return /*#__PURE__*/_react.default.createElement(ThemeConfigComponent, {
+    data: data
+  });
+}
+function ThemeConfig() {
+  const data = (0, _reactRelay.useLazyLoadQuery)(query, {});
+  return /*#__PURE__*/_react.default.createElement(ThemeConfigComponent, {
+    data: data
+  });
+}

package/dist-cjs/components/ThemeConfig/index.server.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ThemeConfig;
+var _react = _interopRequireDefault(require("react"));
+var _loadSerializableQuery = _interopRequireDefault(require("../../relay/loadSerializableQuery"));
+var _index = require("./index");
+var _ThemeConfigQuery = _interopRequireDefault(require("../../__generated__/ThemeConfigQuery.graphql"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+async function ThemeConfig() {
+  const preloadedQuery = await (0, _loadSerializableQuery.default)(_ThemeConfigQuery.default, {});
+  return /*#__PURE__*/_react.default.createElement(_index.ThemeConfigPreloadedQueryRenderer, {
+    preloadedQuery: preloadedQuery
+  });
+}

package/dist-cjs/components/Tracking/index.js

@@ -0,0 +1,164 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
+var _UrlContext = require("../UrlContext");
+var _consent = require("../ConsentBanner/consent");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function getCampaignDataFromUrl() {
+  const urlParams = new URLSearchParams(window.location.search);
+  const campaign = {};
+  const properties = {};
+  let hasCampaign = false;
+  let hasProperties = false;
+  const utmMapping = {
+    utm_source: 'source',
+    utm_medium: 'medium',
+    utm_campaign: 'name',
+    utm_term: 'term',
+    utm_content: 'content'
+  };
+  for (const [urlParam, campaignKey] of Object.entries(utmMapping)) {
+    const value = urlParams.get(urlParam);
+    if (value) {
+      campaign[campaignKey] = value;
+      hasCampaign = true;
+    }
+  }
+  const clickIds = ['gclid', 'fbclid'];
+  for (const param of clickIds) {
+    const value = urlParams.get(param);
+    if (value) {
+      properties[param] = value;
+      hasProperties = true;
+    }
+  }
+  return {
+    campaign: hasCampaign ? campaign : null,
+    properties: hasProperties ? properties : null
+  };
+}
+async function sendPageView(baseUrl, anonymousId) {
+  try {
+    const {
+      campaign,
+      properties: clickIdProperties
+    } = getCampaignDataFromUrl();
+    const properties = {
+      url: window.location.href,
+      path: window.location.pathname,
+      referrer: document.referrer,
+      title: document.title,
+      search: window.location.search,
+      ...clickIdProperties
+    };
+    const context = {
+      userAgent: navigator.userAgent
+    };
+    if (campaign) {
+      context.campaign = campaign;
+    }
+    const body = {
+      properties,
+      context
+    };
+    if (anonymousId) {
+      body.anonymous_id = anonymousId;
+    }
+    const response = await fetch(`${baseUrl}/api/track/page`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      credentials: 'include',
+      body: JSON.stringify(body)
+    });
+    const data = await response.json();
+    return data.anonymous_id || null;
+  } catch (error) {
+    console.debug('Tracking error:', error);
+    return null;
+  }
+}
+const Tracking = () => {
+  const config = (0, _react.useContext)(_ConfigContext.default);
+  const url = (0, _UrlContext.useFontdueUrl)();
+  (0, _react.useEffect)(() => {
+    if (!config.tracking.enabled) return;
+
+    // Generate client-side anonymous ID for cookieless tracking when consent is required
+    const clientAnonymousId = config.tracking.consentRequired ? crypto.randomUUID() : undefined;
+    if (clientAnonymousId) {
+      (0, _consent.setClientAnonymousId)(clientAnonymousId);
+    }
+
+    // Only send the client ID when in cookieless mode (consent required but not yet granted)
+    const analyticsConsent = (0, _consent.hasConsent)('analytics');
+    const effectiveAnonymousId = clientAnonymousId && config.tracking.consentRequired && !analyticsConsent ? clientAnonymousId : undefined;
+
+    // Send initial page view
+    const pageViewPromise = sendPageView(url, effectiveAnonymousId);
+
+    // Segment SDK for device-mode integrations (e.g. Google Tag Manager)
+    // The analytics factory is provided by the entry point — it calls AnalyticsBrowser.load()
+    // when invoked. We defer calling it until after consent when consentRequired is true.
+    const loadAnalytics = config.tracking.segment?.analytics;
+    const integrations = config.tracking.segment?.integrations || {
+      All: false,
+      'Google Tag Manager': true
+    };
+    let consentCleanup;
+    if (loadAnalytics) {
+      const fireSegmentPage = async () => {
+        try {
+          const analytics = loadAnalytics();
+          const anonymousId = await pageViewPromise;
+          if (anonymousId) {
+            await analytics.setAnonymousId(anonymousId);
+          }
+          await analytics.page(undefined, undefined, undefined, {
+            integrations
+          });
+        } catch (error) {
+          console.debug('Segment SDK error:', error);
+        }
+      };
+      if (config.tracking.consentRequired) {
+        consentCleanup = (0, _consent.onConsent)('analytics', fireSegmentPage);
+      } else {
+        fireSegmentPage();
+      }
+    }
+
+    // Track client-side route changes
+    const originalPushState = history.pushState.bind(history);
+    const originalReplaceState = history.replaceState.bind(history);
+    const handleRouteChange = () => {
+      // Defer slightly to let document.title update
+      setTimeout(() => sendPageView(url), 0);
+    };
+    history.pushState = function (...args) {
+      originalPushState(...args);
+      handleRouteChange();
+    };
+    history.replaceState = function (...args) {
+      originalReplaceState(...args);
+      handleRouteChange();
+    };
+    window.addEventListener('popstate', handleRouteChange);
+    return () => {
+      history.pushState = originalPushState;
+      history.replaceState = originalReplaceState;
+      window.removeEventListener('popstate', handleRouteChange);
+      consentCleanup?.();
+    };
+  }, []);
+  return null;
+};
+var _default = Tracking;
+exports.default = _default;

package/dist-cjs/components/TypeTester/TypeTesterAlignButtons.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Align = require("../Icons/Align");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TypeTesterAlignButtons = ({
+  alignment,
+  setAlignment
+}) => {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-tester__align-buttons"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "type-tester__align-buttons__button",
+    "data-active": alignment === 'left',
+    onClick: () => setAlignment('left')
+  }, /*#__PURE__*/_react.default.createElement(_Align.AlignLeft, null)), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "type-tester__align-buttons__button",
+    "data-active": alignment === 'center',
+    onClick: () => setAlignment('center')
+  }, /*#__PURE__*/_react.default.createElement(_Align.AlignCenter, null)), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "type-tester__align-buttons__button",
+    "data-active": alignment === 'right',
+    onClick: () => setAlignment('right')
+  }, /*#__PURE__*/_react.default.createElement(_Align.AlignRight, null)));
+};
+var _default = TypeTesterAlignButtons;
+exports.default = _default;

package/dist-cjs/components/TypeTester/TypeTesterBullet.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Bullet = ({
+  checked,
+  config
+}) => {
+  const props = {
+    className: 'type-tester__bullet',
+    'data-checked': checked
+  };
+  if (config.bulletStyle === 'round') {
+    return /*#__PURE__*/_react.default.createElement("span", props, checked ? '●' : '○');
+  }
+  return /*#__PURE__*/_react.default.createElement("span", props, checked ? '■' : '□');
+};
+var _default = Bullet;
+exports.default = _default;

package/dist-cjs/components/TypeTester/TypeTesterContent.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _useTypeTesterStyler = _interopRequireDefault(require("./useTypeTesterStyler"));
+var _draftJs = require("draft-js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const TypeTesterContent = /*#__PURE__*/_react.default.forwardRef(({
+  content,
+  setContent,
+  setFocused,
+  direction,
+  alignment,
+  ...props
+}, ref) => {
+  const editorRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    focus: () => {
+      editorRef.current?.focus();
+    }
+  }));
+  const style = (0, _useTypeTesterStyler.default)({
+    ...props,
+    content,
+    alignment
+  });
+
+  // draft-js's Editor produces different DOM than plain text on server (just
+  // the content string) vs client (full DraftEditor-* subtree). Hydrating
+  // that mismatch causes React to discard the SSR subtree and client-render
+  // the whole tester from scratch — visible as an unmount/remount flash.
+  // Defer Editor mount until after hydration so the initial client render
+  // matches the SSR output exactly.
+  const [mounted, setMounted] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => setMounted(true), []);
+  const plainText = content.getCurrentContent().getPlainText();
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, style, {
+    className: "type-tester__text__container"
+  }), mounted ? /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
+    ref: editorRef,
+    editorState: content,
+    onChange: value => setContent(value),
+    onBlur: () => setFocused(false),
+    onFocus: () => setFocused(true),
+    spellCheck: false,
+    stripPastedStyles: true,
+    textDirectionality: direction === 'rtl' ? 'RTL' : 'LTR',
+    textAlignment: alignment
+  }) : plainText);
+});
+var _default = TypeTesterContent;
+exports.default = _default;