@storybook/addon-onboarding 0.0.0-pr-32799-sha-e72c6b25 → 0.0.0-pr-32921-sha-e379604f

package/dist/_browser-chunks/{Onboarding-JPHTTZDC.js → Onboarding-XBLXWDOE.js}

@@ -1,6 +1,3 @@
-import {
-  IntentSurvey
-} from "./chunk-2GE6IOLL.js";
 import {
   ADDON_CONTROLS_ID,
   STORYBOOK_ADDON_ONBOARDING_CHANNEL
@@ -1253,10 +1250,10 @@ var require_prop_types = __commonJS({
 });
 
 // src/Onboarding.tsx
-import React14, { useCallback as useCallback2, useEffect as useEffect5, useState as useState3 } from "react";
+import React15, { useCallback as useCallback2, useEffect as useEffect5, useState as useState4 } from "react";
 import { SyntaxHighlighter } from "storybook/internal/components";
 import { SAVE_STORY_RESPONSE } from "storybook/internal/core-events";
-import { ThemeProvider, convert, styled as styled5, themes } from "storybook/theming";
+import { ThemeProvider, convert, styled as styled6, themes } from "storybook/theming";
 
 // src/components/Confetti/Confetti.tsx
 import React from "react";
@@ -7686,10 +7683,190 @@ function GuidedTour({
 }
 __name(GuidedTour, "GuidedTour");
 
+// src/features/IntentSurvey/IntentSurvey.tsx
+import React13, { useState as useState2 } from "react";
+import { Button as Button3, Form, Modal } from "storybook/internal/components";
+import { styled as styled4 } from "storybook/theming";
+
+// ../../.storybook/isChromatic.ts
+function isChromatic(windowArg) {
+  const windowToCheck = windowArg || typeof window !== "undefined" && window;
+  return !!(windowToCheck && (windowToCheck.navigator.userAgent.match(/Chromatic/) || windowToCheck.location.href.match(/chromatic=true/)));
+}
+__name(isChromatic, "isChromatic");
+
+// src/features/IntentSurvey/IntentSurvey.tsx
+var Content = styled4(Modal.Content)(({ theme: theme2 }) => ({
+  fontSize: theme2.typography.size.s2,
+  color: theme2.color.defaultText,
+  gap: 8
+}));
+var Row = styled4.div({
+  display: "grid",
+  gridTemplateColumns: "1fr 1fr",
+  gap: 14,
+  marginBottom: 8
+});
+var Question = styled4.div(({ theme: theme2 }) => ({
+  marginTop: 8,
+  marginBottom: 2,
+  fontWeight: theme2.typography.weight.bold
+}));
+var Label = styled4.label({
+  display: "flex",
+  gap: 8,
+  '&:has(input[type="checkbox"]:not(:disabled), input[type="radio"]:not(:disabled))': {
+    cursor: "pointer"
+  }
+});
+var Actions = styled4(Modal.Actions)({
+  marginTop: 8
+});
+var Checkbox = styled4(Form.Checkbox)({
+  margin: 2
+});
+var IntentSurvey = /* @__PURE__ */ __name(({
+  onComplete,
+  onDismiss
+}) => {
+  const [isSubmitting, setIsSubmitting] = useState2(false);
+  const [formFields, setFormFields] = useState2({
+    building: {
+      label: "What are you building?",
+      type: "checkbox",
+      required: true,
+      options: shuffleObject({
+        "design-system": { label: "Design system" },
+        "application-ui": { label: "Application UI" }
+      }),
+      values: {
+        "design-system": false,
+        "application-ui": false
+      }
+    },
+    interest: {
+      label: "Which of these are you interested in?",
+      type: "checkbox",
+      required: true,
+      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": false,
+        "functional-testing": false,
+        "accessibility-testing": false,
+        "visual-testing": false,
+        "ai-augmented-development": false,
+        "team-collaboration": false,
+        "design-handoff": false
+      }
+    },
+    referrer: {
+      label: "How did you discover Storybook?",
+      type: "select",
+      required: true,
+      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": false,
+        "via-friend-or-colleague": false,
+        "via-social-media": false,
+        youtube: false,
+        "web-search": false,
+        "ai-agent": false
+      }
+    }
+  });
+  const updateFormData = /* @__PURE__ */ __name((key, optionOrValue, value) => {
+    const field = formFields[key];
+    setFormFields((fields) => {
+      if (field.type === "checkbox") {
+        const values = { ...field.values, [optionOrValue]: !!value };
+        return { ...fields, [key]: { ...field, values } };
+      }
+      if (field.type === "select") {
+        const values = Object.fromEntries(
+          Object.entries(field.values).map(([opt]) => [opt, opt === optionOrValue])
+        );
+        return { ...fields, [key]: { ...field, values } };
+      }
+      return fields;
+    });
+  }, "updateFormData");
+  const isValid = Object.values(formFields).every((field) => {
+    if (!field.required) {
+      return true;
+    }
+    return Object.values(field.values).some((value) => value === true);
+  });
+  const onSubmitForm = /* @__PURE__ */ __name((e2) => {
+    if (!isValid) {
+      return;
+    }
+    e2.preventDefault();
+    setIsSubmitting(true);
+    onComplete(
+      Object.fromEntries(Object.entries(formFields).map(([key, field]) => [key, field.values]))
+    );
+  }, "onSubmitForm");
+  return React13.createElement(Modal, { defaultOpen: true, width: 420, onEscapeKeyDown: onDismiss }, React13.createElement(Form, { onSubmit: onSubmitForm, 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) => {
+    const 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]) => {
+      const 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: true, hidden: true, 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(Button3, { disabled: isSubmitting || !isValid, size: "medium", type: "submit", variant: "solid" }, "Submit")))));
+}, "IntentSurvey");
+function shuffle(array) {
+  for (let i2 = array.length - 1; i2 > 0; i2--) {
+    const j = Math.floor(Math.random() * (i2 + 1));
+    [array[i2], array[j]] = [array[j], array[i2]];
+  }
+  return array;
+}
+__name(shuffle, "shuffle");
+function shuffleObject(object) {
+  return isChromatic() ? object : Object.fromEntries(shuffle(Object.entries(object)));
+}
+__name(shuffleObject, "shuffleObject");
+
 // src/features/SplashScreen/SplashScreen.tsx
-import React13, { useCallback, useEffect as useEffect4, useState as useState2 } from "react";
+import React14, { useCallback, useEffect as useEffect4, useState as useState3 } from "react";
 import { ArrowRightIcon } from "@storybook/icons";
-import { keyframes, styled as styled4 } from "storybook/theming";
+import { keyframes, styled as styled5 } from "storybook/theming";
 var fadeIn = keyframes({
   from: {
     opacity: 0
@@ -7726,7 +7903,7 @@ var rotate = keyframes({
     transform: "rotate(360deg)"
   }
 });
-var Wrapper3 = styled4.div(({ visible }) => ({
+var Wrapper3 = styled5.div(({ visible }) => ({
   position: "fixed",
   top: 0,
   left: 0,
@@ -7739,7 +7916,7 @@ var Wrapper3 = styled4.div(({ visible }) => ({
   zIndex: 1e3,
   transition: "opacity 1s 0.5s"
 }));
-var Backdrop = styled4.div({
+var Backdrop = styled5.div({
   position: "absolute",
   top: 0,
   left: 0,
@@ -7766,7 +7943,7 @@ var Backdrop = styled4.div({
     animation: `${rotate} 12s linear infinite`
   }
 });
-var Content = styled4.div(({ visible }) => ({
+var Content2 = styled5.div(({ visible }) => ({
   position: "absolute",
   top: "50%",
   left: "50%",
@@ -7784,7 +7961,7 @@ var Content = styled4.div(({ visible }) => ({
     animation: `${slideIn} 1.5s 1s backwards`
   }
 }));
-var Features = styled4.div({
+var Features = styled5.div({
   display: "flex",
   marginTop: 40,
   div: {
@@ -7807,7 +7984,7 @@ var Features = styled4.div({
     marginBottom: 10
   }
 });
-var RadialButton = styled4.button({
+var RadialButton = styled5.button({
   display: "inline-flex",
   position: "relative",
   alignItems: "center",
@@ -7827,11 +8004,11 @@ var RadialButton = styled4.button({
     background: "rgba(255, 255, 255, 0.4)"
   }
 });
-var ArrowIcon = styled4(ArrowRightIcon)({
+var ArrowIcon = styled5(ArrowRightIcon)({
   width: 30,
   color: "white"
 });
-var ProgressCircle = styled4.svg(({ progress }) => ({
+var ProgressCircle = styled5.svg(({ progress }) => ({
   position: "absolute",
   top: -1,
   left: -1,
@@ -7851,8 +8028,8 @@ var ProgressCircle = styled4.svg(({ progress }) => ({
   }
 }));
 var SplashScreen = /* @__PURE__ */ __name(({ onDismiss, duration = 6e3 }) => {
-  const [progress, setProgress] = useState2(-4e3 * 100 / duration);
-  const [visible, setVisible] = useState2(true);
+  const [progress, setProgress] = useState3(-4e3 * 100 / duration);
+  const [visible, setVisible] = useState3(true);
   const ready = progress >= 100;
   const dismiss = useCallback(() => {
     setVisible(false);
@@ -7873,26 +8050,26 @@ var SplashScreen = /* @__PURE__ */ __name(({ onDismiss, duration = 6e3 }) => {
       dismiss();
     }
   }, [ready, dismiss]);
-  return 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(
+  return 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(
     "path",
     {
       d: "M4.06 0H32.5v28.44h-3.56V32H.5V3.56h3.56V0Zm21.33 7.11H4.06v21.33h21.33V7.11Z",
       fill: "currentColor"
     }
-  )), "Development"), React13.createElement("div", null, React13.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32" }, React13.createElement(
+  )), "Development"), React14.createElement("div", null, React14.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32" }, React14.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"), React13.createElement("div", null, React13.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "33", height: "32" }, React13.createElement(
+  )), "Testing"), React14.createElement("div", null, React14.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "33", height: "32" }, React14.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")), 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: true }, React13.createElement(
+  )), "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: true }, React14.createElement(
     "circle",
     {
       strokeDashoffset: Math.PI * 48 * (1 - Math.max(0, Math.min(progress, 100)) / 100)
@@ -7901,7 +8078,7 @@ var SplashScreen = /* @__PURE__ */ __name(({ onDismiss, duration = 6e3 }) => {
 }, "SplashScreen");
 
 // src/Onboarding.tsx
-var SpanHighlight = styled5.span(({ theme: theme2 }) => ({
+var SpanHighlight = styled6.span(({ theme: theme2 }) => ({
   display: "inline-flex",
   borderRadius: 3,
   padding: "0 5px",
@@ -7915,7 +8092,7 @@ var SpanHighlight = styled5.span(({ theme: theme2 }) => ({
   boxSizing: "border-box",
   lineHeight: "17px"
 }));
-var CodeWrapper = styled5.div(({ theme: theme2 }) => ({
+var CodeWrapper = styled6.div(({ theme: theme2 }) => ({
   background: theme2.background.content,
   borderRadius: 3,
   marginTop: 15,
@@ -7927,13 +8104,13 @@ var CodeWrapper = styled5.div(({ theme: theme2 }) => ({
 }));
 var theme = convert();
 function Onboarding({ api }) {
-  const [enabled, setEnabled] = useState3(true);
-  const [showConfetti, setShowConfetti] = useState3(false);
-  const [step, setStep] = useState3("1:Intro");
-  const [primaryControl, setPrimaryControl] = useState3();
-  const [saveFromControls, setSaveFromControls] = useState3();
-  const [createNewStoryForm, setCreateNewStoryForm] = useState3();
-  const [createdStory, setCreatedStory] = useState3();
+  const [enabled, setEnabled] = useState4(true);
+  const [showConfetti, setShowConfetti] = useState4(false);
+  const [step, setStep] = useState4("1:Intro");
+  const [primaryControl, setPrimaryControl] = useState4();
+  const [saveFromControls, setSaveFromControls] = useState4();
+  const [createNewStoryForm, setCreateNewStoryForm] = useState4();
+  const [createdStory, setCreatedStory] = useState4();
   const userAgent = globalThis?.navigator?.userAgent;
   const selectStory = useCallback2(
     (storyId) => {
@@ -7947,24 +8124,14 @@ function Onboarding({ api }) {
     },
     [api]
   );
-  const disableOnboarding = useCallback2(
-    (dismissedStep) => {
-      if (dismissedStep) {
-        api.emit(STORYBOOK_ADDON_ONBOARDING_CHANNEL, {
-          step: dismissedStep,
-          type: "dismiss",
-          userAgent
-        });
-      }
-      const url = new URL(window.location.href);
-      const path = decodeURIComponent(url.searchParams.get("path"));
-      url.search = `?path=${path}&onboarding=false`;
-      history.replaceState({}, "", url.href);
-      api.setQueryParams({ onboarding: "false" });
-      setEnabled(false);
-    },
-    [api, setEnabled, userAgent]
-  );
+  const disableOnboarding = useCallback2(() => {
+    const url = new URL(window.location.href);
+    const path = decodeURIComponent(url.searchParams.get("path"));
+    url.search = `?path=${path}&onboarding=false`;
+    history.replaceState({}, "", url.href);
+    api.setQueryParams({ onboarding: "false" });
+    setEnabled(false);
+  }, [api, setEnabled]);
   const completeOnboarding = useCallback2(
     (answers) => {
       api.emit(STORYBOOK_ADDON_ONBOARDING_CHANNEL, {
@@ -8043,7 +8210,7 @@ function Onboarding({ api }) {
       key: "2:Controls",
       target: "#control-primary",
       title: "Interactive story playground",
-      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: true })),
+      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: true })),
       offset: 20,
       placement: "right",
       disableBeacon: true,
@@ -8058,7 +8225,7 @@ 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: 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']" })),
+      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']" })),
       offset: 6,
       placement: "top",
       disableBeacon: true,
@@ -8080,7 +8247,7 @@ function Onboarding({ api }) {
       key: "5:StoryCreated",
       target: '#storybook-explorer-tree [data-selected="true"]',
       title: "You just added your first story!",
-      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(ThemeProvider, { theme: convert(themes.dark) }, React14.createElement(CodeWrapper, null, React14.createElement(
+      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(
         SyntaxHighlighter,
         {
           language: "jsx",
@@ -8100,18 +8267,12 @@ function Onboarding({ api }) {
       }
     }
   ];
-  return React14.createElement(ThemeProvider, { theme }, showConfetti && React14.createElement(Confetti, null), step === "1:Intro" ? React14.createElement(SplashScreen, { onDismiss: () => setStep("2:Controls") }) : step === "6:IntentSurvey" ? React14.createElement(
-    IntentSurvey,
-    {
-      onComplete: completeOnboarding,
-      onDismiss: () => disableOnboarding("6:IntentSurvey")
-    }
-  ) : React14.createElement(
+  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,
     {
       step,
       steps,
-      onClose: () => disableOnboarding(step),
+      onClose: disableOnboarding,
       onComplete: () => setStep("6:IntentSurvey")
     }
   ));

package/dist/manager.js

@@ -1,46 +1,37 @@
 import {
   ADDON_CONTROLS_ID
 } from "./_browser-chunks/chunk-B266DSPW.js";
-import {
-  __name
-} from "./_browser-chunks/chunk-CBI7MY27.js";
+import "./_browser-chunks/chunk-CBI7MY27.js";
 
 // src/manager.tsx
 import React, { Suspense, lazy } from "react";
-import { createRoot } from "react-dom/client";
+import ReactDOM from "react-dom";
 import { STORY_SPECIFIED } from "storybook/internal/core-events";
 import { addons } from "storybook/manager-api";
-var Onboarding = lazy(() => import("./_browser-chunks/Onboarding-JPHTTZDC.js"));
-var Survey = lazy(() => import("./_browser-chunks/Survey-FXIM2EKF.js"));
-var render = /* @__PURE__ */ __name((node) => {
-  let container = document.getElementById("storybook-addon-onboarding");
-  if (!container) {
-    container = document.createElement("div");
-    container.id = "storybook-addon-onboarding";
-    document.body.appendChild(container);
-  }
-  createRoot(container).render(React.createElement(Suspense, { fallback: React.createElement("div", null) }, node));
-}, "render");
+var Onboarding = lazy(() => import("./_browser-chunks/Onboarding-XBLXWDOE.js"));
 addons.register("@storybook/addon-onboarding", async (api) => {
-  const { path, queryParams } = api.getUrlState();
-  const isOnboarding = path === "/onboarding" || queryParams.onboarding === "true";
-  const isSurvey = queryParams.onboarding === "survey";
-  if (isSurvey) {
-    return render(React.createElement(Survey, { api }));
-  }
-  await new Promise((resolve) => api.once(STORY_SPECIFIED, resolve));
-  const hasButtonStories = !!api.getData("example-button--primary") || !!document.getElementById("example-button--primary");
-  if (!hasButtonStories) {
-    console.warn(
-      `[@storybook/addon-onboarding] It seems like you have finished the onboarding experience in Storybook! Therefore this addon is not necessary anymore and will not be loaded. You are free to remove it from your project. More info: https://github.com/storybookjs/storybook/tree/next/code/addons/onboarding#uninstalling`
+  const urlState = api.getUrlState();
+  const isOnboarding = urlState.path === "/onboarding" || urlState.queryParams.onboarding === "true";
+  api.once(STORY_SPECIFIED, () => {
+    const hasButtonStories = !!api.getData("example-button--primary") || !!document.getElementById("example-button--primary");
+    if (!hasButtonStories) {
+      console.warn(
+        `[@storybook/addon-onboarding] It seems like you have finished the onboarding experience in Storybook! Therefore this addon is not necessary anymore and will not be loaded. You are free to remove it from your project. More info: https://github.com/storybookjs/storybook/tree/next/code/addons/onboarding#uninstalling`
+      );
+      return;
+    }
+    if (!isOnboarding || window.innerWidth < 730) {
+      return;
+    }
+    api.togglePanel(true);
+    api.togglePanelPosition("bottom");
+    api.setSelectedPanel(ADDON_CONTROLS_ID);
+    const domNode = document.createElement("div");
+    domNode.id = "storybook-addon-onboarding";
+    document.body.appendChild(domNode);
+    ReactDOM.render(
+      React.createElement(Suspense, { fallback: React.createElement("div", null) }, React.createElement(Onboarding, { api })),
+      domNode
     );
-    return;
-  }
-  if (!isOnboarding || window.innerWidth < 730) {
-    return;
-  }
-  api.togglePanel(true);
-  api.togglePanelPosition("bottom");
-  api.setSelectedPanel(ADDON_CONTROLS_ID);
-  return render(React.createElement(Onboarding, { api }));
+  });
 });

package/dist/preset.js

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_3sdx6dbqxah from 'node:url';
-import CJS_COMPAT_NODE_PATH_3sdx6dbqxah from 'node:path';
-import CJS_COMPAT_NODE_MODULE_3sdx6dbqxah from "node:module";
+import CJS_COMPAT_NODE_URL_k5hyqr07skg from 'node:url';
+import CJS_COMPAT_NODE_PATH_k5hyqr07skg from 'node:path';
+import CJS_COMPAT_NODE_MODULE_k5hyqr07skg from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_3sdx6dbqxah.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_3sdx6dbqxah.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_3sdx6dbqxah.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_k5hyqr07skg.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_k5hyqr07skg.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_k5hyqr07skg.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
@@ -16,7 +16,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 import { telemetry } from "storybook/internal/telemetry";
 
 // package.json
-var version = "0.0.0-pr-32799-sha-e72c6b25";
+var version = "0.0.0-pr-32921-sha-e379604f";
 
 // src/constants.ts
 var STORYBOOK_ADDON_ONBOARDING_CHANNEL = "STORYBOOK_ADDON_ONBOARDING_CHANNEL";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-onboarding",
-  "version": "0.0.0-pr-32799-sha-e72c6b25",
+  "version": "0.0.0-pr-32921-sha-e379604f",
   "description": "Storybook Onboarding: Help new users learn how to write stories",
   "keywords": [
     "storybook",
@@ -59,7 +59,7 @@
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
-    "storybook": "^0.0.0-pr-32799-sha-e72c6b25"
+    "storybook": "^0.0.0-pr-32921-sha-e379604f"
   },
   "publishConfig": {
     "access": "public"

package/dist/_browser-chunks/Survey-FXIM2EKF.js

@@ -1,46 +0,0 @@
-import {
-  IntentSurvey
-} from "./chunk-2GE6IOLL.js";
-import {
-  STORYBOOK_ADDON_ONBOARDING_CHANNEL
-} from "./chunk-B266DSPW.js";
-import {
-  __name
-} from "./chunk-CBI7MY27.js";
-
-// src/Survey.tsx
-import React, { useCallback } from "react";
-import { ThemeProvider, convert } from "storybook/theming";
-var theme = convert();
-function Survey({ api }) {
-  const userAgent = globalThis?.navigator?.userAgent;
-  const disableOnboarding = useCallback(() => {
-    const url = new URL(window.location.href);
-    const path = decodeURIComponent(url.searchParams.get("path"));
-    url.search = `?path=${path}&onboarding=false`;
-    history.replaceState({}, "", url.href);
-    api.setQueryParams({ onboarding: "false" });
-  }, [api]);
-  const complete = useCallback(
-    (answers) => {
-      api.emit(STORYBOOK_ADDON_ONBOARDING_CHANNEL, {
-        answers,
-        type: "survey",
-        userAgent
-      });
-      disableOnboarding();
-    },
-    [api, disableOnboarding, userAgent]
-  );
-  const dismiss = useCallback(() => {
-    api.emit(STORYBOOK_ADDON_ONBOARDING_CHANNEL, {
-      type: "skipSurvey"
-    });
-    disableOnboarding();
-  }, [api, disableOnboarding]);
-  return React.createElement(ThemeProvider, { theme }, React.createElement(IntentSurvey, { onComplete: complete, onDismiss: dismiss }));
-}
-__name(Survey, "Survey");
-export {
-  Survey as default
-};

package/dist/_browser-chunks/chunk-2GE6IOLL.js

@@ -1,187 +0,0 @@
-import {
-  __name
-} from "./chunk-CBI7MY27.js";
-
-// src/features/IntentSurvey/IntentSurvey.tsx
-import React, { useState } from "react";
-import { Button, Form, Modal } from "storybook/internal/components";
-import { styled } from "storybook/theming";
-
-// ../../.storybook/isChromatic.ts
-function isChromatic(windowArg) {
-  const windowToCheck = windowArg || typeof window !== "undefined" && window;
-  return !!(windowToCheck && (windowToCheck.navigator.userAgent.match(/Chromatic/) || windowToCheck.location.href.match(/chromatic=true/)));
-}
-__name(isChromatic, "isChromatic");
-
-// src/features/IntentSurvey/IntentSurvey.tsx
-var Content = styled(Modal.Content)(({ theme }) => ({
-  fontSize: theme.typography.size.s2,
-  color: theme.color.defaultText,
-  gap: 8
-}));
-var Row = styled.div({
-  display: "grid",
-  gridTemplateColumns: "1fr 1fr",
-  gap: 14,
-  marginBottom: 8
-});
-var Question = styled.div(({ theme }) => ({
-  marginTop: 8,
-  marginBottom: 2,
-  fontWeight: theme.typography.weight.bold
-}));
-var Label = styled.label({
-  display: "flex",
-  gap: 8,
-  '&:has(input[type="checkbox"]:not(:disabled), input[type="radio"]:not(:disabled))': {
-    cursor: "pointer"
-  }
-});
-var Actions = styled(Modal.Actions)({
-  marginTop: 8
-});
-var Checkbox = styled(Form.Checkbox)({
-  margin: 2
-});
-var IntentSurvey = /* @__PURE__ */ __name(({
-  onComplete,
-  onDismiss
-}) => {
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [formFields, setFormFields] = useState({
-    building: {
-      label: "What are you building?",
-      type: "checkbox",
-      required: true,
-      options: shuffleObject({
-        "design-system": { label: "Design system" },
-        "application-ui": { label: "Application UI" }
-      }),
-      values: {
-        "design-system": false,
-        "application-ui": false
-      }
-    },
-    interest: {
-      label: "Which of these are you interested in?",
-      type: "checkbox",
-      required: true,
-      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": false,
-        "functional-testing": false,
-        "accessibility-testing": false,
-        "visual-testing": false,
-        "ai-augmented-development": false,
-        "team-collaboration": false,
-        "design-handoff": false
-      }
-    },
-    referrer: {
-      label: "How did you discover Storybook?",
-      type: "select",
-      required: true,
-      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": false,
-        "via-friend-or-colleague": false,
-        "via-social-media": false,
-        youtube: false,
-        "web-search": false,
-        "ai-agent": false
-      }
-    }
-  });
-  const updateFormData = /* @__PURE__ */ __name((key, optionOrValue, value) => {
-    const field = formFields[key];
-    setFormFields((fields) => {
-      if (field.type === "checkbox") {
-        const values = { ...field.values, [optionOrValue]: !!value };
-        return { ...fields, [key]: { ...field, values } };
-      }
-      if (field.type === "select") {
-        const values = Object.fromEntries(
-          Object.entries(field.values).map(([opt]) => [opt, opt === optionOrValue])
-        );
-        return { ...fields, [key]: { ...field, values } };
-      }
-      return fields;
-    });
-  }, "updateFormData");
-  const isValid = Object.values(formFields).every((field) => {
-    if (!field.required) {
-      return true;
-    }
-    return Object.values(field.values).some((value) => value === true);
-  });
-  const onSubmitForm = /* @__PURE__ */ __name((e) => {
-    if (!isValid) {
-      return;
-    }
-    e.preventDefault();
-    setIsSubmitting(true);
-    onComplete(
-      Object.fromEntries(Object.entries(formFields).map(([key, field]) => [key, field.values]))
-    );
-  }, "onSubmitForm");
-  return React.createElement(Modal, { defaultOpen: true, width: 420, onEscapeKeyDown: onDismiss }, React.createElement(Form, { onSubmit: onSubmitForm, id: "intent-survey-form" }, React.createElement(Content, null, React.createElement(Modal.Header, { onClose: onDismiss }, React.createElement(Modal.Title, null, "Help improve Storybook")), Object.keys(formFields).map((key) => {
-    const field = formFields[key];
-    return React.createElement(React.Fragment, { key }, React.createElement(Question, null, field.label), field.type === "checkbox" && React.createElement(Row, null, Object.entries(field.options).map(([opt, option]) => {
-      const id = `${key}:${opt}`;
-      return React.createElement("div", { key: id }, React.createElement(Label, { htmlFor: id }, React.createElement(
-        Checkbox,
-        {
-          name: id,
-          id,
-          checked: field.values[opt],
-          disabled: isSubmitting,
-          onChange: (e) => updateFormData(key, opt, e.target.checked)
-        }
-      ), option.label));
-    })), field.type === "select" && React.createElement(
-      Form.Select,
-      {
-        name: key,
-        id: key,
-        value: Object.entries(field.values).find(([, isSelected]) => isSelected)?.[0] || "",
-        required: field.required,
-        disabled: isSubmitting,
-        onChange: (e) => updateFormData(key, e.target.value)
-      },
-      React.createElement("option", { disabled: true, hidden: true, value: "" }, "Select an option..."),
-      Object.entries(field.options).map(([opt, option]) => React.createElement("option", { key: opt, value: opt }, option.label))
-    ));
-  }), React.createElement(Actions, null, React.createElement(Button, { disabled: isSubmitting || !isValid, size: "medium", type: "submit", variant: "solid" }, "Submit")))));
-}, "IntentSurvey");
-function shuffle(array) {
-  for (let i = array.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [array[i], array[j]] = [array[j], array[i]];
-  }
-  return array;
-}
-__name(shuffle, "shuffle");
-function shuffleObject(object) {
-  return isChromatic() ? object : Object.fromEntries(shuffle(Object.entries(object)));
-}
-__name(shuffleObject, "shuffleObject");
-
-export {
-  IntentSurvey
-};