@carbon/upgrade 11.39.0-rc.0 → 11.40.0-rc.0

package/cli.js

@@ -4910,8 +4910,8 @@ var require_color_convert = /* @__PURE__ */ __commonJSMin(((exports, module) =>
 	module.exports = convert;
 }));
 //#endregion
-//#region ../../node_modules/ansi-styles/index.js
-var require_ansi_styles$1 = /* @__PURE__ */ __commonJSMin(((exports, module) => {
+//#region ../../node_modules/@inquirer/core/node_modules/ansi-styles/index.js
+var require_ansi_styles$3 = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	const wrapAnsi16 = (fn, offset) => (...args) => {
 		return `\u001B[${fn(...args) + offset}m`;
 	};
@@ -5049,7 +5049,7 @@ var require_ansi_styles$1 = /* @__PURE__ */ __commonJSMin(((exports, module) =>
 var require_wrap_ansi$1 = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	const stringWidth = require_string_width();
 	const stripAnsi = require_strip_ansi();
-	const ansiStyles = require_ansi_styles$1();
+	const ansiStyles = require_ansi_styles$3();
 	const ESCAPES = new Set(["\x1B", "›"]);
 	const END_CODE = 39;
 	const wrapAnsi = (code) => `${ESCAPES.values().next().value}[${code}m`;
@@ -40767,6 +40767,141 @@ var require_build$7 = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	})();
 }));
 //#endregion
