@commercetools/nimbus-mcp 3.2.0 → 3.3.0

package/dist/index.js

@@ -83,6 +83,7 @@ var getSearchIndex = lazyJson(
 var getDocsManifest = lazyJson("docs/docs.json");
 var getIconCatalog = lazyJson("icons.json");
 var getFlatTokenData = lazyJson("tokens.json");
+var getUiKitTokenMap = lazyJson("uikit-tokens.json");
 
 // src/utils/markdown.ts
 function stripMarkdown(text) {
@@ -102,7 +103,30 @@ function stripMarkdown(text) {
 }
 
 // src/utils/relevance.ts
-var WEIGHTS = { title: 8, description: 4, tags: 4, content: 1 };
+var WEIGHTS = {
+  title: 8,
+  description: 4,
+  tags: 4,
+  content: 1
+};
+function toLoweredRouteFields(r) {
+  const title = r.title.toLowerCase();
+  const description = r.description.toLowerCase();
+  const tags = [...r.tags, r.exportName ?? ""].join(" ").toLowerCase();
+  return {
+    title,
+    description,
+    tags,
+    content: "",
+    combined: title + " " + description + " " + tags,
+    titleNoSpaces: title.replace(/\s+/g, ""),
+    titleWords: title.split(/\s+/).filter(Boolean),
+    descriptionNoSpaces: description.replace(/\s+/g, ""),
+    descriptionWords: description.split(/\s+/).filter(Boolean),
+    tagsNoSpaces: tags.replace(/\s+/g, ""),
+    tagsWords: tags.split(/\s+/).filter(Boolean)
+  };
+}
 function filterAndRankPreLowered(items, tokens, getLowered) {
   if (items.length === 0 || tokens.length === 0) return items;
   const scored = [];
@@ -252,6 +276,11 @@ function fuzzyResolveName(needle, candidates, getNames) {
   return bestItem;
 }
 
+// src/utils/route.ts
+function routePathToSlug(path) {
+  return path.replace(/^\/+|\/+$/g, "").replace(/\//g, "-");
+}
+
 // src/tools/get-component.ts
 var SECTION_KEYS = [
   "overview",
@@ -359,9 +388,6 @@ async function resolveComponent(name) {
     return names;
   });
 }
-function pathToSlug(path) {
-  return path.replace(/^\//, "").replace(/\//g, "-");
-}
 function buildMetadataResponse(entry, availableSections) {
   const meta = {
     name: entry.title,
@@ -404,7 +430,7 @@ function registerGetComponent(server) {
             isError: true
           };
         }
-        const slug = pathToSlug(entry.path);
+        const slug = routePathToSlug(entry.path);
         const routeData = await getRouteData(slug);
         const viewSections = Object.keys(routeData.views ?? {}).map((key) => {
           const canonical = Object.entries(VIEW_KEY_MAP).find(
@@ -594,7 +620,7 @@ function registerGetTokens(server) {
     "get_tokens",
     {
       title: "Get Tokens",
-      description: 'Returns Nimbus design tokens. No params: lists all categories with counts. With category: returns tokens in that category (large categories are paginated by default). With value: reverse-lookup to find which tokens resolve to that value (e.g. "16px" \u2192 spacing.400).',
+      description: 'Returns Nimbus design tokens. No params: lists all categories with counts. With category: returns tokens in that category (large categories are paginated by default). With value: reverse-lookup to find which tokens resolve to that value (e.g. "16px" \u2192 spacing.400). With uikitToken: resolve a UI Kit token name (e.g. "customProperties.constraint7" or "designTokens.spacingXl") to its CSS value, find matching Nimbus tokens, and recommend the best category.',
       inputSchema: {
         category: z2.string().optional().describe(
           'Token category to retrieve, e.g. "spacing", "color", "fontSize". Use "colorPalettes" to list available palette names for the colorPalette prop. Case-insensitive.'
@@ -602,6 +628,9 @@ function registerGetTokens(server) {
         value: z2.string().optional().describe(
           'Reverse-lookup: find tokens whose resolved value matches this string, e.g. "16px" or "#0969DA". Case-insensitive.'
         ),
+        uikitToken: z2.string().optional().describe(
+          'UI Kit token name to resolve, e.g. "constraint7", "spacingXl", "customProperties.constraint7", or "designTokens.spacingXl". Resolves the token to its CSS value, finds matching Nimbus tokens, and recommends the best category. Tokens whose CSS value is a var(...) reference will return an empty tokens array but still provide recommendedCategory.'
+        ),
         offset: z2.number().int().min(0).default(0).describe(
           "Starting index for paginated results. Only applies when category is provided. Omit or pass 0 for the first page."
         ),
@@ -610,9 +639,34 @@ function registerGetTokens(server) {
         )
       }
     },
-    async ({ category, value, offset, limit }) => {
+    async ({ category, value, uikitToken, offset, limit }) => {
       try {
         const data = await getFlatTokenData();
+        if (uikitToken !== void 0) {
+          const tokenMap = await getUiKitTokenMap();
+          const stripped = uikitToken.replace(/^customProperties\./, "").replace(/^designTokens\./, "");
+          const entry = Object.hasOwn(tokenMap, stripped) ? tokenMap[stripped] : void 0;
+          if (!entry) {
+            return {
+              content: [
+                {
+                  type: "text",
+                  text: `UI Kit token "${stripped}" not found. Pass a camelCase token name like "constraint7", "spacingXl", or "colorPrimary".`
+                }
+              ]
+            };
+          }
+          const matches = reverseLookup(data, entry.cssValue);
+          const payload2 = {
+            uikitToken: stripped,
+            cssValue: entry.cssValue,
+            recommendedCategory: entry.recommendedCategory,
+            tokens: matches
+          };
+          return {
+            content: [{ type: "text", text: JSON.stringify(payload2) }]
+          };
+        }
         if (value !== void 0) {
           const matches = reverseLookup(data, value);
           if (matches.length === 0) {
@@ -727,18 +781,6 @@ function toSummary(route) {
   if (route.tags.length > 0) summary.tags = route.tags;
   return summary;
 }
-function toLowered(r) {
-  const title = r.title.toLowerCase();
-  const description = r.description.toLowerCase();
-  const tags = [...r.tags, r.exportName ?? ""].join(" ").toLowerCase();
-  return {
-    title,
-    description,
-    tags,
-    content: "",
-    combined: title + " " + description + " " + tags
-  };
-}
 function registerListComponents(server) {
   server.registerTool(
     "list_components",
@@ -768,7 +810,7 @@ function registerListComponents(server) {
           const tokens = query.toLowerCase().split(/\s+/).filter(Boolean);
           const loweredMap = /* @__PURE__ */ new Map();
           for (const r of routes) {
-            loweredMap.set(r, toLowered(r));
+            loweredMap.set(r, toLoweredRouteFields(r));
           }
           const exactMatches = filterAndRankPreLowered(
             routes,
@@ -821,7 +863,7 @@ function deriveToolHint(route) {
   if (route.startsWith("components/") || route.startsWith("patterns/"))
     return "get_component";
   if (route.startsWith("icons")) return "search_icons";
-  return void 0;
+  return "get_docs_page";
 }
 var SNIPPET_LENGTH = 200;
 var SNIPPET_LEAD = 80;
@@ -879,9 +921,6 @@ function extractSnippet(content, tokens) {
   if (end < content.length) snippet = snippet + "\u2026";
   return snippet;
 }
-function routeToSlug(route) {
-  return route.replace(/\//g, "-");
-}
 var viewContentCache = /* @__PURE__ */ new WeakMap();
 function getCachedViewContent(viewObj) {
   let cached = viewContentCache.get(viewObj);
@@ -946,7 +985,7 @@ function findCandidates(index, query, tokens, loweredMap) {
 }
 var routeViewsCache = /* @__PURE__ */ new Map();
 async function getRouteViews(route) {
-  const slug = routeToSlug(route);
+  const slug = routePathToSlug(route);
   const cached = routeViewsCache.get(slug);
   if (cached) return cached;
   let routeData;
@@ -990,7 +1029,7 @@ async function getRouteViews(route) {
   return result;
 }
 function searchRouteViewsSync(route, tokens) {
-  const slug = routeToSlug(route);
+  const slug = routePathToSlug(route);
   const cached = routeViewsCache.get(slug);
   if (!cached) return null;
   const { views } = cached;
@@ -1026,7 +1065,7 @@ function registerSearchDocs(server) {
     "search_docs",
     {
       title: "Search Docs",
-      description: "Search all Nimbus docs (components, patterns, hooks, icons, tokens) including guidelines and accessibility views. Returns matching pages with content snippets. Props are not searchable here \u2014 use get_component with section='props' for prop details. Results include a toolHint field indicating which tool to call for deeper info (e.g. get_component, get_tokens, search_icons).",
+      description: "Search all Nimbus docs (components, patterns, hooks, icons, tokens) including guidelines and accessibility views. Returns matching pages with content snippets. Props are not searchable here \u2014 use get_component with section='props' for prop details. Results include a toolHint field indicating which tool to call for deeper info (e.g. get_component, get_tokens, search_icons, get_docs_page).",
       inputSchema: {
         query: z4.string().describe(
           'Search query to find relevant documentation pages. e.g. "form validation", "color tokens", "accessibility", "onChange".'
@@ -1083,7 +1122,7 @@ function registerSearchDocs(server) {
             ...category ? { category } : {},
             ...viewMatch && viewMatch.viewKey !== "overview" ? { matchedView: viewMatch.viewKey } : {},
             snippet: viewMatch ? extractSnippet(viewMatch.content, tokens) : extractSnippet(stripMarkdown(entry.content), tokens),
-            ...toolHint ? { toolHint } : {}
+            toolHint
           };
         });
         return {
@@ -1220,11 +1259,134 @@ function registerSearchIcons(server) {
   );
 }
 
+// src/tools/get-docs-page.ts
+import { z as z6 } from "zod";
+var viewContentCache2 = /* @__PURE__ */ new WeakMap();
+function getCachedStripped(viewObj) {
+  let cached = viewContentCache2.get(viewObj);
+  if (!cached) {
+    cached = stripMarkdown(viewObj.mdx);
+    viewContentCache2.set(viewObj, cached);
+  }
+  return cached;
+}
+function registerGetDocsPage(server) {
+  server.registerTool(
+    "get_docs_page",
+    {
+      title: "Get Docs Page",
+      description: "Returns the full content of a Nimbus documentation page by its route path (as returned by search_docs). For tabbed pages, optionally specify a section to retrieve a single view. Use search_docs first to find the page path.",
+      inputSchema: {
+        path: z6.string().describe(
+          'Route path from search_docs results, e.g. "home/getting-started/installation".'
+        ),
+        section: z6.string().optional().describe(
+          'For tabbed pages, which view to return (e.g. "overview", "dev", "guidelines", "a11y"). Omit to get all views concatenated.'
+        )
+      }
+    },
+    async ({ path, section }) => {
+      try {
+        const slug = routePathToSlug(path);
+        let routeData;
+        try {
+          routeData = await getRouteData(slug);
+        } catch {
+          return {
+            content: [
+              {
+                type: "text",
+                text: `Page not found for path "${path}". Use search_docs to find valid page paths.`
+              }
+            ],
+            isError: true
+          };
+        }
+        const { meta } = routeData;
+        const availableSections = Object.keys(routeData.views ?? {});
+        const normalizedSection = section?.toLowerCase();
+        if (normalizedSection) {
+          const view = routeData.views?.[normalizedSection];
+          if (!view) {
+            return {
+              content: [
+                {
+                  type: "text",
+                  text: `Section "${section}" not found for "${meta.title}". Available sections: ${availableSections.join(", ") || "none (single-page content)"}`
+                }
+              ],
+              isError: true
+            };
+          }
+          const result2 = {
+            title: meta.title,
+            description: meta.description,
+            path: meta.route,
+            sections: availableSections,
+            content: getCachedStripped(view)
+          };
+          return {
+            content: [{ type: "text", text: JSON.stringify(result2) }]
+          };
+        }
+        let content;
+        if (availableSections.length > 0 && routeData.views) {
+          content = Object.entries(routeData.views).map(([key, view]) => `--- ${key} ---
+${getCachedStripped(view)}`).join("\n\n");
+        } else if (routeData.mdx) {
+          content = stripMarkdown(routeData.mdx);
+        } else {
+          content = meta.description;
+        }
+        const result = {
+          title: meta.title,
+          description: meta.description,
+          path: meta.route,
+          sections: availableSections,
+          content
+        };
+        return {
+          content: [{ type: "text", text: JSON.stringify(result) }]
+        };
+      } catch {
+        return {
+          content: [
+            {
+              type: "text",
+              text: "Docs data is not available in this environment."
+            }
+          ],
+          isError: true
+        };
+      }
+    }
+  );
+}
+
 // src/tools/migrate-from-uikit.ts
 import { readFile as readFile3 } from "fs/promises";
-import { z as z6 } from "zod";
+import { z as z7 } from "zod";
 
 // src/data/uikit-migration.ts
+var ICON_WRAPPER_BASE = {
+  component: "Icon",
+  importPath: "@commercetools/nimbus",
+  defaultProps: { size: "2xs", color: "neutral.11" }
+};
+var ICON_SIZE_MAPPING = [
+  { from: "small", to: "2xs" },
+  { from: "medium", to: "xs" },
+  { from: "big", to: "md" },
+  { from: "10", to: "2xs" },
+  { from: "20", to: "xs" },
+  { from: "30", to: "sm" },
+  { from: "40", to: "md" }
+];
+var ICON_WRAPPER = {
+  ...ICON_WRAPPER_BASE,
+  sizeMapping: ICON_SIZE_MAPPING
+};
+var LAYOUT_NESTING_GUIDANCE = "When you encounter nested layout components (e.g. Constraints wrapping Spacings wrapping Card), do NOT migrate each component independently. Instead, analyze the full nesting structure and migrate it as a single unit. Nimbus layout primitives (Stack, Box, Grid) can often collapse multiple nested UIKit wrappers into fewer elements. For example, a Constraints.Horizontal > Spacings.Stack > Spacings.Inset chain can become a single <Box maxWidth={...} gap={...} padding={...}>.";
 var MIGRATION_DATA = [
   // -------------------------------------------------------------------------
   // Buttons
@@ -1238,7 +1400,16 @@ var MIGRATION_DATA = [
     breakingChanges: [
       "Remove AccessibleButton wrapper, use <Button> directly",
       "label prop replaced by children"
-    ]
+    ],
+    propMappings: [
+      {
+        uiKitProp: "label",
+        nimbusProp: null,
+        changeType: "structural",
+        notes: "Use children instead."
+      }
+    ],
+    propMigrations: [{ from: "label", to: "children" }]
   },
   {
     uiKitName: "FlatButton",
@@ -1248,9 +1419,51 @@ var MIGRATION_DATA = [
     notes: `Use <Button variant="ghost"> for flat styling. UI Kit tone prop ('primary'|'secondary'|'inverted'|'critical') maps to Nimbus colorPalette/variant.`,
     breakingChanges: [
       "Replace FlatButton with <Button>",
+      "Default color changed: UI Kit FlatButton was blue (tone='primary') by default; Nimbus Button defaults to colorPalette='neutral' (gray). Add colorPalette='primary' to preserve the blue appearance.",
       "label prop replaced by children",
       "tone prop replaced by variant/colorPalette",
       "iconPosition prop removed; pass icon as a child of <Button>"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "_component",
+        nimbusProp: "variant",
+        changeType: "value-mapping",
+        fixedValue: "ghost"
+      },
+      {
+        uiKitProp: "label",
+        nimbusProp: null,
+        changeType: "structural",
+        notes: "Use children instead."
+      },
+      {
+        uiKitProp: "tone",
+        nimbusProp: "colorPalette",
+        changeType: "value-mapping",
+        valueMapping: [
+          { from: "primary", to: "primary" },
+          { from: "secondary", to: "neutral" },
+          { from: "critical", to: "critical" }
+        ],
+        notes: "'inverted' has no direct equivalent; use variant/colorPalette."
+      },
+      {
+        uiKitProp: "icon",
+        nimbusProp: null,
+        changeType: "structural",
+        notes: "Pass icon as a child."
+      },
+      {
+        uiKitProp: "iconPosition",
+        nimbusProp: null,
+        changeType: "removed",
+        notes: "Pass icon as a child."
+      }
+    ],
+    propMigrations: [
+      { from: "label", to: "children" },
+      { from: "icon", to: "children", position: "before" }
     ]
   },
   {
@@ -1265,6 +1478,37 @@ var MIGRATION_DATA = [
       "to prop replaced by href (or use asChild with router Link)",
       "isExternal prop replaced by target='_blank' rel='noopener noreferrer'",
       "iconLeft prop removed; pass icon as a child of <Button>"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "_component",
+        nimbusProp: "variant",
+        changeType: "value-mapping",
+        fixedValue: "link"
+      },
+      {
+        uiKitProp: "label",
+        nimbusProp: null,
+        changeType: "structural",
+        notes: "Use children instead."
+      },
+      { uiKitProp: "to", nimbusProp: "href", changeType: "rename" },
+      {
+        uiKitProp: "isExternal",
+        nimbusProp: null,
+        changeType: "removed",
+        notes: "Use target='_blank' rel='noopener noreferrer' instead."
+      },
+      {
+        uiKitProp: "iconLeft",
+        nimbusProp: null,
+        changeType: "removed",
+        notes: "Pass icon as a child."
+      }
+    ],
+    propMigrations: [
+      { from: "label", to: "children" },
+      { from: "iconLeft", to: "children", position: "before" }
     ]
   },
   {
@@ -1275,9 +1519,51 @@ var MIGRATION_DATA = [
     notes: 'Use <Button variant="solid">. Note: the default Button variant is "subtle", so variant="solid" must be set explicitly. UI Kit used a required label prop; Nimbus uses children for button text.',
     breakingChanges: [
       "Replace PrimaryButton with <Button variant='solid'>",
+      "Default color changed: UI Kit PrimaryButton was blue (tone='primary') by default; Nimbus Button defaults to colorPalette='neutral' (gray). Add colorPalette='primary' to preserve the blue appearance.",
       "label prop replaced by children",
       "iconLeft/iconRight props removed; pass icon as a child of <Button>",
       "tone prop ('urgent'|'primary'|'critical') replaced by colorPalette"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "_component",
+        nimbusProp: "variant",
+        changeType: "value-mapping",
+        fixedValue: "solid"
+      },
+      {
+        uiKitProp: "label",
+        nimbusProp: null,
+        changeType: "structural",
+        notes: "Use children instead."
+      },
+      {
+        uiKitProp: "tone",
+        nimbusProp: "colorPalette",
+        changeType: "value-mapping",
+        valueMapping: [
+          { from: "primary", to: "primary" },
+          { from: "urgent", to: "critical" },
+          { from: "critical", to: "critical" }
+        ]
+      },
+      {
+        uiKitProp: "iconLeft",
+        nimbusProp: null,
+        changeType: "removed",
+        notes: "Pass icon as a child."
+      },
+      {
+        uiKitProp: "iconRight",
+        nimbusProp: null,
+        changeType: "removed",
+        notes: "Pass icon as a child."
+      }
+    ],
+    propMigrations: [
+      { from: "label", to: "children" },
+      { from: "iconLeft", to: "children", position: "before" },
+      { from: "iconRight", to: "children", position: "after" }
     ]
   },
   {
@@ -1288,9 +1574,50 @@ var MIGRATION_DATA = [
     notes: 'Use <Button variant="outline"> for the secondary style. UI Kit used a required label prop; Nimbus uses children.',
     breakingChanges: [
       "Replace SecondaryButton with <Button variant='outline'>",
+      "Default color changed: UI Kit SecondaryButton was blue (theme='default') by default; Nimbus Button defaults to colorPalette='neutral' (gray). Add colorPalette='primary' to preserve the blue appearance.",
       "label prop replaced by children",
       "iconLeft/iconRight props removed; pass icon as a child of <Button>",
       "theme prop ('default'|'info') replaced by colorPalette"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "_component",
+        nimbusProp: "variant",
+        changeType: "value-mapping",
+        fixedValue: "outline"
+      },
+      {
+        uiKitProp: "label",
+        nimbusProp: null,
+        changeType: "structural",
+        notes: "Use children instead."
+      },
+      {
+        uiKitProp: "theme",
+        nimbusProp: "colorPalette",
+        changeType: "value-mapping",
+        valueMapping: [
+          { from: "default", to: "primary" },
+          { from: "info", to: "info" }
+        ]
+      },
+      {
+        uiKitProp: "iconLeft",
+        nimbusProp: null,
+        changeType: "removed",
+        notes: "Pass icon as a child."
+      },
+      {
+        uiKitProp: "iconRight",
+        nimbusProp: null,
+        changeType: "removed",
+        notes: "Pass icon as a child."
+      }
+    ],
+    propMigrations: [
+      { from: "label", to: "children" },
+      { from: "iconLeft", to: "children", position: "before" },
+      { from: "iconRight", to: "children", position: "after" }
     ]
   },
   {
@@ -1303,7 +1630,23 @@ var MIGRATION_DATA = [
       "label prop replaced by aria-label",
       "icon prop replaced by icon as children",
       "theme prop replaced by variant/colorPalette"
-    ]
+    ],
+    propMappings: [
+      { uiKitProp: "label", nimbusProp: "aria-label", changeType: "rename" },
+      {
+        uiKitProp: "icon",
+        nimbusProp: null,
+        changeType: "structural",
+        notes: "Pass icon as children."
+      },
+      {
+        uiKitProp: "theme",
+        nimbusProp: "variant",
+        changeType: "structural",
+        notes: "UIKit theme maps to both variant and colorPalette in Nimbus."
+      }
+    ],
+    propMigrations: [{ from: "icon", to: "children" }]
   },
   {
     uiKitName: "SecondaryIconButton",
@@ -1316,7 +1659,28 @@ var MIGRATION_DATA = [
       "color prop ('solid'|'primary'|'info') replaced by variant/colorPalette",
       "icon prop replaced by icon as children",
       "label prop replaced by aria-label"
-    ]
+    ],
+    propMappings: [
+      {
+        uiKitProp: "color",
+        nimbusProp: "variant",
+        changeType: "value-mapping",
+        valueMapping: [
+          { from: "solid", to: "solid" },
+          { from: "primary", to: "outline" },
+          { from: "info", to: "outline" }
+        ],
+        notes: "Defaults to variant='outline' when no color prop is specified. 'primary'/'info' also imply a colorPalette; set colorPalette separately."
+      },
+      {
+        uiKitProp: "icon",
+        nimbusProp: null,
+        changeType: "structural",
+        notes: "Pass icon as children."
+      },
+      { uiKitProp: "label", nimbusProp: "aria-label", changeType: "rename" }
+    ],
+    propMigrations: [{ from: "icon", to: "children" }]
   },
   {
     uiKitName: "PrimaryActionDropdown",
@@ -1326,6 +1690,7 @@ var MIGRATION_DATA = [
     notes: "SplitButton combines a primary action button with a dropdown menu. Compose using SplitButton + Menu.",
     breakingChanges: [
       "Rename to SplitButton",
+      "Default color changed: UI Kit PrimaryActionDropdown was blue by default; Nimbus SplitButton defaults to colorPalette='neutral' (gray). Add colorPalette='primary' to preserve the blue appearance.",
       "Menu items now use Nimbus Menu composition pattern"
     ]
   },
@@ -1344,6 +1709,27 @@ var MIGRATION_DATA = [
       "hasWarning prop removed",
       "isAutofocussed replaced by autoFocus",
       "isCondensed prop replaced by size='sm'"
+    ],
+    propMappings: [
+      { uiKitProp: "hasError", nimbusProp: "isInvalid", changeType: "rename" },
+      { uiKitProp: "hasWarning", nimbusProp: null, changeType: "removed" },
+      {
+        uiKitProp: "isAutofocussed",
+        nimbusProp: "autoFocus",
+        changeType: "rename"
+      },
+      {
+        uiKitProp: "isCondensed",
+        nimbusProp: "size",
+        changeType: "value-mapping",
+        valueMapping: [{ from: "true", to: "sm" }]
+      },
+      {
+        uiKitProp: "onChange",
+        nimbusProp: "onChange",
+        changeType: "structural",
+        notes: "Receives string value instead of ChangeEvent."
+      }
     ]
   },
   {
@@ -1360,6 +1746,28 @@ var MIGRATION_DATA = [
       "warnings prop removed",
       "touched prop removed",
       "onChange now receives a string value instead of ChangeEvent<HTMLInputElement>"
+    ],
+    propMappings: [
+      { uiKitProp: "title", nimbusProp: "label", changeType: "rename" },
+      {
+        uiKitProp: "hint",
+        nimbusProp: "description",
+        changeType: "rename"
+      },
+      {
+        uiKitProp: "errors",
+        nimbusProp: "errors",
+        changeType: "structural",
+        notes: "Now expects FieldErrorsData (from FieldErrors) instead of a Record<string, boolean>."
+      },
+      { uiKitProp: "warnings", nimbusProp: null, changeType: "removed" },
+      { uiKitProp: "touched", nimbusProp: null, changeType: "removed" },
+      {
+        uiKitProp: "onChange",
+        nimbusProp: "onChange",
+        changeType: "structural",
+        notes: "Receives string value instead of ChangeEvent."
+      }
     ]
   },
   {
@@ -1373,6 +1781,21 @@ var MIGRATION_DATA = [
       "hasError prop replaced by isInvalid",
       "hasWarning prop removed",
       "isAutofocussed replaced by autoFocus"
+    ],
+    propMappings: [
+      { uiKitProp: "hasError", nimbusProp: "isInvalid", changeType: "rename" },
+      { uiKitProp: "hasWarning", nimbusProp: null, changeType: "removed" },
+      {
+        uiKitProp: "isAutofocussed",
+        nimbusProp: "autoFocus",
+        changeType: "rename"
+      },
+      {
+        uiKitProp: "onChange",
+        nimbusProp: "onChange",
+        changeType: "structural",
+        notes: "Receives string value instead of ChangeEvent."
+      }
     ]
   },
   {
@@ -1388,6 +1811,27 @@ var MIGRATION_DATA = [
       "errors (Record) replaced by passing <FieldErrors> to the errorMessage prop",
       "warnings prop removed",
       "onChange now receives a string value instead of ChangeEvent<HTMLTextAreaElement>"
+    ],
+    propMappings: [
+      { uiKitProp: "title", nimbusProp: "label", changeType: "rename" },
+      {
+        uiKitProp: "hint",
+        nimbusProp: "description",
+        changeType: "rename"
+      },
+      {
+        uiKitProp: "errors",
+        nimbusProp: "errors",
+        changeType: "structural",
+        notes: "Now expects FieldErrorsData (from FieldErrors) instead of a Record<string, boolean>."
+      },
+      { uiKitProp: "warnings", nimbusProp: null, changeType: "removed" },
+      {
+        uiKitProp: "onChange",
+        nimbusProp: "onChange",
+        changeType: "structural",
+        notes: "Receives string value instead of ChangeEvent."
+      }
     ]
   },
   {
@@ -1400,6 +1844,20 @@ var MIGRATION_DATA = [
       "onChange now receives a string value instead of ChangeEvent<HTMLInputElement>",
       "hasError prop replaced by isInvalid",
       "isAutofocussed replaced by autoFocus"
+    ],
+    propMappings: [
+      { uiKitProp: "hasError", nimbusProp: "isInvalid", changeType: "rename" },
+      {
+        uiKitProp: "isAutofocussed",
+        nimbusProp: "autoFocus",
+        changeType: "rename"
+      },
+      {
+        uiKitProp: "onChange",
+        nimbusProp: "onChange",
+        changeType: "structural",
+        notes: "Receives string value instead of ChangeEvent."
+      }
     ]
   },
   {
@@ -1413,6 +1871,20 @@ var MIGRATION_DATA = [
       "title prop renamed to label",
       "hint prop renamed to description",
       "errors (Record) replaced by passing <FieldErrors> to the errorMessage prop"
+    ],
+    propMappings: [
+      { uiKitProp: "title", nimbusProp: "label", changeType: "rename" },
+      {
+        uiKitProp: "hint",
+        nimbusProp: "description",
+        changeType: "rename"
+      },
+      {
+        uiKitProp: "errors",
+        nimbusProp: "errors",
+        changeType: "structural",
+        notes: "Now expects FieldErrorsData (from FieldErrors) instead of a Record<string, boolean>."
+      }
     ]
   },
   {
@@ -1425,6 +1897,20 @@ var MIGRATION_DATA = [
       "Rename to ComboBox",
       "options array replaced by items prop with ComboBox.Item render function",
       "onChange received TCustomEvent; now receives selected key directly"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "loadOptions",
+        nimbusProp: null,
+        changeType: "structural",
+        notes: "Replace loadOptions callback with items prop + ComboBox.Item render function."
+      },
+      {
+        uiKitProp: "onChange",
+        nimbusProp: "onSelectionChange",
+        changeType: "structural",
+        notes: "Receives the selected key directly instead of a TCustomEvent."
+      }
     ]
   },
   {
@@ -1438,6 +1924,26 @@ var MIGRATION_DATA = [
       "title prop replaced by FormField label",
       "hint prop replaced by FormField description",
       "errors (Record) replaced by passing <FieldErrors> as a child of FormField.Error"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "title",
+        nimbusProp: null,
+        changeType: "structural",
+        notes: "Use the FormField label prop instead."
+      },
+      {
+        uiKitProp: "hint",
+        nimbusProp: null,
+        changeType: "structural",
+        notes: "Use the FormField description prop instead."
+      },
+      {
+        uiKitProp: "errors",
+        nimbusProp: null,
+        changeType: "structural",
+        notes: "Pass <FieldErrors> as a child of FormField.Error."
+      }
     ]
   },
   {
@@ -1449,6 +1955,40 @@ var MIGRATION_DATA = [
     breakingChanges: [
       "Rename to ScopedSearchInput",
       "scope options now use items prop with ScopedSearchInput.Item children"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "options",
+        nimbusProp: "options",
+        changeType: "structural",
+        notes: "Shape changed to ScopedSearchInputOption[] | ScopedSearchInputOptionGroup[]."
+      }
+    ]
+  },
+  {
+    uiKitName: "SearchTextInput",
+    nimbusEquivalent: "SearchInput",
+    importPath: "@commercetools/nimbus",
+    mappingType: "direct",
+    notes: "Direct replacement. Nimbus SearchInput provides built-in clear button and search icon.",
+    breakingChanges: [
+      "Rename to SearchInput",
+      "onChange receives a string value instead of ChangeEvent",
+      "onSubmit replaced by onClear for the clear action"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "onChange",
+        nimbusProp: "onChange",
+        changeType: "structural",
+        notes: "Receives string value instead of ChangeEvent."
+      },
+      {
+        uiKitProp: "onSubmit",
+        nimbusProp: "onClear",
+        changeType: "structural",
+        notes: "UIKit onSubmit (search action) has no direct equivalent. Use onClear for the clear button action."
+      }
     ]
   },
   // -------------------------------------------------------------------------
@@ -1466,6 +2006,40 @@ var MIGRATION_DATA = [
       "onChange received TCustomEvent (target.value); now receives selected key directly",
       "isMulti support changed; check Nimbus Select API for multi-select",
       "appearance prop ('default'|'quiet'|'filter') replaced by variant"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "appearance",
+        nimbusProp: "variant",
+        changeType: "value-mapping",
+        valueMapping: [
+          { from: "default", to: "outline" },
+          { from: "quiet", to: "ghost" }
+        ],
+        notes: "appearance='filter' has no direct equivalent."
+      },
+      {
+        uiKitProp: "options",
+        nimbusProp: null,
+        changeType: "structural",
+        notes: "Replace with Select.Option children inside Select.Options."
+      },
+      {
+        uiKitProp: "onChange",
+        nimbusProp: "onChange",
+        changeType: "structural",
+        notes: "Receives selected key instead of TCustomEvent."
+      }
+    ],
+    callbackAdapters: [
+      {
+        prop: "onChange",
+        from: "(event: TCustomEvent) => void \u2014 access event.target.value",
+        to: "(value: Key | null) => void \u2014 single selection only"
+      }
+    ],
+    typeNotes: [
+      "Key type is string | number from @react-types/shared; Nimbus Select is single-selection only \u2014 for multi-select use cases, migrate to ComboBox instead"
     ]
   },
   {
@@ -1479,6 +2053,26 @@ var MIGRATION_DATA = [
       "options array replaced by items prop with ComboBox.Item render function",
       "onCreateOption replaced by allowsCustomOptions + custom onInputChange logic",
       "onChange received TCustomEvent; now receives selected key directly"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "options",
+        nimbusProp: "items",
+        changeType: "structural",
+        notes: "Options array replaced by items collection with a ComboBox.Item render function."
+      },
+      {
+        uiKitProp: "onCreateOption",
+        nimbusProp: null,
+        changeType: "removed",
+        notes: "Use allowsCustomOptions plus custom onInputChange logic instead."
+      },
+      {
+        uiKitProp: "onChange",
+        nimbusProp: "onSelectionChange",
+        changeType: "structural",
+        notes: "Receives the selected key directly instead of a TCustomEvent."
+      }
     ]
   },
   {
@@ -1492,6 +2086,26 @@ var MIGRATION_DATA = [
       "loadOptions callback replaced by onInputChange + external async fetch + items state",
       "onCreateOption replaced by allowsCustomOptions + custom logic",
       "onChange received TCustomEvent; now receives selected key directly"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "loadOptions",
+        nimbusProp: null,
+        changeType: "removed",
+        notes: "Use onInputChange plus an external async fetch that updates the items state."
+      },
+      {
+        uiKitProp: "onCreateOption",
+        nimbusProp: null,
+        changeType: "removed",
+        notes: "Use allowsCustomOptions plus custom onInputChange logic instead."
+      },
+      {
+        uiKitProp: "onChange",
+        nimbusProp: "onSelectionChange",
+        changeType: "structural",
+        notes: "Receives the selected key directly instead of a TCustomEvent."
+      }
     ]
   },
   {
@@ -1504,6 +2118,20 @@ var MIGRATION_DATA = [
       "Rename to ComboBox",
       "loadOptions callback replaced by onInputChange + external async fetch + items state",
       "onChange received TCustomEvent; now receives selected key directly"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "loadOptions",
+        nimbusProp: null,
+        changeType: "removed",
+        notes: "Use onInputChange plus an external async fetch that updates the items state."
+      },
+      {
+        uiKitProp: "onChange",
+        nimbusProp: "onSelectionChange",
+        changeType: "structural",
+        notes: "Receives the selected key directly instead of a TCustomEvent."
+      }
     ]
   },
   // -------------------------------------------------------------------------
@@ -1520,6 +2148,36 @@ var MIGRATION_DATA = [
       "value was string|number; now must be a number",
       "hasError prop replaced by isInvalid",
       "isAutofocussed replaced by autoFocus"
+    ],
+    propMappings: [
+      { uiKitProp: "hasError", nimbusProp: "isInvalid", changeType: "rename" },
+      {
+        uiKitProp: "isAutofocussed",
+        nimbusProp: "autoFocus",
+        changeType: "rename"
+      },
+      {
+        uiKitProp: "onChange",
+        nimbusProp: "onChange",
+        changeType: "structural",
+        notes: "Receives a number instead of ChangeEvent."
+      },
+      {
+        uiKitProp: "value",
+        nimbusProp: "value",
+        changeType: "structural",
+        notes: "Was string|number; now must be a number."
+      }
+    ],
+    callbackAdapters: [
+      {
+        prop: "onChange",
+        from: "(event: ChangeEvent<HTMLInputElement>) => void \u2014 event.target.value is a string",
+        to: "(value: number) => void"
+      }
+    ],
+    typeNotes: [
+      "value was string | number, now must be number; empty string '' is no longer valid \u2014 use NaN or conditional rendering"
     ]
   },
   {
@@ -1532,7 +2190,21 @@ var MIGRATION_DATA = [
       "Rename to NumberInputField",
       "title prop renamed to label",
       "hint prop renamed to description",
-      "errors (Record) replaced by passing <FieldErrors> to the errorMessage prop"
+      "errors prop accepts FieldErrorsData; convert UIKit Record<string, boolean> via <FieldErrors>"
+    ],
+    propMappings: [
+      { uiKitProp: "title", nimbusProp: "label", changeType: "rename" },
+      {
+        uiKitProp: "hint",
+        nimbusProp: "description",
+        changeType: "rename"
+      },
+      {
+        uiKitProp: "errors",
+        nimbusProp: "errors",
+        changeType: "structural",
+        notes: "Convert UIKit Record<string, boolean> to FieldErrorsData and pass to the errors prop."
+      }
     ]
   },
   {
@@ -1545,6 +2217,26 @@ var MIGRATION_DATA = [
       "onChange received TCustomEvent; now receives { amount, currencyCode } directly",
       "currencies prop for available currency options unchanged",
       "hasError prop replaced by isInvalid"
+    ],
+    propMappings: [
+      { uiKitProp: "hasError", nimbusProp: "isInvalid", changeType: "rename" },
+      {
+        uiKitProp: "onChange",
+        nimbusProp: "onChange",
+        changeType: "structural",
+        notes: "Receives { amount, currencyCode } directly instead of a TCustomEvent."
+      }
+    ],
+    callbackAdapters: [
+      {
+        prop: "onChange",
+        from: "(event: TCustomEvent) => void \u2014 access event.target.value",
+        to: "(event: CustomEvent) => void \u2014 legacy; prefer onValueChange: (value: MoneyInputValue) => void"
+      }
+    ],
+    typeNotes: [
+      "Prefer onValueChange over onChange; also available: onAmountChange: (amount: string) => void and onCurrencyChange: (currencyCode: CurrencyCode) => void",
+      "MoneyInputValue = { amount: string, currencyCode: CurrencyCode | '' }"
     ]
   },
   {
@@ -1558,6 +2250,20 @@ var MIGRATION_DATA = [
       "title prop renamed to label",
       "hint prop renamed to description",
       "errors (Record) replaced by passing <FieldErrors> to the errorMessage prop"
+    ],
+    propMappings: [
+      { uiKitProp: "title", nimbusProp: "label", changeType: "rename" },
+      {
+        uiKitProp: "hint",
+        nimbusProp: "description",
+        changeType: "rename"
+      },
+      {
+        uiKitProp: "errors",
+        nimbusProp: "errors",
+        changeType: "structural",
+        notes: "Now expects FieldErrorsData (from FieldErrors) instead of a Record<string, boolean>."
+      }
     ]
   },
   // -------------------------------------------------------------------------
@@ -1574,6 +2280,31 @@ var MIGRATION_DATA = [
       "value changed from 'YYYY-MM-DD' string to CalendarDate from @internationalized/date",
       "onChange received TCustomEvent with string; now receives CalendarDate directly",
       "minValue/maxValue changed from strings to CalendarDate objects"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "value",
+        nimbusProp: "value",
+        changeType: "structural",
+        notes: "Changed from a 'YYYY-MM-DD' string to a CalendarDate from @internationalized/date."
+      },
+      {
+        uiKitProp: "onChange",
+        nimbusProp: "onChange",
+        changeType: "structural",
+        notes: "Receives a CalendarDate directly instead of a TCustomEvent with a string."
+      }
+    ],
+    callbackAdapters: [
+      {
+        prop: "onChange",
+        from: "(event: TCustomEvent) => void \u2014 event.target.value is a 'YYYY-MM-DD' string",
+        to: "(value: CalendarDate | null) => void"
+      }
+    ],
+    typeNotes: [
+      "import { CalendarDate } from '@internationalized/date' is required; value and onChange use CalendarDate, not strings",
+      "minValue/maxValue also changed from strings to CalendarDate objects"
     ]
   },
   {
@@ -1586,6 +2317,32 @@ var MIGRATION_DATA = [
       "Rename to DatePicker",
       "value must be a ZonedDateTime or CalendarDateTime",
       "Use granularity prop to enable time fields"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "_component",
+        nimbusProp: "granularity",
+        changeType: "value-mapping",
+        fixedValue: "minute",
+        notes: "Use 'second' instead if second-level precision is required."
+      },
+      {
+        uiKitProp: "value",
+        nimbusProp: "value",
+        changeType: "structural",
+        notes: "Must be a ZonedDateTime or CalendarDateTime from @internationalized/date."
+      }
+    ],
+    callbackAdapters: [
+      {
+        prop: "onChange",
+        from: "(event: TCustomEvent) => void \u2014 string-based date-time value",
+        to: "(value: CalendarDateTime | ZonedDateTime | null) => void"
+      }
+    ],
+    typeNotes: [
+      "import { CalendarDateTime, ZonedDateTime } from '@internationalized/date' is required; use CalendarDateTime for local times, ZonedDateTime for timezone-aware values",
+      "Set granularity='minute' or 'second' on DatePicker to enable time fields"
     ]
   },
   {
@@ -1597,6 +2354,31 @@ var MIGRATION_DATA = [
     breakingChanges: [
       "Rename to DateRangePicker",
       "value shape changed to { start, end } using CalendarDate"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "value",
+        nimbusProp: "value",
+        changeType: "structural",
+        notes: "Shape changed to { start, end } using CalendarDate."
+      },
+      {
+        uiKitProp: "onChange",
+        nimbusProp: "onChange",
+        changeType: "structural",
+        notes: "Receives the { start, end } CalendarDate range directly."
+      }
+    ],
+    callbackAdapters: [
+      {
+        prop: "onChange",
+        from: "(event: TCustomEvent) => void \u2014 string-based date range",
+        to: "(value: RangeValue<CalendarDate> | null) => void \u2014 where RangeValue<T> = { start: T, end: T }"
+      }
+    ],
+    typeNotes: [
+      "import { CalendarDate } from '@internationalized/date' and RangeValue from '@react-types/shared' are required",
+      "Value type is RangeValue<CalendarDate> = { start: CalendarDate, end: CalendarDate } | null"
     ]
   },
   {
@@ -1613,7 +2395,25 @@ var MIGRATION_DATA = [
     importPath: "@commercetools/nimbus",
     mappingType: "direct",
     notes: "Direct replacement. value must be a Time object from @internationalized/date.",
-    breakingChanges: ["value must be a Time from @internationalized/date"]
+    breakingChanges: ["value must be a Time from @internationalized/date"],
+    propMappings: [
+      {
+        uiKitProp: "value",
+        nimbusProp: "value",
+        changeType: "structural",
+        notes: "Must be a Time object from @internationalized/date."
+      }
+    ],
+    callbackAdapters: [
+      {
+        prop: "onChange",
+        from: "(event: ChangeEvent<HTMLInputElement>) => void \u2014 event.target.value is a time string",
+        to: "(value: Time | null) => void"
+      }
+    ],
+    typeNotes: [
+      "import { Time } from '@internationalized/date' is required; value and onChange use Time objects, not strings"
+    ]
   },
   // -------------------------------------------------------------------------
   // Form inputs — checkbox / radio / toggle
@@ -1628,6 +2428,26 @@ var MIGRATION_DATA = [
       "Rename to Checkbox",
       "isChecked prop renamed to isSelected",
       "onChange received ChangeEvent<HTMLInputElement>; now receives boolean isSelected directly"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "isChecked",
+        nimbusProp: "isSelected",
+        changeType: "rename"
+      },
+      {
+        uiKitProp: "onChange",
+        nimbusProp: "onChange",
+        changeType: "structural",
+        notes: "Receives boolean isSelected instead of ChangeEvent."
+      }
+    ],
+    callbackAdapters: [
+      {
+        prop: "onChange",
+        from: "(event: ChangeEvent<HTMLInputElement>) => void \u2014 access event.target.checked",
+        to: "(isSelected: boolean) => void"
+      }
     ]
   },
   {
@@ -1649,6 +2469,35 @@ var MIGRATION_DATA = [
       "isChecked prop renamed to isSelected",
       "onChange received ChangeEvent (target.checked); now receives boolean isSelected directly",
       "size prop ('small'|'big') replaced by Nimbus size tokens"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "isChecked",
+        nimbusProp: "isSelected",
+        changeType: "rename"
+      },
+      {
+        uiKitProp: "onChange",
+        nimbusProp: "onChange",
+        changeType: "structural",
+        notes: "Receives boolean isSelected instead of ChangeEvent."
+      },
+      {
+        uiKitProp: "size",
+        nimbusProp: "size",
+        changeType: "value-mapping",
+        valueMapping: [
+          { from: "small", to: "sm" },
+          { from: "big", to: "md" }
+        ]
+      }
+    ],
+    callbackAdapters: [
+      {
+        prop: "onChange",
+        from: "(event: ChangeEvent<HTMLInputElement>) => void \u2014 access event.target.checked",
+        to: "(isSelected: boolean) => void"
+      }
     ]
   },
   // -------------------------------------------------------------------------
@@ -1665,6 +2514,41 @@ var MIGRATION_DATA = [
       "selectedLanguage prop replaced by defaultLocaleOrCurrency",
       "value per locale replaced by valuesByLocaleOrCurrency object",
       "onChange receives a LocalizedFieldChangeEvent with target.locale"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "_component",
+        nimbusProp: "type",
+        changeType: "value-mapping",
+        fixedValue: "text"
+      },
+      {
+        uiKitProp: "selectedLanguage",
+        nimbusProp: "defaultLocaleOrCurrency",
+        changeType: "rename"
+      },
+      {
+        uiKitProp: "value",
+        nimbusProp: "valuesByLocaleOrCurrency",
+        changeType: "structural",
+        notes: "Per-locale value replaced by a single valuesByLocaleOrCurrency object."
+      },
+      {
+        uiKitProp: "onChange",
+        nimbusProp: "onChange",
+        changeType: "structural",
+        notes: "Receives a LocalizedFieldChangeEvent with target.locale."
+      }
+    ],
+    callbackAdapters: [
+      {
+        prop: "onChange",
+        from: "(event: ChangeEvent<HTMLLocalizedInputElement>) => void \u2014 event.target.language identifies the locale",
+        to: "(event: LocalizedFieldChangeEvent) => void \u2014 event.target.locale identifies which locale changed"
+      }
+    ],
+    typeNotes: [
+      "LocalizedFieldChangeEvent has target.locale (string), target.value (string | string[] | null), and optional target.id/name"
     ]
   },
   {
@@ -1679,6 +2563,20 @@ var MIGRATION_DATA = [
       "hint prop renamed to description",
       "errors (Record) replaced by errorsByLocaleOrCurrency",
       "onChange receives a LocalizedFieldChangeEvent with target.locale"
+    ],
+    propMappings: [
+      { uiKitProp: "title", nimbusProp: "label", changeType: "rename" },
+      {
+        uiKitProp: "hint",
+        nimbusProp: "description",
+        changeType: "rename"
+      },
+      {
+        uiKitProp: "errors",
+        nimbusProp: "errorsByLocaleOrCurrency",
+        changeType: "structural",
+        notes: "Record<string, boolean> replaced by errorsByLocaleOrCurrency."
+      }
     ]
   },
   {
@@ -1692,6 +2590,41 @@ var MIGRATION_DATA = [
       "selectedLanguage prop replaced by defaultLocaleOrCurrency",
       "value per locale replaced by valuesByLocaleOrCurrency object",
       "onChange receives a LocalizedFieldChangeEvent with target.locale"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "_component",
+        nimbusProp: "type",
+        changeType: "value-mapping",
+        fixedValue: "multiLine"
+      },
+      {
+        uiKitProp: "selectedLanguage",
+        nimbusProp: "defaultLocaleOrCurrency",
+        changeType: "rename"
+      },
+      {
+        uiKitProp: "value",
+        nimbusProp: "valuesByLocaleOrCurrency",
+        changeType: "structural",
+        notes: "Per-locale value replaced by a single valuesByLocaleOrCurrency object."
+      },
+      {
+        uiKitProp: "onChange",
+        nimbusProp: "onChange",
+        changeType: "structural",
+        notes: "Receives a LocalizedFieldChangeEvent with target.locale."
+      }
+    ],
+    callbackAdapters: [
+      {
+        prop: "onChange",
+        from: "(event: ChangeEvent<HTMLLocalizedInputElement>) => void \u2014 event.target.language identifies the locale",
+        to: "(event: LocalizedFieldChangeEvent) => void \u2014 event.target.locale identifies which locale changed"
+      }
+    ],
+    typeNotes: [
+      "LocalizedFieldChangeEvent has target.locale (string), target.value (string | string[] | null), and optional target.id/name"
     ]
   },
   {
@@ -1706,6 +2639,20 @@ var MIGRATION_DATA = [
       "hint prop renamed to description",
       "errors (Record) replaced by errorsByLocaleOrCurrency",
       "onChange receives a LocalizedFieldChangeEvent with target.locale"
+    ],
+    propMappings: [
+      { uiKitProp: "title", nimbusProp: "label", changeType: "rename" },
+      {
+        uiKitProp: "hint",
+        nimbusProp: "description",
+        changeType: "rename"
+      },
+      {
+        uiKitProp: "errors",
+        nimbusProp: "errorsByLocaleOrCurrency",
+        changeType: "structural",
+        notes: "Record<string, boolean> replaced by errorsByLocaleOrCurrency."
+      }
     ]
   },
   {
@@ -1719,6 +2666,42 @@ var MIGRATION_DATA = [
       "selectedLanguage prop replaced by defaultLocaleOrCurrency (currency code)",
       "value per currency replaced by valuesByLocaleOrCurrency object",
       "onChange receives a LocalizedFieldChangeEvent with target.currency"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "_component",
+        nimbusProp: "type",
+        changeType: "value-mapping",
+        fixedValue: "money"
+      },
+      {
+        uiKitProp: "selectedCurrency",
+        nimbusProp: "defaultLocaleOrCurrency",
+        changeType: "rename",
+        notes: "Represents the default currency code for LocalizedMoneyInput."
+      },
+      {
+        uiKitProp: "value",
+        nimbusProp: "valuesByLocaleOrCurrency",
+        changeType: "structural",
+        notes: "Per-currency value replaced by a single valuesByLocaleOrCurrency object."
+      },
+      {
+        uiKitProp: "onChange",
+        nimbusProp: "onChange",
+        changeType: "structural",
+        notes: "Receives a LocalizedFieldChangeEvent with target.currency."
+      }
+    ],
+    callbackAdapters: [
+      {
+        prop: "onChange",
+        from: "(event: ChangeEvent<HTMLLocalizedInputElement>) => void \u2014 event.target.language identifies the currency",
+        to: "(event: LocalizedFieldChangeEvent) => void \u2014 event.target.currency identifies which currency changed"
+      }
+    ],
+    typeNotes: [
+      "LocalizedFieldChangeEvent has target.currency (CurrencyCode), target.value (string | string[] | null), and optional target.id/name"
     ]
   },
   {
@@ -1732,6 +2715,41 @@ var MIGRATION_DATA = [
       "selectedLanguage prop replaced by defaultLocaleOrCurrency",
       "value per locale replaced by valuesByLocaleOrCurrency object",
       "onChange receives a LocalizedFieldChangeEvent with target.locale"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "_component",
+        nimbusProp: "type",
+        changeType: "value-mapping",
+        fixedValue: "richText"
+      },
+      {
+        uiKitProp: "selectedLanguage",
+        nimbusProp: "defaultLocaleOrCurrency",
+        changeType: "rename"
+      },
+      {
+        uiKitProp: "value",
+        nimbusProp: "valuesByLocaleOrCurrency",
+        changeType: "structural",
+        notes: "Per-locale value replaced by a single valuesByLocaleOrCurrency object."
+      },
+      {
+        uiKitProp: "onChange",
+        nimbusProp: "onChange",
+        changeType: "structural",
+        notes: "Receives a LocalizedFieldChangeEvent with target.locale."
+      }
+    ],
+    callbackAdapters: [
+      {
+        prop: "onChange",
+        from: "(event: ChangeEvent<HTMLLocalizedInputElement>) => void \u2014 event.target.language identifies the locale",
+        to: "(event: LocalizedFieldChangeEvent) => void \u2014 event.target.locale identifies which locale changed"
+      }
+    ],
+    typeNotes: [
+      "LocalizedFieldChangeEvent has target.locale (string), target.value (string | string[] | null), and optional target.id/name"
     ]
   },
   // -------------------------------------------------------------------------
@@ -1753,6 +2771,14 @@ var MIGRATION_DATA = [
     notes: "Compose FormField with a description prop, or use <Text size='sm' color='neutral.500'>.",
     breakingChanges: [
       "Replace AdditionalInfoMessage with FormField description prop or Text component"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "children",
+        nimbusProp: null,
+        changeType: "structural",
+        notes: "Use as the FormField description prop, or as Text children."
+      }
     ]
   },
   {
@@ -1763,6 +2789,14 @@ var MIGRATION_DATA = [
     notes: "Use <FieldErrors> passed to a *Field component's errorMessage prop, or as a child of FormField.Error.",
     breakingChanges: [
       "Replace ErrorMessage with <FieldErrors> inside a Field errorMessage prop or FormField.Error"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "children",
+        nimbusProp: null,
+        changeType: "structural",
+        notes: "Use <FieldErrors> as a child of FormField.Error, or pass to a Field's errorMessage/errors prop."
+      }
     ]
   },
   {
@@ -1773,6 +2807,14 @@ var MIGRATION_DATA = [
     notes: "Use <Text color='warning.500'> or a FormField description for warnings.",
     breakingChanges: [
       "Replace WarningMessage with Text + appropriate color token"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "children",
+        nimbusProp: null,
+        changeType: "removed",
+        notes: "Use <Text color='warning.500'> with the message as children instead."
+      }
     ]
   },
   // -------------------------------------------------------------------------
@@ -1804,14 +2846,44 @@ var MIGRATION_DATA = [
     nimbusEquivalent: "Badge",
     importPath: "@commercetools/nimbus",
     mappingType: "direct",
-    notes: "Rename to Badge. Both use a tone prop, but the tone values differ. UI Kit tones: 'critical'|'warning'|'positive'|'information'|'primary'|'secondary'. Nimbus tones: 'danger'|'warning'|'success'|'info'.",
+    notes: "Rename to Badge. UI Kit used a tone prop; Nimbus uses colorPalette instead. UI Kit tones: 'critical'|'warning'|'positive'|'information'|'primary'|'secondary'. Nimbus colorPalette values: 'critical'|'warning'|'positive'|'info'|'primary'|'neutral'.",
     breakingChanges: [
       "Rename to Badge",
-      "tone value 'critical' \u2192 'danger'",
-      "tone value 'positive' \u2192 'success'",
-      "tone value 'information' \u2192 'info'",
-      "tone values 'primary' and 'secondary' have no direct equivalent; use 'neutral' or default",
-      "isCondensed prop replaced by size='sm'"
+      "Default color changed: UI Kit Stamp was blue (tone='information') by default; Nimbus Badge defaults to colorPalette='neutral' (gray). Add colorPalette='info' to preserve the blue appearance.",
+      "tone prop replaced by colorPalette",
+      "tone value 'positive' stays 'positive' (use colorPalette='positive')",
+      "tone value 'critical' stays 'critical' (use colorPalette='critical')",
+      "tone value 'warning' stays 'warning' (use colorPalette='warning')",
+      "tone value 'information' \u2192 colorPalette='info'",
+      "tone values 'primary' and 'secondary' \u2192 colorPalette='primary' or 'neutral'",
+      "isCondensed prop replaced by size='xs'",
+      "label and icon props removed; pass label text and optionally an icon as children"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "tone",
+        nimbusProp: "colorPalette",
+        changeType: "value-mapping",
+        valueMapping: [
+          { from: "critical", to: "critical" },
+          { from: "warning", to: "warning" },
+          { from: "positive", to: "positive" },
+          { from: "information", to: "info" },
+          { from: "primary", to: "primary" },
+          { from: "secondary", to: "neutral" }
+        ]
+      },
+      {
+        uiKitProp: "isCondensed",
+        nimbusProp: "size",
+        changeType: "value-mapping",
+        valueMapping: [{ from: "true", to: "xs" }],
+        notes: "Default size is 'md'."
+      }
+    ],
+    propMigrations: [
+      { from: "label", to: "children" },
+      { from: "icon", to: "children", position: "before" }
     ]
   },
   {
@@ -1823,6 +2895,24 @@ var MIGRATION_DATA = [
     breakingChanges: [
       "Wrap single Tag in <TagGroup.Root><TagGroup.TagList><TagGroup.Tag>...</TagGroup.Tag></TagGroup.TagList></TagGroup.Root>",
       "onRemove now receives a key-based Set"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "children",
+        nimbusProp: null,
+        changeType: "structural",
+        notes: "Restructure into TagGroup.Root > TagGroup.TagList > TagGroup.Tag."
+      }
+    ],
+    callbackAdapters: [
+      {
+        prop: "onRemove",
+        from: "(event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void \u2014 DOM event from remove button",
+        to: "(keys: Set<Key>) => void \u2014 set of removed tag keys"
+      }
+    ],
+    typeNotes: [
+      "onRemove receives Set<Key> (where Key = string | number), not a single key; must iterate the set or use Set.has()"
     ]
   },
   {
@@ -1834,6 +2924,14 @@ var MIGRATION_DATA = [
     breakingChanges: [
       "Rename to TagGroup (use TagGroup.Root, TagGroup.TagList, TagGroup.Tag)",
       "items array replaced by TagGroup.Tag children inside TagGroup.TagList"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "children",
+        nimbusProp: null,
+        changeType: "structural",
+        notes: "Replace with TagGroup.Tag children inside TagGroup.TagList."
+      }
     ]
   },
   {
@@ -1857,11 +2955,63 @@ var MIGRATION_DATA = [
     nimbusEquivalent: "DataTable",
     importPath: "@commercetools/nimbus",
     mappingType: "direct",
-    notes: "Direct replacement. Column definitions use the new columns prop with accessor keys.",
+    notes: "Direct replacement. Column definitions require DataTableColumnItem<RowType>[] generic typing. Sort and selection callbacks have new signatures.",
     breakingChanges: [
-      "columns prop shape changed to use accessor and header fields",
-      "Row selection API updated to use onSelectionChange with a Set of keys"
-    ]
+      "columns prop shape changed: key\u2192id, label\u2192header, accessor required (returns cell content, can be string or JSX)",
+      "DataTableColumnItem<T> is generic \u2014 without <T> accessors return unknown and TS rejects them as ReactNode",
+      "onSortChange signature changed from (key, order) to (descriptor: { column, direction })",
+      "Selection type is 'all' | Set<Key> \u2014 missing the 'all' branch silently drops select-all clicks"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "columns",
+        nimbusProp: "columns",
+        changeType: "structural",
+        notes: "Shape changed: key\u2192id, label\u2192header. accessor is required and serves as both data getter and cell renderer: return a string for plain text or JSX for custom rendering. UI Kit's separate renderItem/render function should be merged into accessor. width must be a number (pixels), percentage string, or fr unit; CSS values like minmax() or max-content are not supported."
+      },
+      {
+        uiKitProp: "onRowClick",
+        nimbusProp: "onSelectionChange",
+        changeType: "structural",
+        notes: "Row interaction via onRowClick replaced by onSelectionChange with Selection = 'all' | Set<Key>."
+      },
+      {
+        uiKitProp: "onSortChange",
+        nimbusProp: "onSortChange",
+        changeType: "structural",
+        notes: "Signature changed from (key, order) to (descriptor: { column, direction: 'ascending' | 'descending' })."
+      }
+    ],
+    propShapeTransforms: [
+      {
+        prop: "columns",
+        rename: { key: "id", label: "header" },
+        addRequired: ["accessor"],
+        drop: [
+          "render/renderItem (merge into accessor instead)",
+          "width if CSS string (minmax, max-content, min-content); use numeric pixels, percentage, or fr"
+        ],
+        genericRequired: "DataTableColumnItem<RowType>[]"
+      }
+    ],
+    callbackAdapters: [
+      {
+        prop: "onSortChange",
+        from: "(key: string, order: 'asc' | 'desc')",
+        to: "(descriptor: { column: string, direction: 'ascending' | 'descending' })"
+      }
+    ],
+    typeNotes: [
+      "Selection = 'all' | Set<Key>; handle 'all' explicitly \u2014 missing the 'all' branch silently drops the select-all header click"
+    ],
+    codeReduction: {
+      type: "selection-model-collapse",
+      deletableFiles: [
+        "**/*-selection-column-cell.tsx",
+        "**/*-selection-column-label.tsx"
+      ],
+      rationale: "Nimbus DataTable provides built-in selection via selectionMode='multiple'."
+    }
   },
   {
     uiKitName: "DataTableManager",
@@ -1881,7 +3031,16 @@ var MIGRATION_DATA = [
     mappingType: "direct",
     notes: "Direct replacement. Use asChild for router library integration.",
     breakingChanges: [
+      "Default color changed: UI Kit Link was blue (tone='primary') by default; Nimbus Link defaults to neutral (dark text). Use fontColor='primary' to preserve blue link styling.",
       "isExternal prop renamed to target='_blank' + rel='noopener'"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "isExternal",
+        nimbusProp: null,
+        changeType: "removed",
+        notes: "Use target='_blank' rel='noopener' instead."
+      }
     ]
   },
   {
@@ -1893,7 +3052,22 @@ var MIGRATION_DATA = [
     breakingChanges: [
       "Rename to Menu (use Menu.Root, Menu.Trigger, Menu.Content, Menu.Item)",
       "options array replaced by Menu.Item children inside Menu.Content",
-      "onSelect replaced by onAction on Menu.Item or Menu"
+      "per-item onClick replaced by onAction on Menu.Item or Menu (receives key)"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "children",
+        nimbusProp: null,
+        changeType: "structural",
+        notes: "Compose Menu.Root > Menu.Trigger + Menu.Content > Menu.Item."
+      }
+    ],
+    callbackAdapters: [
+      {
+        prop: "onClick",
+        from: "per-item onClick: () => void \u2014 no arguments, set on each DropdownMenu.ListMenuItem",
+        to: "onAction: (key: Key) => void \u2014 receives the item's key; set on Menu or individual Menu.Item"
+      }
     ]
   },
   {
@@ -1902,7 +3076,41 @@ var MIGRATION_DATA = [
     importPath: "@commercetools/nimbus",
     mappingType: "direct",
     notes: "Direct replacement. page/totalPages prop names are unchanged.",
-    breakingChanges: ["onPageChange receives a page number directly"]
+    breakingChanges: ["onPageChange receives a page number directly"],
+    propMappings: [
+      {
+        uiKitProp: "onPageChange",
+        nimbusProp: "onPageChange",
+        changeType: "structural",
+        notes: "Receives the page number directly."
+      }
+    ]
+  },
+  {
+    uiKitName: "ViewSwitcher",
+    nimbusEquivalent: "ToggleButtonGroup",
+    importPath: "@commercetools/nimbus",
+    mappingType: "direct",
+    notes: "Replace ViewSwitcher.Group with ToggleButtonGroup and ViewSwitcher.Button with ToggleButton. Nimbus ToggleButtonGroup uses selectionMode='single' for exclusive view switching.",
+    breakingChanges: [
+      "Replace ViewSwitcher.Group with <ToggleButtonGroup selectionMode='single'>",
+      "Replace ViewSwitcher.Button with <ToggleButton>",
+      "isActive prop replaced by selection state managed via selectedKeys/onSelectionChange"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "isActive",
+        nimbusProp: "selectedKeys",
+        changeType: "structural",
+        notes: "ViewSwitcher.Button isActive is replaced by ToggleButtonGroup's selectedKeys/onSelectionChange controlled state."
+      },
+      {
+        uiKitProp: "onClick",
+        nimbusProp: "onSelectionChange",
+        changeType: "structural",
+        notes: "ViewSwitcher.Button onClick is replaced by ToggleButtonGroup's onSelectionChange callback."
+      }
+    ]
   },
   // -------------------------------------------------------------------------
   // Overlays
@@ -1915,6 +3123,14 @@ var MIGRATION_DATA = [
     notes: "Tooltip wraps a trigger element. Use Tooltip.Root (wraps the trigger child) and Tooltip.Content composition.",
     breakingChanges: [
       "Compositional API: replace single prop with Tooltip.Root + Tooltip.Content"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "children",
+        nimbusProp: null,
+        changeType: "structural",
+        notes: "Restructure into Tooltip.Root (wrapping the trigger) + Tooltip.Content."
+      }
     ]
   },
   // -------------------------------------------------------------------------
