design-zystem 1.0.402 → 1.0.404

package/dist/ui/index.js

@@ -6608,12 +6608,61 @@ var BG_CLASS = {
   "orange-600": "bg-orange-600",
   "purple-700": "bg-purple-700"
 };
+var BulkActionSections = ({ sections }) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+  Layout,
+  {
+    role: "group",
+    fullHeight: true,
+    align: "stretch",
+    className: "[&>button:not(:last-child)]:rounded-r-none",
+    children: sections.map((section, index) => /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+      "button",
+      {
+        type: "button",
+        disabled: section.disabled,
+        onClick: section.disabled ? void 0 : section.action,
+        className: cn(
+          "flex h-full items-center justify-center gap-1.5 whitespace-nowrap rounded-r-xl px-4 text-sm font-bold text-white transition-[filter]",
+          section.disabled ? "cursor-not-allowed bg-grey-500" : "hover:brightness-90"
+        ),
+        children: [
+          section.icon,
+          section.title
+        ]
+      },
+      index
+    ))
+  }
+);
+var BulkDisplaySections = ({ sections }) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Layout, { align: "center", gap: 3, className: "px-4", children: sections.map((section, index) => /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(Layout, { align: "center", gap: 3, children: [
+  index > 0 && (section.divider ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "h-11 w-px shrink-0 bg-white/40" }) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "h-0.5 w-4 shrink-0 rounded-full bg-white/50" })),
+  section.action ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+    "button",
+    {
+      type: "button",
+      disabled: section.disabled,
+      onClick: section.disabled ? void 0 : section.action,
+      className: "flex items-center gap-1.5 whitespace-nowrap text-sm font-bold text-white hover:opacity-80",
+      children: [
+        section.icon,
+        section.title
+      ]
+    }
+  ) : section.caption ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(Layout, { column: true, fullWidth: false, className: "leading-tight text-white", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "whitespace-nowrap text-[10px] font-bold uppercase tracking-wide opacity-70", children: section.caption }),
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "whitespace-nowrap text-sm font-bold", children: section.title })
+  ] }) : section.badge ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "whitespace-nowrap rounded-full bg-white/15 px-2.5 py-1 text-xs font-bold text-white", children: section.title }) : /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("span", { className: "flex items-center gap-1.5 whitespace-nowrap text-sm font-bold text-white", children: [
+    section.icon,
+    section.title
+  ] })
+] }, index)) });
 var Bulk = ({
   onClose,
   leftTitle,
   sections,
   color = "blue-700",
-  className
+  className,
+  variant = "actions"
 }) => /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
   "div",
   {
@@ -6637,32 +6686,7 @@ var Bulk = ({
         /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "whitespace-nowrap text-sm font-bold", children: leftTitle }),
         /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "h-11 w-px bg-white/40" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
-        Layout,
-        {
-          role: "group",
-          fullHeight: true,
-          align: "stretch",
-          className: "[&>button:not(:last-child)]:rounded-r-none",
-          children: sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
-            "button",
-            {
-              type: "button",
-              disabled: section.disabled,
-              onClick: section.disabled ? void 0 : section.action,
-              className: cn(
-                "flex h-full items-center justify-center gap-1.5 whitespace-nowrap rounded-r-xl px-4 text-sm font-bold text-white transition-[filter]",
-                section.disabled ? "cursor-not-allowed bg-grey-500" : "hover:brightness-90"
-              ),
-              children: [
-                section.icon,
-                section.title
-              ]
-            },
-            section.title
-          ))
-        }
-      )
+      variant === "display" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(BulkDisplaySections, { sections }) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(BulkActionSections, { sections })
     ]
   }
 );
