@storybook/addon-onboarding 10.1.0-alpha.12 → 10.1.0-alpha.14

package/dist/_browser-chunks/{Onboarding-WWQZBI4C.js → Onboarding-4UKVZPT6.js}

@@ -1,7 +1,10 @@
+import {
+  IntentSurvey
+} from "./chunk-BTSM33XX.js";
 import {
   ADDON_CONTROLS_ID,
-  STORYBOOK_ADDON_ONBOARDING_CHANNEL
-} from "./chunk-BG2SBT4L.js";
+  ADDON_ONBOARDING_CHANNEL
+} from "./chunk-VFOIHBP2.js";
 import {
   __commonJS,
   __toESM
@@ -43,8 +46,8 @@ var require_scroll = __commonJS({
 // ../../node_modules/scrollparent/scrollparent.js
 var require_scrollparent = __commonJS({
   "../../node_modules/scrollparent/scrollparent.js"(exports, module) {
-    (function(root, factory) {
-      typeof define == "function" && define.amd ? define([], factory) : typeof module == "object" && module.exports ? module.exports = factory() : root.Scrollparent = factory();
+    (function(root2, factory) {
+      typeof define == "function" && define.amd ? define([], factory) : typeof module == "object" && module.exports ? module.exports = factory() : root2.Scrollparent = factory();
     })(exports, function() {
       function isScrolling(node) {
         var overflow = getComputedStyle(node, null).getPropertyValue("overflow");
@@ -847,142 +850,78 @@ var require_prop_types = __commonJS({
 });
 
 // src/Onboarding.tsx
-import React15, { useCallback as useCallback2, useEffect as useEffect5, useState as useState4 } from "react";
+import React14, { useCallback as useCallback3, useEffect as useEffect5, useState as useState3 } from "react";
 import { SyntaxHighlighter } from "storybook/internal/components";
 import { SAVE_STORY_RESPONSE } from "storybook/internal/core-events";
-import { ThemeProvider, convert, styled as styled6, themes } from "storybook/theming";
+import { ThemeProvider as ThemeProvider2, convert as convert2, styled as styled4, themes as themes2 } from "storybook/theming";
 
-// src/components/Confetti/Confetti.tsx
-import React from "react";
-
-// ../../node_modules/@neoconfetti/react/dist/min/index.js
-import { createElement as z, useEffect as A, useRef as H } from "react";
-var e = '@keyframes Bc2PgW_ya{to{translate:0 var(--sh)}}@keyframes Bc2PgW_xa{to{translate:var(--xlp)0}}@keyframes Bc2PgW_r{50%{rotate:var(--hr)180deg}to{rotate:var(--r)360deg}}.Bc2PgW_c{z-index:1200;width:0;height:0;position:relative;overflow:visible}.Bc2PgW_p{animation:xa var(--dc)forwards cubic-bezier(var(--x1),var(--x2),var(--x3),var(--x4));animation-name:Bc2PgW_xa}.Bc2PgW_p>div{animation:ya var(--dc)forwards cubic-bezier(var(--y1),var(--y2),var(--y3),var(--y4));width:var(--w);height:var(--h);animation-name:Bc2PgW_ya;position:absolute;top:0;left:0}.Bc2PgW_p>div:before{content:"";background-color:var(--bgc);animation:r var(--rd)infinite linear;border-radius:var(--br);width:100%;height:100%;animation-name:Bc2PgW_r;display:block}', t = "Bc2PgW_p", r = "Bc2PgW_c", a = ["#FFC700", "#FF0000", "#2E3191", "#41BBC7"], o = 3500, n = 0.5, i = 150, c = "mix", s = 12, l = "", d = !0, p = 800, u = 1600;
-function y(y2, z2 = {}) {
-  let { colors: A2 = a, duration: H2 = o, force: F2 = n, particleCount: O = i, particleShape: j = c, particleSize: E = s, particleClass: $ = l, destroyAfterDone: q = d, stageHeight: D = p, stageWidth: J = u } = z2;
-  (function(e2) {
-    if (document.querySelector("style[data-neoconfetti]")) return;
-    let t2 = W("style");
-    t2.dataset.neoconfetti = "", t2.textContent = e2, _(document.head, t2);
-  })(e), y2.classList.add(r), y2.style.setProperty("--sh", D + "px");
-  let I = [], G = [], K = () => P(b() * (N - 1)), Q = (e2, t2) => j !== "rectangles" && (e2 === "circles" || k(t2));
-  function R(e2, t2) {
-    let r2 = K(), a2 = Q(j, r2), o2 = (t3, r3) => e2.style.setProperty(t3, r3 + "");
-    o2("--xlp", C(x(L(t2, 90) - 180), 0, 180, -J / 2, J / 2) + "px"), o2("--dc", H2 - P(1e3 * b()) + "ms");
-    let n2 = b() < m ? w(b() * h, 2) : 0;
-    o2("--x1", n2), o2("--x2", -1 * n2), o2("--x3", n2), o2("--x4", w(x(C(x(L(t2, 90) - 180), 0, 180, -1, 1)), 4)), o2("--y1", w(b() * v, 4)), o2("--y2", w(b() * F2 * (M() ? 1 : -1), 4)), o2("--y3", v), o2("--y4", w(B(C(x(t2 - 180), 0, 180, F2, -F2), 0), 4)), o2("--w", (a2 ? E : P(4 * b()) + E / 2) + "px"), o2("--h", (a2 ? E : P(2 * b()) + E) + "px");
-    let i2 = r2.toString(2).padStart(3, "0").split("");
-    o2("--hr", i2.map(((e3) => +e3 / 2 + "")).join(" ")), o2("--r", i2.join(" ")), o2("--rd", w(b() * (g - f) + f) + "ms"), o2("--br", a2 ? "50%" : 0);
-  }
-  let U;
-  function V() {
-    y2.innerHTML = "", clearTimeout(U), I = S(O, A2), G = (function(e2, r2 = [], a2) {
-      let o2 = [];
-      for (let { color: n2 } of r2) {
-        let r3 = W("div");
-        r3.className = `${t} ${a2}`, r3.style.setProperty("--bgc", n2);
-        let i2 = W("div");
-        _(r3, i2), _(e2, r3), o2.push(r3);
-      }
-      return o2;
-    })(y2, I, $);
-    for (let [e2, t2] of T(G)) R(t2, I[+e2].degree);
-    U = setTimeout((() => {
-      q && (y2.innerHTML = "");
-    }), H2);
-  }
-  return V(), { update(e2) {
-    let r2 = e2.particleCount ?? i, f2 = e2.particleShape ?? c, g2 = e2.particleSize ?? s, m2 = e2.particleClass ?? l, h2 = e2.colors ?? a, v2 = e2.stageHeight ?? p, x2 = e2.duration ?? o, b2 = e2.force ?? n, P2 = e2.stageWidth ?? u, B2 = e2.destroyAfterDone ?? d;
-    I = S(r2, h2);
-    let W2 = !1;
-    if (r2 === O) {
-      G = Array.from(y2.querySelectorAll(`.${t}`));
-      for (let [e3, { color: t2 }] of T(I)) {
-        let r3 = G[+e3];
-        JSON.stringify(A2) !== JSON.stringify(h2) && r3.style.setProperty("--bgc", t2), f2 !== j && r3.style.setProperty("--br", Q(f2, K()) ? "50%" : "0"), m2 !== $ && ($ && r3.classList.remove($), m2 && r3.classList.add(m2));
-      }
-    } else W2 = !0;
-    q && !B2 && clearTimeout(U), y2.style.setProperty("--sh", v2 + "px"), H2 = x2, A2 = h2, F2 = b2, O = r2, j = f2, E = g2, $ = m2, q = B2, D = v2, J = P2, W2 && V();
-  }, destroy() {
-    y2.innerHTML = "", clearTimeout(U);
-  } };
-}
-var f = 200, g = 800, m = 0.1, h = 0.3, v = 0.5, x = Math.abs, b = Math.random, P = Math.round, B = Math.max, W = (e2) => document.createElement(e2), _ = (e2, t2) => e2.appendChild(t2), S = (e2, t2) => Array.from({ length: e2 }, ((r2, a2) => ({ color: t2[a2 % t2.length], degree: 360 * a2 / e2 }))), w = (e2, t2 = 2) => P((e2 + Number.EPSILON) * 10 ** t2) / 10 ** t2, C = (e2, t2, r2, a2, o2) => (e2 - t2) * (o2 - a2) / (r2 - t2) + a2, L = (e2, t2) => e2 + t2 > 360 ? e2 + t2 - 360 : e2 + t2, M = () => b() > 0.5, T = Object.entries, N = 6, k = (e2) => e2 !== 1 && M();
-function F({ class: e2, ...t2 }) {
-  let r2 = H(null), a2 = H();
-  return A((() => {
-    if (typeof window < "u" && r2.current) {
-      if (a2.current) return a2.current.update(t2), a2.current.destroy;
-      a2.current = y(r2.current, t2);
+// ../../core/src/manager/components/TourGuide/HighlightElement.tsx
+import { useEffect } from "react";
+var HIGHLIGHT_KEYFRAMES_ID = "storybook-highlight-element-keyframes", keyframes = `
+  @keyframes sb-highlight-pulsate {
+    0% {
+      box-shadow: rgba(2,156,253,1) 0 0 2px 1px, 0 0 0 0 rgba(2, 156, 253, 0.7), 0 0 0 0 rgba(2, 156, 253, 0.4);
     }
-  }), [t2]), z("div", { ref: r2, className: e2 });
-}
-
-// src/components/Confetti/Confetti.tsx
-import { styled } from "storybook/theming";
-var Wrapper = styled.div({
-  zIndex: 9999,
-  position: "fixed",
-  top: 0,
-  left: "50%",
-  width: "50%",
-  height: "100%",
-  pointerEvents: "none"
-}), Confetti = React.memo(function({
-  timeToFade = 5e3,
-  colors = ["#CA90FF", "#FC521F", "#66BF3C", "#FF4785", "#FFAE00", "#1EA7FD"],
-  ...confettiProps
-}) {
-  return React.createElement(Wrapper, null, React.createElement(
-    F,
-    {
-      colors,
-      particleCount: 200,
-      duration: 5e3,
-      stageHeight: window.innerHeight,
-      stageWidth: window.innerWidth,
-      destroyAfterDone: !0,
-      ...confettiProps
+    50% {
+      box-shadow: rgba(2,156,253,1) 0 0 2px 1px, 0 0 0 20px rgba(2, 156, 253, 0), 0 0 0 40px rgba(2, 156, 253, 0);
     }
-  ));
-});
-
-// src/components/HighlightElement/HighlightElement.tsx
-import { useEffect } from "react";
+    100% {
+      box-shadow: rgba(2,156,253,1) 0 0 2px 1px, 0 0 0 0 rgba(2, 156, 253, 0), 0 0 0 0 rgba(2, 156, 253, 0);
+    }
+  }
+`, createOverlay = (element) => {
+  let overlay = document.createElement("div");
+  return overlay.id = "storybook-highlight-element", overlay.style.position = "fixed", overlay.style.pointerEvents = "none", overlay.style.zIndex = "2147483647", overlay.style.transition = "opacity 0.2s ease-in-out", requestAnimationFrame(() => {
+    updateOverlayStyles(element, overlay), element.scrollIntoView({ behavior: "smooth", block: "center" });
+  }), overlay;
+}, updateOverlayStyles = (element, overlay) => {
+  let rect = element.getBoundingClientRect(), computedStyle = window.getComputedStyle(element);
+  overlay.style.top = `${rect.top}px`, overlay.style.left = `${rect.left}px`, overlay.style.width = `${rect.width}px`, overlay.style.height = `${rect.height}px`, overlay.style.borderRadius = computedStyle.borderRadius;
+}, findScrollableAncestors = (element) => {
+  let scrollableAncestors = [window], parent = element.parentElement;
+  for (; parent; ) {
+    let style = window.getComputedStyle(parent);
+    (style.overflow === "auto" || style.overflow === "scroll" || style.overflowX === "auto" || style.overflowX === "scroll" || style.overflowY === "auto" || style.overflowY === "scroll") && scrollableAncestors.push(parent), parent = parent.parentElement;
+  }
+  return scrollableAncestors;
+};
 function HighlightElement({
   targetSelector,
   pulsating = !1
 }) {
   return useEffect(() => {
     let element = document.querySelector(targetSelector);
-    if (element)
-      if (pulsating) {
-        element.style.animation = "pulsate 3s infinite", element.style.transformOrigin = "center", element.style.animationTimingFunction = "ease-in-out";
-        let keyframes2 = `
-        @keyframes pulsate {
-          0% {
-            box-shadow: rgba(2,156,253,1) 0 0 2px 1px, 0 0 0 0 rgba(2, 156, 253, 0.7), 0 0 0 0 rgba(2, 156, 253, 0.4);
-          }
-          50% {
-            box-shadow: rgba(2,156,253,1) 0 0 2px 1px, 0 0 0 20px rgba(2, 156, 253, 0), 0 0 0 40px rgba(2, 156, 253, 0);
-          }
-          100% {
-            box-shadow: rgba(2,156,253,1) 0 0 2px 1px, 0 0 0 0 rgba(2, 156, 253, 0), 0 0 0 0 rgba(2, 156, 253, 0);
-          }
-        }
-      `, style = document.createElement("style");
-        style.id = "sb-onboarding-pulsating-effect", style.innerHTML = keyframes2, document.head.appendChild(style);
-      } else
-        element.style.boxShadow = "rgba(2,156,253,1) 0 0 2px 1px";
-    return () => {
-      let styleElement = document.querySelector("#sb-onboarding-pulsating-effect");
-      styleElement && styleElement.remove(), element && (element.style.animation = "", element.style.boxShadow = "");
+    if (!element || !element.parentElement)
+      return;
+    let overlay = document.body.appendChild(createOverlay(element));
+    if (pulsating) {
+      if (!document.getElementById(HIGHLIGHT_KEYFRAMES_ID)) {
+        let style = document.createElement("style");
+        style.id = HIGHLIGHT_KEYFRAMES_ID, style.innerHTML = keyframes, document.head.appendChild(style);
+      }
+      overlay.style.animation = "sb-highlight-pulsate 3s infinite", overlay.style.transformOrigin = "center", overlay.style.animationTimingFunction = "ease-in-out";
+    } else
+      overlay.style.boxShadow = "rgba(2,156,253,1) 0 0 2px 1px";
+    let scrollTimeout = null, handleScroll = () => {
+      overlay.parentElement && overlay.remove(), scrollTimeout !== null && clearTimeout(scrollTimeout), scrollTimeout = window.setTimeout(() => {
+        element && (updateOverlayStyles(element, overlay), overlay.style.opacity = "0", document.body.appendChild(overlay), requestAnimationFrame(() => overlay.style.opacity = "1"));
+      }, 150);
+    }, resizeObserver = new ResizeObserver(
+      () => overlay.parentElement && updateOverlayStyles(element, overlay)
+    );
+    resizeObserver.observe(window.document.body), resizeObserver.observe(element);
+    let scrollContainers = findScrollableAncestors(element);
+    return scrollContainers.forEach(
+      (el) => el.addEventListener("scroll", handleScroll, { passive: !0 })
+    ), scrollContainers.filter((el) => el !== window).forEach((el) => resizeObserver.observe(el)), () => {
+      scrollTimeout !== null && clearTimeout(scrollTimeout), overlay.parentElement && overlay.remove(), scrollContainers.forEach((el) => el.removeEventListener("scroll", handleScroll)), resizeObserver.disconnect();
     };
   }, [targetSelector, pulsating]), null;
 }
 
-// src/features/GuidedTour/GuidedTour.tsx
-import React12, { useEffect as useEffect3, useState } from "react";
+// ../../core/src/manager/components/TourGuide/TourGuide.tsx
+import React11, { useCallback, useEffect as useEffect3, useMemo, useRef, useState } from "react";
+import { createRoot } from "react-dom/client";
 
 // ../../node_modules/@babel/runtime/helpers/esm/extends.js
 function _extends() {
@@ -1365,13 +1304,13 @@ function colorToInt(color2) {
 function convertToInt(red, green, blue) {
   return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
 }
-function hslToRgb(hue, saturation, lightness, convert2) {
-  if (convert2 === void 0 && (convert2 = convertToInt), saturation === 0)
-    return convert2(lightness, lightness, lightness);
+function hslToRgb(hue, saturation, lightness, convert3) {
+  if (convert3 === void 0 && (convert3 = convertToInt), saturation === 0)
+    return convert3(lightness, lightness, lightness);
   var huePrime = (hue % 360 + 360) % 360 / 60, chroma = (1 - Math.abs(2 * lightness - 1)) * saturation, secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1)), red = 0, green = 0, blue = 0;
   huePrime >= 0 && huePrime < 1 ? (red = chroma, green = secondComponent) : huePrime >= 1 && huePrime < 2 ? (red = secondComponent, green = chroma) : huePrime >= 2 && huePrime < 3 ? (green = chroma, blue = secondComponent) : huePrime >= 3 && huePrime < 4 ? (green = secondComponent, blue = chroma) : huePrime >= 4 && huePrime < 5 ? (red = secondComponent, blue = chroma) : huePrime >= 5 && huePrime < 6 && (red = chroma, blue = secondComponent);
   var lightnessModification = lightness - chroma / 2, finalRed = red + lightnessModification, finalGreen = green + lightnessModification, finalBlue = blue + lightnessModification;
-  return convert2(finalRed, finalGreen, finalBlue);
+  return convert3(finalRed, finalGreen, finalBlue);
 }
 var namedColorMap = {
   aliceblue: "f0f8ff",
@@ -2157,7 +2096,7 @@ import { cloneElement, isValidElement } from "react";
 import { createPortal } from "react-dom";
 var import_deepmerge2 = __toESM(require_cjs(), 1);
 var import_deepmerge3 = __toESM(require_cjs(), 1);
-import * as React22 from "react";
+import * as React2 from "react";
 import * as React3 from "react";
 import * as React32 from "react";
 import * as ReactDOM2 from "react-dom";
@@ -2165,7 +2104,7 @@ import * as React8 from "react";
 
 // ../../node_modules/react-floater/es/index.js
 var import_prop_types = __toESM(require_prop_types());
-import React2 from "react";
+import React from "react";
 
 // ../../node_modules/popper.js/dist/esm/popper.js
 var isBrowser = typeof window < "u" && typeof document < "u" && typeof navigator < "u", timeoutDuration = (function() {
@@ -4025,7 +3964,7 @@ var ReactFloaterPortal = (function(_React$Component) {
     var _this$props2 = this.props, children = _this$props2.children, setRef = _this$props2.setRef;
     if (this.node || this.appendNode(), isReact16)
       return ReactDOM.createPortal(children, this.node);
-    var portal = ReactDOM.unstable_renderSubtreeIntoContainer(this, children.length > 1 ? React2.createElement("div", null, children) : children[0], this.node);
+    var portal = ReactDOM.unstable_renderSubtreeIntoContainer(this, children.length > 1 ? React.createElement("div", null, children) : children[0], this.node);
     return setRef(portal), null;
   } }, { key: "renderReact16", value: function() {
     var _this$props3 = this.props, hasChildren = _this$props3.hasChildren, placement = _this$props3.placement, target = _this$props3.target;
@@ -4033,7 +3972,7 @@ var ReactFloaterPortal = (function(_React$Component) {
   } }, { key: "render", value: function() {
     return isReact16 ? this.renderReact16() : null;
   } }]), ReactFloaterPortal2;
-})(React2.Component);
+})(React.Component);
 _defineProperty(ReactFloaterPortal, "propTypes", { children: import_prop_types.default.oneOfType([import_prop_types.default.element, import_prop_types.default.array]), hasChildren: import_prop_types.default.bool, id: import_prop_types.default.oneOfType([import_prop_types.default.string, import_prop_types.default.number]), placement: import_prop_types.default.string, setRef: import_prop_types.default.func.isRequired, target: import_prop_types.default.oneOfType([import_prop_types.default.object, import_prop_types.default.string]), zIndex: import_prop_types.default.number });
 var FloaterArrow = (function(_React$Component) {
   _inherits(FloaterArrow2, _React$Component);
@@ -4046,19 +3985,19 @@ var FloaterArrow = (function(_React$Component) {
     return placement.startsWith("top") ? (arrow2.bottom = 0, arrow2.left = 0, arrow2.right = 0, arrow2.height = length) : placement.startsWith("bottom") ? (arrow2.left = 0, arrow2.right = 0, arrow2.top = 0, arrow2.height = length) : placement.startsWith("left") ? (arrow2.right = 0, arrow2.top = 0, arrow2.bottom = 0) : placement.startsWith("right") && (arrow2.left = 0, arrow2.top = 0), arrow2;
   } }, { key: "render", value: function() {
     var _this$props2 = this.props, placement = _this$props2.placement, setArrowRef = _this$props2.setArrowRef, styles = _this$props2.styles, _styles$arrow = styles.arrow, color2 = _styles$arrow.color, display = _styles$arrow.display, length = _styles$arrow.length, margin = _styles$arrow.margin, position = _styles$arrow.position, spread = _styles$arrow.spread, arrowStyles = { display, position }, points, x2 = spread, y2 = length;
-    return placement.startsWith("top") ? (points = "0,0 ".concat(x2 / 2, ",").concat(y2, " ").concat(x2, ",0"), arrowStyles.bottom = 0, arrowStyles.marginLeft = margin, arrowStyles.marginRight = margin) : placement.startsWith("bottom") ? (points = "".concat(x2, ",").concat(y2, " ").concat(x2 / 2, ",0 0,").concat(y2), arrowStyles.top = 0, arrowStyles.marginLeft = margin, arrowStyles.marginRight = margin) : placement.startsWith("left") ? (y2 = spread, x2 = length, points = "0,0 ".concat(x2, ",").concat(y2 / 2, " 0,").concat(y2), arrowStyles.right = 0, arrowStyles.marginTop = margin, arrowStyles.marginBottom = margin) : placement.startsWith("right") && (y2 = spread, x2 = length, points = "".concat(x2, ",").concat(y2, " ").concat(x2, ",0 0,").concat(y2 / 2), arrowStyles.left = 0, arrowStyles.marginTop = margin, arrowStyles.marginBottom = margin), React2.createElement("div", { className: "__floater__arrow", style: this.parentStyle }, React2.createElement("span", { ref: setArrowRef, style: arrowStyles }, React2.createElement("svg", { width: x2, height: y2, version: "1.1", xmlns: "http://www.w3.org/2000/svg" }, React2.createElement("polygon", { points, fill: color2 }))));
+    return placement.startsWith("top") ? (points = "0,0 ".concat(x2 / 2, ",").concat(y2, " ").concat(x2, ",0"), arrowStyles.bottom = 0, arrowStyles.marginLeft = margin, arrowStyles.marginRight = margin) : placement.startsWith("bottom") ? (points = "".concat(x2, ",").concat(y2, " ").concat(x2 / 2, ",0 0,").concat(y2), arrowStyles.top = 0, arrowStyles.marginLeft = margin, arrowStyles.marginRight = margin) : placement.startsWith("left") ? (y2 = spread, x2 = length, points = "0,0 ".concat(x2, ",").concat(y2 / 2, " 0,").concat(y2), arrowStyles.right = 0, arrowStyles.marginTop = margin, arrowStyles.marginBottom = margin) : placement.startsWith("right") && (y2 = spread, x2 = length, points = "".concat(x2, ",").concat(y2, " ").concat(x2, ",0 0,").concat(y2 / 2), arrowStyles.left = 0, arrowStyles.marginTop = margin, arrowStyles.marginBottom = margin), React.createElement("div", { className: "__floater__arrow", style: this.parentStyle }, React.createElement("span", { ref: setArrowRef, style: arrowStyles }, React.createElement("svg", { width: x2, height: y2, version: "1.1", xmlns: "http://www.w3.org/2000/svg" }, React.createElement("polygon", { points, fill: color2 }))));
   } }]), FloaterArrow2;
-})(React2.Component);
+})(React.Component);
 _defineProperty(FloaterArrow, "propTypes", { placement: import_prop_types.default.string.isRequired, setArrowRef: import_prop_types.default.func.isRequired, styles: import_prop_types.default.object.isRequired });
 var _excluded$1 = ["color", "height", "width"];
 function FloaterCloseBtn(_ref) {
   var handleClick = _ref.handleClick, styles = _ref.styles, color2 = styles.color, height = styles.height, width = styles.width, style = _objectWithoutProperties(styles, _excluded$1);
-  return React2.createElement("button", { "aria-label": "close", onClick: handleClick, style, type: "button" }, React2.createElement("svg", { width: "".concat(width, "px"), height: "".concat(height, "px"), viewBox: "0 0 18 18", version: "1.1", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid" }, React2.createElement("g", null, React2.createElement("path", { d: "M8.13911129,9.00268191 L0.171521827,17.0258467 C-0.0498027049,17.248715 -0.0498027049,17.6098394 0.171521827,17.8327545 C0.28204354,17.9443526 0.427188206,17.9998706 0.572051765,17.9998706 C0.71714958,17.9998706 0.862013139,17.9443526 0.972581703,17.8327545 L9.0000937,9.74924618 L17.0276057,17.8327545 C17.1384085,17.9443526 17.2832721,17.9998706 17.4281356,17.9998706 C17.5729992,17.9998706 17.718097,17.9443526 17.8286656,17.8327545 C18.0499901,17.6098862 18.0499901,17.2487618 17.8286656,17.0258467 L9.86135722,9.00268191 L17.8340066,0.973848225 C18.0553311,0.750979934 18.0553311,0.389855532 17.8340066,0.16694039 C17.6126821,-0.0556467968 17.254037,-0.0556467968 17.0329467,0.16694039 L9.00042166,8.25611765 L0.967006424,0.167268345 C0.745681892,-0.0553188426 0.387317931,-0.0553188426 0.165993399,0.167268345 C-0.0553311331,0.390136635 -0.0553311331,0.751261038 0.165993399,0.974176179 L8.13920499,9.00268191 L8.13911129,9.00268191 Z", fill: color2 }))));
+  return React.createElement("button", { "aria-label": "close", onClick: handleClick, style, type: "button" }, React.createElement("svg", { width: "".concat(width, "px"), height: "".concat(height, "px"), viewBox: "0 0 18 18", version: "1.1", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid" }, React.createElement("g", null, React.createElement("path", { d: "M8.13911129,9.00268191 L0.171521827,17.0258467 C-0.0498027049,17.248715 -0.0498027049,17.6098394 0.171521827,17.8327545 C0.28204354,17.9443526 0.427188206,17.9998706 0.572051765,17.9998706 C0.71714958,17.9998706 0.862013139,17.9443526 0.972581703,17.8327545 L9.0000937,9.74924618 L17.0276057,17.8327545 C17.1384085,17.9443526 17.2832721,17.9998706 17.4281356,17.9998706 C17.5729992,17.9998706 17.718097,17.9443526 17.8286656,17.8327545 C18.0499901,17.6098862 18.0499901,17.2487618 17.8286656,17.0258467 L9.86135722,9.00268191 L17.8340066,0.973848225 C18.0553311,0.750979934 18.0553311,0.389855532 17.8340066,0.16694039 C17.6126821,-0.0556467968 17.254037,-0.0556467968 17.0329467,0.16694039 L9.00042166,8.25611765 L0.967006424,0.167268345 C0.745681892,-0.0553188426 0.387317931,-0.0553188426 0.165993399,0.167268345 C-0.0553311331,0.390136635 -0.0553311331,0.751261038 0.165993399,0.974176179 L8.13920499,9.00268191 L8.13911129,9.00268191 Z", fill: color2 }))));
 }
 FloaterCloseBtn.propTypes = { handleClick: import_prop_types.default.func.isRequired, styles: import_prop_types.default.object.isRequired };
 function FloaterContainer(_ref) {
-  var content = _ref.content, footer = _ref.footer, handleClick = _ref.handleClick, open = _ref.open, positionWrapper = _ref.positionWrapper, showCloseButton = _ref.showCloseButton, title = _ref.title, styles = _ref.styles, output = { content: React2.isValidElement(content) ? content : React2.createElement("div", { className: "__floater__content", style: styles.content }, content) };
-  return title && (output.title = React2.isValidElement(title) ? title : React2.createElement("div", { className: "__floater__title", style: styles.title }, title)), footer && (output.footer = React2.isValidElement(footer) ? footer : React2.createElement("div", { className: "__floater__footer", style: styles.footer }, footer)), (showCloseButton || positionWrapper) && !esm_default.boolean(open) && (output.close = React2.createElement(FloaterCloseBtn, { styles: styles.close, handleClick })), React2.createElement("div", { className: "__floater__container", style: styles.container }, output.close, output.title, output.content, output.footer);
+  var content = _ref.content, footer = _ref.footer, handleClick = _ref.handleClick, open = _ref.open, positionWrapper = _ref.positionWrapper, showCloseButton = _ref.showCloseButton, title = _ref.title, styles = _ref.styles, output = { content: React.isValidElement(content) ? content : React.createElement("div", { className: "__floater__content", style: styles.content }, content) };
+  return title && (output.title = React.isValidElement(title) ? title : React.createElement("div", { className: "__floater__title", style: styles.title }, title)), footer && (output.footer = React.isValidElement(footer) ? footer : React.createElement("div", { className: "__floater__footer", style: styles.footer }, footer)), (showCloseButton || positionWrapper) && !esm_default.boolean(open) && (output.close = React.createElement(FloaterCloseBtn, { styles: styles.close, handleClick })), React.createElement("div", { className: "__floater__container", style: styles.container }, output.close, output.title, output.content, output.footer);
 }
 FloaterContainer.propTypes = { content: import_prop_types.default.node.isRequired, footer: import_prop_types.default.node, handleClick: import_prop_types.default.func.isRequired, open: import_prop_types.default.bool, positionWrapper: import_prop_types.default.bool.isRequired, showCloseButton: import_prop_types.default.bool.isRequired, styles: import_prop_types.default.object.isRequired, title: import_prop_types.default.node };
 var Floater = (function(_React$Component) {
@@ -4072,9 +4011,9 @@ var Floater = (function(_React$Component) {
     return hideArrow || (placement.startsWith("top") ? element.padding = "0 0 ".concat(length, "px") : placement.startsWith("bottom") ? element.padding = "".concat(length, "px 0 0") : placement.startsWith("left") ? element.padding = "0 ".concat(length, "px 0 0") : placement.startsWith("right") && (element.padding = "0 0 0 ".concat(length, "px"))), [STATUS.OPENING, STATUS.OPEN].indexOf(status) !== -1 && (element = _objectSpread2(_objectSpread2({}, element), floaterOpening)), status === STATUS.CLOSING && (element = _objectSpread2(_objectSpread2({}, element), floaterClosing)), status === STATUS.OPEN && !disableAnimation && (element = _objectSpread2(_objectSpread2({}, element), floaterWithAnimation)), placement === "center" && (element = _objectSpread2(_objectSpread2({}, element), floaterCentered)), component && (element = _objectSpread2(_objectSpread2({}, element), floaterWithComponent)), _objectSpread2(_objectSpread2({}, floater), element);
   } }, { key: "render", value: function() {
     var _this$props2 = this.props, component = _this$props2.component, closeFn = _this$props2.handleClick, hideArrow = _this$props2.hideArrow, setFloaterRef = _this$props2.setFloaterRef, status = _this$props2.status, output = {}, classes = ["__floater"];
-    return component ? React2.isValidElement(component) ? output.content = React2.cloneElement(component, { closeFn }) : output.content = component({ closeFn }) : output.content = React2.createElement(FloaterContainer, this.props), status === STATUS.OPEN && classes.push("__floater__open"), hideArrow || (output.arrow = React2.createElement(FloaterArrow, this.props)), React2.createElement("div", { ref: setFloaterRef, className: classes.join(" "), style: this.style }, React2.createElement("div", { className: "__floater__body" }, output.content, output.arrow));
+    return component ? React.isValidElement(component) ? output.content = React.cloneElement(component, { closeFn }) : output.content = component({ closeFn }) : output.content = React.createElement(FloaterContainer, this.props), status === STATUS.OPEN && classes.push("__floater__open"), hideArrow || (output.arrow = React.createElement(FloaterArrow, this.props)), React.createElement("div", { ref: setFloaterRef, className: classes.join(" "), style: this.style }, React.createElement("div", { className: "__floater__body" }, output.content, output.arrow));
   } }]), Floater2;
-})(React2.Component);
+})(React.Component);
 _defineProperty(Floater, "propTypes", { component: import_prop_types.default.oneOfType([import_prop_types.default.func, import_prop_types.default.element]), content: import_prop_types.default.node, disableAnimation: import_prop_types.default.bool.isRequired, footer: import_prop_types.default.node, handleClick: import_prop_types.default.func.isRequired, hideArrow: import_prop_types.default.bool.isRequired, open: import_prop_types.default.bool, placement: import_prop_types.default.string.isRequired, positionWrapper: import_prop_types.default.bool.isRequired, setArrowRef: import_prop_types.default.func.isRequired, setFloaterRef: import_prop_types.default.func.isRequired, showCloseButton: import_prop_types.default.bool, status: import_prop_types.default.string.isRequired, styles: import_prop_types.default.object.isRequired, title: import_prop_types.default.node });
 var ReactFloaterWrapper = (function(_React$Component) {
   _inherits(ReactFloaterWrapper2, _React$Component);
@@ -4085,18 +4024,18 @@ var ReactFloaterWrapper = (function(_React$Component) {
   return _createClass(ReactFloaterWrapper2, [{ key: "render", value: function() {
     var _this$props = this.props, children = _this$props.children, handleClick = _this$props.handleClick, handleMouseEnter = _this$props.handleMouseEnter, handleMouseLeave = _this$props.handleMouseLeave, setChildRef = _this$props.setChildRef, setWrapperRef = _this$props.setWrapperRef, style = _this$props.style, styles = _this$props.styles, element;
     if (children)
-      if (React2.Children.count(children) === 1)
-        if (!React2.isValidElement(children))
-          element = React2.createElement("span", null, children);
+      if (React.Children.count(children) === 1)
+        if (!React.isValidElement(children))
+          element = React.createElement("span", null, children);
         else {
           var refProp = esm_default.function(children.type) ? "innerRef" : "ref";
-          element = React2.cloneElement(React2.Children.only(children), _defineProperty({}, refProp, setChildRef));
+          element = React.cloneElement(React.Children.only(children), _defineProperty({}, refProp, setChildRef));
         }
       else
         element = children;
-    return element ? React2.createElement("span", { ref: setWrapperRef, style: _objectSpread2(_objectSpread2({}, styles), style), onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, element) : null;
+    return element ? React.createElement("span", { ref: setWrapperRef, style: _objectSpread2(_objectSpread2({}, styles), style), onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, element) : null;
   } }]), ReactFloaterWrapper2;
-})(React2.Component);
+})(React.Component);
 _defineProperty(ReactFloaterWrapper, "propTypes", { children: import_prop_types.default.node, handleClick: import_prop_types.default.func.isRequired, handleMouseEnter: import_prop_types.default.func.isRequired, handleMouseLeave: import_prop_types.default.func.isRequired, setChildRef: import_prop_types.default.func.isRequired, setWrapperRef: import_prop_types.default.func.isRequired, style: import_prop_types.default.object, styles: import_prop_types.default.object.isRequired });
 var defaultOptions = { zIndex: 100 };
 function getStyles(styles) {
@@ -4230,10 +4169,10 @@ var _excluded = ["arrow", "flip", "offset"], POSITIONING_PROPS = ["position", "t
     var target = this.props.target;
     return target ? esm_default.domElement(target) ? target : document.querySelector(target) : this.childRef || this.wrapperRef;
   } }, { key: "render", value: function() {
-    var _this$state4 = this.state, currentPlacement = _this$state4.currentPlacement, positionWrapper = _this$state4.positionWrapper, status = _this$state4.status, _this$props9 = this.props, children = _this$props9.children, component = _this$props9.component, content = _this$props9.content, disableAnimation = _this$props9.disableAnimation, footer = _this$props9.footer, hideArrow = _this$props9.hideArrow, id = _this$props9.id, open = _this$props9.open, showCloseButton = _this$props9.showCloseButton, style = _this$props9.style, target = _this$props9.target, title = _this$props9.title, wrapper = React2.createElement(ReactFloaterWrapper, { handleClick: this.handleClick, handleMouseEnter: this.handleMouseEnter, handleMouseLeave: this.handleMouseLeave, setChildRef: this.setChildRef, setWrapperRef: this.setWrapperRef, style, styles: this.styles.wrapper }, children), output = {};
-    return positionWrapper ? output.wrapperInPortal = wrapper : output.wrapperAsChildren = wrapper, React2.createElement("span", null, React2.createElement(ReactFloaterPortal, { hasChildren: !!children, id, placement: currentPlacement, setRef: this.setFloaterRef, target, zIndex: this.styles.options.zIndex }, React2.createElement(Floater, { component, content, disableAnimation, footer, handleClick: this.handleClick, hideArrow: hideArrow || currentPlacement === "center", open, placement: currentPlacement, positionWrapper, setArrowRef: this.setArrowRef, setFloaterRef: this.setFloaterRef, showCloseButton, status, styles: this.styles, title }), output.wrapperInPortal), output.wrapperAsChildren);
+    var _this$state4 = this.state, currentPlacement = _this$state4.currentPlacement, positionWrapper = _this$state4.positionWrapper, status = _this$state4.status, _this$props9 = this.props, children = _this$props9.children, component = _this$props9.component, content = _this$props9.content, disableAnimation = _this$props9.disableAnimation, footer = _this$props9.footer, hideArrow = _this$props9.hideArrow, id = _this$props9.id, open = _this$props9.open, showCloseButton = _this$props9.showCloseButton, style = _this$props9.style, target = _this$props9.target, title = _this$props9.title, wrapper = React.createElement(ReactFloaterWrapper, { handleClick: this.handleClick, handleMouseEnter: this.handleMouseEnter, handleMouseLeave: this.handleMouseLeave, setChildRef: this.setChildRef, setWrapperRef: this.setWrapperRef, style, styles: this.styles.wrapper }, children), output = {};
+    return positionWrapper ? output.wrapperInPortal = wrapper : output.wrapperAsChildren = wrapper, React.createElement("span", null, React.createElement(ReactFloaterPortal, { hasChildren: !!children, id, placement: currentPlacement, setRef: this.setFloaterRef, target, zIndex: this.styles.options.zIndex }, React.createElement(Floater, { component, content, disableAnimation, footer, handleClick: this.handleClick, hideArrow: hideArrow || currentPlacement === "center", open, placement: currentPlacement, positionWrapper, setArrowRef: this.setArrowRef, setFloaterRef: this.setFloaterRef, showCloseButton, status, styles: this.styles, title }), output.wrapperInPortal), output.wrapperAsChildren);
   } }]), ReactFloater2;
-})(React2.Component);
+})(React.Component);
 _defineProperty(ReactFloater, "propTypes", { autoOpen: import_prop_types.default.bool, callback: import_prop_types.default.func, children: import_prop_types.default.node, component: isRequiredIf(import_prop_types.default.oneOfType([import_prop_types.default.func, import_prop_types.default.element]), function(props) {
   return !props.content;
 }), content: isRequiredIf(import_prop_types.default.node, function(props) {
@@ -4948,7 +4887,7 @@ function JoyrideSpotlight({ styles }) {
     }
   );
 }
-var Spotlight_default = JoyrideSpotlight, JoyrideOverlay = class extends React22.Component {
+var Spotlight_default = JoyrideSpotlight, JoyrideOverlay = class extends React2.Component {
   constructor() {
     super(...arguments), __publicField(this, "isActive", !1), __publicField(this, "resizeTimeout"), __publicField(this, "scrollTimeout"), __publicField(this, "scrollParent"), __publicField(this, "state", {
       isScrolling: !1,
@@ -5040,12 +4979,12 @@ var Spotlight_default = JoyrideSpotlight, JoyrideOverlay = class extends React22
     let { showSpotlight } = this.state, { onClickOverlay, placement } = this.props, { hideSpotlight, overlayStyles, spotlightStyles } = this;
     if (hideSpotlight())
       return null;
-    let spotlight2 = placement !== "center" && showSpotlight && React22.createElement(Spotlight_default, { styles: spotlightStyles });
+    let spotlight2 = placement !== "center" && showSpotlight && React2.createElement(Spotlight_default, { styles: spotlightStyles });
     if (getBrowser() === "safari") {
       let { mixBlendMode, zIndex, ...safariOverlay } = overlayStyles;
-      spotlight2 = React22.createElement("div", { style: { ...safariOverlay } }, spotlight2), delete overlayStyles.backgroundColor;
+      spotlight2 = React2.createElement("div", { style: { ...safariOverlay } }, spotlight2), delete overlayStyles.backgroundColor;
     }
-    return React22.createElement(
+    return React2.createElement(
       "div",
       {
         className: "react-joyride__overlay",
@@ -5698,87 +5637,57 @@ var Container_default = JoyrideTooltipContainer, JoyrideTooltip = class extends
 __publicField(Joyride, "defaultProps", defaultProps);
 var components_default = Joyride;
 
-// src/features/GuidedTour/GuidedTour.tsx
+// ../../core/src/manager/components/TourGuide/TourGuide.tsx
 import { useTheme } from "storybook/theming";
+import { ThemeProvider, convert, themes } from "storybook/theming";
 
-// src/features/GuidedTour/Tooltip.tsx
-import React11, { useEffect as useEffect2 } from "react";
-import { Button as Button3 } from "storybook/internal/components";
+// ../../core/src/manager/components/TourGuide/TourTooltip.tsx
+import React10, { useEffect as useEffect2 } from "react";
+import { Button } from "storybook/internal/components";
 import { CloseAltIcon } from "@storybook/icons";
-import { color, styled as styled3 } from "storybook/theming";
-
-// src/components/Button/Button.tsx
-import React10, { forwardRef } from "react";
-import { styled as styled2 } from "storybook/theming";
-var StyledButton = styled2.button(({ theme: theme2, variant }) => ({
-  all: "unset",
-  boxSizing: "border-box",
-  border: 0,
-  borderRadius: "4px",
-  cursor: "pointer",
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  padding: "0 0.75rem",
-  background: variant === "secondary" ? theme2.button.background : variant === "outline" ? "transparent" : variant === "white" ? theme2.color.lightest : theme2.base === "light" ? theme2.color.secondary : curriedDarken$1(0.18, theme2.color.secondary),
-  color: variant === "secondary" || variant === "outline" ? theme2.color.defaultText : variant === "white" ? theme2.base === "light" ? theme2.color.secondary : curriedDarken$1(0.18, theme2.color.secondary) : theme2.color.lightest,
-  boxShadow: variant === "secondary" ? `${theme2.button.border} 0 0 0 1px inset` : variant === "outline" ? `${theme2.button.border} 0 0 0 1px inset` : "none",
-  height: "32px",
-  fontSize: "0.8125rem",
-  fontWeight: "700",
-  fontFamily: theme2.typography.fonts.base,
-  transition: "background-color, box-shadow, color, opacity",
-  transitionDuration: "0.16s",
-  transitionTimingFunction: "ease-in-out",
-  textDecoration: "none",
-  "&:hover, &:focus": {
-    background: variant === "secondary" || variant === "outline" ? curriedTransparentize$1(0.93, theme2.color.secondary) : variant === "white" ? curriedTransparentize$1(0.1, theme2.color.lightest) : theme2.base === "light" ? curriedLighten$1(0.1, theme2.color.secondary) : curriedDarken$1(0.3, theme2.color.secondary),
-    color: variant === "secondary" || variant === "outline" ? theme2.barSelectedColor : variant === "white" ? theme2.base === "light" ? curriedLighten$1(0.1, theme2.color.secondary) : curriedDarken$1(0.3, theme2.color.secondary) : theme2.color.lightest,
-    boxShadow: variant === "secondary" || variant === "outline" || variant === "white" ? `inset 0 0 0 1px ${theme2.barSelectedColor}` : "none"
-  },
-  "&:focus-visible": {
-    outline: `solid ${theme2.color.secondary}`,
-    outlineOffset: "2px",
-    outlineWidth: "2px"
-  }
-})), Button = forwardRef(function({ children, onClick, variant = "primary", ...rest }, ref) {
-  return React10.createElement(StyledButton, { ref, onClick, variant, ...rest }, children);
-});
-
-// src/features/GuidedTour/Tooltip.tsx
-var TooltipBody = styled3.div`
+import { color, styled } from "storybook/theming";
+var ONBOARDING_ARROW_STYLE_ID = "storybook-onboarding-arrow-style", TooltipBody = styled.div`
   padding: 15px;
   border-radius: 5px;
-`, Wrapper2 = styled3.div`
+`, Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-`, TooltipHeader = styled3.div`
+`, TooltipHeader = styled.div`
   display: flex;
   align-items: center;
   align-self: stretch;
   justify-content: space-between;
   margin: -5px -5px 5px 0;
-`, TooltipTitle = styled3.div`
+`, TooltipTitle = styled.div`
   line-height: 18px;
   font-weight: 700;
   font-size: 14px;
   margin: 5px 5px 5px 0;
-`, TooltipContent = styled3.p`
+`, TooltipContent = styled.p`
   font-size: 14px;
   line-height: 18px;
   text-align: start;
   text-wrap: balance;
   margin: 0;
   margin-top: 5px;
-`, TooltipFooter = styled3.div`
+`, TooltipFooter = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: 15px;
-`, Count = styled3.span`
+`, Count = styled.span`
   font-size: 13px;
-`, Tooltip = ({
+`, NextButton = styled(Button)(({ theme: theme2 }) => ({
+  background: theme2.color.lightest,
+  border: "none",
+  boxShadow: "none",
+  color: theme2.base === "light" ? theme2.color.secondary : curriedDarken$1(0.18, theme2.color.secondary),
+  "&:hover, &:focus": {
+    background: curriedTransparentize$1(0.1, theme2.color.lightest),
+    color: theme2.base === "light" ? curriedLighten$1(0.1, theme2.color.secondary) : curriedDarken$1(0.3, theme2.color.secondary)
+  }
+})), TourTooltip = ({
   index,
   size,
   step,
@@ -5787,7 +5696,7 @@ var TooltipBody = styled3.div`
   tooltipProps
 }) => (useEffect2(() => {
   let style = document.createElement("style");
-  return style.id = "#sb-onboarding-arrow-style", style.innerHTML = `
+  return style.id = ONBOARDING_ARROW_STYLE_ID, style.innerHTML = `
       .__floater__arrow { container-type: size; }
       .__floater__arrow span { background: ${color.secondary}; }
       .__floater__arrow span::before, .__floater__arrow span::after {
@@ -5803,12 +5712,9 @@ var TooltipBody = styled3.div`
       @container (min-height: 1px) {
         .__floater__arrow span { flex-direction: column; }
       }
-    `, document.head.appendChild(style), () => {
-    let styleElement = document.querySelector("#sb-onboarding-arrow-style");
-    styleElement && styleElement.remove();
-  };
-}, []), React11.createElement(TooltipBody, { ...tooltipProps, style: step.styles?.tooltip }, React11.createElement(Wrapper2, null, React11.createElement(TooltipHeader, null, step.title && React11.createElement(TooltipTitle, null, step.title), React11.createElement(
-  Button3,
+    `, document.head.appendChild(style), () => document.getElementById(ONBOARDING_ARROW_STYLE_ID)?.remove();
+}, []), React10.createElement(TooltipBody, { ...tooltipProps, style: step.styles?.tooltip }, React10.createElement(Wrapper, null, React10.createElement(TooltipHeader, null, step.title && React10.createElement(TooltipTitle, null, step.title), React10.createElement(
+  Button,
   {
     ...closeProps,
     onClick: closeProps.onClick,
@@ -5816,44 +5722,53 @@ var TooltipBody = styled3.div`
     padding: "small",
     ariaLabel: "Close"
   },
-  React11.createElement(CloseAltIcon, null)
-)), React11.createElement(TooltipContent, null, step.content)), React11.createElement(TooltipFooter, { id: "buttonNext" }, React11.createElement(Count, null, index + 1, " of ", size), !step.hideNextButton && React11.createElement(
-  Button,
-  {
-    ...primaryProps,
-    onClick: step.onNextButtonClick || primaryProps.onClick,
-    variant: "white"
-  },
-  index + 1 === size ? "Done" : "Next"
-))));
+  React10.createElement(CloseAltIcon, null)
+)), React10.createElement(TooltipContent, null, step.content)), React10.createElement(TooltipFooter, { id: "buttonNext" }, React10.createElement(Count, null, index + 1, " of ", size), !step.hideNextButton && React10.createElement(NextButton, { ...primaryProps }, index + 1 === size ? "Done" : "Next"))));
 
-// src/features/GuidedTour/GuidedTour.tsx
-function GuidedTour({
+// ../../core/src/manager/components/TourGuide/TourGuide.tsx
+var TourGuide = ({
   step,
   steps,
-  onClose,
-  onComplete
-}) {
-  let [stepIndex, setStepIndex] = useState(null), theme2 = useTheme();
-  return useEffect3(() => {
-    let timeout;
-    return setStepIndex((current) => {
-      let index = steps.findIndex(({ key }) => key === step);
-      return index === -1 ? null : index === current ? current : (timeout = setTimeout(setStepIndex, 500, index), null);
-    }), () => clearTimeout(timeout);
-  }, [step, steps]), stepIndex === null ? null : React12.createElement(
+  onNext,
+  onComplete,
+  onDismiss
+}) => {
+  let [stepIndex, setStepIndex] = useState(step ? null : 0), theme2 = useTheme(), timeoutRef = useRef(void 0), updateStepIndex = useCallback((index) => {
+    clearTimeout(timeoutRef.current), setStepIndex((current) => index === -1 ? null : current === null || current === index ? index : (timeoutRef.current = setTimeout(setStepIndex, 300, index), null));
+  }, []);
+  useEffect3(
+    () => step ? updateStepIndex(steps.findIndex(({ key }) => key === step)) : void 0,
+    [step, steps, updateStepIndex]
+  );
+  let mappedSteps = useMemo(() => steps.map((step2, index) => {
+    let next = () => updateStepIndex(index + 1);
+    return {
+      disableBeacon: !0,
+      disableOverlay: !0,
+      spotlightClicks: !0,
+      offset: 0,
+      ...step2,
+      content: React11.createElement(React11.Fragment, null, step2.content, step2.highlight && React11.createElement(HighlightElement, { targetSelector: step2.highlight, pulsating: !0 })),
+      onNext: step2.onNext ? () => step2.onNext?.({ next }) : onNext && (() => onNext?.({ next }))
+    };
+  }), [steps, onNext, updateStepIndex]), callback = useCallback(
+    (data) => {
+      data.action === ACTIONS.NEXT && data.lifecycle === "complete" && (data.index === data.size - 1 ? onComplete?.() : data.step?.onNext ? data.step.onNext() : updateStepIndex(data.index + 1)), data.action === ACTIONS.CLOSE && onDismiss?.();
+    },
+    [onComplete, onDismiss, updateStepIndex]
+  );
+  return stepIndex === null ? null : React11.createElement(
     components_default,
     {
       continuous: !0,
-      steps,
+      steps: mappedSteps,
       stepIndex,
       spotlightPadding: 0,
       disableCloseOnEsc: !0,
       disableOverlayClose: !0,
       disableScrolling: !0,
-      callback: (data) => {
-        data.action === ACTIONS.CLOSE && onClose(), data.action === ACTIONS.NEXT && data.index === data.size - 1 && onComplete();
-      },
+      callback,
+      tooltipComponent: TourTooltip,
       floaterProps: {
         disableAnimation: !0,
         styles: {
@@ -5866,7 +5781,6 @@ function GuidedTour({
           }
         }
       },
-      tooltipComponent: Tooltip,
       styles: {
         overlay: {
           mixBlendMode: "unset",
@@ -5890,198 +5804,132 @@ function GuidedTour({
       }
     }
   );
-}
-
-// src/features/IntentSurvey/IntentSurvey.tsx
-import React13, { useState as useState2 } from "react";
-import { Button as Button4, Form, Modal } from "storybook/internal/components";
-import { styled as styled4 } from "storybook/theming";
+}, root = null;
+TourGuide.render = (props) => {
+  let container = document.getElementById("storybook-tour");
+  container || (container = document.createElement("div"), container.id = "storybook-tour", document.body.appendChild(container)), root = root ?? createRoot(container), root.render(
+    React11.createElement(ThemeProvider, { theme: convert(themes.light) }, React11.createElement(
+      TourGuide,
+      {
+        ...props,
+        onComplete: () => {
+          props.onComplete?.(), root?.render(null), root = null;
+        },
+        onDismiss: () => {
+          props.onDismiss?.(), root?.render(null), root = null;
+        }
+      }
+    ))
+  );
+};
 
-// ../../.storybook/isChromatic.ts
-function isChromatic(windowArg) {
-  let windowToCheck = windowArg || typeof window < "u" && window;
-  return !!(windowToCheck && (windowToCheck.navigator.userAgent.match(/Chromatic/) || windowToCheck.location.href.match(/chromatic=true/)));
-}
+// src/components/Confetti/Confetti.tsx
+import React12 from "react";
 
-// src/features/IntentSurvey/IntentSurvey.tsx
-var Content = styled4(Modal.Content)(({ theme: theme2 }) => ({
-  fontSize: theme2.typography.size.s2,
-  color: theme2.color.defaultText,
-  gap: 8
-})), Row = styled4.div({
-  display: "grid",
-  gridTemplateColumns: "1fr 1fr",
-  gap: 14,
-  marginBottom: 8
-}), Question = styled4.div(({ theme: theme2 }) => ({
-  marginTop: 8,
-  marginBottom: 2,
-  fontWeight: theme2.typography.weight.bold
-})), Label = styled4.label({
-  display: "flex",
-  gap: 8,
-  '&:has(input[type="checkbox"]:not(:disabled), input[type="radio"]:not(:disabled))': {
-    cursor: "pointer"
+// ../../node_modules/@neoconfetti/react/dist/min/index.js
+import { createElement as z, useEffect as A, useRef as H } from "react";
+var e = '@keyframes Bc2PgW_ya{to{translate:0 var(--sh)}}@keyframes Bc2PgW_xa{to{translate:var(--xlp)0}}@keyframes Bc2PgW_r{50%{rotate:var(--hr)180deg}to{rotate:var(--r)360deg}}.Bc2PgW_c{z-index:1200;width:0;height:0;position:relative;overflow:visible}.Bc2PgW_p{animation:xa var(--dc)forwards cubic-bezier(var(--x1),var(--x2),var(--x3),var(--x4));animation-name:Bc2PgW_xa}.Bc2PgW_p>div{animation:ya var(--dc)forwards cubic-bezier(var(--y1),var(--y2),var(--y3),var(--y4));width:var(--w);height:var(--h);animation-name:Bc2PgW_ya;position:absolute;top:0;left:0}.Bc2PgW_p>div:before{content:"";background-color:var(--bgc);animation:r var(--rd)infinite linear;border-radius:var(--br);width:100%;height:100%;animation-name:Bc2PgW_r;display:block}', t = "Bc2PgW_p", r = "Bc2PgW_c", a = ["#FFC700", "#FF0000", "#2E3191", "#41BBC7"], o = 3500, n = 0.5, i = 150, c = "mix", s = 12, l = "", d = !0, p = 800, u = 1600;
+function y(y2, z2 = {}) {
+  let { colors: A2 = a, duration: H2 = o, force: F2 = n, particleCount: O = i, particleShape: j = c, particleSize: E = s, particleClass: $ = l, destroyAfterDone: q = d, stageHeight: D = p, stageWidth: J = u } = z2;
+  (function(e2) {
+    if (document.querySelector("style[data-neoconfetti]")) return;
+    let t2 = W("style");
+    t2.dataset.neoconfetti = "", t2.textContent = e2, _(document.head, t2);
+  })(e), y2.classList.add(r), y2.style.setProperty("--sh", D + "px");
+  let I = [], G = [], K = () => P(b() * (N - 1)), Q = (e2, t2) => j !== "rectangles" && (e2 === "circles" || k(t2));
+  function R(e2, t2) {
+    let r2 = K(), a2 = Q(j, r2), o2 = (t3, r3) => e2.style.setProperty(t3, r3 + "");
+    o2("--xlp", C(x(L(t2, 90) - 180), 0, 180, -J / 2, J / 2) + "px"), o2("--dc", H2 - P(1e3 * b()) + "ms");
+    let n2 = b() < m ? w(b() * h, 2) : 0;
+    o2("--x1", n2), o2("--x2", -1 * n2), o2("--x3", n2), o2("--x4", w(x(C(x(L(t2, 90) - 180), 0, 180, -1, 1)), 4)), o2("--y1", w(b() * v, 4)), o2("--y2", w(b() * F2 * (M() ? 1 : -1), 4)), o2("--y3", v), o2("--y4", w(B(C(x(t2 - 180), 0, 180, F2, -F2), 0), 4)), o2("--w", (a2 ? E : P(4 * b()) + E / 2) + "px"), o2("--h", (a2 ? E : P(2 * b()) + E) + "px");
+    let i2 = r2.toString(2).padStart(3, "0").split("");
+    o2("--hr", i2.map(((e3) => +e3 / 2 + "")).join(" ")), o2("--r", i2.join(" ")), o2("--rd", w(b() * (g - f) + f) + "ms"), o2("--br", a2 ? "50%" : 0);
   }
-}), Actions = styled4(Modal.Actions)({
-  marginTop: 8
-}), Checkbox = styled4(Form.Checkbox)({
-  margin: 2
-}), IntentSurvey = ({
-  onComplete,
-  onDismiss
-}) => {
-  let [isSubmitting, setIsSubmitting] = useState2(!1), [formFields, setFormFields] = useState2({
-    building: {
-      label: "What are you building?",
-      type: "checkbox",
-      required: !0,
-      options: shuffleObject({
-        "design-system": { label: "Design system" },
-        "application-ui": { label: "Application UI" }
-      }),
-      values: {
-        "design-system": !1,
-        "application-ui": !1
-      }
-    },
-    interest: {
-      label: "Which of these are you interested in?",
-      type: "checkbox",
-      required: !0,
-      options: shuffleObject({
-        "ui-documentation": { label: "Generating UI docs" },
-        "functional-testing": { label: "Functional testing" },
-        "accessibility-testing": { label: "Accessibility testing" },
-        "visual-testing": { label: "Visual testing" },
-        "ai-augmented-development": { label: "Building UI with AI" },
-        "team-collaboration": { label: "Team collaboration" },
-        "design-handoff": { label: "Design handoff" }
-      }),
-      values: {
-        "ui-documentation": !1,
-        "functional-testing": !1,
-        "accessibility-testing": !1,
-        "visual-testing": !1,
-        "ai-augmented-development": !1,
-        "team-collaboration": !1,
-        "design-handoff": !1
-      }
-    },
-    referrer: {
-      label: "How did you discover Storybook?",
-      type: "select",
-      required: !0,
-      options: shuffleObject({
-        "we-use-it-at-work": { label: "We use it at work" },
-        "via-friend-or-colleague": { label: "Via friend or colleague" },
-        "via-social-media": { label: "Via social media" },
-        youtube: { label: "YouTube" },
-        "web-search": { label: "Web Search" },
-        "ai-agent": { label: "AI Agent (e.g. ChatGPT)" }
-      }),
-      values: {
-        "we-use-it-at-work": !1,
-        "via-friend-or-colleague": !1,
-        "via-social-media": !1,
-        youtube: !1,
-        "web-search": !1,
-        "ai-agent": !1
-      }
-    }
-  }), updateFormData = (key, optionOrValue, value) => {
-    let field = formFields[key];
-    setFormFields((fields) => {
-      if (field.type === "checkbox") {
-        let values = { ...field.values, [optionOrValue]: !!value };
-        return { ...fields, [key]: { ...field, values } };
-      }
-      if (field.type === "select") {
-        let values = Object.fromEntries(
-          Object.entries(field.values).map(([opt]) => [opt, opt === optionOrValue])
-        );
-        return { ...fields, [key]: { ...field, values } };
-      }
-      return fields;
-    });
-  }, isValid = Object.values(formFields).every((field) => field.required ? Object.values(field.values).some((value) => value === !0) : !0);
-  return React13.createElement(
-    Modal,
-    {
-      ariaLabel: "Storybook user survey",
-      defaultOpen: !0,
-      width: 420,
-      onOpenChange: (isOpen) => {
-        isOpen || onDismiss();
+  let U;
+  function V() {
+    y2.innerHTML = "", clearTimeout(U), I = S(O, A2), G = (function(e2, r2 = [], a2) {
+      let o2 = [];
+      for (let { color: n2 } of r2) {
+        let r3 = W("div");
+        r3.className = `${t} ${a2}`, r3.style.setProperty("--bgc", n2);
+        let i2 = W("div");
+        _(r3, i2), _(e2, r3), o2.push(r3);
       }
-    },
-    React13.createElement(Form, { onSubmit: (e2) => {
-      isValid && (e2.preventDefault(), setIsSubmitting(!0), onComplete(
-        Object.fromEntries(Object.entries(formFields).map(([key, field]) => [key, field.values]))
-      ));
-    }, id: "intent-survey-form" }, React13.createElement(Content, null, React13.createElement(Modal.Header, null, React13.createElement(Modal.Title, null, "Help improve Storybook")), Object.keys(formFields).map((key) => {
-      let field = formFields[key];
-      return React13.createElement(React13.Fragment, { key }, React13.createElement(Question, null, field.label), field.type === "checkbox" && React13.createElement(Row, null, Object.entries(field.options).map(([opt, option]) => {
-        let id = `${key}:${opt}`;
-        return React13.createElement("div", { key: id }, React13.createElement(Label, { htmlFor: id }, React13.createElement(
-          Checkbox,
-          {
-            name: id,
-            id,
-            checked: field.values[opt],
-            disabled: isSubmitting,
-            onChange: (e2) => updateFormData(key, opt, e2.target.checked)
-          }
-        ), option.label));
-      })), field.type === "select" && React13.createElement(
-        Form.Select,
-        {
-          name: key,
-          id: key,
-          value: Object.entries(field.values).find(([, isSelected]) => isSelected)?.[0] || "",
-          required: field.required,
-          disabled: isSubmitting,
-          onChange: (e2) => updateFormData(key, e2.target.value)
-        },
-        React13.createElement("option", { disabled: !0, hidden: !0, value: "" }, "Select an option..."),
-        Object.entries(field.options).map(([opt, option]) => React13.createElement("option", { key: opt, value: opt }, option.label))
-      ));
-    }), React13.createElement(Actions, null, React13.createElement(
-      Button4,
-      {
-        ariaLabel: !1,
-        disabled: isSubmitting || !isValid,
-        size: "medium",
-        type: "submit",
-        variant: "solid"
-      },
-      "Submit"
-    ))))
-  );
-};
-function shuffle(array) {
-  for (let i2 = array.length - 1; i2 > 0; i2--) {
-    let j = Math.floor(Math.random() * (i2 + 1));
-    [array[i2], array[j]] = [array[j], array[i2]];
+      return o2;
+    })(y2, I, $);
+    for (let [e2, t2] of T(G)) R(t2, I[+e2].degree);
+    U = setTimeout((() => {
+      q && (y2.innerHTML = "");
+    }), H2);
   }
-  return array;
+  return V(), { update(e2) {
+    let r2 = e2.particleCount ?? i, f2 = e2.particleShape ?? c, g2 = e2.particleSize ?? s, m2 = e2.particleClass ?? l, h2 = e2.colors ?? a, v2 = e2.stageHeight ?? p, x2 = e2.duration ?? o, b2 = e2.force ?? n, P2 = e2.stageWidth ?? u, B2 = e2.destroyAfterDone ?? d;
+    I = S(r2, h2);
+    let W2 = !1;
+    if (r2 === O) {
+      G = Array.from(y2.querySelectorAll(`.${t}`));
+      for (let [e3, { color: t2 }] of T(I)) {
+        let r3 = G[+e3];
+        JSON.stringify(A2) !== JSON.stringify(h2) && r3.style.setProperty("--bgc", t2), f2 !== j && r3.style.setProperty("--br", Q(f2, K()) ? "50%" : "0"), m2 !== $ && ($ && r3.classList.remove($), m2 && r3.classList.add(m2));
+      }
+    } else W2 = !0;
+    q && !B2 && clearTimeout(U), y2.style.setProperty("--sh", v2 + "px"), H2 = x2, A2 = h2, F2 = b2, O = r2, j = f2, E = g2, $ = m2, q = B2, D = v2, J = P2, W2 && V();
+  }, destroy() {
+    y2.innerHTML = "", clearTimeout(U);
+  } };
 }
-function shuffleObject(object) {
-  return isChromatic() ? object : Object.fromEntries(shuffle(Object.entries(object)));
+var f = 200, g = 800, m = 0.1, h = 0.3, v = 0.5, x = Math.abs, b = Math.random, P = Math.round, B = Math.max, W = (e2) => document.createElement(e2), _ = (e2, t2) => e2.appendChild(t2), S = (e2, t2) => Array.from({ length: e2 }, ((r2, a2) => ({ color: t2[a2 % t2.length], degree: 360 * a2 / e2 }))), w = (e2, t2 = 2) => P((e2 + Number.EPSILON) * 10 ** t2) / 10 ** t2, C = (e2, t2, r2, a2, o2) => (e2 - t2) * (o2 - a2) / (r2 - t2) + a2, L = (e2, t2) => e2 + t2 > 360 ? e2 + t2 - 360 : e2 + t2, M = () => b() > 0.5, T = Object.entries, N = 6, k = (e2) => e2 !== 1 && M();
+function F({ class: e2, ...t2 }) {
+  let r2 = H(null), a2 = H();
+  return A((() => {
+    if (typeof window < "u" && r2.current) {
+      if (a2.current) return a2.current.update(t2), a2.current.destroy;
+      a2.current = y(r2.current, t2);
+    }
+  }), [t2]), z("div", { ref: r2, className: e2 });
 }
 
+// src/components/Confetti/Confetti.tsx
+import { styled as styled2 } from "storybook/theming";
+var Wrapper2 = styled2.div({
+  zIndex: 9999,
+  position: "fixed",
+  top: 0,
+  left: "50%",
+  width: "50%",
+  height: "100%",
+  pointerEvents: "none"
+}), Confetti = React12.memo(function({
+  timeToFade = 5e3,
+  colors = ["#CA90FF", "#FC521F", "#66BF3C", "#FF4785", "#FFAE00", "#1EA7FD"],
+  ...confettiProps
+}) {
+  return React12.createElement(Wrapper2, null, React12.createElement(
+    F,
+    {
+      colors,
+      particleCount: 200,
+      duration: 5e3,
+      stageHeight: window.innerHeight,
+      stageWidth: window.innerWidth,
+      destroyAfterDone: !0,
+      ...confettiProps
+    }
+  ));
+});
+
 // src/features/SplashScreen/SplashScreen.tsx
-import React14, { useCallback, useEffect as useEffect4, useState as useState3 } from "react";
+import React13, { useCallback as useCallback2, useEffect as useEffect4, useState as useState2 } from "react";
 import { ArrowRightIcon } from "@storybook/icons";
-import { keyframes, styled as styled5 } from "storybook/theming";
-var fadeIn = keyframes({
+import { keyframes as keyframes2, styled as styled3 } from "storybook/theming";
+var fadeIn = keyframes2({
   from: {
     opacity: 0
   },
   to: {
     opacity: 1
   }
-}), slideIn = keyframes({
+}), slideIn = keyframes2({
   from: {
     transform: "translate(0, 20px)",
     opacity: 0
@@ -6090,7 +5938,7 @@ var fadeIn = keyframes({
     transform: "translate(0, 0)",
     opacity: 1
   }
-}), scaleIn = keyframes({
+}), scaleIn = keyframes2({
   from: {
     opacity: 0,
     transform: "scale(0.8)"
@@ -6099,14 +5947,14 @@ var fadeIn = keyframes({
     opacity: 1,
     transform: "scale(1)"
   }
-}), rotate = keyframes({
+}), rotate = keyframes2({
   "0%": {
     transform: "rotate(0deg)"
   },
   "100%": {
     transform: "rotate(360deg)"
   }
-}), Wrapper3 = styled5.div(({ visible }) => ({
+}), Wrapper3 = styled3.div(({ visible }) => ({
   position: "fixed",
   top: 0,
   left: 0,
@@ -6118,7 +5966,7 @@ var fadeIn = keyframes({
   justifyContent: "center",
   zIndex: 1e3,
   transition: "opacity 1s 0.5s"
-})), Backdrop = styled5.div({
+})), Backdrop = styled3.div({
   position: "absolute",
   top: 0,
   left: 0,
@@ -6144,7 +5992,7 @@ var fadeIn = keyframes({
     height: "calc(100vw + 100vh)",
     animation: `${rotate} 12s linear infinite`
   }
-}), Content2 = styled5.div(({ visible }) => ({
+}), Content = styled3.div(({ visible }) => ({
   position: "absolute",
   top: "50%",
   left: "50%",
@@ -6161,7 +6009,7 @@ var fadeIn = keyframes({
     fontWeight: "bold",
     animation: `${slideIn} 1.5s 1s backwards`
   }
-})), Features = styled5.div({
+})), Features = styled3.div({
   display: "flex",
   marginTop: 40,
   div: {
@@ -6183,7 +6031,7 @@ var fadeIn = keyframes({
   svg: {
     marginBottom: 10
   }
-}), RadialButton = styled5.button({
+}), RadialButton = styled3.button({
   display: "inline-flex",
   position: "relative",
   alignItems: "center",
@@ -6202,10 +6050,10 @@ var fadeIn = keyframes({
   "&:hover, &:focus": {
     background: "rgba(255, 255, 255, 0.4)"
   }
-}), ArrowIcon = styled5(ArrowRightIcon)({
+}), ArrowIcon = styled3(ArrowRightIcon)({
   width: 30,
   color: "white"
-}), ProgressCircle = styled5.svg(({ progress }) => ({
+}), ProgressCircle = styled3.svg(({ progress }) => ({
   position: "absolute",
   top: -1,
   left: -1,
@@ -6224,7 +6072,7 @@ var fadeIn = keyframes({
     strokeDasharray: Math.PI * 48
   }
 })), SplashScreen = ({ onDismiss, duration = 6e3 }) => {
-  let [progress, setProgress] = useState3(-4e5 / duration), [visible, setVisible] = useState3(!0), ready = progress >= 100, dismiss = useCallback(() => {
+  let [progress, setProgress] = useState2(-4e5 / duration), [visible, setVisible] = useState2(!0), ready = progress >= 100, dismiss = useCallback2(() => {
     setVisible(!1);
     let timeout = setTimeout(onDismiss, 1500);
     return () => clearTimeout(timeout);
@@ -6236,26 +6084,26 @@ var fadeIn = keyframes({
     return () => clearInterval(interval);
   }, [duration]), useEffect4(() => {
     ready && dismiss();
-  }, [ready, dismiss]), React14.createElement(Wrapper3, { visible }, React14.createElement(Backdrop, null), React14.createElement(Content2, { visible }, React14.createElement("h1", null, "Meet your new frontend workshop"), React14.createElement(Features, null, React14.createElement("div", null, React14.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "33", height: "32" }, React14.createElement(
+  }, [ready, dismiss]), React13.createElement(Wrapper3, { visible }, React13.createElement(Backdrop, null), React13.createElement(Content, { visible }, React13.createElement("h1", null, "Meet your new frontend workshop"), React13.createElement(Features, null, React13.createElement("div", null, React13.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "33", height: "32" }, React13.createElement(
     "path",
     {
       d: "M4.06 0H32.5v28.44h-3.56V32H.5V3.56h3.56V0Zm21.33 7.11H4.06v21.33h21.33V7.11Z",
       fill: "currentColor"
     }
-  )), "Development"), React14.createElement("div", null, React14.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32" }, React14.createElement(
+  )), "Development"), React13.createElement("div", null, React13.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32" }, React13.createElement(
     "path",
     {
       d: "M15.95 32c-1.85 0-3.1-1.55-3.1-3.54 0-1.1.45-2.78 1.35-5.03.9-2.3 1.35-4.51 1.35-6.81a22.21 22.21 0 0 0-5.1 3.67c-2.5 2.47-4.95 4.9-7.55 4.9-1.6 0-2.9-1.1-2.9-2.43 0-1.46 1.35-2.91 4.3-3.62 1.45-.36 3.1-.75 4.95-1.06 1.8-.31 3.8-1.02 5.9-2.08a23.77 23.77 0 0 0-6.1-2.12C5.3 13.18 2.3 12.6 1 11.28.35 10.6 0 9.9 0 9.14 0 7.82 1.2 6.8 2.95 6.8c2.65 0 5.75 3.1 7.95 5.3 1.1 1.1 2.65 2.21 4.65 3.27v-.57c0-1.77-.15-3.23-.55-4.3-.8-2.11-2.05-5.43-2.05-6.97 0-2.04 1.3-3.54 3.1-3.54 1.75 0 3.1 1.41 3.1 3.54 0 1.06-.45 2.78-1.35 5.12-.9 2.35-1.35 4.6-1.35 6.72 2.85-1.59 2.5-1.41 4.95-3.5 2.35-2.29 4-3.7 4.9-4.23.95-.58 1.9-.84 2.9-.84 1.6 0 2.8.97 2.8 2.34 0 1.5-1.25 2.78-4.15 3.62-1.4.4-3.05.75-4.9 1.1-1.9.36-3.9 1.07-6.1 2.13a23.3 23.3 0 0 0 5.95 2.08c3.65.7 6.75 1.32 8.15 2.6.7.67 1.05 1.33 1.05 2.08 0 1.33-1.2 2.43-2.95 2.43-2.95 0-6.75-4.15-8.2-5.61-.7-.7-2.2-1.72-4.4-2.96v.57c0 1.9.45 4.03 1.3 6.32.85 2.3 1.3 3.94 1.3 4.95 0 2.08-1.35 3.54-3.1 3.54Z",
       fill: "currentColor"
     }
-  )), "Testing"), React14.createElement("div", null, React14.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "33", height: "32" }, React14.createElement(
+  )), "Testing"), React13.createElement("div", null, React13.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "33", height: "32" }, React13.createElement(
     "path",
     {
       d: "M.5 16a16 16 0 1 1 32 0 16 16 0 0 1-32 0Zm16 12.44A12.44 12.44 0 0 1 4.3 13.53a8 8 0 1 0 9.73-9.73 12.44 12.44 0 1 1 2.47 24.64ZM12.06 16a4.44 4.44 0 1 1 0-8.89 4.44 4.44 0 0 1 0 8.89Z",
       fill: "currentColor",
       fillRule: "evenodd"
     }
-  )), "Documentation")), React14.createElement(RadialButton, { onClick: dismiss }, React14.createElement(ArrowIcon, null), React14.createElement(ProgressCircle, { xmlns: "http://www.w3.org/2000/svg" }, React14.createElement("circle", null)), React14.createElement(ProgressCircle, { xmlns: "http://www.w3.org/2000/svg", progress: !0 }, React14.createElement(
+  )), "Documentation")), React13.createElement(RadialButton, { onClick: dismiss }, React13.createElement(ArrowIcon, null), React13.createElement(ProgressCircle, { xmlns: "http://www.w3.org/2000/svg" }, React13.createElement("circle", null)), React13.createElement(ProgressCircle, { xmlns: "http://www.w3.org/2000/svg", progress: !0 }, React13.createElement(
     "circle",
     {
       strokeDashoffset: Math.PI * 48 * (1 - Math.max(0, Math.min(progress, 100)) / 100)
@@ -6264,7 +6112,7 @@ var fadeIn = keyframes({
 };
 
 // src/Onboarding.tsx
-var SpanHighlight = styled6.span(({ theme: theme2 }) => ({
+var SpanHighlight = styled4.span(({ theme: theme2 }) => ({
   display: "inline-flex",
   borderRadius: 3,
   padding: "0 5px",
@@ -6277,7 +6125,7 @@ var SpanHighlight = styled6.span(({ theme: theme2 }) => ({
   backgroundColor: theme2.base === "dark" ? "black" : theme2.color.light,
   boxSizing: "border-box",
   lineHeight: "17px"
-})), CodeWrapper = styled6.div(({ theme: theme2 }) => ({
+})), CodeWrapper = styled4.div(({ theme: theme2 }) => ({
   background: theme2.background.content,
   borderRadius: 3,
   marginTop: 15,
@@ -6286,9 +6134,12 @@ var SpanHighlight = styled6.span(({ theme: theme2 }) => ({
   ".linenumber": {
     opacity: 0.5
   }
-})), theme = convert();
-function Onboarding({ api }) {
-  let [enabled, setEnabled] = useState4(!0), [showConfetti, setShowConfetti] = useState4(!1), [step, setStep] = useState4("1:Intro"), [primaryControl, setPrimaryControl] = useState4(), [saveFromControls, setSaveFromControls] = useState4(), [createNewStoryForm, setCreateNewStoryForm] = useState4(), [createdStory, setCreatedStory] = useState4(), userAgent = globalThis?.navigator?.userAgent, selectStory = useCallback2(
+})), theme = convert2();
+function Onboarding({
+  api,
+  hasCompletedSurvey
+}) {
+  let [enabled, setEnabled] = useState3(!0), [showConfetti, setShowConfetti] = useState3(!1), [step, setStep] = useState3("1:Intro"), [primaryControl, setPrimaryControl] = useState3(), [saveFromControls, setSaveFromControls] = useState3(), [createNewStoryForm, setCreateNewStoryForm] = useState3(), [createdStory, setCreatedStory] = useState3(), userAgent = globalThis?.navigator?.userAgent, selectStory = useCallback3(
     (storyId) => {
       try {
         let { id, refId } = api.getCurrentStoryData() || {};
@@ -6297,22 +6148,26 @@ function Onboarding({ api }) {
       }
     },
     [api]
-  ), disableOnboarding = useCallback2(() => {
-    let url = new URL(window.location.href), path = decodeURIComponent(url.searchParams.get("path"));
-    url.search = `?path=${path}&onboarding=false`, history.replaceState({}, "", url.href), api.setQueryParams({ onboarding: "false" }), setEnabled(!1);
-  }, [api, setEnabled]), completeOnboarding = useCallback2(
-    (answers) => {
-      api.emit(STORYBOOK_ADDON_ONBOARDING_CHANNEL, {
-        step: "7:FinishedOnboarding",
-        type: "telemetry",
+  ), disableOnboarding = useCallback3(
+    (dismissedStep) => {
+      dismissedStep && api.emit(ADDON_ONBOARDING_CHANNEL, {
+        dismissedStep,
+        type: "dismiss",
         userAgent
-      }), api.emit(STORYBOOK_ADDON_ONBOARDING_CHANNEL, {
+      });
+      let url = new URL(window.location.href);
+      url.searchParams.set("onboarding", "false"), history.replaceState({}, "", url.href), api.setQueryParams({ onboarding: "false" }), setEnabled(!1);
+    },
+    [api, setEnabled, userAgent]
+  ), completeSurvey = useCallback3(
+    (answers) => {
+      api.emit(ADDON_ONBOARDING_CHANNEL, {
         answers,
         type: "survey",
         userAgent
-      }), selectStory("configure-your-project--docs"), disableOnboarding();
+      }), setStep("7:FinishedOnboarding"), selectStory("configure-your-project--docs");
     },
-    [api, selectStory, disableOnboarding, userAgent]
+    [api, selectStory, userAgent]
   );
   if (useEffect5(() => {
     api.setQueryParams({ onboarding: "true" }), selectStory("example-button--primary"), api.togglePanel(!0), api.togglePanelPosition("bottom"), api.setSelectedPanel(ADDON_CONTROLS_ID);
@@ -6322,27 +6177,27 @@ function Onboarding({ api }) {
     });
     return observer.observe(document.body, { childList: !0, subtree: !0 }), () => observer.disconnect();
   }, []), useEffect5(() => {
-    setStep((current) => ["1:Intro", "5:StoryCreated", "6:IntentSurvey", "7:FinishedOnboarding"].includes(current) ? current : createNewStoryForm ? "4:CreateStory" : saveFromControls ? "3:SaveFromControls" : primaryControl ? "2:Controls" : "1:Intro");
-  }, [createNewStoryForm, primaryControl, saveFromControls]), useEffect5(() => api.on(SAVE_STORY_RESPONSE, ({ payload, success }) => {
+    setStep((current) => hasCompletedSurvey && current === "6:IntentSurvey" ? "7:FinishedOnboarding" : ["1:Intro", "5:StoryCreated", "6:IntentSurvey", "7:FinishedOnboarding"].includes(current) ? current : createNewStoryForm ? "4:CreateStory" : saveFromControls ? "3:SaveFromControls" : primaryControl || current === "2:Controls" ? "2:Controls" : "1:Intro");
+  }, [hasCompletedSurvey, createNewStoryForm, primaryControl, saveFromControls]), useEffect5(() => api.on(SAVE_STORY_RESPONSE, ({ payload, success }) => {
     !success || !payload?.newStoryName || (setCreatedStory(payload), setShowConfetti(!0), setStep("5:StoryCreated"), setTimeout(() => api.clearNotification("save-story-success")), setTimeout(() => setShowConfetti(!1), 1e4));
   }), [api]), useEffect5(
-    () => api.emit(STORYBOOK_ADDON_ONBOARDING_CHANNEL, { step, type: "telemetry", userAgent }),
+    () => api.emit(ADDON_ONBOARDING_CHANNEL, { step, type: "telemetry", userAgent }),
     [api, step, userAgent]
   ), !enabled)
     return null;
   let source = createdStory?.sourceFileContent, startIndex = source?.lastIndexOf(`export const ${createdStory?.newStoryExportName}`), snippet = source?.slice(startIndex).trim(), startingLineNumber = source?.slice(0, startIndex).split(`
-`).length, steps = [
+`).length, controlsTour = [
     {
       key: "2:Controls",
       target: "#control-primary",
       title: "Interactive story playground",
-      content: React15.createElement(React15.Fragment, null, "See how a story renders with different data and state without touching code. Try it out by toggling this button.", React15.createElement(HighlightElement, { targetSelector: "#control-primary", pulsating: !0 })),
+      content: React14.createElement(React14.Fragment, null, "See how a story renders with different data and state without touching code. Try it out by toggling this button.", React14.createElement(HighlightElement, { targetSelector: "#control-primary", pulsating: !0 })),
       offset: 20,
       placement: "right",
       disableBeacon: !0,
       disableOverlay: !0,
       spotlightClicks: !0,
-      onNextButtonClick: () => {
+      onNext: () => {
         document.querySelector("#control-primary").click();
       }
     },
@@ -6350,13 +6205,13 @@ function Onboarding({ api }) {
       key: "3:SaveFromControls",
       target: 'button[aria-label="Create new story with these settings"]',
       title: "Save your changes as a new story",
-      content: React15.createElement(React15.Fragment, null, "Great! Storybook stories represent the key states of each of your components. After modifying a story, you can save your changes from here or reset it.", React15.createElement(HighlightElement, { targetSelector: "button[aria-label='Create new story with these settings']" })),
+      content: React14.createElement(React14.Fragment, null, "Great! Storybook stories represent the key states of each of your components. After modifying a story, you can save your changes from here or reset it.", React14.createElement(HighlightElement, { targetSelector: "button[aria-label='Create new story with these settings']" })),
       offset: 6,
       placement: "top",
       disableBeacon: !0,
       disableOverlay: !0,
       spotlightClicks: !0,
-      onNextButtonClick: () => {
+      onNext: () => {
         document.querySelector(
           'button[aria-label="Create new story with these settings"]'
         ).click();
@@ -6371,7 +6226,7 @@ function Onboarding({ api }) {
       key: "5:StoryCreated",
       target: '#storybook-explorer-tree [data-selected="true"]',
       title: "You just added your first story!",
-      content: React15.createElement(React15.Fragment, null, "Well done! You just created your first story from the Storybook manager. This automatically added a few lines of code in", " ", React15.createElement(SpanHighlight, null, createdStory?.sourceFileName), ".", snippet && React15.createElement(ThemeProvider, { theme: convert(themes.dark) }, React15.createElement(CodeWrapper, null, React15.createElement(
+      content: React14.createElement(React14.Fragment, null, "Well done! You just created your first story from the Storybook manager. This automatically added a few lines of code in", " ", React14.createElement(SpanHighlight, null, createdStory?.sourceFileName), ".", snippet && React14.createElement(ThemeProvider2, { theme: convert2(themes2.dark) }, React14.createElement(CodeWrapper, null, React14.createElement(
         SyntaxHighlighter,
         {
           language: "jsx",
@@ -6390,14 +6245,44 @@ function Onboarding({ api }) {
         }
       }
     }
+  ], checklistTour = [
+    {
+      key: "7:FinishedOnboarding",
+      target: "#storybook-checklist-module",
+      title: "Continue at your own pace using the guide",
+      content: React14.createElement(React14.Fragment, null, "Nice! You've got the essentials. You can continue at your own pace using the guide to discover more of Storybook's capabilities.", React14.createElement(HighlightElement, { targetSelector: "#storybook-checklist-module", pulsating: !0 })),
+      offset: 0,
+      placement: "right-start",
+      disableBeacon: !0,
+      disableOverlay: !0,
+      styles: {
+        tooltip: {
+          width: 350
+        }
+      }
+    }
   ];
-  return React15.createElement(ThemeProvider, { theme }, showConfetti && React15.createElement(Confetti, null), step === "1:Intro" ? React15.createElement(SplashScreen, { onDismiss: () => setStep("2:Controls") }) : step === "6:IntentSurvey" ? React15.createElement(IntentSurvey, { onComplete: completeOnboarding, onDismiss: disableOnboarding }) : React15.createElement(
-    GuidedTour,
+  return React14.createElement(ThemeProvider2, { theme }, showConfetti && React14.createElement(Confetti, null), step === "1:Intro" ? React14.createElement(SplashScreen, { onDismiss: () => setStep("2:Controls") }) : step === "6:IntentSurvey" ? React14.createElement(
+    IntentSurvey,
+    {
+      onComplete: completeSurvey,
+      onDismiss: () => disableOnboarding("6:IntentSurvey")
+    }
+  ) : step === "7:FinishedOnboarding" ? React14.createElement(
+    TourGuide,
+    {
+      step,
+      steps: checklistTour,
+      onComplete: () => disableOnboarding(),
+      onDismiss: () => disableOnboarding(step)
+    }
+  ) : React14.createElement(
+    TourGuide,
     {
       step,
-      steps,
-      onClose: disableOnboarding,
-      onComplete: () => setStep("6:IntentSurvey")
+      steps: controlsTour,
+      onComplete: () => setStep(hasCompletedSurvey ? "7:FinishedOnboarding" : "6:IntentSurvey"),
+      onDismiss: () => disableOnboarding(step)
     }
   ));
 }