@@ -1925,10 +3141,23 @@ var MIGRATION_DATA = [
     nimbusEquivalent: "Alert",
     importPath: "@commercetools/nimbus",
     mappingType: "direct",
-    notes: "Rename to Alert. tone prop replaces type prop for semantic intent.",
+    notes: "Rename to Alert. colorPalette prop replaces type prop for semantic intent.",
     breakingChanges: [
       "Rename to Alert",
-      "type prop replaced by tone ('info', 'success', 'warning', 'danger')"
+      "type prop replaced by colorPalette ('info', 'positive', 'warning', 'critical')"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "type",
+        nimbusProp: "colorPalette",
+        changeType: "value-mapping",
+        valueMapping: [
+          { from: "info", to: "info" },
+          { from: "success", to: "positive" },
+          { from: "warning", to: "warning" },
+          { from: "danger", to: "critical" }
+        ]
+      }
     ]
   },
   // -------------------------------------------------------------------------
@@ -1951,7 +3180,8 @@ var MIGRATION_DATA = [
     breakingChanges: [
       "Remove Constraints.Horizontal",
       "Use maxWidth prop with design token values on Box or Container"
-    ]
+    ],
+    layoutGuidance: LAYOUT_NESTING_GUIDANCE
   },
   {
     uiKitName: "Spacings.Inline",
@@ -1962,7 +3192,8 @@ var MIGRATION_DATA = [
     breakingChanges: [
       "Replace Spacings.Inline with <Stack direction='row'>",
       "Spacing values use design token scale (e.g. gap='300')"
-    ]
+    ],
+    layoutGuidance: LAYOUT_NESTING_GUIDANCE
   },
   {
     uiKitName: "Spacings.Inset",
@@ -1973,7 +3204,8 @@ var MIGRATION_DATA = [
     breakingChanges: [
       "Replace Spacings.Inset with padding prop on Box",
       "Spacing values use design token scale"
-    ]
+    ],
+    layoutGuidance: LAYOUT_NESTING_GUIDANCE
   },
   {
     uiKitName: "Spacings.InsetSquish",
@@ -1983,7 +3215,8 @@ var MIGRATION_DATA = [
     notes: "Use <Box paddingX={...} paddingY={...}> with asymmetric nimbus spacing tokens.",
     breakingChanges: [
       "Replace Spacings.InsetSquish with paddingX/paddingY props on Box"
-    ]
+    ],
+    layoutGuidance: LAYOUT_NESTING_GUIDANCE
   },
   {
     uiKitName: "Spacings.Stack",
@@ -1994,7 +3227,8 @@ var MIGRATION_DATA = [
     breakingChanges: [
       "Replace Spacings.Stack with <Stack direction='column'>",
       "Spacing values use design token scale"
-    ]
+    ],
+    layoutGuidance: LAYOUT_NESTING_GUIDANCE
   },
   // -------------------------------------------------------------------------
   // Structure / containers
