@preprio/toolkit 0.6.0-alpha.6 → 0.6.0-alpha.8

package/dist/nextjs/components.d.cts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import { ReactNode, ReactElement } from 'react';
 import { k as PreprToolbarComponentProps } from '../types-BYH9XqmN.cjs';
 import { P as PreprPixelConfig } from '../pixel-DwW7cXJm.cjs';
 
@@ -23,24 +23,31 @@ declare function PreprTrackingPixel({ id, config, }: PreprTrackingPixelProps): n
  */
 declare function PreprToolbar({ options, ...props }: PreprToolbarComponentProps): null;
 /**
- * Applies the visitor's A/B bucket after client-side navigation. A full page
- * load is covered by the inline script `PreprStack` renders, but React does
- * not run inline scripts that arrive with a client-side navigation; a layout
- * effect still runs before the browser paints the new page. Rendered by
- * `PreprStack`; you do not need it yourself.
+ * Gets each client-side navigation's decision in before the click: when the
+ * visitor hovers over a same-site link (or presses it, on touch devices), it
+ * asks `createPreprProxy` which variants they get on that page. Clicks are
+ * never held: the new page paints with those variants when the answer is in,
+ * and keeps its personalized sections hidden until then otherwise. Pages
+ * without personalization answer with no groups and are not asked again for
+ * an hour.
+ *
+ * Mount it once in the root layout, so links on pages without a
+ * `PreprStack` are covered too. Links to other sites and links that open a
+ * new tab or download are left alone.
+ *
+ * @example
+ * <PreprPersonalizationSwitch />
  */
-declare function PreprAbSwitch(): null;
-interface PreprPersonalizationSwitchProps {
-    /**
-     * Keep segment decisions fresh in the background. Default `true`. Leave it
-     * on for the instance in your root layout; `PreprStack` renders its own
-     * with `false`.
-     */
-    refresh?: boolean;
-    /** Same as `createPreprProxy`'s `freshFor`. Default 10 000 ms. */
-    freshFor?: number;
-}
-declare function PreprPersonalizationSwitch({ refresh, freshFor, }: PreprPersonalizationSwitchProps): ReactElement | null;
+declare function PreprPersonalizationSwitch(): null;
+/**
+ * Applies this page view's decision to the variant wrappers of the
+ * `PreprStack` it is rendered by, before the page paints when the decision is
+ * already in: asked for on hover, or kept from an earlier view of the page.
+ * Back and Forward show the page as this tab last showed it. Any other view
+ * keeps its personalized sections hidden until the decision request answers.
+ * Rendered by `PreprStack`; you do not need it yourself.
+ */
+declare function PreprDecisionApplier(): null;
 /**
  * Wraps one rendered variant and, once hydrated, puts the variant keys on the
  * elements inside, where Prepr's tracking pixel counts impressions and the
@@ -55,11 +62,9 @@ declare function PreprPersonalizationSwitch({ refresh, freshFor, }: PreprPersona
  * carries a variant key is left alone. Rendered by `PreprStack` with
  * `trackVariants`; you do not need it yourself.
  */