+//#region ../../node_modules/jest-diff/node_modules/ansi-styles/index.js
+var require_ansi_styles$2 = /* @__PURE__ */ __commonJSMin(((exports, module) => {
+	const wrapAnsi16 = (fn, offset) => (...args) => {
+		return `\u001B[${fn(...args) + offset}m`;
+	};
+	const wrapAnsi256 = (fn, offset) => (...args) => {
+		const code = fn(...args);
+		return `\u001B[${38 + offset};5;${code}m`;
+	};
+	const wrapAnsi16m = (fn, offset) => (...args) => {
+		const rgb = fn(...args);
+		return `\u001B[${38 + offset};2;${rgb[0]};${rgb[1]};${rgb[2]}m`;
+	};
+	const ansi2ansi = (n) => n;
+	const rgb2rgb = (r, g, b) => [
+		r,
+		g,
+		b
+	];
+	const setLazyProperty = (object, property, get) => {
+		Object.defineProperty(object, property, {
+			get: () => {
+				const value = get();
+				Object.defineProperty(object, property, {
+					value,
+					enumerable: true,
+					configurable: true
+				});
+				return value;
+			},
+			enumerable: true,
+			configurable: true
+		});
+	};
+	/** @type {typeof import('color-convert')} */
+	let colorConvert;
+	const makeDynamicStyles = (wrap, targetSpace, identity, isBackground) => {
+		if (colorConvert === void 0) colorConvert = require_color_convert();
+		const offset = isBackground ? 10 : 0;
+		const styles = {};
+		for (const [sourceSpace, suite] of Object.entries(colorConvert)) {
+			const name = sourceSpace === "ansi16" ? "ansi" : sourceSpace;
+			if (sourceSpace === targetSpace) styles[name] = wrap(identity, offset);
+			else if (typeof suite === "object") styles[name] = wrap(suite[targetSpace], offset);
+		}
+		return styles;
+	};
+	function assembleStyles() {
+		const codes = /* @__PURE__ */ new Map();
+		const styles = {
+			modifier: {
+				reset: [0, 0],
+				bold: [1, 22],
+				dim: [2, 22],
+				italic: [3, 23],
+				underline: [4, 24],
+				inverse: [7, 27],
+				hidden: [8, 28],
+				strikethrough: [9, 29]
+			},
+			color: {
+				black: [30, 39],
+				red: [31, 39],
+				green: [32, 39],
+				yellow: [33, 39],
+				blue: [34, 39],
+				magenta: [35, 39],
+				cyan: [36, 39],
+				white: [37, 39],
+				blackBright: [90, 39],
+				redBright: [91, 39],
+				greenBright: [92, 39],
+				yellowBright: [93, 39],
+				blueBright: [94, 39],
+				magentaBright: [95, 39],
+				cyanBright: [96, 39],
+				whiteBright: [97, 39]
+			},
+			bgColor: {
+				bgBlack: [40, 49],
+				bgRed: [41, 49],
+				bgGreen: [42, 49],
+				bgYellow: [43, 49],
+				bgBlue: [44, 49],
+				bgMagenta: [45, 49],
+				bgCyan: [46, 49],
+				bgWhite: [47, 49],
+				bgBlackBright: [100, 49],
+				bgRedBright: [101, 49],
+				bgGreenBright: [102, 49],
+				bgYellowBright: [103, 49],
+				bgBlueBright: [104, 49],
+				bgMagentaBright: [105, 49],
+				bgCyanBright: [106, 49],
+				bgWhiteBright: [107, 49]
+			}
+		};
+		styles.color.gray = styles.color.blackBright;
+		styles.bgColor.bgGray = styles.bgColor.bgBlackBright;
+		styles.color.grey = styles.color.blackBright;
+		styles.bgColor.bgGrey = styles.bgColor.bgBlackBright;
+		for (const [groupName, group] of Object.entries(styles)) {
+			for (const [styleName, style] of Object.entries(group)) {
+				styles[styleName] = {
+					open: `\u001B[${style[0]}m`,
+					close: `\u001B[${style[1]}m`
+				};
+				group[styleName] = styles[styleName];
+				codes.set(style[0], style[1]);
+			}
+			Object.defineProperty(styles, groupName, {
+				value: group,
+				enumerable: false
+			});
+		}
+		Object.defineProperty(styles, "codes", {
+			value: codes,
+			enumerable: false
+		});
+		styles.color.close = "\x1B[39m";
+		styles.bgColor.close = "\x1B[49m";
+		setLazyProperty(styles.color, "ansi", () => makeDynamicStyles(wrapAnsi16, "ansi16", ansi2ansi, false));
+		setLazyProperty(styles.color, "ansi256", () => makeDynamicStyles(wrapAnsi256, "ansi256", ansi2ansi, false));
+		setLazyProperty(styles.color, "ansi16m", () => makeDynamicStyles(wrapAnsi16m, "rgb", rgb2rgb, false));
+		setLazyProperty(styles.bgColor, "ansi", () => makeDynamicStyles(wrapAnsi16, "ansi16", ansi2ansi, true));
+		setLazyProperty(styles.bgColor, "ansi256", () => makeDynamicStyles(wrapAnsi256, "ansi256", ansi2ansi, true));
+		setLazyProperty(styles.bgColor, "ansi16m", () => makeDynamicStyles(wrapAnsi16m, "rgb", rgb2rgb, true));
+		return styles;
+	}
+	Object.defineProperty(module, "exports", {
+		enumerable: true,
+		get: assembleStyles
+	});
+}));
+//#endregion
 //#region ../../node_modules/has-flag/index.js
 var require_has_flag = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	module.exports = (flag, argv = process.argv) => {
@@ -40971,7 +41106,7 @@ var require_templates = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 //#endregion
 //#region ../../node_modules/jest-diff/node_modules/chalk/source/index.js
 var require_source = /* @__PURE__ */ __commonJSMin(((exports, module) => {
-	const ansiStyles = require_ansi_styles$1();
+	const ansiStyles = require_ansi_styles$2();
 	const { stdout: stdoutColor, stderr: stderrColor } = require_supports_color();
 	const { stringReplaceAll, stringEncaseCRLFWithFirstIndex } = require_util();
 	const { isArray } = Array;
@@ -41354,7 +41489,7 @@ var require_react_is = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 }));
 //#endregion
 //#region ../../node_modules/jest-diff/node_modules/pretty-format/node_modules/ansi-styles/index.js
-var require_ansi_styles = /* @__PURE__ */ __commonJSMin(((exports, module) => {
+var require_ansi_styles$1 = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	const ANSI_BACKGROUND_OFFSET = 10;
 	const wrapAnsi256 = (offset = 0) => (code) => `\u001B[${38 + offset};5;${code}m`;
 	const wrapAnsi16m = (offset = 0) => (red, green, blue) => `\u001B[${38 + offset};2;${red};${green};${blue}m`;
@@ -41992,7 +42127,7 @@ var require_build$5 = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 			exports$20["default"] = exports$20.DEFAULT_OPTIONS = void 0;
 			exports$20.format = format;
 			exports$20.plugins = void 0;
-			var _ansiStyles = _interopRequireDefault(require_ansi_styles());
+			var _ansiStyles = _interopRequireDefault(require_ansi_styles$1());
 			var _collections = __webpack_require__("./src/collections.ts");
 			var _AsymmetricMatcher = _interopRequireDefault(__webpack_require__("./src/plugins/AsymmetricMatcher.ts"));
 			var _DOMCollection = _interopRequireDefault(__webpack_require__("./src/plugins/DOMCollection.ts"));
@@ -44455,6 +44590,34 @@ const upgrades = [
 					});
 				}
 			},
+			{
+				name: "ibm-products-update-coachmark",
+				description: "Rewrites old Coachmark to new composable Coachmark",
+				migrate: async (options) => {
+					const transform = path.default.join(TRANSFORM_DIR, "ibm-products-update-coachmark.js");
+					const paths = Array.isArray(options.paths) && options.paths.length > 0 ? options.paths : await (0, import_out.default)([
+						"**/*.js",
+						"**/*.jsx",
+						"**/*.ts",
+						"**/*.tsx"
+					], {
+						cwd: options.workspaceDir,
+						ignore: [
+							"**/es/**",
+							"**/lib/**",
+							"**/umd/**",
+							"**/node_modules/**",
+							"**/storybook-static/**"
+						]
+					});
+					await runCodemod(options, {
+						dry: !options.write,
+						transform,
+						paths,
+						verbose: options.verbose
+					});
+				}
+			},
 			{
 				name: "rename-ibm-products-imports-to-preview",
 				description: "Update imports after PDLC status integration",
@@ -44630,7 +44793,7 @@ const upgrades = [
 //#endregion
 //#region package.json
 var name = "@carbon/upgrade";
-var version = "11.39.0-rc.0";
+var version = "11.40.0-rc.0";
 //#endregion
 //#region ../../node_modules/y18n/build/index.cjs
 var require_build$3 = /* @__PURE__ */ __commonJSMin(((exports, module) => {
@@ -45547,11 +45710,146 @@ var require_build$2 = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	module.exports = yargsParser;
 }));
 //#endregion
-//#region ../../node_modules/cliui/node_modules/wrap-ansi/index.js
+//#region ../../node_modules/wrap-ansi/node_modules/ansi-styles/index.js
+var require_ansi_styles = /* @__PURE__ */ __commonJSMin(((exports, module) => {
+	const wrapAnsi16 = (fn, offset) => (...args) => {
+		return `\u001B[${fn(...args) + offset}m`;
+	};
+	const wrapAnsi256 = (fn, offset) => (...args) => {
+		const code = fn(...args);
+		return `\u001B[${38 + offset};5;${code}m`;
+	};
+	const wrapAnsi16m = (fn, offset) => (...args) => {
+		const rgb = fn(...args);
+		return `\u001B[${38 + offset};2;${rgb[0]};${rgb[1]};${rgb[2]}m`;
+	};
+	const ansi2ansi = (n) => n;
+	const rgb2rgb = (r, g, b) => [
+		r,
+		g,
+		b
+	];
+	const setLazyProperty = (object, property, get) => {
+		Object.defineProperty(object, property, {
+			get: () => {
+				const value = get();
+				Object.defineProperty(object, property, {
+					value,
+					enumerable: true,
+					configurable: true
+				});
+				return value;
+			},
+			enumerable: true,
+			configurable: true
+		});
+	};
+	/** @type {typeof import('color-convert')} */
+	let colorConvert;
+	const makeDynamicStyles = (wrap, targetSpace, identity, isBackground) => {
+		if (colorConvert === void 0) colorConvert = require_color_convert();
+		const offset = isBackground ? 10 : 0;
+		const styles = {};
+		for (const [sourceSpace, suite] of Object.entries(colorConvert)) {
+			const name = sourceSpace === "ansi16" ? "ansi" : sourceSpace;
+			if (sourceSpace === targetSpace) styles[name] = wrap(identity, offset);
+			else if (typeof suite === "object") styles[name] = wrap(suite[targetSpace], offset);
+		}
+		return styles;
+	};
+	function assembleStyles() {
+		const codes = /* @__PURE__ */ new Map();
+		const styles = {
+			modifier: {
+				reset: [0, 0],
+				bold: [1, 22],
+				dim: [2, 22],
+				italic: [3, 23],
+				underline: [4, 24],
+				inverse: [7, 27],
+				hidden: [8, 28],
+				strikethrough: [9, 29]
+			},
+			color: {
+				black: [30, 39],
+				red: [31, 39],
+				green: [32, 39],
+				yellow: [33, 39],
+				blue: [34, 39],
+				magenta: [35, 39],
+				cyan: [36, 39],
+				white: [37, 39],
+				blackBright: [90, 39],
+				redBright: [91, 39],
+				greenBright: [92, 39],
+				yellowBright: [93, 39],
+				blueBright: [94, 39],
+				magentaBright: [95, 39],
+				cyanBright: [96, 39],
+				whiteBright: [97, 39]
+			},
+			bgColor: {
+				bgBlack: [40, 49],
+				bgRed: [41, 49],
+				bgGreen: [42, 49],
+				bgYellow: [43, 49],
+				bgBlue: [44, 49],
+				bgMagenta: [45, 49],
+				bgCyan: [46, 49],
+				bgWhite: [47, 49],
+				bgBlackBright: [100, 49],
+				bgRedBright: [101, 49],
+				bgGreenBright: [102, 49],
+				bgYellowBright: [103, 49],
+				bgBlueBright: [104, 49],
+				bgMagentaBright: [105, 49],
+				bgCyanBright: [106, 49],
+				bgWhiteBright: [107, 49]
+			}
+		};
+		styles.color.gray = styles.color.blackBright;
+		styles.bgColor.bgGray = styles.bgColor.bgBlackBright;
+		styles.color.grey = styles.color.blackBright;
+		styles.bgColor.bgGrey = styles.bgColor.bgBlackBright;
+		for (const [groupName, group] of Object.entries(styles)) {
+			for (const [styleName, style] of Object.entries(group)) {
+				styles[styleName] = {
+					open: `\u001B[${style[0]}m`,
+					close: `\u001B[${style[1]}m`
+				};
+				group[styleName] = styles[styleName];
+				codes.set(style[0], style[1]);
+			}
+			Object.defineProperty(styles, groupName, {
+				value: group,
+				enumerable: false
+			});
+		}
+		Object.defineProperty(styles, "codes", {
+			value: codes,
+			enumerable: false
+		});
+		styles.color.close = "\x1B[39m";
+		styles.bgColor.close = "\x1B[49m";
+		setLazyProperty(styles.color, "ansi", () => makeDynamicStyles(wrapAnsi16, "ansi16", ansi2ansi, false));
+		setLazyProperty(styles.color, "ansi256", () => makeDynamicStyles(wrapAnsi256, "ansi256", ansi2ansi, false));
+		setLazyProperty(styles.color, "ansi16m", () => makeDynamicStyles(wrapAnsi16m, "rgb", rgb2rgb, false));
+		setLazyProperty(styles.bgColor, "ansi", () => makeDynamicStyles(wrapAnsi16, "ansi16", ansi2ansi, true));
+		setLazyProperty(styles.bgColor, "ansi256", () => makeDynamicStyles(wrapAnsi256, "ansi256", ansi2ansi, true));
+		setLazyProperty(styles.bgColor, "ansi16m", () => makeDynamicStyles(wrapAnsi16m, "rgb", rgb2rgb, true));
+		return styles;
+	}
+	Object.defineProperty(module, "exports", {
+		enumerable: true,
+		get: assembleStyles
+	});
+}));
+//#endregion
+//#region ../../node_modules/wrap-ansi/index.js
 var require_wrap_ansi = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	const stringWidth = require_string_width();
 	const stripAnsi = require_strip_ansi();
-	const ansiStyles = require_ansi_styles$1();
+	const ansiStyles = require_ansi_styles();
 	const ESCAPES = new Set(["\x1B", "›"]);
 	const END_CODE = 39;
 	const ANSI_ESCAPE_BELL = "\x07";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/upgrade",
   "description": "A tool for upgrading Carbon versions",
-  "version": "11.39.0-rc.0",
+  "version": "11.40.0-rc.0",
   "license": "Apache-2.0",
   "bin": {
     "carbon-upgrade": "./bin/carbon-upgrade.js"
@@ -60,5 +60,5 @@
     "@ibm/telemetry-js": "^1.5.0",
     "jscodeshift": "^17.0.0"
   },
-  "gitHead": "3d219dfcc2a3da515016f7ce0e769d013c3a6c03"
+  "gitHead": "b23ca747c33b76557a54aa88b6df70bc76f55da9"
 }

package/transforms/__testfixtures__/ibm-products-update-coachmark.input.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import {
+  Coachmark,
+  CoachmarkBeacon,
+  CoachmarkButton,
+  CoachmarkOverlayElements,
+  CoachmarkOverlayElement,
+  BEACON_KIND,
+  COACHMARK_OVERLAY_KIND,
+} from '@carbon/ibm-products';
+import { Crossroads } from '@carbon/react/icons';
+
+// Example 1: Basic Coachmark with Beacon and dark theme
+export const Example1 = () => (
+  <Coachmark
+    align="bottom"
+    closeIconDescription="Close"
+    positionTune={{ x: 0, y: 0 }}
+    target={
+      <CoachmarkBeacon label="Show information" kind={BEACON_KIND.DEFAULT} />
+    }
+    theme="light">
+    <CoachmarkOverlayElements closeButtonLabel="Done">
+      <CoachmarkOverlayElement
+        title="Hello World"
+        description="this is a description test"
+      />
+    </CoachmarkOverlayElements>
+  </Coachmark>
+);
+
+// Example 2: Coachmark with Button target and light theme
+export const Example2 = () => (
+  <Coachmark
+    align="top"
+    closeIconDescription="Close"
+    positionTune={{ x: 10, y: 20 }}
+    target={
+      <CoachmarkButton
+        kind="tertiary"
+        size="md"
+        label="Show information"
+        renderIcon={Crossroads}>
+        Click Me
+      </CoachmarkButton>
+    }
+    theme="light">
+    <CoachmarkOverlayElements closeButtonLabel="Got it">
+      <CoachmarkOverlayElement
+        title="Welcome"
+        description="This is your dashboard"
+      />
+    </CoachmarkOverlayElements>
+  </Coachmark>
+);
+
+// Example 3: Floating Coachmark
+export const Example3 = () => (
+  <Coachmark
+    align="bottom-left"
+    closeIconDescription="Dismiss"
+    positionTune={{ x: 5, y: 5 }}
+    overlayKind={COACHMARK_OVERLAY_KIND.FLOATING}
+    target={<CoachmarkBeacon label="Learn more" kind={BEACON_KIND.DEFAULT} />}
+    theme="dark">
+    <CoachmarkOverlayElements closeButtonLabel="Close">
+      <CoachmarkOverlayElement
+        title="New Feature"
+        description="Check out this new feature"
+      />
+    </CoachmarkOverlayElements>
+  </Coachmark>
+);

package/transforms/__testfixtures__/ibm-products-update-coachmark.output.js

@@ -0,0 +1,66 @@
+import { Theme, Button } from "@carbon/react";
+import React, { useState } from 'react';
+import {
+  preview__Coachmark as Coachmark,
+  preview__CoachmarkBeacon as CoachmarkBeacon,
+} from '@carbon/ibm-products';
+import { Crossroads } from '@carbon/react/icons';
+
+// Example 1: Basic Coachmark with Beacon and dark theme
+export const Example1 = () => {
+  const [isOpen, setIsOpen] = useState(true);
+
+  const handleBeaconClick = () => {
+    setIsOpen(isOpen => !isOpen);
+  };
+
+  return (
+    <Theme theme="white"><Coachmark align="bottom" position={{ x: 0, y: 0 }} open={isOpen}><CoachmarkBeacon
+          label="Show information"
+          buttonProps={{
+            onClick: handleBeaconClick,
+            id: "CoachmarkBtn"
+          }} /><Coachmark.Content><Coachmark.Content.Header closeIconDescription="Close" /><Coachmark.Content.Body><h2>Hello World</h2><p>this is a description test</p><Button size="sm">Done</Button></Coachmark.Content.Body></Coachmark.Content></Coachmark></Theme>
+  );
+};
+
+// Example 2: Coachmark with Button target and light theme
+export const Example2 = () => {
+  const [isOpen, setIsOpen] = useState(true);
+
+  const handleButtonClick = () => {
+    setIsOpen(isOpen => !isOpen);
+  };
+
+  return (
+    <Theme theme="white"><Coachmark align="top" position={{ x: 10, y: 20 }} open={isOpen}><Button
+          id="CoachmarkTriggerRefBtn"
+          onClick={handleButtonClick}
+          kind="tertiary"
+          size="md"
+          renderIcon={Crossroads}>Click Me
+                </Button><Coachmark.Content><Coachmark.Content.Header closeIconDescription="Close" /><Coachmark.Content.Body><h2>Welcome</h2><p>This is your dashboard</p><Button size="sm">Got it</Button></Coachmark.Content.Body></Coachmark.Content></Coachmark></Theme>
+  );
+};
+
+// Example 3: Floating Coachmark
+export const Example3 = () => {
+  const [isOpen, setIsOpen] = useState(true);
+
+  const handleBeaconClick = () => {
+    setIsOpen(isOpen => !isOpen);
+  };
+
+  return (
+    <Theme theme="g90"><Coachmark
+        align="bottom-left"
+        position={{ x: 5, y: 5 }}
+        open={isOpen}
+        floating={true}><CoachmarkBeacon
+          label="Learn more"
+          buttonProps={{
+            onClick: handleBeaconClick,
+            id: "CoachmarkBtn"
+          }} /><Coachmark.Content><Coachmark.Content.Header closeIconDescription="Dismiss" /><Coachmark.Content.Body><h2>New Feature</h2><p>Check out this new feature</p><Button size="sm">Close</Button></Coachmark.Content.Body></Coachmark.Content></Coachmark></Theme>
+  );
+};

package/transforms/__tests__/ibm-products-update-coachmark-test.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { defineTest } = require('jscodeshift/dist/testUtils');
+
+defineTest(__dirname, 'ibm-products-update-coachmark');

package/transforms/ibm-products-update-coachmark.js

@@ -0,0 +1,504 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Rewrites old Coachmark to new composable Coachmark
+ *
+ * Transforms:
+ *
+ * <Coachmark align='bottom' closeIconDescription='Close' positionTune={{ x: 0, y: 0 }}
+ *   target={<CoachmarkBeacon label="Show information" kind={BEACON_KIND.DEFAULT} />} theme='dark'>
+ *   <CoachmarkOverlayElements closeButtonLabel="Done">
+ *     <CoachmarkOverlayElement title="Hello World" description="this is a description test" />
+ *   </CoachmarkOverlayElements>
+ * </Coachmark>
+ *
+ * Into:
+ *
+ * <Theme theme={g90}>
+ *   <Coachmark align='bottom' position={{ x: 0, y: 0 }}>
+ *     <CoachmarkBeacon label="Show information" buttonProps={{ onClick: handleBeaconClick, id: 'CoachmarkBtn', ref: beaconButtonRef }} />
+ *     <Coachmark.Content>
+ *       <Coachmark.Content.Header closeIconDescription="Close" />
+ *       <Coachmark.Content.Body>
+ *         <h2>Hello World</h2>
+ *         <p>this is a description test</p>
+ *         <Button size="sm">Done</Button>
+ *       </Coachmark.Content.Body>
+ *     </Coachmark.Content>
+ *   </Coachmark>
+ * </Theme>
+ */
+
+'use strict';
+
+const transform = (fileInfo, api) => {
+  const j = api.jscodeshift;
+  const root = j(fileInfo.source);
+  let shouldImportTheme = false;
+  let shouldImportButton = false;
+  let shouldImportUseState = false;
+
+  // Helper to add imports to existing or create new import declarations
+  const ensureImport = (source, identifierName) => {
+    const existingImport = root
+      .find(j.ImportDeclaration, { source: { value: source } })
+      .filter((path) =>
+        path.node.specifiers.some((s) => s.imported?.name === identifierName)
+      );
+
+    if (existingImport.size() === 0) {
+      const reactImport = root.find(j.ImportDeclaration, {
+        source: { value: source },
+      });
+      if (reactImport.size() > 0) {
+        reactImport.forEach((path) =>
+          path.node.specifiers.push(
+            j.importSpecifier(j.identifier(identifierName))
+          )
+        );
+      } else {
+        root
+          .find(j.Program)
+          .get('body', 0)
+          .insertBefore(
+            j.importDeclaration(
+              [j.importSpecifier(j.identifier(identifierName))],
+              j.literal(source)
+            )
+          );
+      }
+    }
+  };
+
+  const createJSXElement = (name, attributes, children) => {
+    const openingElement = j.jsxOpeningElement(
+      j.jsxIdentifier(name),
+      attributes,
+      children.length === 0
+    );
+    return children.length === 0
+      ? j.jsxElement(openingElement, null, [])
+      : j.jsxElement(
+          openingElement,
+          j.jsxClosingElement(j.jsxIdentifier(name)),
+          children
+        );
+  };
+
+  const createMemberJSXElement = (object, property, attributes, children) => {
+    const memberExpression = j.jsxMemberExpression(
+      j.jsxIdentifier(object),
+      j.jsxIdentifier(property)
+    );
+    const openingElement = j.jsxOpeningElement(
+      memberExpression,
+      attributes,
+      children.length === 0
+    );
+    return children.length === 0
+      ? j.jsxElement(openingElement, null, [])
+      : j.jsxElement(
+          openingElement,
+          j.jsxClosingElement(memberExpression),
+          children
+        );
+  };
+
+  const createNestedMemberJSXElement = (
+    obj1,
+    obj2,
+    property,
+    attributes,
+    children
+  ) => {
+    const outerMember = j.jsxMemberExpression(
+      j.jsxMemberExpression(j.jsxIdentifier(obj1), j.jsxIdentifier(obj2)),
+      j.jsxIdentifier(property)
+    );
+    const openingElement = j.jsxOpeningElement(
+      outerMember,
+      attributes,
+      children.length === 0
+    );
+    return children.length === 0
+      ? j.jsxElement(openingElement, null, [])
+      : j.jsxElement(
+          openingElement,
+          j.jsxClosingElement(outerMember),
+          children
+        );
+  };
+
+  // Transform target elements (CoachmarkBeacon or CoachmarkButton)
+  const processTargetElement = (targetValue) => {
+    if (
+      targetValue.type !== 'JSXExpressionContainer' ||
+      targetValue.expression.type !== 'JSXElement'
+    )
+      return null;
+
+    const expression = targetValue.expression;
+    const elementName = expression.openingElement.name.name;
+
+    // Transform CoachmarkBeacon with buttonProps
+    if (elementName === 'CoachmarkBeacon') {
+      shouldImportUseState = true;
+      const label = expression.openingElement.attributes.find(
+        (a) => a.name?.name === 'label'
+      )?.value;
+      const newAttributes = [
+        j.jsxAttribute(
+          j.jsxIdentifier('buttonProps'),
+          j.jsxExpressionContainer(
+            j.objectExpression([
+              j.property(
+                'init',
+                j.identifier('onClick'),
+                j.identifier('handleBeaconClick')
+              ),
+              j.property('init', j.identifier('id'), j.literal('CoachmarkBtn')),
+            ])
+          )
+        ),
+      ];
+      if (label)
+        newAttributes.unshift(j.jsxAttribute(j.jsxIdentifier('label'), label));
+      return createJSXElement('CoachmarkBeacon', newAttributes, []);
+    }
+
+    // Transform CoachmarkButton to regular Button
+    if (elementName === 'CoachmarkButton') {
+      shouldImportButton = true;
+      shouldImportUseState = true;
+      const attrs = expression.openingElement.attributes;
+      const buttonAttributes = [
+        j.jsxAttribute(
+          j.jsxIdentifier('id'),
+          j.literal('CoachmarkTriggerRefBtn')
+        ),
+        j.jsxAttribute(
+          j.jsxIdentifier('onClick'),
+          j.jsxExpressionContainer(j.identifier('handleButtonClick'))
+        ),
+      ];
+      ['kind', 'size', 'renderIcon'].forEach((name) => {
+        const attr = attrs.find((a) => a.name?.name === name);
+        if (attr)
+          buttonAttributes.push(
+            j.jsxAttribute(j.jsxIdentifier(name), attr.value)
+          );
+      });
+      return createJSXElement(
+        'Button',
+        buttonAttributes,
+        expression.children || []
+      );
+    }
+    return null;
+  };
+
+  // Transform Coachmark components
+  root
+    .find(j.JSXElement, { openingElement: { name: { name: 'Coachmark' } } })
+    .forEach((path) => {
+      const attributes = path.node.openingElement.attributes;
+      const newAttributes = [];
+      let themeValue = null,
+        closeIconDescription = null,
+        targetElement = null,
+        overlayKind = null;
+      let closeButtonLabel = null,
+        overlayElements = [];
+
+      // Process and transform attributes
+      attributes.forEach((attr) => {
+        if (attr.type !== 'JSXAttribute') {
+          newAttributes.push(attr);
+          return;
+        }
+        const attrName = attr.name.name;
+
+        if (attrName === 'theme') {
+          if (attr.value.type === 'Literal') {
+            themeValue =
+              attr.value.value === 'dark'
+                ? 'g90'
+                : attr.value.value === 'light'
+                  ? 'white'
+                  : null;
+          }
+          shouldImportTheme = true;
+        } else if (attrName === 'positionTune') {
+          attr.name.name = 'position';
+          newAttributes.push(attr);
+        } else if (attrName === 'closeIconDescription') {
+          closeIconDescription = attr.value;
+        } else if (attrName === 'target') {
+          targetElement = attr.value;
+        } else if (attrName === 'overlayKind') {
+          overlayKind = attr.value;
+        } else {
+          newAttributes.push(attr);
+        }
+      });
+
+      newAttributes.push(
+        j.jsxAttribute(
+          j.jsxIdentifier('open'),
+          j.jsxExpressionContainer(j.identifier('isOpen'))
+        )
+      );
+      if (overlayKind) {
+        newAttributes.push(
+          j.jsxAttribute(
+            j.jsxIdentifier('floating'),
+            j.jsxExpressionContainer(j.literal(true))
+          )
+        );
+      }
+
+      const newChildren = [];
+      if (targetElement) {
+        const targetChild = processTargetElement(targetElement);
+        if (targetChild) newChildren.push(targetChild);
+      }
+
+      if (path.node.children) {
+        path.node.children.forEach((child) => {
+          if (
+            child.type === 'JSXElement' &&
+            child.openingElement.name.name === 'CoachmarkOverlayElements'
+          ) {
+            child.openingElement.attributes.forEach((attr) => {
+              if (attr.name?.name === 'closeButtonLabel')
+                closeButtonLabel = attr.value;
+            });
+            child.children.forEach((overlayChild) => {
+              if (
+                overlayChild.type === 'JSXElement' &&
+                overlayChild.openingElement.name.name ===
+                  'CoachmarkOverlayElement'
+              ) {
+                overlayElements.push(overlayChild);
+              }
+            });
+          }
+        });
+      }
+
+      // Build content body from overlay elements
+      const contentBodyChildren = [];
+      overlayElements.forEach((element) => {
+        const attrs = element.openingElement.attributes;
+        const title = attrs.find((a) => a.name?.name === 'title')?.value;
+        const description = attrs.find(
+          (a) => a.name?.name === 'description'
+        )?.value;
+
+        if (title) {
+          const titleValue = title.type === 'Literal' ? title.value : title;
+          contentBodyChildren.push(
+            j.jsxElement(
+              j.jsxOpeningElement(j.jsxIdentifier('h2'), []),
+              j.jsxClosingElement(j.jsxIdentifier('h2')),
+              [j.jsxText(typeof titleValue === 'string' ? titleValue : '')]
+            )
+          );
+        }
+        if (description) {
+          const descValue =
+            description.type === 'Literal' ? description.value : description;
+          contentBodyChildren.push(
+            j.jsxElement(
+              j.jsxOpeningElement(j.jsxIdentifier('p'), []),
+              j.jsxClosingElement(j.jsxIdentifier('p')),
+              [j.jsxText(typeof descValue === 'string' ? descValue : '')]
+            )
+          );
+        }
+      });
+
+      if (closeButtonLabel) {
+        shouldImportButton = true;
+        const buttonLabel =
+          closeButtonLabel.type === 'Literal' ? closeButtonLabel.value : 'Done';
+        contentBodyChildren.push(
+          j.jsxElement(
+            j.jsxOpeningElement(j.jsxIdentifier('Button'), [
+              j.jsxAttribute(j.jsxIdentifier('size'), j.literal('sm')),
+            ]),
+            j.jsxClosingElement(j.jsxIdentifier('Button')),
+            [j.jsxText(buttonLabel)]
+          )
+        );
+      }
+
+      const contentBody = createNestedMemberJSXElement(
+        'Coachmark',
+        'Content',
+        'Body',
+        [],
+        contentBodyChildren
+      );
+      const headerAttributes = closeIconDescription
+        ? [
+            j.jsxAttribute(
+              j.jsxIdentifier('closeIconDescription'),
+              closeIconDescription
+            ),
+          ]
+        : [];
+      const contentHeader = createNestedMemberJSXElement(
+        'Coachmark',
+        'Content',
+        'Header',
+        headerAttributes,
+        []
+      );
+      const content = createMemberJSXElement(
+        'Coachmark',
+        'Content',
+        [],
+        [contentHeader, contentBody]
+      );
+
+      newChildren.push(content);
+      path.node.openingElement.attributes = newAttributes;
+      path.node.children = newChildren;
+
+      if (themeValue) {
+        const themeElement = j.jsxElement(
+          j.jsxOpeningElement(j.jsxIdentifier('Theme'), [
+            j.jsxAttribute(j.jsxIdentifier('theme'), j.literal(themeValue)),
+          ]),
+          j.jsxClosingElement(j.jsxIdentifier('Theme')),
+          [
+            j.jsxElement(
+              path.node.openingElement,
+              path.node.closingElement,
+              path.node.children
+            ),
+          ]
+        );
+        j(path).replaceWith(themeElement);
+      }
+    });
+
+  // Update @carbon/ibm-products imports to preview versions
+  root
+    .find(j.ImportDeclaration)
+    .filter((path) => path.node.source.value === '@carbon/ibm-products')
+    .forEach((path) => {
+      const removedImports = [
+        'CoachmarkOverlayElements',
+        'CoachmarkOverlayElement',
+        'CoachmarkButton',
+        'BEACON_KIND',
+        'COACHMARK_OVERLAY_KIND',
+      ];
+      const newSpecifiers = [];
+
+      path.node.specifiers.forEach((specifier) => {
+        if (!specifier.imported) {
+          newSpecifiers.push(specifier);
+          return;
+        }
+
+        const importedName = specifier.imported.name;
+        if (removedImports.includes(importedName)) return;
+
+        if (importedName === 'Coachmark') {
+          newSpecifiers.push(
+            j.importSpecifier(
+              j.identifier('preview__Coachmark'),
+              j.identifier('Coachmark')
+            )
+          );
+        } else if (importedName === 'CoachmarkBeacon') {
+          newSpecifiers.push(
+            j.importSpecifier(
+              j.identifier('preview__CoachmarkBeacon'),
+              j.identifier('CoachmarkBeacon')
+            )
+          );
+        } else {
+          newSpecifiers.push(specifier);
+        }
+      });
+
+      path.node.specifiers = newSpecifiers;
+    });
+
+  // Add required imports
+  if (shouldImportTheme) ensureImport('@carbon/react', 'Theme');
+  if (shouldImportButton) ensureImport('@carbon/react', 'Button');
+  if (shouldImportUseState) ensureImport('react', 'useState');
+
+  // Inject state management into component functions
+  root.find(j.VariableDeclarator).forEach((path) => {
+    const init = path.node.init;
+    if (
+      !init ||
+      init.type !== 'ArrowFunctionExpression' ||
+      init.body.type !== 'JSXElement'
+    )
+      return;
+
+    const jsx = init.body;
+    const containsTheme = jsx.openingElement?.name?.name === 'Theme';
+    const containsCoachmark = jsx.openingElement?.name?.name === 'Coachmark';
+    if (!containsTheme && !containsCoachmark) return;
+
+    const jsxSource = j(jsx).toSource();
+    const usesBeaconHandler = jsxSource.includes('handleBeaconClick');
+    const usesButtonHandler = jsxSource.includes('handleButtonClick');
+    if (!usesBeaconHandler && !usesButtonHandler) return;
+
+    shouldImportUseState = true;
+    const bodyStatements = [
+      j.variableDeclaration('const', [
+        j.variableDeclarator(
+          j.arrayPattern([j.identifier('isOpen'), j.identifier('setIsOpen')]),
+          j.callExpression(j.identifier('useState'), [j.literal(true)])
+        ),
+      ]),
+    ];
+
+    const createHandler = (name) =>
+      j.variableDeclaration('const', [
+        j.variableDeclarator(
+          j.identifier(name),
+          j.arrowFunctionExpression(
+            [],
+            j.blockStatement([
+              j.expressionStatement(
+                j.callExpression(j.identifier('setIsOpen'), [
+                  j.arrowFunctionExpression(
+                    [j.identifier('isOpen')],
+                    j.unaryExpression('!', j.identifier('isOpen'))
+                  ),
+                ])
+              ),
+            ])
+          )
+        ),
+      ]);
+
+    if (usesBeaconHandler)
+      bodyStatements.push(createHandler('handleBeaconClick'));
+    if (usesButtonHandler)
+      bodyStatements.push(createHandler('handleButtonClick'));
+    bodyStatements.push(j.returnStatement(jsx));
+
+    init.body = j.blockStatement(bodyStatements);
+  });
+
+  return root.toSource();
+};
+
+module.exports = transform;