@@ -2004,9 +3238,17 @@ var MIGRATION_DATA = [
     nimbusEquivalent: "Card",
     importPath: "@commercetools/nimbus",
     mappingType: "direct",
-    notes: "Direct replacement. Composable with Card.Root, Card.Header, Card.Content.",
+    notes: "Direct replacement. Composable with Card.Root, Card.Header, Card.Body, Card.Footer.",
     breakingChanges: [
-      "Adopt compositional slot API (Card.Root, Card.Header, Card.Content)"
+      "Adopt compositional slot API (Card.Root, Card.Header, Card.Body, Card.Footer)"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "children",
+        nimbusProp: null,
+        changeType: "structural",
+        notes: "Restructure into Card.Root > Card.Header + Card.Body + Card.Footer slots."
+      }
     ]
   },
   {
@@ -2022,6 +3264,33 @@ var MIGRATION_DATA = [
       "header prop replaced by Accordion.Header child",
       "condensed prop removed",
       "tone prop ('urgent'|'primary') replaced by Nimbus design tokens"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "isClosed",
+        nimbusProp: null,
+        changeType: "structural",
+        notes: "Use Accordion.Root's expandedKeys/defaultExpandedKeys + onExpandedChange (React Aria controlled/uncontrolled pattern)."
+      },
+      {
+        uiKitProp: "header",
+        nimbusProp: null,
+        changeType: "structural",
+        notes: "Use an Accordion.Header child instead of a prop."
+      },
+      { uiKitProp: "condensed", nimbusProp: null, changeType: "removed" },
+      { uiKitProp: "tone", nimbusProp: null, changeType: "removed" }
+    ],
+    callbackAdapters: [
+      {
+        prop: "onToggle",
+        from: "() => void \u2014 simple toggle callback",
+        to: "onExpandedChange: (keys: Set<Key>) => void \u2014 receives the full set of expanded item keys"
+      }
+    ],
+    typeNotes: [
+      "Controlled state uses expandedKeys: Iterable<Key> + onExpandedChange: (keys: Set<Key>) => void; each Accordion.Item needs a value (string) prop as its key",
+      "Key type is string | number from @react-types/shared"
     ]
   },
   {
@@ -2033,6 +3302,14 @@ var MIGRATION_DATA = [
     breakingChanges: [
       "Adopt compositional API (CollapsibleMotion.Root, CollapsibleMotion.Trigger, CollapsibleMotion.Content)",
       "Render prop pattern replaced by compound component children"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "children",
+        nimbusProp: null,
+        changeType: "structural",
+        notes: "Render prop (isClosed/toggle) replaced by CollapsibleMotion.Root/Trigger/Content composition."
+      }
     ]
   },
   // -------------------------------------------------------------------------