@@ -8652,7 +8676,7 @@ var optimizeImage = async (file, desiredBaseName, opts = {}) => {
 
 // src/ui/components/ui/Tour.tsx
 var import_react57 = require("react");
-var import_react_dom = require("react-dom");
+var import_driver = require("driver.js");
 var import_jsx_runtime94 = require("react/jsx-runtime");
 var TOUR_TARGET_ATTRIBUTE = "data-tour-target";
 var DEFAULT_LABELS = {
@@ -8662,23 +8686,13 @@ var DEFAULT_LABELS = {
   close: "Quitter le tutoriel",
   counter: (current, total) => `${current} / ${total}`
 };
-var CARD_WIDTH = 340;
-var HOLE_PADDING = 6;
-var GAP2 = 14;
-var MARGIN = 12;
+var STAGE_PADDING = 6;
+var GHOST_TRANSITION_MS = 200;
+var HIGHLIGHT_DURATION_MS = 400;
 var TourTarget = ({ id, children }) => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", __spreadProps(__spreadValues({}, { [TOUR_TARGET_ATTRIBUTE]: id }), { className: "contents", children }));
-var findTarget = (target) => {
-  const ids = Array.isArray(target) ? target : target ? [target] : [];
-  for (const id of ids) {
-    const element = document.querySelector(
-      `[${TOUR_TARGET_ATTRIBUTE}="${id.replace(/"/g, '\\"')}"]`
-    );
-    if (element && measure(element)) return element;
-  }
-  return null;
-};
+var isContents = (element) => getComputedStyle(element).display === "contents";
 var measure = (element) => {
-  if (getComputedStyle(element).display !== "contents") {
+  if (!isContents(element)) {
     const { top: top2, left: left2, width, height } = element.getBoundingClientRect();
     return width || height ? { top: top2, left: left2, width, height } : null;
   }
@@ -8690,47 +8704,18 @@ var measure = (element) => {
   const right = Math.max(...rects.map((r) => r.left + r.width));
   return { top, left, width: right - left, height: bottom - top };
 };
-var sameRect = (a, b) => a === b || !!a && !!b && Math.abs(a.top - b.top) < 0.5 && Math.abs(a.left - b.left) < 0.5 && Math.abs(a.width - b.width) < 0.5 && Math.abs(a.height - b.height) < 0.5;
-var clamp = (value, min, max) => Math.min(Math.max(value, min), Math.max(min, max));
-var firstBox = (element) => getComputedStyle(element).display === "contents" && element.firstElementChild ? firstBox(element.firstElementChild) : element;
-var placeCard = (hole, cardHeight, preferred) => {
-  var _a;
-  const vw = window.innerWidth;
-  const vh = window.innerHeight;
-  const fits = {
-    bottom: vh - (hole.top + hole.height) >= cardHeight + GAP2 + MARGIN,
-    top: hole.top >= cardHeight + GAP2 + MARGIN,
-    right: vw - (hole.left + hole.width) >= CARD_WIDTH + GAP2 + MARGIN,
-    left: hole.left >= CARD_WIDTH + GAP2 + MARGIN
-  };
-  const order = ["bottom", "top", "left", "right"];
-  const side = (_a = preferred && fits[preferred] ? preferred : order.find((p) => fits[p])) != null ? _a : "bottom";
-  const centerX = hole.left + hole.width / 2;
-  const centerY = hole.top + hole.height / 2;
-  if (side === "bottom" || side === "top") {
-    const left2 = clamp(
-      centerX - CARD_WIDTH / 2,
-      MARGIN,
-      vw - CARD_WIDTH - MARGIN
+var boxesOf = (element) => isContents(element) ? Array.from(element.children).flatMap(boxesOf) : [element];
+var findTarget = (ids) => {
+  for (const id of ids) {
+    const element = document.querySelector(
+      `[${TOUR_TARGET_ATTRIBUTE}="${id.replace(/"/g, '\\"')}"]`
     );
-    const top2 = side === "bottom" ? Math.min(hole.top + hole.height + GAP2, vh - cardHeight - MARGIN) : Math.max(hole.top - GAP2 - cardHeight, MARGIN);
-    return {
-      side,
-      top: top2,
-      left: left2,
-      arrow: clamp(centerX - left2, 18, CARD_WIDTH - 18)
-    };
+    if (element && measure(element)) return element;
   }
-  const top = clamp(centerY - cardHeight / 2, MARGIN, vh - cardHeight - MARGIN);
-  const left = side === "right" ? hole.left + hole.width + GAP2 : hole.left - GAP2 - CARD_WIDTH;
-  return { side, top, left, arrow: clamp(centerY - top, 18, cardHeight - 18) };
-};
-var ARROW_CLASS = {
-  bottom: "-top-[7px] -translate-x-1/2",
-  top: "-bottom-[7px] -translate-x-1/2",
-  right: "-left-[7px] -translate-y-1/2",
-  left: "-right-[7px] -translate-y-1/2"
+  return null;
 };
+var sameRect = (a, b) => a === b || !!a && !!b && Math.abs(a.top - b.top) < 0.5 && Math.abs(a.left - b.left) < 0.5 && Math.abs(a.width - b.width) < 0.5 && Math.abs(a.height - b.height) < 0.5;
+var isOutOfView = (rect) => rect.top < 0 || rect.left < 0 || rect.top + rect.height > window.innerHeight || rect.left + rect.width > window.innerWidth;
 var Tour = ({
   steps,
   open,
@@ -8743,234 +8728,168 @@ var Tour = ({
   var _a;
   const text = __spreadValues(__spreadValues({}, DEFAULT_LABELS), labels);
   const current = steps[step];
-  const hasStep = Boolean(current);
-  const targetKey = [(_a = current == null ? void 0 : current.target) != null ? _a : []].flat().join("|");
   const total = steps.length;
   const isLast = step === total - 1;
-  const titleId = (0, import_react57.useId)();
-  const [rect, setRect] = (0, import_react57.useState)(null);
-  const [status, setStatus] = (0, import_react57.useState)("pending");
-  const [cardHeight, setCardHeight] = (0, import_react57.useState)(0);
-  const cardRef = (0, import_react57.useRef)(null);
-  const nextRef = (0, import_react57.useRef)(null);
+  const driverRef = (0, import_react57.useRef)(null);
+  const ghostRef = (0, import_react57.useRef)(null);
+  const actions = (0, import_react57.useRef)({
+    next: () => {
+    },
+    previous: () => {
+    },
+    close: () => {
+    }
+  });
+  actions.current = {
+    next: () => isLast ? onClose("finish") : onStepChange(step + 1),
+    previous: () => {
+      if (step > 0) onStepChange(step - 1);
+    },
+    close: () => onClose("close")
+  };
   (0, import_react57.useEffect)(() => {
-    if (!open || !hasStep) return;
-    const targets = targetKey ? targetKey.split("|") : void 0;
+    if (!open) return;
+    const ghost = document.createElement("div");
+    ghost.className = "dz-tour-target";
+    document.body.appendChild(ghost);
+    const instance = (0, import_driver.driver)({
+      duration: HIGHLIGHT_DURATION_MS,
+      allowKeyboardControl: false,
+      overlayClickBehavior: () => {
+      },
+      overlayColor: "rgb(15, 23, 42)",
+      overlayOpacity: 0.6,
+      stagePadding: STAGE_PADDING,
+      stageRadius: 8,
+      popoverOffset: 8,
+      popoverClass: "dz-tour"
+    });
+    driverRef.current = instance;
+    ghostRef.current = ghost;
+    return () => {
+      instance.destroy();
+      ghost.remove();
+      driverRef.current = null;
+      ghostRef.current = null;
+    };
+  }, [open]);
+  (0, import_react57.useEffect)(() => {
+    if (!open) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        actions.current.close();
+      } else if (event.key === "ArrowRight") actions.current.next();
+      else if (event.key === "ArrowLeft") actions.current.previous();
+    };
+    window.addEventListener("keydown", onKeyDown, true);
+    return () => window.removeEventListener("keydown", onKeyDown, true);
+  }, [open]);
+  const view = (0, import_react57.useRef)({ current, text, step, total, isLast });
+  view.current = { current, text, step, total, isLast };
+  const targetKey = [(_a = current == null ? void 0 : current.target) != null ? _a : []].flat().join("|");
+  const popoverKey = [
+    current == null ? void 0 : current.title,
+    current == null ? void 0 : current.content,
+    current == null ? void 0 : current.placement,
+    current == null ? void 0 : current.interactive,
+    text.counter(step + 1, total),
+    text.previous,
+    isLast ? text.finish : text.next,
+    text.close
+  ].join("|");
+  (0, import_react57.useEffect)(() => {
+    const instance = driverRef.current;
+    const ghost = ghostRef.current;
+    const { current: current2, text: text2, step: step2, total: total2, isLast: isLast2 } = view.current;
+    if (!open || !current2 || !instance || !ghost) return;
+    const targets = targetKey ? targetKey.split("|") : [];
+    const interactive = current2.interactive !== false;
+    const popover = {
+      title: current2.title,
+      description: current2.content,
+      side: current2.placement,
+      showButtons: step2 > 0 ? ["next", "previous", "close"] : ["next", "close"],
+      showProgress: true,
+      progressText: text2.counter(step2 + 1, total2),
+      nextBtnText: isLast2 ? text2.finish : text2.next,
+      prevBtnText: text2.previous,
+      onNextClick: () => actions.current.next(),
+      onPrevClick: () => actions.current.previous(),
+      onCloseClick: () => actions.current.close(),
+      onPopoverRender: (dom) => {
+        var _a2;
+        dom.closeButton.setAttribute("aria-label", text2.close);
+        dom.wrapper.setAttribute("aria-label", (_a2 = current2.title) != null ? _a2 : current2.content);
+        dom.nextButton.focus({ preventScroll: true });
+      }
+    };
     const startedAt = performance.now();
+    let shown = "none";
     let scrolled = false;
+    let lastRect = null;
+    let refreshUntil = 0;
+    let animatingUntil = 0;
+    let clickable = [];
     let frame = 0;
-    setStatus("pending");
-    setRect(null);
+    const setClickable = (elements) => {
+      clickable.forEach((el) => el.classList.remove("driver-active-element"));
+      clickable = elements;
+      clickable.forEach((el) => el.classList.add("driver-active-element"));
+    };
     const track = () => {
+      var _a2;
       const element = findTarget(targets);
-      const box = element ? measure(element) : null;
-      if (element && box) {
+      const rect = element ? measure(element) : null;
+      if (element && rect) {
         if (!scrolled) {
           scrolled = true;
-          const outOfView = box.top < 0 || box.left < 0 || box.top + box.height > window.innerHeight || box.left + box.width > window.innerWidth;
-          if (outOfView) {
-            firstBox(element).scrollIntoView({
+          if (isOutOfView(rect)) {
+            (_a2 = boxesOf(element)[0]) == null ? void 0 : _a2.scrollIntoView({
               block: "center",
               inline: "nearest"
             });
           }
         }
-        setRect((previous) => sameRect(previous, box) ? previous : box);
-        setStatus("found");
-      } else {
-        setRect(null);
-        setStatus(
-          !targets || performance.now() - startedAt > targetTimeout ? "missing" : "pending"
-        );
+        if (!sameRect(lastRect, rect)) {
+          lastRect = rect;
+          refreshUntil = Math.max(
+            refreshUntil,
+            performance.now() + GHOST_TRANSITION_MS + 50
+          );
+          Object.assign(ghost.style, {
+            top: `${rect.top}px`,
+            left: `${rect.left}px`,
+            width: `${rect.width}px`,
+            height: `${rect.height}px`
+          });
+        }
+        if (shown !== "target") {
+          shown = "target";
+          ghost.style.pointerEvents = interactive ? "none" : "auto";
+          ghost.style.display = "block";
+          instance.highlight({ element: ghost, popover });
+          animatingUntil = performance.now() + HIGHLIGHT_DURATION_MS;
+          refreshUntil = animatingUntil + GHOST_TRANSITION_MS;
+          setClickable(interactive ? boxesOf(element) : []);
+        } else if (performance.now() >= animatingUntil && performance.now() < refreshUntil) {
+          instance.refresh();
+        }
+      } else if (shown !== "center" && (!targets.length || performance.now() - startedAt > targetTimeout)) {
+        shown = "center";
+        ghost.style.display = "none";
+        setClickable([]);
+        instance.highlight({ popover });
       }
       frame = requestAnimationFrame(track);
     };
     track();
-    return () => cancelAnimationFrame(frame);
-  }, [open, step, hasStep, targetKey, targetTimeout]);
-  (0, import_react57.useLayoutEffect)(() => {
-    if (cardRef.current) setCardHeight(cardRef.current.offsetHeight);
-  });
-  (0, import_react57.useEffect)(() => {
-    var _a2;
-    if (open && status !== "pending")
-      (_a2 = nextRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
-  }, [open, step, status]);
-  const goNext = (0, import_react57.useCallback)(() => {
-    if (isLast) onClose("finish");
-    else onStepChange(step + 1);
-  }, [isLast, onClose, onStepChange, step]);
-  const goPrevious = (0, import_react57.useCallback)(() => {
-    if (step > 0) onStepChange(step - 1);
-  }, [onStepChange, step]);
-  (0, import_react57.useEffect)(() => {
-    if (!open) return;
-    const onKeyDown = (event) => {
-      if (event.key === "Escape") {
-        event.stopPropagation();
-        onClose("close");
-      } else if (event.key === "ArrowRight") goNext();
-      else if (event.key === "ArrowLeft") goPrevious();
+    return () => {
+      cancelAnimationFrame(frame);
+      setClickable([]);
     };
-    window.addEventListener("keydown", onKeyDown, true);
-    return () => window.removeEventListener("keydown", onKeyDown, true);
-  }, [open, goNext, goPrevious, onClose]);
-  if (!open || !current) return null;
-  const hole = rect && {
-    top: rect.top - HOLE_PADDING,
-    left: rect.left - HOLE_PADDING,
-    width: rect.width + HOLE_PADDING * 2,
-    height: rect.height + HOLE_PADDING * 2
-  };
-  const placement = hole && placeCard(hole, cardHeight, current.placement);
-  const blockClick = (event) => event.stopPropagation();
-  const blocker = "fixed z-[10000]";
-  return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(import_jsx_runtime94.Fragment, { children: [
-      hole ? /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(import_jsx_runtime94.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-          "div",
-          {
-            "aria-hidden": true,
-            className: "pointer-events-none fixed z-[10000] rounded-[8px] shadow-[0_0_0_9999px_rgba(15,23,42,0.6)] ring-[3px] ring-yellow-300 transition-all duration-200 ease-out",
-            style: hole
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-          "div",
-          {
-            className: cn(blocker, "inset-x-0 top-0"),
-            style: { height: Math.max(hole.top, 0) },
-            onMouseDown: blockClick,
-            onClick: blockClick
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-          "div",
-          {
-            className: cn(blocker, "inset-x-0 bottom-0"),
-            style: { top: hole.top + hole.height },
-            onMouseDown: blockClick,
-            onClick: blockClick
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-          "div",
-          {
-            className: cn(blocker, "left-0"),
-            style: {
-              top: hole.top,
-              height: hole.height,
-              width: Math.max(hole.left, 0)
-            },
-            onMouseDown: blockClick,
-            onClick: blockClick
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-          "div",
-          {
-            className: cn(blocker, "right-0"),
-            style: {
-              top: hole.top,
-              height: hole.height,
-              left: hole.left + hole.width
-            },
-            onMouseDown: blockClick,
-            onClick: blockClick
-          }
-        ),
-        current.interactive === false && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: blocker, style: hole, onClick: blockClick })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-        "div",
-        {
-          className: cn(blocker, "inset-0 bg-[rgba(15,23,42,0.6)]"),
-          onMouseDown: blockClick,
-          onClick: blockClick
-        }
-      ),
-      status !== "pending" && /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
-        "div",
-        {
-          ref: cardRef,
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-labelledby": titleId,
-          className: cn(
-            "fixed z-[10001] rounded-[12px] bg-yellow-300 p-5 shadow-[0_10px_30px_rgba(0,0,0,0.25)]",
-            !placement && "left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
-            placement && "transition-[top,left] duration-200 ease-out"
-          ),
-          style: __spreadValues({
-            width: CARD_WIDTH
-          }, placement && { top: placement.top, left: placement.left }),
-          children: [
-            placement && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-              "span",
-              {
-                "aria-hidden": true,
-                className: cn(
-                  "absolute h-3 w-3 rotate-45 bg-yellow-300",
-                  ARROW_CLASS[placement.side]
-                ),
-                style: placement.side === "bottom" || placement.side === "top" ? { left: placement.arrow } : { top: placement.arrow }
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(Layout, { column: true, gap: 3, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(Layout, { row: true, justify: "between", align: "center", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Text, { size: "xs", weight: "semibold", color: "white", children: text.counter(step + 1, total) }),
-                /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-                  Icon,
-                  {
-                    name: "xmark",
-                    size: "s",
-                    color: "white",
-                    onClick: () => onClose("close"),
-                    "aria-label": text.close
-                  }
-                )
-              ] }),
-              current.title && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Text, { id: titleId, size: "m", weight: "bold", color: "white", children: current.title }),
-              /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-                Text,
-                {
-                  id: current.title ? void 0 : titleId,
-                  size: "m",
-                  weight: "medium",
-                  color: "white",
-                  className: "leading-relaxed",
-                  children: current.content
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(Layout, { row: true, justify: "end", gap: 2, children: [
-                step > 0 && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-                  Button,
-                  {
-                    label: text.previous,
-                    variant: "outline",
-                    size: "s",
-                    className: "border-white text-white",
-                    onClick: goPrevious
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-                  Button,
-                  {
-                    ref: nextRef,
-                    label: isLast ? text.finish : text.next,
-                    size: "s",
-                    className: "bg-white text-yellow-500",
-                    onClick: goNext
-                  }
-                )
-              ] })
-            ] })
-          ]
-        }
-      )
-    ] }),
-    document.body
-  );
+  }, [open, step, targetKey, popoverKey, targetTimeout]);
+  return null;
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {