@atlaskit/ads-mcp 0.20.3 → 0.21.0

package/dist/cjs/tools/analyze-a11y/index.js

@@ -1,483 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.listAnalyzeLocalhostA11yTool = exports.listAnalyzeA11yTool = exports.analyzeLocalhostA11yTool = exports.analyzeA11yTool = exports.analyzeA11yLocalhostInputSchema = exports.analyzeA11yInputSchema = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _puppeteer = require("@axe-core/puppeteer");
-var _axeCore = _interopRequireDefault(require("axe-core"));
-var _puppeteer2 = _interopRequireDefault(require("puppeteer"));
-var _zod = require("zod");
-var _helpers = require("../../helpers");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /* eslint-disable-next-line import/extensions -- MCP SDK requires .js extensions for ESM imports */
-var analyzeA11yInputSchema = exports.analyzeA11yInputSchema = _zod.z.object({
-  code: _zod.z.string().describe('Source code of a React component or JSX snippet to analyze (string content only—no file path).'),
-  componentName: _zod.z.string().optional().describe('Optional label for the component under review (for summaries and reports).'),
-  context: _zod.z.string().optional().describe('Optional: how the component is used (e.g. in a form, modal) to improve suggestions.'),
-  includePatternAnalysis: _zod.z.boolean().default(true).describe('When true (default), runs regex-based heuristics on the code string (e.g. unlabeled buttons, missing alt) in addition to other analysis.').optional()
-});
-var listAnalyzeA11yTool = exports.listAnalyzeA11yTool = {
-  name: 'ads_analyze_a11y',
-  description: "Analyzes a **string of React/JSX** code for likely accessibility issues (heuristics and/or axe-related paths) and returns hints that often **point to** `ads_suggest_a11y_fixes` or generic axe/WCAG-style context\u2014not every finding maps to a specific ADS component fix.\n\nWHEN TO USE:\nYou have component source as text and want automated checks or heuristics before or during a code review.\n\nLIMITATIONS:\n- Does not replace testing in a real browser with assistive technologies or full keyboard traversal.\n- For rendered UI, `ads_analyze_localhost_a11y` (live URL + axe) is preferable when available\u2014it is **only exposed when this MCP runs locally**, not in the remote MCP deployment.",
-  annotations: {
-    title: 'Analyze accessibility (code string)',
-    readOnlyHint: true,
-    destructiveHint: false,
-    idempotentHint: true,
-    openWorldHint: true
-  },
-  inputSchema: (0, _helpers.zodToJsonSchema)(analyzeA11yInputSchema)
-};
-var analyzeA11yLocalhostInputSchema = exports.analyzeA11yLocalhostInputSchema = _zod.z.object({
-  url: _zod.z.string().describe('Fully qualified page URL to load (e.g. `http://localhost:9000` or a dev URL). Must be reachable from this MCP process.'),
-  componentName: _zod.z.string().optional().describe('Optional label for reporting (e.g. feature or component under test).'),
-  context: _zod.z.string().optional().describe('Optional: route, user flow, or feature context for the analyzed page.'),
-  selector: _zod.z.string().optional().describe('Optional CSS selector to scope axe analysis to a subtree (e.g. `#my-form`, `[data-testid="panel"]`). Omit to analyze the whole document.')
-});
-var listAnalyzeLocalhostA11yTool = exports.listAnalyzeLocalhostA11yTool = {
-  name: 'ads_analyze_localhost_a11y',
-  description: "Loads a **live URL** in a headless browser, runs **axe-core**, and returns violations with follow-up hints (often suggesting `ads_suggest_a11y_fixes`). Output is anchored in **axe** rule text; remediation may be generic or ADS-biased depending on the violation.\n\n**Availability:** This tool is only registered when the ADS MCP runs **on your machine** (local MCP). It is **not** available in the **remote** MCP offering\u2014use `ads_analyze_a11y` on source text there instead.\n\nWHEN TO USE:\nYou have a running app or storybook page and need automated accessibility results on **rendered** UI\u2014especially local or staging URLs.\n\nLIMITATIONS:\n- Does not replace manual testing with assistive technologies or keyboard-only navigation.\n- Requires network access to the URL from the environment running the MCP.",
-  annotations: {
-    title: 'Analyze accessibility (live URL)',
-    readOnlyHint: true,
-    destructiveHint: false,
-    idempotentHint: true,
-    openWorldHint: true
-  },
-  inputSchema: (0, _helpers.zodToJsonSchema)(analyzeA11yLocalhostInputSchema)
-};
-
-// Common accessibility patterns to detect in code
-var accessibilityPatterns = [{
-  pattern: /<button[^>]*>(?!.*aria-label|.*>.*<\/button>)/g,
-  violation: 'Button without accessible text',
-  severity: 'error',
-  suggestion: 'Use the ads_suggest_a11y_fixes tool for ADS Button solutions. Describe the issue as "button missing label", "empty button", or "button needs text".'
-}, {
-  pattern: /<img[^>]*>(?!.*alt=)/g,
-  violation: 'Image without alt text',
-  severity: 'error',
-  suggestion: 'Use the ads_suggest_a11y_fixes tool for ADS Image solutions. Describe the issue as "image missing alt", "missing alt text", or "image accessibility".'
-}, {
-  pattern: /<div[^>]*onClick[^>]*>/g,
-  violation: 'Clickable div without accessibility',
-  severity: 'warning',
-  suggestion: 'Use the ads_suggest_a11y_fixes tool for ADS solutions. Describe the issue as "clickable div", "interactive div", or "div with click handler".'
-}, {
-  pattern: /color:\s*['"]#[0-9a-fA-F]{3,6}['"]/g,
-  violation: 'Hardcoded color values',
-  severity: 'warning',
-  suggestion: 'Use the ads_suggest_a11y_fixes tool for design token solutions. Describe the issue as "hardcoded colors", "hex colors", or "design tokens".'
-}, {
-  pattern: /<input[^>]*>(?!.*id=)/g,
-  violation: 'Input without associated label',
-  severity: 'error',
-  suggestion: 'Use the ads_suggest_a11y_fixes tool for ADS form solutions. Describe the issue as "input missing label", "form field without label", or "unlabeled input".'
-}, {
-  pattern: /<div[^>]*role="button"[^>]*>/g,
-  violation: 'Custom button without full accessibility',
-  severity: 'warning',
-  suggestion: 'Use the ads_suggest_a11y_fixes tool for ADS Button/Focusable solutions. Describe the issue as "custom button", "div with button role", or "interactive element".'
-}, {
-  pattern: /style=\{[^}]*color[^}]*\}/g,
-  violation: 'Inline color styles',
-  severity: 'warning',
-  suggestion: 'Use the ads_suggest_a11y_fixes tool for design token solutions. Describe the issue as "inline styles", "hardcoded colors", or "color tokens".'
-}];
-
-// ADS accessibility guidelines reference
-var adsGuidelines = {
-  buttons: {
-    title: 'Button Accessibility',
-    guidelines: ['Always provide accessible labels for buttons', 'Use Button component for standard interactions', 'Use Focusable component for custom interactive elements', 'Avoid disabled buttons with tooltips', 'Ensure focus indicators are visible']
-  },
-  forms: {
-    title: 'Form Accessibility',
-    guidelines: ['Use TextField component for consistent labeling', 'Associate labels with inputs using id and htmlFor', 'Provide clear error messages with aria-describedby', 'Use MessageWrapper for form validation announcements']
-  },
-  images: {
-    title: 'Image Accessibility',
-    guidelines: ['Use Image component with proper alt text', 'Keep alt text under 125 characters', 'Leave alt="" for decorative images', 'Describe the purpose, not just the content']
-  },
-  colors: {
-    title: 'Color and Contrast',
-    guidelines: ['Use design tokens for consistent contrast ratios', 'Never rely on color alone for information', 'Use color.text tokens for proper contrast', 'Test with high contrast mode']
-  }
-};
-
-// Helper function to map axe-core violations to ADS-specific fixes
-function mapAxeViolationsToADSFixes(violations) {
-  return violations.map(function (violation) {
-    var adsFix = generateADSFixForViolation(violation);
-    return _objectSpread(_objectSpread({}, violation), {}, {
-      type: adsFix.title,
-      // Use the specific fix key that matches fixes.ts
-      adsFix: adsFix,
-      severity: violation.impact === 'critical' || violation.impact === 'serious' ? 'error' : 'warning'
-    });
-  });
-}
-
-// Helper function to provide ADS-specific guidance for axe-core violations
-function generateADSFixForViolation(violation) {
-  var id = violation.id,
-    description = violation.description,
-    help = violation.help,
-    tags = violation.tags;
-
-  // Provide general guidance without trying to map to specific fixes.ts keys
-  var adsFix = "Use the ads_suggest_a11y_fixes tool to get specific ADS component solutions. Describe the issue using the violation details: \"".concat(help, "\" or in your own words (e.g., \"button has no text\", \"missing alt text\", \"form field needs label\").");
-  return {
-    title: help,
-    // Use axe-core's human-readable description
-    description: description,
-    adsFix: adsFix,
-    example: 'The ads_suggest_a11y_fixes tool provides detailed code examples and ADS component solutions',
-    violationId: id,
-    axeHelp: help,
-    tags: tags,
-    wcagTags: tags.filter(function (tag) {
-      return tag.startsWith('wcag');
-    }),
-    // Extract WCAG compliance info
-    reference: "https://atlassian.design/llms-a11y.txt",
-    recommendations: ['Use ADS components for better accessibility out of the box', 'Reference the ads_suggest_a11y_fixes tool for specific solutions', 'Test with keyboard navigation and screen readers', 'Use automated accessibility testing tools']
-  };
-}
-var analyzeA11yTool = exports.analyzeA11yTool = /*#__PURE__*/function () {
-  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(params) {
-    var code, componentName, context, _params$includePatter, includePatternAnalysis, violations, suggestions, axeResults, _axeResults$violation, _axeResults$passes, _axeResults$incomplet, results, adsViolations, relevantGuidelines, summary;
-    return _regenerator.default.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          code = params.code, componentName = params.componentName, context = params.context, _params$includePatter = params.includePatternAnalysis, includePatternAnalysis = _params$includePatter === void 0 ? true : _params$includePatter;
-          violations = [];
-          suggestions = [];
-          axeResults = {};
-          _context.prev = 4;
-          _context.next = 7;
-          return _axeCore.default.run({
-            fromFrames: ['iframe', 'html']
-          });
-        case 7:
-          results = _context.sent;
-          // Process axe-core results
-          if (results.violations && results.violations.length > 0) {
-            adsViolations = mapAxeViolationsToADSFixes(results.violations);
-            violations.push.apply(violations, (0, _toConsumableArray2.default)(adsViolations));
-            axeResults.violations = results.violations;
-            axeResults.passes = results.passes;
-            axeResults.incomplete = results.incomplete;
-          }
-
-          // Include pattern-based analysis if requested
-          if (includePatternAnalysis) {
-            accessibilityPatterns.forEach(function (pattern) {
-              var matches = code.match(pattern.pattern);
-              if (matches) {
-                violations.push({
-                  type: pattern.violation,
-                  severity: pattern.severity,
-                  count: matches.length,
-                  suggestion: pattern.suggestion,
-                  adsFix: 'Use the ads_suggest_a11y_fixes tool for specific ADS component solutions',
-                  example: 'The ads_suggest_a11y_fixes tool provides detailed code examples',
-                  source: 'pattern-analysis'
-                });
-              }
-            });
-          }
-
-          // Generate ADS-specific suggestions
-          if (violations.length > 0) {
-            suggestions.push({
-              title: 'Accessibility Improvements Needed',
-              description: "Found ".concat(violations.length, " accessibility issues in your code."),
-              violations: violations,
-              nextSteps: ['Review each violation and apply the suggested fixes', 'Use ADS components instead of custom implementations', 'Test with screen readers and keyboard navigation', 'Run automated accessibility tests']
-            });
-          }
-
-          // Provide relevant ADS guidelines
-          relevantGuidelines = [];
-          if (code.includes('button') || code.includes('onClick')) {
-            relevantGuidelines.push(adsGuidelines.buttons);
-          }
-          if (code.includes('input') || code.includes('form')) {
-            relevantGuidelines.push(adsGuidelines.forms);
-          }
-          if (code.includes('img') || code.includes('image')) {
-            relevantGuidelines.push(adsGuidelines.images);
-          }
-          if (code.includes('color') || code.includes('style')) {
-            relevantGuidelines.push(adsGuidelines.colors);
-          }
-
-          // Generate summary
-          summary = {
-            componentName: componentName || 'Unknown component',
-            totalViolations: violations.length,
-            severityBreakdown: {
-              error: violations.filter(function (v) {
-                return v.severity === 'error';
-              }).length,
-              warning: violations.filter(function (v) {
-                return v.severity === 'warning';
-              }).length
-            },
-            context: context || 'No additional context provided',
-            axeResults: {
-              violations: ((_axeResults$violation = axeResults.violations) === null || _axeResults$violation === void 0 ? void 0 : _axeResults$violation.length) || 0,
-              passes: ((_axeResults$passes = axeResults.passes) === null || _axeResults$passes === void 0 ? void 0 : _axeResults$passes.length) || 0,
-              incomplete: ((_axeResults$incomplet = axeResults.incomplete) === null || _axeResults$incomplet === void 0 ? void 0 : _axeResults$incomplet.length) || 0
-            }
-          };
-          return _context.abrupt("return", {
-            content: [{
-              type: 'text',
-              text: JSON.stringify({
-                summary: summary,
-                violations: violations,
-                suggestions: suggestions,
-                relevantGuidelines: relevantGuidelines,
-                axeResults: axeResults,
-                recommendations: ['Use ADS components for better accessibility out of the box', 'Reference https://atlassian.design/llms-a11y.txt for detailed guidelines', 'Test with keyboard navigation and screen readers', 'Use automated accessibility testing tools']
-              }, null, 2)
-            }]
-          });
-        case 20:
-          _context.prev = 20;
-          _context.t0 = _context["catch"](4);
-          // Fallback to pattern-based analysis if axe-core fails
-          // console.warn('Axe-core analysis failed, falling back to pattern analysis:', error);
-
-          // Run pattern analysis as fallback
-          accessibilityPatterns.forEach(function (pattern) {
-            var matches = code.match(pattern.pattern);
-            if (matches) {
-              violations.push({
-                type: pattern.violation,
-                severity: pattern.severity,
-                count: matches.length,
-                suggestion: pattern.suggestion,
-                adsFix: 'Use the ads_suggest_a11y_fixes tool for specific ADS component solutions',
-                example: 'The ads_suggest_a11y_fixes tool provides detailed code examples',
-                source: 'pattern-analysis-fallback'
-              });
-            }
-          });
-          return _context.abrupt("return", {
-            content: [{
-              type: 'text',
-              text: JSON.stringify({
-                summary: {
-                  componentName: componentName || 'Unknown component',
-                  totalViolations: violations.length,
-                  severityBreakdown: {
-                    error: violations.filter(function (v) {
-                      return v.severity === 'error';
-                    }).length,
-                    warning: violations.filter(function (v) {
-                      return v.severity === 'warning';
-                    }).length
-                  },
-                  context: context || 'No additional context provided',
-                  note: 'Analysis completed using pattern matching (axe-core analysis failed)'
-                },
-                violations: violations,
-                suggestions: violations.length > 0 ? [{
-                  title: 'Accessibility Improvements Needed',
-                  description: "Found ".concat(violations.length, " accessibility issues in your code."),
-                  violations: violations,
-                  nextSteps: ['Review each violation and apply the suggested fixes', 'Use ADS components instead of custom implementations', 'Test with screen readers and keyboard navigation', 'Run automated accessibility tests']
-                }] : [],
-                error: 'Axe-core analysis failed, used pattern-based analysis as fallback',
-                recommendations: ['Use ADS components for better accessibility out of the box', 'Reference https://atlassian.design/llms-a11y.txt for detailed guidelines', 'Test with keyboard navigation and screen readers', 'Use automated accessibility testing tools']
-              }, null, 2)
-            }]
-          });
-        case 24:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee, null, [[4, 20]]);
-  }));
-  return function analyzeA11yTool(_x) {
-    return _ref.apply(this, arguments);
-  };
-}();
-var analyzeLocalhostA11yTool = exports.analyzeLocalhostA11yTool = /*#__PURE__*/function () {
-  var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(params) {
-    var url, componentName, context, selector, violations, suggestions, axeResults, browser, page, _axeResults$violation2, _axeResults$passes2, _axeResults$incomplet2, elementExists, availableElements, axePuppeteer, results, adsViolations, relevantGuidelines, summary;
-    return _regenerator.default.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          url = params.url, componentName = params.componentName, context = params.context, selector = params.selector;
-          violations = [];
-          suggestions = [];
-          axeResults = {};
-          _context2.next = 6;
-          return _puppeteer2.default.launch();
-        case 6:
-          browser = _context2.sent;
-          _context2.next = 9;
-          return browser.newPage();
-        case 9:
-          page = _context2.sent;
-          _context2.prev = 10;
-          _context2.next = 13;
-          return page.goto(url, {
-            waitUntil: 'networkidle0'
-          });
-        case 13:
-          if (!selector) {
-            _context2.next = 22;
-            break;
-          }
-          _context2.next = 16;
-          return page.$(selector);
-        case 16:
-          elementExists = _context2.sent;
-          if (elementExists) {
-            _context2.next = 22;
-            break;
-          }
-          _context2.next = 20;
-          return page.evaluate(function () {
-            var elements = Array.from(document.querySelectorAll('[id]'));
-            return elements.map(function (el) {
-              return "#".concat(el.id);
-            });
-          });
-        case 20:
-          availableElements = _context2.sent;
-          throw new Error("Element with selector \"".concat(selector, "\" not found on the page after waiting. Available elements: ").concat(availableElements.join(', ')));
-        case 22:
-          // Run axe-core accessibility analysis
-          axePuppeteer = new _puppeteer.AxePuppeteer(page); // If selector is provided, analyze only that element
-          if (selector) {
-            axePuppeteer.include(selector);
-          }
-          _context2.next = 26;
-          return axePuppeteer.analyze();
-        case 26:
-          results = _context2.sent;
-          if (results.violations && results.violations.length > 0) {
-            adsViolations = mapAxeViolationsToADSFixes(results.violations);
-            violations.push.apply(violations, (0, _toConsumableArray2.default)(adsViolations));
-            axeResults.violations = results.violations;
-            axeResults.passes = results.passes;
-            axeResults.incomplete = results.incomplete;
-          }
-
-          // Generate ADS-specific suggestions
-          if (violations.length > 0) {
-            suggestions.push({
-              title: 'Accessibility Improvements Needed',
-              description: "Found ".concat(violations.length, " accessibility issues in your code."),
-              violations: violations,
-              nextSteps: ['Review each violation and apply the suggested fixes', 'Use ADS components instead of custom implementations', 'Test with screen readers and keyboard navigation', 'Run automated accessibility tests']
-            });
-          }
-
-          // Provide relevant ADS guidelines
-          relevantGuidelines = [];
-          if (url.includes('button') || url.includes('onClick')) {
-            relevantGuidelines.push(adsGuidelines.buttons);
-          }
-          if (url.includes('input') || url.includes('form')) {
-            relevantGuidelines.push(adsGuidelines.forms);
-          }
-          if (url.includes('img') || url.includes('image')) {
-            relevantGuidelines.push(adsGuidelines.images);
-          }
-          if (url.includes('color') || url.includes('style')) {
-            relevantGuidelines.push(adsGuidelines.colors);
-          }
-
-          // Generate summary
-          summary = {
-            url: url,
-            selector: selector || 'Entire page analyzed',
-            componentName: componentName || 'Unknown component',
-            totalViolations: violations.length,
-            severityBreakdown: {
-              error: violations.filter(function (v) {
-                return v.severity === 'error';
-              }).length,
-              warning: violations.filter(function (v) {
-                return v.severity === 'warning';
-              }).length
-            },
-            context: context || 'No additional context provided',
-            axeResults: {
-              violations: ((_axeResults$violation2 = axeResults.violations) === null || _axeResults$violation2 === void 0 ? void 0 : _axeResults$violation2.length) || 0,
-              passes: ((_axeResults$passes2 = axeResults.passes) === null || _axeResults$passes2 === void 0 ? void 0 : _axeResults$passes2.length) || 0,
-              incomplete: ((_axeResults$incomplet2 = axeResults.incomplete) === null || _axeResults$incomplet2 === void 0 ? void 0 : _axeResults$incomplet2.length) || 0
-            }
-          };
-          _context2.next = 37;
-          return browser.close();
-        case 37:
-          return _context2.abrupt("return", {
-            content: [{
-              type: 'text',
-              text: JSON.stringify({
-                summary: summary,
-                violations: violations,
-                suggestions: suggestions,
-                relevantGuidelines: relevantGuidelines,
-                axeResults: axeResults,
-                recommendations: ['Use ADS components for better accessibility out of the box', 'Reference https://atlassian.design/llms-a11y.txt for detailed guidelines', 'Test with keyboard navigation and screen readers', 'Use automated accessibility testing tools']
-              }, null, 2)
-            }]
-          });
-        case 40:
-          _context2.prev = 40;
-          _context2.t0 = _context2["catch"](10);
-          _context2.next = 44;
-          return browser.close();
-        case 44:
-          return _context2.abrupt("return", {
-            content: [{
-              type: 'text',
-              text: JSON.stringify({
-                summary: {
-                  url: url,
-                  selector: selector || 'Entire page analyzed',
-                  componentName: componentName || 'Unknown component',
-                  totalViolations: violations.length,
-                  severityBreakdown: {
-                    error: violations.filter(function (v) {
-                      return v.severity === 'error';
-                    }).length,
-                    warning: violations.filter(function (v) {
-                      return v.severity === 'warning';
-                    }).length
-                  },
-                  context: context || 'No additional context provided',
-                  note: 'Analysis failed to run on the provided URL'
-                },
-                violations: violations,
-                suggestions: [],
-                error: String(_context2.t0),
-                recommendations: ['Use ADS components for better accessibility out of the box', 'Reference https://atlassian.design/llms-a11y.txt for detailed guidelines', 'Test with keyboard navigation and screen readers', 'Use automated accessibility testing tools']
-              }, null, 2)
-            }]
-          });
-        case 45:
-        case "end":
-          return _context2.stop();
-      }
-    }, _callee2, null, [[10, 40]]);
-  }));
-  return function analyzeLocalhostA11yTool(_x2) {
-    return _ref2.apply(this, arguments);
-  };
-}();