@@ -2044,7 +3321,16 @@ var MIGRATION_DATA = [
     importPath: "@commercetools/nimbus",
     mappingType: "variant",
     notes: 'Use <Text size="md"> (default size).',
-    breakingChanges: ["Replace Text.Body with <Text> (default size is body)"]
+    breakingChanges: ["Replace Text.Body with <Text> (default size is body)"],
+    propMappings: [
+      {
+        uiKitProp: "_component",
+        nimbusProp: null,
+        changeType: "value-mapping",
+        fixedValue: "md",
+        notes: "size='md' is Text's default, so it can usually be omitted."
+      }
+    ]
   },
   {
     uiKitName: "Text.Caption",
@@ -2052,7 +3338,15 @@ var MIGRATION_DATA = [
     importPath: "@commercetools/nimbus",
     mappingType: "variant",
     notes: 'Use <Text size="xs"> for caption-sized text.',
-    breakingChanges: ["Replace Text.Caption with <Text size='xs'>"]
+    breakingChanges: ["Replace Text.Caption with <Text size='xs'>"],
+    propMappings: [
+      {
+        uiKitProp: "_component",
+        nimbusProp: null,
+        changeType: "value-mapping",
+        fixedValue: "xs"
+      }
+    ]
   },
   {
     uiKitName: "Text.Detail",
@@ -2060,7 +3354,15 @@ var MIGRATION_DATA = [
     importPath: "@commercetools/nimbus",
     mappingType: "variant",
     notes: 'Use <Text size="sm"> for detail/small text.',
-    breakingChanges: ["Replace Text.Detail with <Text size='sm'>"]
+    breakingChanges: ["Replace Text.Detail with <Text size='sm'>"],
+    propMappings: [
+      {
+        uiKitProp: "_component",
+        nimbusProp: null,
+        changeType: "value-mapping",
+        fixedValue: "sm"
+      }
+    ]
   },
   {
     uiKitName: "Text.Headline",
@@ -2070,6 +3372,15 @@ var MIGRATION_DATA = [
     notes: 'Use <Text size="2xl" fontWeight="bold"> or the Heading component.',
     breakingChanges: [
       "Replace Text.Headline with <Text size='2xl' fontWeight='bold'> or <Heading>"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "_component",
+        nimbusProp: null,
+        changeType: "value-mapping",
+        fixedValue: "2xl",
+        notes: "Also set fontWeight='bold', or use <Heading> instead."
+      }
     ]
   },
   {
@@ -2078,7 +3389,15 @@ var MIGRATION_DATA = [
     importPath: "@commercetools/nimbus",
     mappingType: "variant",
     notes: 'Use <Text size="xl">.',
-    breakingChanges: ["Replace Text.Subheadline with <Text size='xl'>"]
+    breakingChanges: ["Replace Text.Subheadline with <Text size='xl'>"],
+    propMappings: [
+      {
+        uiKitProp: "_component",
+        nimbusProp: null,
+        changeType: "value-mapping",
+        fixedValue: "xl"
+      }
+    ]
   },
   {
     uiKitName: "Text.Wrap",
@@ -2101,80 +3420,1783 @@ var MIGRATION_DATA = [
     ]
   },
   // -------------------------------------------------------------------------
-  // Icons
+  // Icons — specific UI Kit icon → Nimbus icon mappings
   // -------------------------------------------------------------------------
   {
-    uiKitName: "CustomIcon",
+    uiKitName: "AngleDownIcon",
     nimbusEquivalent: "Icon",
     importPath: "@commercetools/nimbus",
     mappingType: "variant",
-    notes: "Use <Icon> component wrapping an SVG, or use InlineSvg for custom SVGs.",
+    notes: 'Use <Icon as={KeyboardArrowDown} /> from @commercetools/nimbus-icons. Import: import { KeyboardArrowDown } from "@commercetools/nimbus-icons";',
     breakingChanges: [
-      "Replace CustomIcon with <Icon> or <InlineSvg>",
-      "SVG must be passed as a child or via as prop"
-    ]
+      "Replace AngleDownIcon with <Icon as={KeyboardArrowDown} />",
+      "Import KeyboardArrowDown from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
   },
   {
-    uiKitName: "LeadingIcon",
+    uiKitName: "AngleThinLeftIcon",
     nimbusEquivalent: "Icon",
     importPath: "@commercetools/nimbus",
     mappingType: "variant",
-    notes: "Pass icon as a child to the parent component (e.g. as a child of <Button>) rather than using a wrapper.",
+    notes: 'Use <Icon as={ChevronLeft} /> from @commercetools/nimbus-icons. Import: import { ChevronLeft } from "@commercetools/nimbus-icons";',
     breakingChanges: [
-      "Remove LeadingIcon wrapper",
-      "Pass icon directly to the parent component's icon slot"
-    ]
+      "Replace AngleThinLeftIcon with <Icon as={ChevronLeft} />",
+      "Import ChevronLeft from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
   },
   {
-    uiKitName: "InlineSvg",
-    nimbusEquivalent: "InlineSvg",
+    uiKitName: "AngleThinRightIcon",
+    nimbusEquivalent: "Icon",
     importPath: "@commercetools/nimbus",
-    mappingType: "direct",
-    notes: "Direct replacement for custom SVG icons not in the icon library.",
-    breakingChanges: []
+    mappingType: "variant",
+    notes: 'Use <Icon as={ChevronRight} /> from @commercetools/nimbus-icons. Import: import { ChevronRight } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace AngleThinRightIcon with <Icon as={ChevronRight} />",
+      "Import ChevronRight from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
   },
   {
-    uiKitName: "Icon Library",
-    nimbusEquivalent: "Material Icon Library",
-    importPath: "@commercetools/nimbus-icons",
-    mappingType: "pattern",
-    notes: "Import icons from @commercetools/nimbus-icons. Icons are named SvgIconName (e.g. SvgAccountCircle).",
+    uiKitName: "AngleUpDownIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={UnfoldMore} /> from @commercetools/nimbus-icons. Import: import { UnfoldMore } from "@commercetools/nimbus-icons";',
     breakingChanges: [
-      "Update import paths to @commercetools/nimbus-icons",
-      "Icon names follow Svg prefix convention"
-    ]
+      "Replace AngleUpDownIcon with <Icon as={UnfoldMore} />",
+      "Import UnfoldMore from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
   },
-  // -------------------------------------------------------------------------
-  // Accessibility utilities
-  // -------------------------------------------------------------------------
   {
-    uiKitName: "HiddenInput",
-    nimbusEquivalent: "VisuallyHidden",
+    uiKitName: "AngleUpIcon",
+    nimbusEquivalent: "Icon",
     importPath: "@commercetools/nimbus",
-    mappingType: "direct",
-    notes: "VisuallyHidden renders content that is visually hidden but accessible to screen readers.",
-    breakingChanges: ["Rename to VisuallyHidden"]
+    mappingType: "variant",
+    notes: 'Use <Icon as={ExpandLess} /> from @commercetools/nimbus-icons. Import: import { ExpandLess } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace AngleUpIcon with <Icon as={ExpandLess} />",
+      "Import ExpandLess from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
   },
   {
-    uiKitName: "AccessibleHidden",
-    nimbusEquivalent: "VisuallyHidden",
+    uiKitName: "ArrowDownIcon",
+    nimbusEquivalent: "Icon",
     importPath: "@commercetools/nimbus",
     mappingType: "variant",
-    notes: "Use VisuallyHidden for content that should be screen-reader accessible only.",
-    breakingChanges: ["Replace AccessibleHidden with VisuallyHidden"]
+    notes: 'Use <Icon as={ArrowDownward} /> from @commercetools/nimbus-icons. Import: import { ArrowDownward } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace ArrowDownIcon with <Icon as={ArrowDownward} />",
+      "Import ArrowDownward from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
   },
-  // -------------------------------------------------------------------------
-  // Provider
-  // -------------------------------------------------------------------------
   {
-    uiKitName: "ThemeProvider",
-    nimbusEquivalent: "NimbusProvider",
+    uiKitName: "ArrowLeftIcon",
+    nimbusEquivalent: "Icon",
     importPath: "@commercetools/nimbus",
-    mappingType: "direct",
-    notes: "Rename to NimbusProvider. Wrap your app root once; passes theme and i18n context.",
+    mappingType: "variant",
+    notes: 'Use <Icon as={ArrowLeft} /> from @commercetools/nimbus-icons. Import: import { ArrowLeft } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace ArrowLeftIcon with <Icon as={ArrowLeft} />",
+      "Import ArrowLeft from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "ArrowLongDownIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={South} /> from @commercetools/nimbus-icons. Import: import { South } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace ArrowLongDownIcon with <Icon as={South} />",
+      "Import South from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "ArrowRightIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={ArrowRight} /> from @commercetools/nimbus-icons. Import: import { ArrowRight } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace ArrowRightIcon with <Icon as={ArrowRight} />",
+      "Import ArrowRight from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "ArrowsIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={SwapVert} /> from @commercetools/nimbus-icons. Import: import { SwapVert } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace ArrowsIcon with <Icon as={SwapVert} />",
+      "Import SwapVert from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "ArrowsMinimizeIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={UnfoldLess} /> from @commercetools/nimbus-icons. Import: import { UnfoldLess } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace ArrowsMinimizeIcon with <Icon as={UnfoldLess} />",
+      "Import UnfoldLess from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "ArrowTriangleDownIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={ArrowDropDown} /> from @commercetools/nimbus-icons. Import: import { ArrowDropDown } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace ArrowTriangleDownIcon with <Icon as={ArrowDropDown} />",
+      "Import ArrowDropDown from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "ArrowTriangleUpIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={ArrowDropUp} /> from @commercetools/nimbus-icons. Import: import { ArrowDropUp } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace ArrowTriangleUpIcon with <Icon as={ArrowDropUp} />",
+      "Import ArrowDropUp from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "ArrowUpIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={ArrowUpward} /> from @commercetools/nimbus-icons. Import: import { ArrowUpward } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace ArrowUpIcon with <Icon as={ArrowUpward} />",
+      "Import ArrowUpward from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "BackIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={ArrowBack} /> from @commercetools/nimbus-icons. Import: import { ArrowBack } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace BackIcon with <Icon as={ArrowBack} />",
+      "Import ArrowBack from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "BagIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={ShoppingBag} /> from @commercetools/nimbus-icons. Import: import { ShoppingBag } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace BagIcon with <Icon as={ShoppingBag} />",
+      "Import ShoppingBag from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "BidirectionalArrowIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={SwapHoriz} /> from @commercetools/nimbus-icons. Import: import { SwapHoriz } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace BidirectionalArrowIcon with <Icon as={SwapHoriz} />",
+      "Import SwapHoriz from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "BinFilledIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Delete} /> from @commercetools/nimbus-icons. Import: import { Delete } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace BinFilledIcon with <Icon as={Delete} />",
+      "Import Delete from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "BoxIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Inventory} /> from @commercetools/nimbus-icons. Import: import { Inventory } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace BoxIcon with <Icon as={Inventory} />",
+      "Import Inventory from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "BrainIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Psychology} /> from @commercetools/nimbus-icons. Import: import { Psychology } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace BrainIcon with <Icon as={Psychology} />",
+      "Import Psychology from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "CalendarIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={CalendarToday} /> from @commercetools/nimbus-icons. Import: import { CalendarToday } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace CalendarIcon with <Icon as={CalendarToday} />",
+      "Import CalendarToday from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "CameraIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={CameraAlt} /> from @commercetools/nimbus-icons. Import: import { CameraAlt } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace CameraIcon with <Icon as={CameraAlt} />",
+      "Import CameraAlt from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "CaretDownIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={ArrowDropDown} /> from @commercetools/nimbus-icons. Import: import { ArrowDropDown } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace CaretDownIcon with <Icon as={ArrowDropDown} />",
+      "Import ArrowDropDown from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "CaretDownSmallIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={ArrowDropDown} /> from @commercetools/nimbus-icons. Import: import { ArrowDropDown } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace CaretDownSmallIcon with <Icon as={ArrowDropDown} />",
+      "Import ArrowDropDown from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "CaretUpIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={ArrowDropUp} /> from @commercetools/nimbus-icons. Import: import { ArrowDropUp } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace CaretUpIcon with <Icon as={ArrowDropUp} />",
+      "Import ArrowDropUp from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "CaretUpSmallIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={ArrowDropUp} /> from @commercetools/nimbus-icons. Import: import { ArrowDropUp } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace CaretUpSmallIcon with <Icon as={ArrowDropUp} />",
+      "Import ArrowDropUp from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "CartIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={ShoppingCart} /> from @commercetools/nimbus-icons. Import: import { ShoppingCart } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace CartIcon with <Icon as={ShoppingCart} />",
+      "Import ShoppingCart from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "ChainBrokenIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={LinkOff} /> from @commercetools/nimbus-icons. Import: import { LinkOff } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace ChainBrokenIcon with <Icon as={LinkOff} />",
+      "Import LinkOff from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "ChainIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Link} /> from @commercetools/nimbus-icons. Import: import { Link } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace ChainIcon with <Icon as={Link} />",
+      "Import Link from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "CheckActiveIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={CheckCircle} /> from @commercetools/nimbus-icons. Import: import { CheckCircle } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace CheckActiveIcon with <Icon as={CheckCircle} />",
+      "Import CheckCircle from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "CheckBoldIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Check} /> from @commercetools/nimbus-icons. Import: import { Check } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace CheckBoldIcon with <Icon as={Check} />",
+      "Import Check from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "CheckInactiveIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={RadioButtonUnchecked} /> from @commercetools/nimbus-icons. Import: import { RadioButtonUnchecked } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace CheckInactiveIcon with <Icon as={RadioButtonUnchecked} />",
+      "Import RadioButtonUnchecked from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "CheckThinIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Done} /> from @commercetools/nimbus-icons. Import: import { Done } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace CheckThinIcon with <Icon as={Done} />",
+      "Import Done from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "CircleIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={FiberManualRecord} /> from @commercetools/nimbus-icons. Import: import { FiberManualRecord } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace CircleIcon with <Icon as={FiberManualRecord} />",
+      "Import FiberManualRecord from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "ClipboardIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={ContentPaste} /> from @commercetools/nimbus-icons. Import: import { ContentPaste } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace ClipboardIcon with <Icon as={ContentPaste} />",
+      "Import ContentPaste from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "ClockIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Schedule} /> from @commercetools/nimbus-icons. Import: import { Schedule } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace ClockIcon with <Icon as={Schedule} />",
+      "Import Schedule from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "ClockWithArrowIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={History} /> from @commercetools/nimbus-icons. Import: import { History } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace ClockWithArrowIcon with <Icon as={History} />",
+      "Import History from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "CloseBoldIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Close} /> from @commercetools/nimbus-icons. Import: import { Close } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace CloseBoldIcon with <Icon as={Close} />",
+      "Import Close from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "CloseIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Close} /> from @commercetools/nimbus-icons. Import: import { Close } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace CloseIcon with <Icon as={Close} />",
+      "Import Close from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "CodeViewIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Code} /> from @commercetools/nimbus-icons. Import: import { Code } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace CodeViewIcon with <Icon as={Code} />",
+      "Import Code from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "CoinsIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={MonetizationOn} /> from @commercetools/nimbus-icons. Import: import { MonetizationOn } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace CoinsIcon with <Icon as={MonetizationOn} />",
+      "Import MonetizationOn from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "ColumnsIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={ViewColumn} /> from @commercetools/nimbus-icons. Import: import { ViewColumn } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace ColumnsIcon with <Icon as={ViewColumn} />",
+      "Import ViewColumn from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "ConnectedSquareIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={DeviceHub} /> from @commercetools/nimbus-icons. Import: import { DeviceHub } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace ConnectedSquareIcon with <Icon as={DeviceHub} />",
+      "Import DeviceHub from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "ConnectedTriangleIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Share} /> from @commercetools/nimbus-icons. Import: import { Share } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace ConnectedTriangleIcon with <Icon as={Share} />",
+      "Import Share from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "CopyIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={ContentCopy} /> from @commercetools/nimbus-icons. Import: import { ContentCopy } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace CopyIcon with <Icon as={ContentCopy} />",
+      "Import ContentCopy from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "CtCheckoutIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={ShoppingCartCheckout} /> from @commercetools/nimbus-icons. Import: import { ShoppingCartCheckout } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace CtCheckoutIcon with <Icon as={ShoppingCartCheckout} />",
+      "Import ShoppingCartCheckout from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "CubeIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={ViewInAr} /> from @commercetools/nimbus-icons. Import: import { ViewInAr } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace CubeIcon with <Icon as={ViewInAr} />",
+      "Import ViewInAr from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "CubesIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Widgets} /> from @commercetools/nimbus-icons. Import: import { Widgets } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace CubesIcon with <Icon as={Widgets} />",
+      "Import Widgets from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "DiamondIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Diamond} /> from @commercetools/nimbus-icons. Import: import { Diamond } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace DiamondIcon with <Icon as={Diamond} />",
+      "Import Diamond from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "DomainIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Domain} /> from @commercetools/nimbus-icons. Import: import { Domain } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace DomainIcon with <Icon as={Domain} />",
+      "Import Domain from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "DotIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={FiberManualRecord} /> from @commercetools/nimbus-icons. Import: import { FiberManualRecord } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace DotIcon with <Icon as={FiberManualRecord} />",
+      "Import FiberManualRecord from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "DownloadIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Download} /> from @commercetools/nimbus-icons. Import: import { Download } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace DownloadIcon with <Icon as={Download} />",
+      "Import Download from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "EditIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Edit} /> from @commercetools/nimbus-icons. Import: import { Edit } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace EditIcon with <Icon as={Edit} />",
+      "Import Edit from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "ErrorIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Error} /> from @commercetools/nimbus-icons. Import: import { Error } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace ErrorIcon with <Icon as={Error} />",
+      "Import Error from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "ExpandIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={OpenInFull} /> from @commercetools/nimbus-icons. Import: import { OpenInFull } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace ExpandIcon with <Icon as={OpenInFull} />",
+      "Import OpenInFull from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "ExternalLinkIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={OpenInNew} /> from @commercetools/nimbus-icons. Import: import { OpenInNew } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace ExternalLinkIcon with <Icon as={OpenInNew} />",
+      "Import OpenInNew from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "EyeCrossedIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={VisibilityOff} /> from @commercetools/nimbus-icons. Import: import { VisibilityOff } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace EyeCrossedIcon with <Icon as={VisibilityOff} />",
+      "Import VisibilityOff from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "EyeIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Visibility} /> from @commercetools/nimbus-icons. Import: import { Visibility } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace EyeIcon with <Icon as={Visibility} />",
+      "Import Visibility from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "FilterAndListIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={FilterList} /> from @commercetools/nimbus-icons. Import: import { FilterList } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace FilterAndListIcon with <Icon as={FilterList} />",
+      "Import FilterList from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "FilterIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={FilterAlt} /> from @commercetools/nimbus-icons. Import: import { FilterAlt } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace FilterIcon with <Icon as={FilterAlt} />",
+      "Import FilterAlt from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "FlagFilledIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Flag} /> from @commercetools/nimbus-icons. Import: import { Flag } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace FlagFilledIcon with <Icon as={Flag} />",
+      "Import Flag from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "FlagLinearIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={OutlinedFlag} /> from @commercetools/nimbus-icons. Import: import { OutlinedFlag } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace FlagLinearIcon with <Icon as={OutlinedFlag} />",
+      "Import OutlinedFlag from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "FlameIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Whatshot} /> from @commercetools/nimbus-icons. Import: import { Whatshot } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace FlameIcon with <Icon as={Whatshot} />",
+      "Import Whatshot from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "FractionDigitsIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Svg123} /> from @commercetools/nimbus-icons. Import: import { Svg123 } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace FractionDigitsIcon with <Icon as={Svg123} />",
+      "Import Svg123 from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "FrontendStudioIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Web} /> from @commercetools/nimbus-icons. Import: import { Web } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace FrontendStudioIcon with <Icon as={Web} />",
+      "Import Web from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "GearIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Settings} /> from @commercetools/nimbus-icons. Import: import { Settings } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace GearIcon with <Icon as={Settings} />",
+      "Import Settings from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "GraduationCapIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={School} /> from @commercetools/nimbus-icons. Import: import { School } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace GraduationCapIcon with <Icon as={School} />",
+      "Import School from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "GraphIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Analytics} /> from @commercetools/nimbus-icons. Import: import { Analytics } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace GraphIcon with <Icon as={Analytics} />",
+      "Import Analytics from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "GridIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={GridView} /> from @commercetools/nimbus-icons. Import: import { GridView } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace GridIcon with <Icon as={GridView} />",
+      "Import GridView from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "GroupAddIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={GroupAdd} /> from @commercetools/nimbus-icons. Import: import { GroupAdd } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace GroupAddIcon with <Icon as={GroupAdd} />",
+      "Import GroupAdd from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "HeartIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Favorite} /> from @commercetools/nimbus-icons. Import: import { Favorite } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace HeartIcon with <Icon as={Favorite} />",
+      "Import Favorite from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "HomeIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Home} /> from @commercetools/nimbus-icons. Import: import { Home } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace HomeIcon with <Icon as={Home} />",
+      "Import Home from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "HubIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Hub} /> from @commercetools/nimbus-icons. Import: import { Hub } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace HubIcon with <Icon as={Hub} />",
+      "Import Hub from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "InfoIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Info} /> from @commercetools/nimbus-icons. Import: import { Info } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace InfoIcon with <Icon as={Info} />",
+      "Import Info from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "LayersIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Layers} /> from @commercetools/nimbus-icons. Import: import { Layers } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace LayersIcon with <Icon as={Layers} />",
+      "Import Layers from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "ListIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={List} /> from @commercetools/nimbus-icons. Import: import { List } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace ListIcon with <Icon as={List} />",
+      "Import List from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "ListWithSearchIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={ManageSearch} /> from @commercetools/nimbus-icons. Import: import { ManageSearch } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace ListWithSearchIcon with <Icon as={ManageSearch} />",
+      "Import ManageSearch from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "LocationIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Place} /> from @commercetools/nimbus-icons. Import: import { Place } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace LocationIcon with <Icon as={Place} />",
+      "Import Place from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "LockIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Lock} /> from @commercetools/nimbus-icons. Import: import { Lock } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace LockIcon with <Icon as={Lock} />",
+      "Import Lock from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "LogoutIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Logout} /> from @commercetools/nimbus-icons. Import: import { Logout } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace LogoutIcon with <Icon as={Logout} />",
+      "Import Logout from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "MailIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Mail} /> from @commercetools/nimbus-icons. Import: import { Mail } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace MailIcon with <Icon as={Mail} />",
+      "Import Mail from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "MinimizeIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={CloseFullscreen} /> from @commercetools/nimbus-icons. Import: import { CloseFullscreen } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace MinimizeIcon with <Icon as={CloseFullscreen} />",
+      "Import CloseFullscreen from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "NestedViewIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={AccountTree} /> from @commercetools/nimbus-icons. Import: import { AccountTree } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace NestedViewIcon with <Icon as={AccountTree} />",
+      "Import AccountTree from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "OperationsIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Engineering} /> from @commercetools/nimbus-icons. Import: import { Engineering } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace OperationsIcon with <Icon as={Engineering} />",
+      "Import Engineering from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "PageGearIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={SettingsApplications} /> from @commercetools/nimbus-icons. Import: import { SettingsApplications } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace PageGearIcon with <Icon as={SettingsApplications} />",
+      "Import SettingsApplications from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "PagesIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Pages} /> from @commercetools/nimbus-icons. Import: import { Pages } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace PagesIcon with <Icon as={Pages} />",
+      "Import Pages from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "PaidIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Paid} /> from @commercetools/nimbus-icons. Import: import { Paid } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace PaidIcon with <Icon as={Paid} />",
+      "Import Paid from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "PaperBillInvertedIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Receipt} /> from @commercetools/nimbus-icons. Import: import { Receipt } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace PaperBillInvertedIcon with <Icon as={Receipt} />",
+      "Import Receipt from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "PaperclipIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={AttachFile} /> from @commercetools/nimbus-icons. Import: import { AttachFile } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace PaperclipIcon with <Icon as={AttachFile} />",
+      "Import AttachFile from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "PinFilledIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={PushPin} /> from @commercetools/nimbus-icons. Import: import { PushPin } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace PinFilledIcon with <Icon as={PushPin} />",
+      "Import PushPin from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "PinLinearIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={PushPin} /> from @commercetools/nimbus-icons. Import: import { PushPin } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace PinLinearIcon with <Icon as={PushPin} />",
+      "Import PushPin from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "PluginIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Extension} /> from @commercetools/nimbus-icons. Import: import { Extension } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace PluginIcon with <Icon as={Extension} />",
+      "Import Extension from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "PlusThinIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Add} /> from @commercetools/nimbus-icons. Import: import { Add } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace PlusThinIcon with <Icon as={Add} />",
+      "Import Add from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "PrivacyPolicyIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Policy} /> from @commercetools/nimbus-icons. Import: import { Policy } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace PrivacyPolicyIcon with <Icon as={Policy} />",
+      "Import Policy from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "RestoreIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={SettingsBackupRestore} /> from @commercetools/nimbus-icons. Import: import { SettingsBackupRestore } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace RestoreIcon with <Icon as={SettingsBackupRestore} />",
+      "Import SettingsBackupRestore from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "ReviewIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={RateReview} /> from @commercetools/nimbus-icons. Import: import { RateReview } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace ReviewIcon with <Icon as={RateReview} />",
+      "Import RateReview from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "RightTriangleFilledIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={PlayArrow} /> from @commercetools/nimbus-icons. Import: import { PlayArrow } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace RightTriangleFilledIcon with <Icon as={PlayArrow} />",
+      "Import PlayArrow from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "RightTriangleLinearIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={PlayCircleOutline} /> from @commercetools/nimbus-icons. Import: import { PlayCircleOutline } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace RightTriangleLinearIcon with <Icon as={PlayCircleOutline} />",
+      "Import PlayCircleOutline from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "RocketIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={RocketLaunch} /> from @commercetools/nimbus-icons. Import: import { RocketLaunch } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace RocketIcon with <Icon as={RocketLaunch} />",
+      "Import RocketLaunch from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "ScreenGearIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={DisplaySettings} /> from @commercetools/nimbus-icons. Import: import { DisplaySettings } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace ScreenGearIcon with <Icon as={DisplaySettings} />",
+      "Import DisplaySettings from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "ScreenUserIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={PersonalVideo} /> from @commercetools/nimbus-icons. Import: import { PersonalVideo } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace ScreenUserIcon with <Icon as={PersonalVideo} />",
+      "Import PersonalVideo from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "SdkIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Terminal} /> from @commercetools/nimbus-icons. Import: import { Terminal } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace SdkIcon with <Icon as={Terminal} />",
+      "Import Terminal from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "SidebarCollapseIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={MenuOpen} /> from @commercetools/nimbus-icons. Import: import { MenuOpen } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace SidebarCollapseIcon with <Icon as={MenuOpen} />",
+      "Import MenuOpen from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "SidebarExpandIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Menu} /> from @commercetools/nimbus-icons. Import: import { Menu } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace SidebarExpandIcon with <Icon as={Menu} />",
+      "Import Menu from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "SortingIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={SwapVert} /> from @commercetools/nimbus-icons. Import: import { SwapVert } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace SortingIcon with <Icon as={SwapVert} />",
+      "Import SwapVert from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "SparklesIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={AutoAwesome} /> from @commercetools/nimbus-icons. Import: import { AutoAwesome } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace SparklesIcon with <Icon as={AutoAwesome} />",
+      "Import AutoAwesome from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "SpeechBubbleIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={ChatBubble} /> from @commercetools/nimbus-icons. Import: import { ChatBubble } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace SpeechBubbleIcon with <Icon as={ChatBubble} />",
+      "Import ChatBubble from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "SpeedometerIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Speed} /> from @commercetools/nimbus-icons. Import: import { Speed } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace SpeedometerIcon with <Icon as={Speed} />",
+      "Import Speed from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "SplitIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={CallSplit} /> from @commercetools/nimbus-icons. Import: import { CallSplit } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace SplitIcon with <Icon as={CallSplit} />",
+      "Import CallSplit from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "StackIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Layers} /> from @commercetools/nimbus-icons. Import: import { Layers } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace StackIcon with <Icon as={Layers} />",
+      "Import Layers from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "StarIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Star} /> from @commercetools/nimbus-icons. Import: import { Star } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace StarIcon with <Icon as={Star} />",
+      "Import Star from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "SubdirectoryArrowIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={SubdirectoryArrowRight} /> from @commercetools/nimbus-icons. Import: import { SubdirectoryArrowRight } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace SubdirectoryArrowIcon with <Icon as={SubdirectoryArrowRight} />",
+      "Import SubdirectoryArrowRight from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "SupportIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={SupportAgent} /> from @commercetools/nimbus-icons. Import: import { SupportAgent } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace SupportIcon with <Icon as={SupportAgent} />",
+      "Import SupportAgent from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "SwitcherIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={SwapHoriz} /> from @commercetools/nimbus-icons. Import: import { SwapHoriz } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace SwitcherIcon with <Icon as={SwapHoriz} />",
+      "Import SwapHoriz from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "TableIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={TableChart} /> from @commercetools/nimbus-icons. Import: import { TableChart } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace TableIcon with <Icon as={TableChart} />",
+      "Import TableChart from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "TagIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Label} /> from @commercetools/nimbus-icons. Import: import { Label } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace TagIcon with <Icon as={Label} />",
+      "Import Label from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "TagMultiIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Sell} /> from @commercetools/nimbus-icons. Import: import { Sell } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace TagMultiIcon with <Icon as={Sell} />",
+      "Import Sell from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "TagStackedIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Bookmarks} /> from @commercetools/nimbus-icons. Import: import { Bookmarks } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace TagStackedIcon with <Icon as={Bookmarks} />",
+      "Import Bookmarks from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "TerminalIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Terminal} /> from @commercetools/nimbus-icons. Import: import { Terminal } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace TerminalIcon with <Icon as={Terminal} />",
+      "Import Terminal from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "TruckIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={LocalShipping} /> from @commercetools/nimbus-icons. Import: import { LocalShipping } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace TruckIcon with <Icon as={LocalShipping} />",
+      "Import LocalShipping from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "TuneIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Tune} /> from @commercetools/nimbus-icons. Import: import { Tune } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace TuneIcon with <Icon as={Tune} />",
+      "Import Tune from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "UserFilledIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Person} /> from @commercetools/nimbus-icons. Import: import { Person } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace UserFilledIcon with <Icon as={Person} />",
+      "Import Person from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "UserLinearIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={PersonOutline} /> from @commercetools/nimbus-icons. Import: import { PersonOutline } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace UserLinearIcon with <Icon as={PersonOutline} />",
+      "Import PersonOutline from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "UsersIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Group} /> from @commercetools/nimbus-icons. Import: import { Group } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace UsersIcon with <Icon as={Group} />",
+      "Import Group from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "VerifiedIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Verified} /> from @commercetools/nimbus-icons. Import: import { Verified } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace VerifiedIcon with <Icon as={Verified} />",
+      "Import Verified from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "ViewGridPlusIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={DashboardCustomize} /> from @commercetools/nimbus-icons. Import: import { DashboardCustomize } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace ViewGridPlusIcon with <Icon as={DashboardCustomize} />",
+      "Import DashboardCustomize from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "WindowEyeIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Preview} /> from @commercetools/nimbus-icons. Import: import { Preview } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace WindowEyeIcon with <Icon as={Preview} />",
+      "Import Preview from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  {
+    uiKitName: "WorldIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: 'Use <Icon as={Public} /> from @commercetools/nimbus-icons. Import: import { Public } from "@commercetools/nimbus-icons";',
+    breakingChanges: [
+      "Replace WorldIcon with <Icon as={Public} />",
+      "Import Public from @commercetools/nimbus-icons",
+      "Wrap with <Icon> component from @commercetools/nimbus"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  // -------------------------------------------------------------------------
+  // Icons — generic
+  // -------------------------------------------------------------------------
+  {
+    uiKitName: "CustomIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: "Use <Icon as={YourSvg}> or <Icon><YourSvg /></Icon> to wrap custom SVGs with design-system sizing and color tokens. Use InlineSvg for raw SVG markup.",
+    breakingChanges: [
+      "Replace CustomIcon with <Icon as={YourSvg}> or <InlineSvg>",
+      "Prefer the as prop for the shorthand form; children also works"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "children",
+        nimbusProp: "children",
+        changeType: "structural",
+        notes: "Prefer the as prop: <Icon as={YourSvg} />. Passing as children also works: <Icon><YourSvg /></Icon>."
+      }
+    ],
+    // Numeric-only sizes: CustomIcon only accepts "10"–"40", not the named aliases ("small"/"medium"/"big").
+    iconWrapper: {
+      ...ICON_WRAPPER_BASE,
+      sizeMapping: [
+        { from: "10", to: "2xs" },
+        { from: "20", to: "xs" },
+        { from: "30", to: "sm" },
+        { from: "40", to: "md" }
+      ]
+    }
+  },
+  {
+    uiKitName: "LeadingIcon",
+    nimbusEquivalent: "Icon",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: "Pass icon as a child to the parent component (e.g. as a child of <Button>) rather than using a wrapper.",
+    breakingChanges: [
+      "Remove LeadingIcon wrapper",
+      "Pass icon directly to the parent component's icon slot"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "children",
+        nimbusProp: null,
+        changeType: "structural",
+        notes: "Remove the LeadingIcon wrapper and pass the icon directly as a child of the parent component."
+      }
+    ]
+  },
+  {
+    uiKitName: "InlineSvg",
+    nimbusEquivalent: "InlineSvg",
+    importPath: "@commercetools/nimbus",
+    mappingType: "direct",
+    notes: "Direct replacement for custom SVG icons not in the icon library.",
+    breakingChanges: []
+  },
+  {
+    uiKitName: "Icon Library",
+    nimbusEquivalent: "Nimbus Icon Library",
+    importPath: "@commercetools/nimbus-icons",
+    mappingType: "pattern",
+    notes: 'Always wrap icons in the Icon component: <Icon as={AccountCircle} size="2xs" color="neutral.11" />. Import the icon from @commercetools/nimbus-icons and the Icon wrapper from @commercetools/nimbus. Never use bare icon components \u2014 the unwrapped form skips design-system sizing and color tokens.',
+    breakingChanges: [
+      "Update import paths to @commercetools/nimbus-icons",
+      "Icon names are PascalCase (e.g. Add, ChevronLeft); only icons starting with numbers use a Svg prefix (e.g. Svg123)",
+      "Icons must be wrapped in <Icon as={...}> for correct sizing and theming"
+    ],
+    iconWrapper: ICON_WRAPPER
+  },
+  // -------------------------------------------------------------------------
+  // Accessibility utilities
+  // -------------------------------------------------------------------------
+  {
+    uiKitName: "HiddenInput",
+    nimbusEquivalent: "VisuallyHidden",
+    importPath: "@commercetools/nimbus",
+    mappingType: "direct",
+    notes: "VisuallyHidden renders content that is visually hidden but accessible to screen readers.",
+    breakingChanges: ["Rename to VisuallyHidden"]
+  },
+  {
+    uiKitName: "AccessibleHidden",
+    nimbusEquivalent: "VisuallyHidden",
+    importPath: "@commercetools/nimbus",
+    mappingType: "variant",
+    notes: "Use VisuallyHidden for content that should be screen-reader accessible only.",
+    breakingChanges: ["Replace AccessibleHidden with VisuallyHidden"]
+  },
+  // -------------------------------------------------------------------------
+  // Provider
+  // -------------------------------------------------------------------------
+  {
+    uiKitName: "ThemeProvider",
+    nimbusEquivalent: "NimbusProvider",
+    importPath: "@commercetools/nimbus",
+    mappingType: "direct",
+    notes: "Rename to NimbusProvider. Wrap your app root once; passes theme and i18n context.",
     breakingChanges: [
       "Rename to NimbusProvider",
       "theme prop configuration has changed; see NimbusProvider docs"
+    ],
+    propMappings: [
+      {
+        uiKitProp: "theme",
+        nimbusProp: null,
+        changeType: "structural",
+        notes: "Theme configuration shape changed; see NimbusProvider's themes/forcedTheme/defaultTheme props."
+      }
     ]
   }
 ];