-declare function PreprVariantTracking({ variantKeys, ab, children, }: {
+declare function PreprVariantTracking({ variantKeys, children, }: {
     variantKeys: string[];
-    /** The A/B bucket wrapper this also serves as; its CSS decides `display`. */
-    ab?: string;
     children?: ReactNode;
 }): ReactElement;
 
-export { PreprAbSwitch, PreprPersonalizationSwitch, type PreprPersonalizationSwitchProps, PreprToolbar, PreprTrackingPixel, type PreprTrackingPixelProps, PreprVariantTracking };
+export { PreprDecisionApplier, PreprPersonalizationSwitch, PreprToolbar, PreprTrackingPixel, type PreprTrackingPixelProps, PreprVariantTracking };

package/dist/nextjs/components.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import { ReactNode, ReactElement } from 'react';
 import { k as PreprToolbarComponentProps } from '../types-BYH9XqmN.js';
 import { P as PreprPixelConfig } from '../pixel-DwW7cXJm.js';
 
@@ -23,24 +23,31 @@ declare function PreprTrackingPixel({ id, config, }: PreprTrackingPixelProps): n
  */
 declare function PreprToolbar({ options, ...props }: PreprToolbarComponentProps): null;
 /**
- * Applies the visitor's A/B bucket after client-side navigation. A full page
- * load is covered by the inline script `PreprStack` renders, but React does
- * not run inline scripts that arrive with a client-side navigation; a layout
- * effect still runs before the browser paints the new page. Rendered by
- * `PreprStack`; you do not need it yourself.
+ * Gets each client-side navigation's decision in before the click: when the
+ * visitor hovers over a same-site link (or presses it, on touch devices), it
+ * asks `createPreprProxy` which variants they get on that page. Clicks are
+ * never held: the new page paints with those variants when the answer is in,
+ * and keeps its personalized sections hidden until then otherwise. Pages
+ * without personalization answer with no groups and are not asked again for
+ * an hour.
+ *
+ * Mount it once in the root layout, so links on pages without a
+ * `PreprStack` are covered too. Links to other sites and links that open a
+ * new tab or download are left alone.
+ *
+ * @example
+ * <PreprPersonalizationSwitch />
  */
-declare function PreprAbSwitch(): null;
-interface PreprPersonalizationSwitchProps {
-    /**
-     * Keep segment decisions fresh in the background. Default `true`. Leave it
-     * on for the instance in your root layout; `PreprStack` renders its own
-     * with `false`.
-     */
-    refresh?: boolean;
-    /** Same as `createPreprProxy`'s `freshFor`. Default 10 000 ms. */
-    freshFor?: number;
-}
-declare function PreprPersonalizationSwitch({ refresh, freshFor, }: PreprPersonalizationSwitchProps): ReactElement | null;
+declare function PreprPersonalizationSwitch(): null;
+/**
+ * Applies this page view's decision to the variant wrappers of the
+ * `PreprStack` it is rendered by, before the page paints when the decision is
+ * already in: asked for on hover, or kept from an earlier view of the page.
+ * Back and Forward show the page as this tab last showed it. Any other view
+ * keeps its personalized sections hidden until the decision request answers.
+ * Rendered by `PreprStack`; you do not need it yourself.
+ */
+declare function PreprDecisionApplier(): null;
 /**
  * Wraps one rendered variant and, once hydrated, puts the variant keys on the
  * elements inside, where Prepr's tracking pixel counts impressions and the
@@ -55,11 +62,9 @@ declare function PreprPersonalizationSwitch({ refresh, freshFor, }: PreprPersona
  * carries a variant key is left alone. Rendered by `PreprStack` with
  * `trackVariants`; you do not need it yourself.
  */
-declare function PreprVariantTracking({ variantKeys, ab, children, }: {
+declare function PreprVariantTracking({ variantKeys, children, }: {
     variantKeys: string[];
-    /** The A/B bucket wrapper this also serves as; its CSS decides `display`. */
-    ab?: string;
     children?: ReactNode;
 }): ReactElement;
 
-export { PreprAbSwitch, PreprPersonalizationSwitch, type PreprPersonalizationSwitchProps, PreprToolbar, PreprTrackingPixel, type PreprTrackingPixelProps, PreprVariantTracking };
+export { PreprDecisionApplier, PreprPersonalizationSwitch, PreprToolbar, PreprTrackingPixel, type PreprTrackingPixelProps, PreprVariantTracking };

package/dist/nextjs/components.js

@@ -2,9 +2,9 @@
 import {
   createPreprPreview,
   loadTrackingPixel
-} from "../chunk-Y7DWVOOY.js";
+} from "../chunk-2QGUP7VQ.js";
 import "../chunk-S5RWVMDJ.js";
-import "../chunk-NSQOGI5K.js";
+import "../chunk-ATPB7GEC.js";
 
 // src/nextjs/components.ts
 import { usePathname, useRouter } from "next/navigation";
@@ -12,9 +12,7 @@ import {
   createElement,
   useEffect as useEffect2,
   useLayoutEffect,
-  useRef,
-  useState,
-  Suspense
+  useRef
 } from "react";
 
 // src/react/hydration.ts
@@ -36,197 +34,99 @@ function isReactHydrated(text) {
   return true;
 }
 
-// src/core/refresh.ts
-var PREPR_REFRESH_COOKIE = "prepr_refresh";
-var PREPR_REFRESH_HEADER = "Prepr-Refresh";
-var REFRESH_MAX_PATHS = 5;
-var SAFE_PATH = /^\/(?![/\\])[\w\-./%]{0,200}$/;
-function safePath(path) {
-  return SAFE_PATH.test(path) ? path : void 0;
-}
-function isFresh(at, freshFor, now = Date.now()) {
-  const age = now - at;
-  return at > 0 && age >= 0 && age < freshFor;
-}
-function cleanEntries(entries) {
-  const out = [];
-  for (const entry of entries) {
-    if (out.length === REFRESH_MAX_PATHS) break;
-    if (safePath(entry.path) && !out.some((e) => e.path === entry.path)) {
-      out.push(entry);
-    }
-  }
-  return out;
-}
-function parseRefresh(raw) {
-  return cleanEntries(
-    (raw ?? "").split("|").map((pair) => {
-      const split = pair.lastIndexOf("~");
-      const at = Number(split < 0 ? "" : pair.slice(split + 1));
-      return {
-        path: split < 0 ? pair : pair.slice(0, split),
-        at: Number.isFinite(at) && at > 0 ? Math.floor(at) : 0
-      };
-    })
-  );
-}
-
-// src/core/refresh-scheduler.ts
-var VIEW_DELAYS_MS = [3e3, 1e4];
-var INTENT_MIN_AGE_MS = 2e3;
-var INTENT_EVENTS = ["pointerover", "focusin", "touchstart"];
-var LISTENER = { capture: true, passive: true };
-var COOKIE_PATTERN = new RegExp(`(?:^|; )${PREPR_REFRESH_COOKIE}=([^;]*)`);
-var UNSUPPORTED_KEY = "prepr_refresh_unsupported";
-function readEntries() {
-  const match = document.cookie.match(COOKIE_PATTERN);
-  try {
-    return parseRefresh(match ? decodeURIComponent(match[1]) : void 0);
-  } catch {
-    return [];
-  }
-}
-function unsupported() {
-  try {
-    return sessionStorage.getItem(UNSUPPORTED_KEY) === "1";
-  } catch {
-    return false;
-  }
-}
-function createPreprRefreshScheduler(options = {}) {
-  const freshFor = options.freshFor ?? 1e4;
-  let timers = [];
-  let inFlight = false;
-  let stopped = unsupported();
-  function refresh() {
-    if (inFlight || stopped) return;
-    const paths = readEntries().map((entry) => entry.path);
-    if (paths.length === 0) return;
-    inFlight = true;
-    const controller = new AbortController();
-    fetch(location.pathname, {
-      headers: { [PREPR_REFRESH_HEADER]: paths.join("|") },
-      cache: "no-store",
-      credentials: "same-origin",
-      signal: controller.signal
-    }).then((response) => {
-      if (response.status === 204) return;
-      stopped = true;
-      controller.abort();
-      try {
-        sessionStorage.setItem(UNSUPPORTED_KEY, "1");
-      } catch {
-      }
-    }).catch(() => void 0).finally(() => {
-      inFlight = false;
+// src/nextjs/decision-switch.ts
+function applyPreprDecisions(decision) {
+  const state = window;
+  const key = location.pathname + location.search;
+  if (decision !== void 0) state.__preprDecision = { key, value: decision };
+  const current = state.__preprDecision;
+  if (!current || current.key !== key) return false;
+  document.querySelectorAll("[data-prepr-decision]").forEach((marker) => {
+    marker.setAttribute("data-prepr-decided", "");
+  });
+  const defaults = current.value === "*";
+  const chosen = {};
+  current.value.split("~").forEach((pair) => {
+    const colon = pair.indexOf(":");
+    if (colon > 0)
+      chosen[pair.slice(0, colon)] = pair.slice(colon + 1).split("|");
+  });
+  document.querySelectorAll("[data-prepr-v]").forEach((element) => {
+    const nested = element.hasAttribute("data-prepr-nested");
+    const show = defaults ? element.hasAttribute("data-prepr-default") : (element.getAttribute("data-prepr-v") || "").split(" ").every((token) => {
+      const colon = token.indexOf(":");
+      const variant = token.slice(colon + 1);
+      const variants = chosen[token.slice(0, colon)];
+      return !!variants && (nested ? variants[0] === variant : variants.indexOf(variant) >= 0);
     });
-  }
-  function onIntent(event) {
-    const anchor = event.target?.closest?.("a[href]");
-    if (!(anchor instanceof HTMLAnchorElement)) return;
-    let url;
+    if (show) element.setAttribute("data-prepr-show", "");
+    else element.removeAttribute("data-prepr-show");
+  });
+  return true;
+}
+function requestPreprDecision(key, options = {}) {
+  const fresh = 1e4;
+  const keep = 18e5;
+  const keepStatic = 36e5;
+  const state = window;
+  const asking = state.__preprAsking = state.__preprAsking || {};
+  const read = () => {
     try {
-      url = new URL(anchor.href, location.href);
+      const all = JSON.parse(sessionStorage.getItem("prepr_decisions") || "{}");
+      return all && typeof all === "object" ? all : {};
     } catch {
-      return;
-    }
-    if (url.origin !== location.origin) return;
-    const entry = readEntries().find((e) => e.path === url.pathname);
-    if (entry && !isFresh(entry.at, INTENT_MIN_AGE_MS)) refresh();
-  }
-  function onVisibility() {
-    if (document.visibilityState === "visible" && readEntries().some((entry) => !isFresh(entry.at, freshFor))) {
-      refresh();
-    }
-  }
-  for (const type of INTENT_EVENTS) {
-    document.addEventListener(type, onIntent, LISTENER);
-  }
-  document.addEventListener("visibilitychange", onVisibility, {
-    passive: true
-  });
-  return {
-    view() {
-      timers.forEach(clearTimeout);
-      timers = VIEW_DELAYS_MS.map((delay) => setTimeout(refresh, delay));
-    },
-    stop() {
-      timers.forEach(clearTimeout);
-      timers = [];
-      for (const type of INTENT_EVENTS) {
-        document.removeEventListener(type, onIntent, LISTENER);
-      }
-      document.removeEventListener("visibilitychange", onVisibility);
+      return {};
     }
   };
-}
-
-// src/nextjs/ab-switch.ts
-function applyPreprAbBucket() {
-  const match = document.cookie.match(/(?:^|; )prepr_ab_bucket=([AB])(?:;|$)/);
-  const bucket = match ? match[1] : "A";
-  const state = window;
-  if (state.__preprAbBucket === bucket) return;
-  state.__preprAbBucket = bucket;
-  const css = bucket === "A" ? "" : '[data-prepr-ab="A"]{display:none!important}[data-prepr-ab="' + bucket + '"]{display:contents!important}';
-  try {
-    if (!state.__preprAbSheet) {
-      const sheet = new CSSStyleSheet();
-      document.adoptedStyleSheets = document.adoptedStyleSheets.concat(sheet);
-      state.__preprAbSheet = sheet;
+  const ask = () => {
+    if (!asking[key]) {
+      asking[key] = fetch(key, {
+        headers: { "Prepr-Decide": "1" },
+        cache: "no-store",
+        credentials: "same-origin",
+        // The proxy gives up on Prepr after its own `timeoutMs`; this only
+        // covers a proxy that never answers.
+        signal: AbortSignal.timeout ? AbortSignal.timeout(6e3) : void 0
+      }).then((response) => response.ok ? response.text() : "*").catch(() => "*").then((answer) => {
+        delete asking[key];
+        try {
+          const all = read();
+          const at = Date.now();
+          Object.keys(all).forEach((stored) => {
+            const entry = all[stored];
+            if (!(entry && typeof entry.at === "number" && at - entry.at < keepStatic))
+              delete all[stored];
+          });
+          const kept = all[key];
+          if (answer !== "*" || !kept || kept.value === "*")
+            all[key] = { value: answer, at };
+          sessionStorage.setItem("prepr_decisions", JSON.stringify(all));
+        } catch {
+        }
+        return answer;
+      });
     }
-    state.__preprAbSheet.replaceSync(css);
-  } catch {
-    if (!state.__preprAbSheet) {
-      state.__preprAbSheet = document.createElement("style");
-      document.head.appendChild(state.__preprAbSheet);
+    return asking[key];
+  };
+  const last = read()[key];
+  const age = last && typeof last.at === "number" ? Date.now() - last.at : -1;
+  const value = last && typeof last.value === "string" ? last.value : null;
+  if (value !== null && !(value === "" && options.personalized) && age >= 0 && age < (value === "*" ? fresh : value === "" ? keepStatic : keep)) {
+    if (value !== "" && age >= fresh) {
+      ask().then((answer) => {
+        if (answer !== "*" && answer !== value && options.onChange)
+          options.onChange(answer);
+      });
     }
-    state.__preprAbSheet.textContent = css;
-  }
-}
-function applyPreprDecisions(view) {
-  const viewState = window;
-  const current = view === void 0 ? location.pathname + location.search : view;
-  if (viewState.__preprDecisionsView === current) return;
-  viewState.__preprDecisionsView = current;
-  const match = document.cookie.match(/(?:^|; )prepr_decisions=([^;]*)/);
-  let raw;
-  try {
-    raw = match ? decodeURIComponent(match[1]) : "";
-  } catch {
-    raw = "";
+    return { result: value, value: Promise.resolve(value) };
   }
-  const state = window;
-  if (state.__preprDecisions === raw) return;
-  state.__preprDecisions = raw;
-  const id = /^[\w-]+$/;
-  let css = "";
-  raw.split("~").forEach((pair) => {
-    const at = pair.indexOf(":");
-    const group = pair.slice(0, at);
-    if (at < 1 || !id.test(group)) return;
-    const selector = '[data-prepr-group="' + group + '"]';
-    css += selector + "{display:none!important}";
-    pair.slice(at + 1).split("|").forEach((variant) => {
-      if (id.test(variant)) {
-        css += selector + '[data-prepr-variant="' + variant + '"]{display:contents!important}';
-      }
-    });
+  const pending = {
+    value: ask()
+  };
+  pending.value.then((answer) => {
+    pending.result = answer;
   });
-  try {
-    if (!state.__preprDecisionSheet) {
-      const sheet = new CSSStyleSheet();
-      document.adoptedStyleSheets = document.adoptedStyleSheets.concat(sheet);
-      state.__preprDecisionSheet = sheet;
-    }
-    state.__preprDecisionSheet.replaceSync(css);
-  } catch {
-    if (!state.__preprDecisionSheet) {
-      state.__preprDecisionSheet = document.createElement("style");
-      document.head.appendChild(state.__preprDecisionSheet);
-    }
-    state.__preprDecisionSheet.textContent = css;
-  }
+  return pending;
 }
 
 // src/react/components.ts
@@ -264,62 +164,124 @@ function PreprToolbar({
   }, []);
   return null;
 }
-function PreprAbSwitch() {
-  useLayoutEffect(() => {
-    applyPreprAbBucket();
+var shown = /* @__PURE__ */ new Map();
+var historyStep = false;
+var onPopState = () => {
+  historyStep = true;
+};
+function requestDecision(key, personalized = false) {
+  return requestPreprDecision(key, {
+    personalized,
+    onChange: (value) => {
+      if (location.pathname + location.search !== key) return;
+      applyPreprDecisions(value);
+      shown.set(key, value);
+    }
   });
-  return null;
 }
-var viewCount = 0;
-function PreprPersonalizationSwitch({
-  refresh = true,
-  freshFor
-}) {
-  const [scheduler, setScheduler] = useState(
-    null
-  );
-  const viewUrl = useRef(null);
-  useLayoutEffect(() => {
-    const url = location.pathname + location.search;
-    if (viewUrl.current === url) return;
-    viewUrl.current = url;
-    applyPreprDecisions(`${url}#${++viewCount}`);
-  });
+function linkTarget(event) {
+  const anchor = event.target?.closest?.("a[href]");
+  if (!(anchor instanceof HTMLAnchorElement)) return null;
+  if (anchor.target && anchor.target !== "_self" || anchor.hasAttribute("download")) {
+    return null;
+  }
+  const url = new URL(anchor.href, location.href);
+  const key = url.pathname + url.search;
+  if (url.origin !== location.origin || key === location.pathname + location.search) {
+    return null;
+  }
+  return key;
+}
+var HOVER_DELAY_MS = 65;
+var hovering = null;
+function onPointerOver(event) {
+  if (event.pointerType !== "mouse") return;
+  const key = linkTarget(event);
+  if (hovering?.key === key) return;
+  if (hovering) clearTimeout(hovering.timer);
+  hovering = key ? { key, timer: setTimeout(() => requestDecision(key), HOVER_DELAY_MS) } : null;
+}
+function onPointerDown(event) {
+  if (event.button !== 0) return;
+  const key = linkTarget(event);
+  if (key) requestDecision(key);
+}
+var listeners = 0;
+function useDecisionRequests() {
   useEffect2(() => {
-    if (!refresh) return;
-    const started = createPreprRefreshScheduler({ freshFor });
-    setScheduler(started);
+    if (listeners++ === 0) {
+      window.addEventListener("pointerover", onPointerOver, { passive: true });
+      window.addEventListener("pointerdown", onPointerDown, {
+        capture: true,
+        passive: true
+      });
+      window.addEventListener("popstate", onPopState);
+    }
     return () => {
-      started.stop();
-      setScheduler(null);
+      if (--listeners === 0) {
+        window.removeEventListener("pointerover", onPointerOver);
+        window.removeEventListener("pointerdown", onPointerDown, true);
+        window.removeEventListener("popstate", onPopState);
+      }
     };
-  }, [refresh, freshFor]);
-  return scheduler ? createElement(
-    Suspense,
-    { fallback: null },
-    createElement(ViewCounter, { scheduler })
-  ) : null;
+  }, []);
 }
-function ViewCounter({
-  scheduler
-}) {
-  const pathname = usePathname();
-  useEffect2(() => {
-    scheduler.view();
-  }, [pathname, scheduler]);
+function PreprPersonalizationSwitch() {
+  useDecisionRequests();
+  return null;
+}
+function PreprDecisionApplier() {
+  useDecisionRequests();
+  useLayoutEffect(() => {
+    const key = location.pathname + location.search;
+    const remember = () => {
+      const state = window.__preprDecision;
+      if (state) shown.set(key, state.value);
+    };
+    const previous = historyStep ? shown.get(key) : void 0;
+    historyStep = false;
+    if (applyPreprDecisions(previous)) {
+      remember();
+      return;
+    }
+    const pending = requestDecision(key, true);
+    if (pending.result !== void 0) {
+      applyPreprDecisions(pending.result);
+      remember();
+      return;
+    }
+    let live = true;
+    void pending.value.then((value) => {
+      if (live && location.pathname + location.search === key) {
+        applyPreprDecisions(value);
+        remember();
+      }
+    });
+    return () => {
+      live = false;
+    };
+  });
   return null;
 }
 var VARIANT_KEY_ATTRIBUTE = "data-prepr-variant-key";
 function PreprVariantTracking({
   variantKeys,
-  ab,
   children
 }) {
   const ref = useRef(null);
   const keys = variantKeys.join(" ");
   useLayoutEffect(() => {
     let tagged = [];
-    const timer = setTimeout(() => {
+    const wrapper = ref.current?.closest("[data-prepr-v]");
+    const shown2 = () => !wrapper || wrapper.hasAttribute("data-prepr-show");
+    const untag = () => {
+      for (const [element] of tagged)
+        element.removeAttribute(VARIANT_KEY_ATTRIBUTE);
+      tagged = [];
+    };
+    const tag = () => {
+      if (!shown2()) return untag();
+      if (tagged.length > 0) return;
       const elements = [...ref.current?.children ?? []];
       const list = keys.split(" ");
       const pairs = elements.length === list.length ? elements.map((element, i) => [element, list[i]]) : elements.slice(0, 1).map((element) => [element, list[0]]);
@@ -328,22 +290,27 @@ function PreprVariantTracking({
         element.setAttribute(VARIANT_KEY_ATTRIBUTE, key);
         return true;
       });
+    };
+    const timer = setTimeout(tag);
+    const observer = wrapper && new MutationObserver(tag);
+    observer?.observe(wrapper, {
+      attributes: true,
+      attributeFilter: ["data-prepr-show"]
     });
     return () => {
       clearTimeout(timer);
-      for (const [element] of tagged) {
-        element.removeAttribute(VARIANT_KEY_ATTRIBUTE);
-      }
+      observer?.disconnect();
+      untag();
     };
   }, [keys]);
   return createElement(
     "div",
-    ab === void 0 ? { ref, style: { display: "contents" } } : { ref, "data-prepr-ab": ab },
+    { ref, style: { display: "contents" } },
     children
   );
 }
 export {
-  PreprAbSwitch,
+  PreprDecisionApplier,
   PreprPersonalizationSwitch,
   PreprToolbar,
   PreprTrackingPixel,