package/dist/cjs/tools/migration-guides/migrations/onboarding-to-spotlight.js

@@ -1,77 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.onboardingWithMotion = exports.onboardingSingleStep = exports.onboardingMultiStep = exports.onboardingJiraSpotlight = void 0;
-var additionalResources = 'Visit https://hello.atlassian.net/wiki/spaces/DST/pages/6069774593 or https://atlassian.design/components/spotlight for more context';
-var onboardingSingleStep = exports.onboardingSingleStep = {
-  id: 'single-step',
-  title: 'Single Step Spotlight Migration',
-  description: 'Use when code ONLY has `Spotlight` from `@atlaskit/onboarding` (no JiraSpotlight)',
-  fromPackage: '@atlaskit/onboarding',
-  toPackage: '@atlaskit/spotlight',
-  examples: [{
-    title: 'Migrate single step spotlight',
-    description: 'Replace SpotlightTarget, and Spotlight with the new compositional @atlaskit/spotlight components',
-    before: "\n// file1.tsx\nimport React, { useState } from 'react';\nimport Button from '@atlaskit/button/new';\nimport { Spotlight } from '@atlaskit/onboarding';\n\nconst OnboardingSpotlight = () => {\n  const [isSpotlightActive, setIsSpotlightActive] = useState(true);\n  const start = () => setIsSpotlightActive(true);\n  const end = () => setIsSpotlightActive(false);\n\n  return (\n\t\t{isSpotlightActive && (\n\t\t\t<Spotlight\n\t\t\t\tdialogPlacement='bottom right'\n\t\t\t\tactions={[\n\t\t\t\t\t{\n\t\t\t\t\t\tonClick: end,\n\t\t\t\t\t\ttext: 'Got it',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t\theading=\"Feature Heading\"\n\t\t\t\ttarget=\"my-target\"\n\t\t\t>\n\t\t\t\tThis is the spotlight body content describing the feature.\n\t\t\t</Spotlight>\n\t\t)}\n  );\n};\n\n// file2.tsx\nimport React from 'react';\nimport Button from '@atlaskit/button/new';\nimport { Spotlight } from '@atlaskit/onboarding';\n\nconst SomeFeature = () => {\n\n  return (\n\t\t<SpotlightTarget name=\"my-target\">\n\t\t\t<Button>Target Element</Button>\n\t\t</SpotlightTarget>\n  );\n};\n",
-    after: "\n// file2.tsx -- the Spotlight has been co-located to the targeted element.\nimport React, { useState } from 'react';\nimport Button from '@atlaskit/button/new';\nimport { Text } from '@atlaskit/primitives/compiled';\nimport {\n  PopoverContent,\n  PopoverProvider,\n  PopoverTarget,\n  SpotlightActions,\n  SpotlightBody,\n  SpotlightCard,\n  SpotlightControls,\n  SpotlightDismissControl,\n  SpotlightFooter,\n  SpotlightHeader,\n  SpotlightHeadline,\n  SpotlightPrimaryAction,\n} from '@atlaskit/spotlight';\n\nconst Spotlight = () => {\n  const [isVisible, setIsVisible] = useState(false);\n  const dismiss = () => setIsVisible(false);\n  const done = () => setIsVisible(false);\n\n  return (\n    <PopoverProvider>\n      <PopoverTarget>\n        <Button onClick={() => setIsVisible(true)}>Target Element</Button>\n      </PopoverTarget>\n      <PopoverContent dismiss={dismiss} placement=\"bottom-start\" isVisible={isVisible}>\n        <SpotlightCard>\n          <SpotlightHeader>\n            <SpotlightHeadline>Feature Heading</SpotlightHeadline>\n            <SpotlightControls>\n              <SpotlightDismissControl />\n            </SpotlightControls>\n          </SpotlightHeader>\n          <SpotlightBody>\n            <Text>This is the spotlight body content describing the feature.</Text>\n          </SpotlightBody>\n          <SpotlightFooter>\n            <SpotlightActions>\n              <SpotlightPrimaryAction onClick={done}>Got it</SpotlightPrimaryAction>\n            </SpotlightActions>\n          </SpotlightFooter>\n        </SpotlightCard>\n      </PopoverContent>\n    </PopoverProvider>\n  );\n};",
-    explanation: "Key changes when migrating a single step spotlight:\n- Do not use this migration guide for JiraSpotlight. Use 'jira-spotlight' instead.\n- PopoverProvider maintains internal Spotlight state. SpotlightManager coordinated multiple @atlaskit/onboarding usages and is no longer needed.\n- Replace SpotlightTarget with PopoverTarget - wraps the element to highlight\n- Replace Spotlight with PopoverContent containing SpotlightCard - controls visibility and positioning\n- The 'heading' prop becomes SpotlightHeadline inside SpotlightHeader\n- The 'actions' array becomes SpotlightActions with SpotlightPrimaryAction (and optionally SpotlightSecondaryAction)\n- The children content moves into SpotlightBody wrapped with Text component\n- Add SpotlightDismissControl inside SpotlightControls for the close button\n- The 'target' and/or 'targetName' prop is replaced with PopoverTarget directly wrapping the target element\n- The 'dialogPlacement' prop becomes 'placement' on PopoverContent. Mapping: \"top right\" \u2192 \"top-start\", \"top center\" \u2192 \"top\", \"top left\" \u2192 \"top-end\", \"right bottom\" \u2192 \"right-start\", \"right middle\" \u2192 \"right-start | right-end\", \"right top\" \u2192 \"right-end\", \"bottom left\" \u2192 \"bottom-end\", \"bottom center\" \u2192 \"bottom\", \"bottom right\" \u2192 \"bottom-start\", \"left top\" \u2192 \"left-end\", \"left middle\" \u2192 \"left-start | left-end\", \"left bottom\" \u2192 \"left-start\"'"
-  }],
-  bestPractices: ['PopoverTarget should wrap exactly one child element that will be highlighted', 'Always include SpotlightDismissControl for accessibility - allows users to dismiss via close button', 'SpotlightPrimaryAction is required and wraps the main CTA button', 'Wrap body text content in the Text component from @atlaskit/primitives/compiled'],
-  additionalResources: additionalResources
-};
-var onboardingJiraSpotlight = exports.onboardingJiraSpotlight = {
-  id: 'jira-spotlight',
-  title: 'JiraSpotlight Migration',
-  description: 'Use when code contains `JiraSpotlight` import from `@atlassian/jira-spotlight`',
-  fromPackage: '@atlassian/jira-spotlight',
-  toPackage: '@atlaskit/spotlight',
-  examples: [{
-    title: 'Internal <JiraSpotlight /> migration',
-    description: 'Internal migrations are possible for JiraSpotlight usages which only pass simple/textual content to JiraSpotlight children',
-    before: "\n// file1.tsx\nimport { JiraSpotlight } from '@atlassian/jira-spotlight/src/ui/jira-spotlight.tsx';\n\nexport const OnboardingSpotlightWrapper = () => {\n\tconst spotlightId = 'some-unique-identifier'\n\tconst { dark, light } = spotlightImageUrls[spotlightId];\n\tconst imageUrl = colorMode === 'dark' ? dark : light;\n\n\treturn (\n\t\t<JiraSpotlight\n\t\t\timage={imageUrl}\n\t\t\tactions={[\n\t\t\t\t{\n\t\t\t\t\tonClick,\n\t\t\t\t\ttext: formatMessage(dismiss),\n\t\t\t\t},\n\t\t\t]}\n\t\t\theading={formatMessage(heading)}\n\t\t\ttarget={spotlightId}\n\t\t\tkey={spotlightId}\n\t\t\ttargetRadius={3}\n\t\t\ttargetBgColor={token('elevation.surface')}\n\t\t\tmessageId={spotlightId}\n\t\t\tmessageType=\"transactional\"\n\t\t\tdialogWidth={275}\n\t\t>\n\t\t\t{formatMessage(body)}\n\t\t</JiraSpotlight>\n\t);\n}\n\n// file2.tsx\nimport { SpotlightTarget } from '@atlaskit/onboarding';\n\nconst spotlightId = 'some-unique-identifier'\n\nexport const SomeFeature = () => {\n\treturn (\n\t\t<SpotlightTarget name={spotlightId}>\n\t\t\t// Target code\n\t\t</SpotlightTarget>\n\t);\n}\n",
-    after: "\n// file1.tsx\nimport { JiraSpotlight } from '@atlassian/jira-spotlight/src/ui/jira-spotlight.tsx';\n\nexport const OnboardingSpotlightWrapper = () => {\n\tconst spotlightId = 'some-unique-identifier'\n\tconst { dark, light } = spotlightImageUrls[spotlightId];\n\tconst imageUrl = colorMode === 'dark' ? dark : light;\n\n\treturn (\n\t\t<JiraSpotlight\n\t\t\tisMigrated // isMigrated prop passed\n\t\t\timage={imageUrl}\n\t\t\tactions={[\n\t\t\t\t{\n\t\t\t\t\tonClick,\n\t\t\t\t\ttext: formatMessage(dismiss),\n\t\t\t\t},\n\t\t\t]}\n\t\t\theading={formatMessage(heading)}\n\t\t\ttarget={spotlightId}\n\t\t\tkey={spotlightId}\n\t\t\ttargetRadius={3}\n\t\t\ttargetBgColor={token('elevation.surface')}\n\t\t\tmessageId={spotlightId}\n\t\t\tmessageType=\"transactional\"\n\t\t\tdialogWidth={275}\n\t\t>\n\t\t\t{formatMessage(body)}\n\t\t</JiraSpotlight>\n\t);\n}\n\n// file2.tsx\n// Updated SpotlightTarget import statement\nimport { SpotlightTarget } from '@atlassian/jira-spotlight/src/ui/SpotlightTarget.tsx';\n\nexport const SomeFeature = () => {\n\tconst spotlightId = 'some-unique-identifier'\n\n\treturn (\n\t\t<SpotlightTarget name={spotlightId}>\n\t\t\t// Target code\n\t\t</SpotlightTarget>\n\t);\n}\n\t\t\t",
-    explanation: "Key changes when migrating a JiraSpotlight:\n- A JiraSpotlight and a SpotlightTarget are part of the same usage if they share a spotlightId value - Referenced in JiraSpotlight.target and SpotlightTarget.name props\n- Pass isMigrated={true} to JiraSpotlight.\n- Update SpotlightTarget import statment from '@atlaskit/onboarding' to '@atlassian/jira-spotlight/src/ui/SpotlightTarget.tsx';\n- These changes allow switching the internal implementation to '@atlaskit/spotlight' via a feature flag.\n- This internal migration is only possible for usages that don't rely too heavily on the 'children' prop, as complex values, like heading, images, etc passed to 'children' are difficult to parse.\n"
-  }, {
-    title: 'Complex <JiraSpotlight /> migration',
-    description: 'Complex migrations are necessary for JiraSpotlight usages that make heavy use of the `children` prop to achieve customisation instead of relying on the `heading`, `body`, `image`, and/or `actions` props.',
-    before: "\n// file1.tsx\nimport { JiraSpotlight } from '@atlassian/jira-spotlight/src/ui/jira-spotlight.tsx';\n\nexport const OnboardingSpotlightWrapper = () => {\n\tconst spotlightId = 'some-unique-identifier'\n\tconst { dark, light } = spotlightImageUrls[spotlightId];\n\tconst imageUrl = colorMode === 'dark' ? dark : light;\n\n\treturn (\n\t\t<JiraSpotlight\n\t\t\ttarget={spotlightId}\n\t\t\ttargetRadius={3}\n\t\t\tdialogPlacement=''\n\t\t\ttargetBgColor={token('elevation.surface')}\n\t\t\tmessageId={spotlightId}\n\t\t\tmessageType=\"transactional\"\n\t\t\tdialogWidth={275}\n\t\t>\n\t\t\t<CustomSpotlightInner>\n\t\t\t\t{imageUrl}\n\t\t\t\t{formatMessage(heading)}\n\t\t\t\t{formatMessage(body)}\n\t\t\t\t<CustomSpotlightAction>\n\t\t\t\t\t{formatMessage(dismiss)}\n\t\t\t\t</CustomSpotlightAction>\n\t\t\t</CustomSpotlightInner>\n\t\t</JiraSpotlight>\n\t);\n}\n\n// file2.tsx\nimport { SpotlightTarget } from '@atlaskit/onboarding';\n\nconst spotlightId = 'some-unique-identifier'\n\nexport const SomeFeature = () => {\n\treturn (\n\t\t<SpotlightTarget name={spotlightId}>\n\t\t\t// Target code\n\t\t</SpotlightTarget>\n\t);\n}\n",
-    after: "\n// file2.tsx - Spotlight code has been co-located to the targeted element\nimport { Text } from '@atlaskit/primitives/compiled';\nimport {\n  PopoverContent,\n  PopoverProvider,\n  PopoverTarget,\n  SpotlightActions,\n  SpotlightBody,\n  SpotlightCard,\n  SpotlightControls,\n  SpotlightDismissControl,\n  SpotlightFooter,\n  SpotlightHeader,\n  SpotlightHeadline,\n  SpotlightPrimaryAction,\n} from '@atlaskit/spotlight';\nimport Image from '@atlaskit/image';\nimport { ChoreographedComponent } from '@atlassian/jira-spotlight/src/ui/ChoreographedComponent.tsx';\n\nexport const SomeFeature = () => {\n\tconst { dark, light } = spotlightImageUrls[spotlightId];\n\n\tconst [isSpotlightVisible, actions] = useListViewOnboarding({\n\t\tprojectId: String(projectData.id),\n\t\tid: spotlightId,\n\t});\n\n\treturn (\n\t\t<PopoverProvider>\n\t\t\t<PopoverTarget>{renderTrigger(isSpotlightVisible)}</PopoverTarget>\n\t\t\t<ChoreographedComponent messageId={spotlightId} messageType=\"transactional\">\n\t\t\t\t<PopoverContent isVisible={isSpotlightVisible} placement=\"bottom-start\" dismiss={onClick}>\n\t\t\t\t\t<SpotlightCard>\n\t\t\t\t\t\t<SpotlightHeader>\n\t\t\t\t\t\t\t<SpotlightHeadline>{formatMessage(heading)}</SpotlightHeadline>\n\t\t\t\t\t\t\t<SpotlightControls>\n\t\t\t\t\t\t\t\t<SpotlightDismissControl />\n\t\t\t\t\t\t\t</SpotlightControls>\n\t\t\t\t\t\t</SpotlightHeader>\n\t\t\t\t\t\t<SpotlightMedia>\n\t\t\t\t\t\t\t<Image src={light} srcDark={dark} alt=\"\" />\n\t\t\t\t\t\t</SpotlightMedia>\n\t\t\t\t\t\t<SpotlightBody>\n\t\t\t\t\t\t\t<Text>{formatMessage(body)}</Text>\n\t\t\t\t\t\t</SpotlightBody>\n\t\t\t\t\t\t<SpotlightFooter>\n\t\t\t\t\t\t\t<SpotlightActions>\n\t\t\t\t\t\t\t\t<SpotlightPrimaryAction onClick={onClick}>\n\t\t\t\t\t\t\t\t\t{formatMessage(dismiss)}\n\t\t\t\t\t\t\t\t</SpotlightPrimaryAction>\n\t\t\t\t\t\t\t</SpotlightActions>\n\t\t\t\t\t\t</SpotlightFooter>\n\t\t\t\t\t</SpotlightCard>\n\t\t\t\t</PopoverContent>\n\t\t\t</ChoreographedComponent>\n\t\t</PopoverProvider>\n\t);\n};",
-    explanation: "Key changes when migrating a single step spotlight:\n- Replace JiraSpotlight with ChoreographedComponent from '@atlassian/jira-spotlight'.\n- PopoverProvider maintains internal Spotlight state.\n- Replace SpotlightTarget with PopoverTarget - wraps the element to highlight\n- Replace Spotlight with PopoverContent containing SpotlightCard - controls visibility and positioning\n- 'heading' becomes SpotlightHeadline inside SpotlightHeader\n- 'actions' becomes SpotlightActions with SpotlightPrimaryAction (and optionally SpotlightSecondaryAction)\n- 'body' content moves into SpotlightBody wrapped with Text component\n- Add SpotlightDismissControl inside SpotlightControls for the close button\n- The 'target' and/or 'targetName' prop is replaced with PopoverTarget directly wrapping the target element\n- 'dialogPlacement' prop becomes 'placement' on PopoverContent. Mapping: \"top right\" \u2192 \"top-start\", \"top center\" \u2192 \"top\", \"top left\" \u2192 \"top-end\", \"right bottom\" \u2192 \"right-start\", \"right middle\" \u2192 \"right-start | right-end\", \"right top\" \u2192 \"right-end\", \"bottom left\" \u2192 \"bottom-end\", \"bottom center\" \u2192 \"bottom\", \"bottom right\" \u2192 \"bottom-start\", \"left top\" \u2192 \"left-end\", \"left middle\" \u2192 \"left-start | left-end\", \"left bottom\" \u2192 \"left-start\"'"
-  }],
-  bestPractices: [],
-  additionalResources: additionalResources
-};
-var onboardingMultiStep = exports.onboardingMultiStep = {
-  id: 'multi-step',
-  title: 'Multi Step Spotlight Tour Migration',
-  description: 'Migrate a multi-step spotlight tour from @atlaskit/onboarding to @atlaskit/spotlight',
-  fromPackage: '@atlaskit/onboarding',
-  toPackage: '@atlaskit/spotlight',
-  examples: [{
-    title: 'Migrate multi step spotlight tour',
-    description: 'Replace the single SpotlightManager pattern with multiple PopoverProvider instances, one for each target in the tour',
-    before: "import React, { useState } from 'react';\nimport Button, { IconButton } from '@atlaskit/button/new';\nimport CommentAddIcon from '@atlaskit/icon/core/comment-add';\nimport CopyIcon from '@atlaskit/icon/core/copy';\nimport {\n  Spotlight,\n  SpotlightManager,\n  SpotlightTarget,\n  SpotlightTransition,\n} from '@atlaskit/onboarding';\n\nconst OnboardingTour = () => {\n  const [activeSpotlight, setActiveSpotlight] = useState<null | number>(null);\n  const start = () => setActiveSpotlight(0);\n  const next = () => setActiveSpotlight((activeSpotlight || 0) + 1);\n  const back = () => setActiveSpotlight((activeSpotlight || 1) - 1);\n  const end = () => setActiveSpotlight(null);\n\n  const renderActiveSpotlight = () => {\n    const spotlights = [\n      <Spotlight\n        actions={[\n          { onClick: () => next(), text: 'Next' },\n          { onClick: () => end(), text: 'Dismiss', appearance: 'subtle' },\n        ]}\n        heading=\"Add a comment\"\n        target=\"comment\"\n        key=\"comment\"\n      >\n        Quickly add a comment to the work item.\n      </Spotlight>,\n      <Spotlight\n        actions={[\n          { onClick: () => end(), text: 'Done' },\n          { onClick: () => back(), text: 'Back', appearance: 'subtle' },\n        ]}\n        heading=\"Copy code\"\n        target=\"copy\"\n        key=\"copy\"\n      >\n        Click to copy the example code to your clipboard.\n      </Spotlight>,\n    ];\n\n    if (activeSpotlight === null) {\n      return null;\n    }\n    return spotlights[activeSpotlight];\n  };\n\n  return (\n    <SpotlightManager>\n      <SpotlightTarget name=\"comment\">\n        <IconButton icon={CommentAddIcon} label=\"comment\" />\n      </SpotlightTarget>\n      <SpotlightTarget name=\"copy\">\n        <IconButton icon={CopyIcon} label=\"Copy\" />\n      </SpotlightTarget>\n      <Button appearance=\"primary\" onClick={start}>\n        Start tour\n      </Button>\n      <SpotlightTransition>{renderActiveSpotlight()}</SpotlightTransition>\n    </SpotlightManager>\n  );\n};",
-    after: "import React, { useState } from 'react';\nimport Button, { IconButton } from '@atlaskit/button/new';\nimport CommentAddIcon from '@atlaskit/icon/core/comment-add';\nimport CopyIcon from '@atlaskit/icon/core/copy';\nimport { Text } from '@atlaskit/primitives/compiled';\nimport {\n  PopoverContent,\n  PopoverProvider,\n  PopoverTarget,\n  SpotlightActions,\n  SpotlightBody,\n  SpotlightCard,\n  SpotlightControls,\n  SpotlightDismissControl,\n  SpotlightFooter,\n  SpotlightHeader,\n  SpotlightHeadline,\n  SpotlightPrimaryAction,\n  SpotlightSecondaryAction,\n  SpotlightStepCount,\n} from '@atlaskit/spotlight';\n\nconst SpotlightTour = () => {\n  const [currentStep, setCurrentStep] = useState<number>(0);\n\n  const dismiss = () => setCurrentStep(0);\n  const back = () => setCurrentStep(Math.max(currentStep - 1, 1));\n  const next = () => setCurrentStep(Math.min(currentStep + 1, 2));\n  const done = () => setCurrentStep(0);\n\n  return (\n    <>\n      <PopoverProvider>\n        <PopoverTarget>\n          <IconButton icon={CommentAddIcon} label=\"comment\" />\n        </PopoverTarget>\n        <PopoverContent dismiss={dismiss} placement=\"bottom-start\" isVisible={currentStep === 1}>\n          <SpotlightCard>\n            <SpotlightHeader>\n              <SpotlightHeadline>Add a comment</SpotlightHeadline>\n              <SpotlightControls>\n                <SpotlightDismissControl onClick={dismiss} />\n              </SpotlightControls>\n            </SpotlightHeader>\n            <SpotlightBody>\n              <Text>Quickly add a comment to the work item.</Text>\n            </SpotlightBody>\n            <SpotlightFooter>\n              <SpotlightStepCount>1 of 2</SpotlightStepCount>\n              <SpotlightActions>\n                <SpotlightPrimaryAction onClick={next}>Next</SpotlightPrimaryAction>\n              </SpotlightActions>\n            </SpotlightFooter>\n          </SpotlightCard>\n        </PopoverContent>\n      </PopoverProvider>\n\n      <PopoverProvider>\n        <PopoverTarget>\n          <IconButton icon={CopyIcon} label=\"Copy\" />\n        </PopoverTarget>\n        <PopoverContent dismiss={dismiss} placement=\"bottom-start\" isVisible={currentStep === 2}>\n          <SpotlightCard>\n            <SpotlightHeader>\n              <SpotlightHeadline>Copy code</SpotlightHeadline>\n              <SpotlightControls>\n                <SpotlightDismissControl onClick={dismiss} />\n              </SpotlightControls>\n            </SpotlightHeader>\n            <SpotlightBody>\n              <Text>Click to copy the example code to your clipboard.</Text>\n            </SpotlightBody>\n            <SpotlightFooter>\n              <SpotlightStepCount>2 of 2</SpotlightStepCount>\n              <SpotlightActions>\n                <SpotlightSecondaryAction onClick={back}>Back</SpotlightSecondaryAction>\n                <SpotlightPrimaryAction onClick={done}>Done</SpotlightPrimaryAction>\n              </SpotlightActions>\n            </SpotlightFooter>\n          </SpotlightCard>\n        </PopoverContent>\n      </PopoverProvider>\n\n      <Button appearance=\"primary\" onClick={() => setCurrentStep(1)}>\n        Start tour\n      </Button>\n    </>\n  );\n};",
-    explanation: "Key changes when migrating a multi-step spotlight tour:\n- SpotlightManager coordinated multiple spotlights in a tour. PopoverProvider manages internal state for a single spotlight.\n- Each target gets its own PopoverProvider > PopoverTarget > PopoverContent structure\n- The spotlight array pattern is replaced with individual SpotlightCard components per target\n- Control visibility with isVisible={currentStep === n} on each PopoverContent\n- Add SpotlightStepCount component in SpotlightFooter to show progress (e.g., \"1 of 3\")\n- Use SpotlightSecondaryAction for \"Back\" buttons instead of appearance: 'subtle' in the actions array\n- Use SpotlightPrimaryAction for \"Next\" and \"Done\" buttons\n- The renderActiveSpotlight pattern is no longer needed - visibility is controlled declaratively\n- Navigation functions use Math.max/Math.min to bound the step range safely\n- All other migration changes from single step spotlight migration guide apply."
-  }],
-  bestPractices: ['Use a numeric currentStep state where 0 = hidden, 1+ = active step number', 'Always include SpotlightStepCount in multi-step tours for user orientation', 'First step should only have "Next" action, middle steps have "Back" and "Next", last step has "Back" and "Done"', 'Use SpotlightSecondaryAction for back/dismiss actions and SpotlightPrimaryAction for next/done', 'Include SpotlightDismissControl with onClick={dismiss} so users can exit the tour at any point', 'Bound navigation functions with Math.max/Math.min to prevent invalid step values', 'Preference duplicating Spotlight code instead of trying to have a single `@atlaskit/spotlight` instance that conditionally renders content based on step.'],
-  additionalResources: additionalResources
-};
-var onboardingWithMotion = exports.onboardingWithMotion = {
-  id: 'motion',
-  title: 'Single Step Spotlight with Motion Migration',
-  description: 'Migrate a single step spotlight with entrance animation from @atlaskit/onboarding to @atlaskit/spotlight using @atlaskit/motion',
-  fromPackage: '@atlaskit/onboarding',
-  toPackage: '@atlaskit/spotlight',
-  examples: [{
-    title: 'Migrate spotlight with transition animation',
-    description: 'Replace SpotlightTransition with FadeIn from @atlaskit/motion wrapped around the SpotlightCard',
-    before: "import React, { useState } from 'react';\nimport Button from '@atlaskit/button/new';\nimport {\n  Spotlight,\n  SpotlightManager,\n  SpotlightTarget,\n  SpotlightTransition,\n} from '@atlaskit/onboarding';\n\nconst OnboardingSpotlightWithTransition = () => {\n  const [isSpotlightActive, setIsSpotlightActive] = useState(false);\n  const start = () => setIsSpotlightActive(true);\n  const end = () => setIsSpotlightActive(false);\n\n  return (\n    <SpotlightManager>\n      <SpotlightTarget name=\"my-target\">\n        <Button>Target Element</Button>\n      </SpotlightTarget>\n      <div>\n        <Button appearance=\"primary\" onClick={start}>\n          Show spotlight\n        </Button>\n      </div>\n      <SpotlightTransition>\n        {isSpotlightActive && (\n          <Spotlight\n            actions={[\n              {\n                onClick: end,\n                text: 'Got it',\n              },\n            ]}\n            heading=\"Feature Heading\"\n            target=\"my-target\"\n            key=\"my-target\"\n          >\n            This is the spotlight body content describing the feature.\n          </Spotlight>\n        )}\n      </SpotlightTransition>\n    </SpotlightManager>\n  );\n};",
-    after: "import React, { useState } from 'react';\nimport Button from '@atlaskit/button/new';\nimport { FadeIn } from '@atlaskit/motion';\nimport { Text } from '@atlaskit/primitives/compiled';\nimport {\n  PopoverContent,\n  PopoverProvider,\n  PopoverTarget,\n  SpotlightActions,\n  SpotlightBody,\n  SpotlightCard,\n  SpotlightControls,\n  SpotlightDismissControl,\n  SpotlightFooter,\n  SpotlightHeader,\n  SpotlightHeadline,\n  SpotlightPrimaryAction,\n} from '@atlaskit/spotlight';\n\nconst SpotlightWithMotion = () => {\n  const [isVisible, setIsVisible] = useState(false);\n  const dismiss = () => setIsVisible(false);\n  const done = () => setIsVisible(false);\n\n  return (\n    <PopoverProvider>\n      <PopoverTarget>\n        <Button onClick={() => setIsVisible(true)}>Target Element</Button>\n      </PopoverTarget>\n      <PopoverContent done={done} dismiss={dismiss} placement=\"bottom-start\" isVisible={isVisible}>\n        <FadeIn entranceDirection=\"left\">\n          {(props) => (\n            <div {...props}>\n              <SpotlightCard>\n                <SpotlightHeader>\n                  <SpotlightHeadline>Feature Heading</SpotlightHeadline>\n                  <SpotlightControls>\n                    <SpotlightDismissControl />\n                  </SpotlightControls>\n                </SpotlightHeader>\n                <SpotlightBody>\n                  <Text>This is the spotlight body content describing the feature.</Text>\n                </SpotlightBody>\n                <SpotlightFooter>\n                  <SpotlightActions>\n                    <SpotlightPrimaryAction onClick={done}>Got it</SpotlightPrimaryAction>\n                  </SpotlightActions>\n                </SpotlightFooter>\n              </SpotlightCard>\n            </div>\n          )}\n        </FadeIn>\n      </PopoverContent>\n    </PopoverProvider>\n  );\n};",
-    explanation: "Key changes when migrating a spotlight with transition animation:\n- Replace SpotlightTransition with FadeIn from @atlaskit/motion\n- Import FadeIn from '@atlaskit/motion' instead of SpotlightTransition from '@atlaskit/onboarding'\n- FadeIn uses a render props pattern - wrap content in {(props) => <div {...props}>...</div>}\n- The entranceDirection prop controls animation direction: 'left', 'right', 'top', or 'bottom'\n- All other migration changes from single step spotlight apply (PopoverProvider, compositional components, etc.)"
-  }],
-  bestPractices: ['Choose entranceDirection based on spotlight placement (e.g., "left" for right-placed spotlights)', 'Motion is optional - only add if the original onboarding spotlight used SpotlightTransition for entrance effects'],
-  additionalResources: additionalResources
-};