@@ -2322,6 +5344,20 @@ function deriveToolHint2(uiKitName, nimbusEquivalent, importPath, notes) {
   }
   return void 0;
 }
+function buildTokenRedirect(name) {
+  return {
+    uiKitName: name,
+    nimbusEquivalent: "Nimbus design tokens",
+    importPath: "@commercetools/nimbus-tokens",
+    mappingType: "pattern",
+    notes: `Replace ${name}.tokenName usages with Nimbus design tokens. Use the get_tokens tool with the uikitToken parameter to resolve each token (e.g. get_tokens(uikitToken: "constraint3") or get_tokens(uikitToken: "spacingXl")).`,
+    breakingChanges: [
+      `Remove ${name} import from @commercetools-uikit/design-system or @commercetools-frontend/ui-kit`,
+      "Replace each token reference with the equivalent Nimbus token value or CSS variable"
+    ],
+    hint: `Use the get_tokens tool with the uikitToken parameter to resolve each ${name} token (e.g. get_tokens(uikitToken: "constraint3"))`
+  };
+}
 function buildComponentResult(uiKitName) {
   const entry = getUiKitMigration(uiKitName);
   if (!entry) return null;
@@ -2333,6 +5369,15 @@ function buildComponentResult(uiKitName) {
     notes: entry.notes,
     breakingChanges: entry.breakingChanges
   };
+  if (entry.propMappings) result.propMappings = entry.propMappings;
+  if (entry.iconWrapper) result.iconWrapper = entry.iconWrapper;
+  if (entry.propMigrations) result.propMigrations = entry.propMigrations;
+  if (entry.codeReduction) result.codeReduction = entry.codeReduction;
+  if (entry.propShapeTransforms)
+    result.propShapeTransforms = entry.propShapeTransforms;
+  if (entry.callbackAdapters) result.callbackAdapters = entry.callbackAdapters;
+  if (entry.typeNotes) result.typeNotes = entry.typeNotes;
+  if (entry.layoutGuidance) result.layoutGuidance = entry.layoutGuidance;
   const hint = deriveToolHint2(
     uiKitName,
     entry.nimbusEquivalent,
@@ -2342,6 +5387,111 @@ function buildComponentResult(uiKitName) {
   if (hint) result.hint = hint;
   return result;
 }
+function hoistLayoutGuidance(mappings) {
+  const guidance = mappings.find((m) => m.layoutGuidance)?.layoutGuidance;
+  if (guidance) {
+    for (const m of mappings) delete m.layoutGuidance;
+  }
+  return guidance;
+}
+var GENERIC_UI_WORDS = /* @__PURE__ */ new Set([
+  "input",
+  "field",
+  "text",
+  "button",
+  "component",
+  "panel",
+  "container",
+  "label",
+  "control",
+  "item",
+  "group",
+  "list",
+  "wrapper",
+  "provider",
+  "manager"
+]);
+function splitPascalCase(name) {
+  return name.replace(/([a-z])([A-Z])/g, "$1 $2").split(/\s+/);
+}
+var _componentRoutes;
+var _componentLowered;
+async function getComponentCatalog() {
+  if (!_componentRoutes || !_componentLowered) {
+    const manifest = await getRouteManifest();
+    _componentRoutes = manifest.routes.filter(
+      (r) => r.category === "Components" && r.menu.length === 3
+    );
+    _componentLowered = /* @__PURE__ */ new Map();
+    for (const r of _componentRoutes) {
+      _componentLowered.set(r, toLoweredRouteFields(r));
+    }
+  }
+  return { routes: _componentRoutes, lowered: _componentLowered };
+}
+function pickClosestByWordOverlap(candidates, uiKitWords) {
+  const wordSet = new Set(uiKitWords);
+  let best = null;
+  let bestRatio = 0;
+  for (const c of candidates) {
+    const exportWords = splitPascalCase(c.exportName ?? c.title).map(
+      (w) => w.toLowerCase()
+    );
+    const overlap = exportWords.filter((w) => wordSet.has(w)).length;
+    const ratio = overlap / exportWords.length;
+    if (ratio > bestRatio) {
+      bestRatio = ratio;
+      best = c;
+    }
+  }
+  return best;
+}
+async function findNimbusSuggestion(uiKitName) {
+  const { routes, lowered } = await getComponentCatalog();
+  const allWords = splitPascalCase(uiKitName).map((w) => w.toLowerCase());
+  if (allWords.length === 0) return null;
+  const distinctive = allWords.filter((w) => !GENERIC_UI_WORDS.has(w));
+  const usingGenericFallback = distinctive.length === 0;
+  const tokens = usingGenericFallback ? allWords : distinctive;
+  const exactMatches = filterAndRankPreLowered(
+    routes,
+    tokens,
+    (r) => lowered.get(r)
+  );
+  if (exactMatches.length > 0) {
+    const best = pickClosestByWordOverlap(exactMatches, allWords);
+    if (!best) return null;
+    return {
+      name: best.exportName ?? best.title,
+      confidence: usingGenericFallback ? "medium" : "high"
+    };
+  }
+  const minFuzzyScore = tokens.length * (WEIGHTS.title / 2);
+  const fuzzyScored = [];
+  for (const r of routes) {
+    const score = fuzzyScorePreLowered(lowered.get(r), tokens);
+    if (score > 0) {
+      fuzzyScored.push({ route: r, score });
+    }
+  }
+  fuzzyScored.sort((a, b) => b.score - a.score);
+  if (fuzzyScored.length > 0) {
+    const best = fuzzyScored[0];
+    if (best.score >= minFuzzyScore) {
+      return {
+        name: best.route.exportName ?? best.route.title,
+        confidence: "medium"
+      };
+    }
+  }
+  return null;
+}
+async function buildUnmappedComponent(name) {
+  const suggestion = await findNimbusSuggestion(name);
+  const result = { name };
+  if (suggestion) result.suggestion = suggestion;
+  return result;
+}
 function registerMigrateFromUiKit(server) {
   server.registerTool(
     "migrate_from_uikit",
@@ -2349,10 +5499,10 @@ function registerMigrateFromUiKit(server) {
       title: "Migrate from UI Kit",
       description: "Returns migration mapping data for UI Kit components to their Nimbus equivalents. Use componentName for a single lookup, or filePath to extract all UI Kit imports from a file and get mappings for each. The MCP provides data; the LLM does the actual code rewriting.",
       inputSchema: {
-        componentName: z6.string().optional().describe(
+        componentName: z7.string().optional().describe(
           'UI Kit component name to look up, e.g. "PrimaryButton", "TextInput", "CollapsiblePanel".'
         ),
-        filePath: z6.string().optional().describe(
+        filePath: z7.string().optional().describe(
           "Absolute path to a source file. Extracts @commercetools-uikit/* imports and returns mappings for all found components."
         )
       }
@@ -2370,6 +5520,16 @@ function registerMigrateFromUiKit(server) {
         };
       }
       if (componentName) {
+        if (componentName === "customProperties" || componentName === "designTokens") {
+          return {
+            content: [
+              {
+                type: "text",
+                text: JSON.stringify(buildTokenRedirect(componentName))
+              }
+            ]
+          };
+        }
         const result = buildComponentResult(componentName);
         if (result) {
           return {
@@ -2383,13 +5543,16 @@ function registerMigrateFromUiKit(server) {
         }
         const compoundEntries = getUiKitCompoundMigrations(componentName);
         if (compoundEntries) {
+          const mappings2 = compoundEntries.map(
+            (e) => buildComponentResult(e.uiKitName)
+          );
           const response2 = {
             compoundRoot: componentName,
             note: `"${componentName}" is used as a namespace (e.g. ${compoundEntries.map((e) => e.uiKitName).join(", ")}). Each sub-component has its own mapping.`,
-            mappings: compoundEntries.map(
-              (e) => buildComponentResult(e.uiKitName)
-            )
+            mappings: mappings2
           };
+          const guidance = hoistLayoutGuidance(mappings2);
+          if (guidance) response2.layoutGuidance = guidance;
           return {
             content: [
               {
@@ -2410,6 +5573,22 @@ function registerMigrateFromUiKit(server) {
             ]
           };
         }
+        const suggestion = await findNimbusSuggestion(componentName);
+        if (suggestion) {
+          const response2 = {
+            uiKitName: componentName,
+            suggestion
+          };
+          response2.hint = `Use the get_component tool to see full API docs (e.g. get_component(name: "${suggestion.name}"))`;
+          return {
+            content: [
+              {
+                type: "text",
+                text: JSON.stringify(response2)
+              }
+            ]
+          };
+        }
         return {
           content: [
             {
@@ -2451,8 +5630,12 @@ function registerMigrateFromUiKit(server) {
         };
       }
       const mappings = [];
-      const unmapped = [];
+      const unmappedNames = [];
       for (const name of componentNames) {
+        if (name === "customProperties" || name === "designTokens") {
+          mappings.push(buildTokenRedirect(name));
+          continue;
+        }
         const result = buildComponentResult(name);
         if (result) {
           mappings.push(result);
@@ -2469,13 +5652,18 @@ function registerMigrateFromUiKit(server) {
           }
           continue;
         }
-        unmapped.push(name);
+        unmappedNames.push(name);
       }
+      const unmapped = await Promise.all(
+        unmappedNames.map(buildUnmappedComponent)
+      );
       const response = {
         filePath,
         mappings,
         unmapped
       };
+      const fileGuidance = hoistLayoutGuidance(mappings);
+      if (fileGuidance) response.layoutGuidance = fileGuidance;
       return {
         content: [
           {
@@ -2502,6 +5690,7 @@ function createServer() {
     }
   );
   registerGetComponent(server);
+  registerGetDocsPage(server);
   registerGetTokens(server);
   registerListComponents(server);
   registerSearchDocs(server);