@kaizen/components 1.80.5 → 1.80.6

package/codemods/README.md

@@ -25,6 +25,12 @@ pnpm kaizen-codemod src migrateWellVariantToColor
 
 ## Available codemods
 
+Released in `1.80.6`
+
+### `runV1Codemods`
+
+A script that runs all v1 codemods in an ideal sequence. This should be used prior to the V2 upgrade - see the [README](./runV1Codemods/README.md) for more.
+
 ### `migrateV2NextToCurrent`
 
 Released in `1.80.4`

package/codemods/migrateV2NextToCurrent/migrateV2NextToCurrent.spec.ts

@@ -500,7 +500,7 @@ import type { Menu as KZMenu, MenuItem as KZMenuItem } from "@kaizen/components"
   describe('Module path transformations', () => {
     it('should transform react-aria module path', () => {
       const inputAst = parseJsx(`import { Button } from "@kaizen/components/v3/react-aria"`)
-      const expectedAst = parseJsx(`import { Button } from "@kaizen/components/react-aria"`)
+      const expectedAst = parseJsx(`import { Button } from "@kaizen/components/libs/react-aria"`)
 
       const result = transformComponents(inputAst)
       expect(result).toBe(printAst(expectedAst))
@@ -511,7 +511,7 @@ import type { Menu as KZMenu, MenuItem as KZMenuItem } from "@kaizen/components"
         `import { TextField } from "@kaizen/components/v3/react-aria-components"`,
       )
       const expectedAst = parseJsx(
-        `import { TextField } from "@kaizen/components/react-aria-components"`,
+        `import { TextField } from "@kaizen/components/libs/react-aria-components"`,
       )
 
       const result = transformComponents(inputAst)
@@ -520,7 +520,9 @@ import type { Menu as KZMenu, MenuItem as KZMenuItem } from "@kaizen/components"
 
     it('should handle multiple imports from react-aria modules', () => {
       const inputAst = parseJsx(`import { Button, Link } from "@kaizen/components/v3/react-aria"`)
-      const expectedAst = parseJsx(`import { Button, Link } from "@kaizen/components/react-aria"`)
+      const expectedAst = parseJsx(
+        `import { Button, Link } from "@kaizen/components/libs/react-aria"`,
+      )
 
       const result = transformComponents(inputAst)
       expect(result).toBe(printAst(expectedAst))
@@ -531,7 +533,7 @@ import type { Menu as KZMenu, MenuItem as KZMenuItem } from "@kaizen/components"
         `import { Button as AriaButton } from "@kaizen/components/v3/react-aria"`,
       )
       const expectedAst = parseJsx(
-        `import { Button as AriaButton } from "@kaizen/components/react-aria"`,
+        `import { Button as AriaButton } from "@kaizen/components/libs/react-aria"`,
       )
 
       const result = transformComponents(inputAst)
@@ -545,7 +547,7 @@ import { Button } from "@kaizen/components/v3/react-aria"
 `)
       const expectedAst = parseJsx(`
 import { Menu } from "@kaizen/components"
-import { Button } from "@kaizen/components/react-aria"
+import { Button } from "@kaizen/components/libs/react-aria"
 `)
 
       const result = transformComponents(inputAst)

package/codemods/migrateV2NextToCurrent/migrateV2NextToCurrent.ts

@@ -49,8 +49,8 @@ const componentGroups: ComponentGroup[] = [
 const renameMap = createRenameMapFromGroups(componentGroups)
 
 const modulePathMap = new Map([
-  ['@kaizen/components/v3/react-aria', '@kaizen/components/react-aria'],
-  ['@kaizen/components/v3/react-aria-components', '@kaizen/components/react-aria-components'],
+  ['@kaizen/components/v3/react-aria', '@kaizen/components/libs/react-aria'],
+  ['@kaizen/components/v3/react-aria-components', '@kaizen/components/libs/react-aria-components'],
 ])
 
 export const migrateV2NextToCurrent =

package/codemods/runV1Codemods/README.md

@@ -0,0 +1,75 @@
+# runV1Codemods
+
+A comprehensive codemod that runs all V1 migration codemods in the ideal sequence.
+
+## Overview
+
+This codemod executes all 17 V1 migration codemods in the order as pre-work to migrate to `kaizen/component@2.0.0` Kaizen components. After this you will still need to run the `migrateV2NextToCurrent` and `renameV2ComponentImportsAndUsages` after upgrading to `kaizen/component@2.0.0`
+
+This codemod runner handles the following:
+
+- Icon upgrades (`upgradeIconV1`)
+- Button migrations (`upgradeV1Buttons`)
+- GuidanceBlock actions migration (`migrateGuidanceBlockActionsToActionsSlot`)
+- Mood to variant migrations for multiple components
+- Variant to color migrations
+- Type to variant migrations for notifications
+- Removal of deprecated props
+
+## Usage
+
+```bash
+pnpm kaizen-codemod {target-directory} runV1Codemods
+```
+
+## Example
+
+```bash
+pnpm kaizen-codemod src/components/MockComponent runV1Codemods
+```
+
+## What it does
+
+The codemod runs the following transformations in sequence:
+
+1. **upgradeIconV1** - Migrates V1 Icon components to next Icon
+2. **upgradeV1Buttons** - Migrates V1 Button and IconButton to next Button/LinkButton
+3. **migrateGuidanceBlockActionsToActionsSlot** - Migrates GuidanceBlock actions prop to actionsSlot
+4. **migrateBrandMomentMoodToVariant** - Changes `mood` prop to `variant` on BrandMoment
+5. **migrateCardVariantToColor** - Changes `variant` prop to `color` on Card
+6. **migrateConfirmationModalMoodsToVariant** - Changes `mood` prop to `variant` on ConfirmationModal
+7. **migrateEmptyStateIllustrationTypeToVariant** - Changes `illustrationType` prop to `variant` on EmptyState
+8. **migrateGlobalNotificationTypeToVariant** - Changes `type` prop to `variant` on GlobalNotification
+9. **migrateInformationTileMoodToVariant** - Changes `mood` prop to `variant` on InformationTile
+10. **migrateInlineNotificationTypeToVariant** - Changes `type` prop to `variant` on InlineNotification
+11. **migrateMultiActionTileMoodToVariant** - Changes `mood` prop to `variant` on MultiActionTile
+12. **migrateNotificationTypeToVariant** - Changes `type` prop to `variant` on Notification
+13. **migrateProgressBarMoodToColor** - Changes `mood` prop to `color` on ProgressBar
+14. **migrateToastNotificationTypeToVariant** - Changes `type` prop to `variant` on ToastNotification
+15. **migrateWellVariantToColor** - Changes `variant` prop to `color` on Well
+16. **removeInputEditModalMood** - Removes deprecated `mood` prop from InputEditModal
+17. **removePopoverVariant** - Removes deprecated `variant` and `customIcon` props from Popover
+
+## Error Handling
+
+- If any individual codemod fails, the process continues with the remaining codemods
+- Detailed logging shows the start and completion status of each codemod
+- A summary is provided at the end showing successful vs failed codemods
+
+## Cautions and caveats
+
+### Reducing the blast radius of the codemods
+
+This running will create a lot of diffs and changes to your components as the traverses the entire directory given.
+
+To reduce the scope, consider either running this on component or page directories or running the mode incrementally, ie:
+
+`pnpm kaizen-codemod src/pages/MockPage runV1Codemods`
+
+This can make it easier to review and merge in changes with confidence.
+
+### Prettier diffs
+
+As the codemod will rewrites files, this can cause arbitrary changes that will be resolved by `prettier` formatting. We recommend running the following to reduce the noise in your diffs:
+
+`pnpm prettier --write "**/*.tsx"`

package/codemods/runV1Codemods/__fixtures__/MockComponentDir/MockComponent.tsx

@@ -0,0 +1,48 @@
+// @ts-nocheck this is a mock file - we can ignore this
+import React from 'react'
+import {
+  BrandMoment,
+  Card,
+  GlobalNotification,
+  GuidanceBlock,
+  Informative,
+  ProgressBar,
+  Well,
+} from '@kaizen/components'
+import { MockSubcomponent } from './subcomponents/MockSubcomponent'
+
+export const MockComponent = (): JSX.Element => {
+  return (
+    <div>
+      <GuidanceBlock
+        illustration={<Informative alt="" />}
+        text={{
+          title: 'This is the call to action title',
+          description:
+            'Mussum Ipsum, cacilds vidis litro abertis. Suco de cevadiss, é um leite divinis.',
+        }}
+        actions={{
+          primary: { label: 'Action!', onClick: () => undefined },
+          secondary: { label: 'Cancel', href: '/cancel' },
+        }}
+      />
+      <BrandMoment mood="positive">
+        <div>Success message</div>
+      </BrandMoment>
+      <Card variant="informative">
+        <div>Card content</div>
+      </Card>
+      <ProgressBar mood="positive" value={75} />
+      <Well variant="default">
+        <div>Well content</div>
+      </Well>
+      <GlobalNotification persistent={true} type="positive">
+        Global notification content
+      </GlobalNotification>
+      <div className="additional-content">
+        This is some additional content that is not part of the GuidanceBlock.
+        <MockSubcomponent />
+      </div>
+    </div>
+  )
+}

package/codemods/runV1Codemods/__fixtures__/MockComponentDir/index.ts

@@ -0,0 +1 @@
+export * from './'

package/codemods/runV1Codemods/__fixtures__/MockComponentDir/subcomponents/MockSubcomponent.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+// @ts-ignore This is a mock component to test codemods
+import { Button } from '@kaizen/components'
+
+export const MockSubcomponent = (): JSX.Element => {
+  return (
+    <div>
+      <Button label="Mock Subcomponent Button" onClick={() => undefined} />
+      <Button label="Mock Subcomponent Link" href="#link" />
+    </div>
+  )
+}

package/codemods/runV1Codemods/__fixtures__/MockFailedComponentDir/MockComponent.tsx

@@ -0,0 +1,13 @@
+// @ts-nocheck this is a mock file - we can ignore this
+import React from 'react'
+import { GlobalNotification } from '@kaizen/components'
+
+export const MockComponent = (): JSX.Element => {
+  return (
+    <div>
+      <GlobalNotification persistent={true} type="success">
+        Global notification content
+      </GlobalNotification>
+    </div>
+  )
+}

package/codemods/runV1Codemods/__fixtures__/MockFailedComponentDir/index.ts

@@ -0,0 +1 @@
+export * from './'

package/codemods/runV1Codemods/__snapshots__/runV1Codemods.spec.ts.snap

@@ -0,0 +1,56 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`runV1Codemods > MockComponentDir Snapshot Tests > should transform MockComponentDir files and match snapshot 1`] = `
+{
+  "MockComponent.tsx": "// @ts-nocheck this is a mock file - we can ignore this
+import React from 'react';
+import { BrandMoment, Card, GlobalNotification, GuidanceBlock, Informative, ProgressBar, Well, LinkButton } from '@kaizen/components';
+import { Button } from "@kaizen/components/next";
+import { MockSubcomponent } from './subcomponents/MockSubcomponent';
+
+export const MockComponent = (): JSX.Element => {
+    return (<div>
+      <GuidanceBlock illustration={<Informative alt=""/>} text={{
+            title: 'This is the call to action title',
+            description: 'Mussum Ipsum, cacilds vidis litro abertis. Suco de cevadiss, é um leite divinis.',
+        }} actionsSlot={<><Button onPress={() => undefined} variant="secondary" size="large">Action!</Button><LinkButton href='/cancel' variant="tertiary" size="large">Cancel</LinkButton></>}/>
+      <BrandMoment variant="success">
+        <div>Success message</div>
+      </BrandMoment>
+      <Card color="blue">
+        <div>Card content</div>
+      </Card>
+      <ProgressBar color="green" value={75}/>
+      <Well color="gray">
+        <div>Well content</div>
+      </Well>
+      <GlobalNotification persistent={true} variant="success">
+        Global notification content
+      </GlobalNotification>
+      <div className="additional-content">
+        This is some additional content that is not part of the GuidanceBlock.
+        <MockSubcomponent />
+      </div>
+    </div>);
+};
+
+
+
+
+ 
+",
+  "index.ts": "export * from './'
+",
+  "subcomponents/MockSubcomponent.tsx": "import { Button } from "@kaizen/components/next";
+import { LinkButton } from "@kaizen/components";
+import React from 'react';
+
+export const MockSubcomponent = (): JSX.Element => {
+    return (<div>
+      <Button onPress={() => undefined} variant="secondary" size="large">Mock Subcomponent Button</Button>
+      <LinkButton href="#link" variant="secondary" size="large">Mock Subcomponent Link</LinkButton>
+    </div>);
+};
+",
+}
+`;

package/codemods/runV1Codemods/index.ts

@@ -0,0 +1,41 @@
+import fs from 'fs'
+import { runV1Codemods } from './runV1Codemods'
+
+const run = async (): Promise<void> => {
+  console.log(`🚀 Running all V1 codemods in sequence:
+  1. upgradeIconV1
+  2. upgradeV1Buttons
+  3. migrateGuidanceBlockActionsToActionsSlot
+  4. migrateBrandMomentMoodToVariant
+  5. migrateCardVariantToColor
+  6. migrateConfirmationModalMoodsToVariant
+  7. migrateEmptyStateIllustrationTypeToVariant
+  8. migrateGlobalNotificationTypeToVariant
+  9. migrateInformationTileMoodToVariant
+  10. migrateInlineNotificationTypeToVariant
+  11. migrateMultiActionTileMoodToVariant
+  12. migrateNotificationTypeToVariant
+  13. migrateProgressBarMoodToColor
+  14. migrateToastNotificationTypeToVariant
+  15. migrateWellVariantToColor
+  16. removeInputEditModalMood
+  17. removePopoverVariant
+  `)
+
+  const targetDir = process.argv[2]
+
+  if (!targetDir) {
+    throw Error('Error: target directory does not exist')
+  }
+
+  if (fs.existsSync(targetDir) === false) {
+    throw Error('Error: target directory does not exist')
+  }
+
+  await runV1Codemods(targetDir)
+}
+
+run().catch((error) => {
+  console.error('Fatal error running codemods:', error)
+  process.exit(1)
+})

package/codemods/runV1Codemods/runV1Codemods.spec.ts

@@ -0,0 +1,107 @@
+import fs from 'fs'
+import os from 'os'
+import path from 'path'
+import { vi } from 'vitest'
+
+import { runV1Codemods } from './runV1Codemods'
+
+const cleanupTestDirectory = (tempDir: string): void => {
+  if (fs.existsSync(tempDir)) {
+    fs.rmSync(tempDir, { recursive: true, force: true })
+  }
+}
+
+// Helper to read files from test directory
+const readTestFiles = (tempDir: string): Record<string, string> => {
+  const files: Record<string, string> = {}
+
+  const readDir = (dirPath: string, basePath = ''): void => {
+    const items = fs.readdirSync(dirPath)
+
+    items.forEach((item) => {
+      const fullPath = path.join(dirPath, item)
+      const relativePath = path.join(basePath, item)
+
+      if (fs.statSync(fullPath).isDirectory()) {
+        readDir(fullPath, relativePath)
+      } else if (item.endsWith('.tsx') || item.endsWith('.ts')) {
+        files[relativePath] = fs.readFileSync(fullPath, 'utf8')
+      }
+    })
+  }
+
+  readDir(tempDir)
+  return files
+}
+
+const copyDirectoryToTemp = (sourceDir: string): string => {
+  const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'runV1Codemods-snapshot-'))
+
+  const copyRecursive = (src: string, dest: string): void => {
+    const stat = fs.statSync(src)
+
+    if (stat.isDirectory()) {
+      if (!fs.existsSync(dest)) {
+        fs.mkdirSync(dest, { recursive: true })
+      }
+      const items = fs.readdirSync(src)
+      items.forEach((item) => {
+        copyRecursive(path.join(src, item), path.join(dest, item))
+      })
+    } else {
+      fs.copyFileSync(src, dest)
+    }
+  }
+
+  copyRecursive(sourceDir, tempDir)
+  return tempDir
+}
+
+describe('runV1Codemods', () => {
+  describe('MockComponentDir Snapshot Tests', () => {
+    it('should transform MockComponentDir files and match snapshot', () => {
+      const mockSourceDir = path.resolve(__dirname, '__fixtures__', 'MockComponentDir')
+      const tempDir = copyDirectoryToTemp(mockSourceDir)
+
+      try {
+        runV1Codemods(tempDir)
+        const transformedFiles = readTestFiles(tempDir)
+
+        expect(transformedFiles).toMatchSnapshot()
+
+        expect(transformedFiles['MockComponent.tsx']).toContain('actionsSlot')
+        expect(transformedFiles['MockComponent.tsx']).not.toContain('actions={{')
+        expect(transformedFiles['MockComponent.tsx']).toContain(
+          'import { Button } from "@kaizen/components/next"',
+        )
+
+        expect(transformedFiles['subcomponents/MockSubcomponent.tsx']).toContain('onPress')
+        expect(transformedFiles['subcomponents/MockSubcomponent.tsx']).toContain(
+          'import { Button } from "@kaizen/components/next"',
+        )
+      } finally {
+        cleanupTestDirectory(tempDir)
+      }
+    })
+  })
+  describe('MockFailedComponentDir Failed', () => {
+    it('should throw an Error and exit on a failed codemod', () => {
+      const mockSourceDir = path.resolve(__dirname, '__fixtures__', 'MockFailedComponentDir')
+      const tempDir = copyDirectoryToTemp(mockSourceDir)
+
+      try {
+        const exitSpy = vi
+          .spyOn(process, 'exit')
+          .mockImplementation((code?: string | number | null | undefined) => {
+            throw new Error(`process.exit(${code})`)
+          })
+
+        expect(() => runV1Codemods(tempDir)).toThrow('process.exit(1)')
+        expect(exitSpy).toHaveBeenCalledWith(1)
+        exitSpy.mockRestore()
+      } finally {
+        cleanupTestDirectory(tempDir)
+      }
+    })
+  })
+})

package/codemods/runV1Codemods/runV1Codemods.ts

@@ -0,0 +1,187 @@
+import fs from 'fs'
+import { transformBrandMomentMoodToVariant } from '../migrateBrandMomentMoodToVariant/transformBrandMomentMoodToVariant'
+import { transformCardVariantToColor } from '../migrateCardVariantToColor/transformCardVariantToColor'
+import { transformConfirmationModalMoodsToVariant } from '../migrateConfirmationModalMoodsToVariant/transformConfirmationModalMoodsToVariant'
+import { transformEmptyStateIllustrationTypeToVariant } from '../migrateEmptyStateIllustrationTypeToVariant/transformEmptyStateIllustrationTypeToVariant'
+import { migrateGuidanceBlockActionsToActionsSlot } from '../migrateGuidanceBlockActionsToActionsSlot/migrateGuidanceBlockActionsToActionsSlot'
+import { transformInformationTileMoodToVariant } from '../migrateInformationTileMoodToVariant/transformInformationTileMoodToVariant'
+import { transformMultiActionTileMoodToVariant } from '../migrateMultiActionTileMoodToVariant/transformMultiActionTileMoodToVariant'
+import { transformNotificationTypeToVariant } from '../migrateNotificationTypeToVariant/migrateNotificationTypeToVariant'
+import { transformProgressBarMoodToColor } from '../migrateProgressBarMoodToColor/transformProgressBarMoodToColor'
+import { transformWellVariantToColor } from '../migrateWellVariantToColor/transformWellVariantToColor'
+import { removeInputEditModalMood } from '../removeInputEditModalMood/removeInputEditModalMood'
+import { removePopoverVariant } from '../removePopoverVariant/removePopoverVariant'
+import { upgradeIconV1 } from '../upgradeIconV1/upgradeIconV1'
+import { upgradeV1Buttons } from '../upgradeV1Buttons/upgradeV1Buttons'
+import { transformComponentsInDir, transformComponentsInDirByPattern } from '../utils'
+
+interface CodemodConfig {
+  name: string
+  runner: (targetDir: string) => void
+}
+
+const codemods: CodemodConfig[] = [
+  {
+    name: 'upgradeIconV1',
+    runner: (dir) => {
+      transformComponentsInDirByPattern(dir, 'Icon$', (tagNames) => [upgradeIconV1(tagNames)])
+    },
+  },
+  {
+    name: 'upgradeV1Buttons',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['IconButton', 'Button'], (tagNames) => [
+        upgradeV1Buttons(tagNames),
+      ])
+    },
+  },
+  {
+    name: 'migrateGuidanceBlockActionsToActionsSlot',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['GuidanceBlock'], (tagNames) => [
+        migrateGuidanceBlockActionsToActionsSlot(tagNames),
+      ])
+    },
+  },
+  {
+    name: 'migrateBrandMomentMoodToVariant',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['BrandMoment'], (tagNames) => [
+        transformBrandMomentMoodToVariant(tagNames),
+      ])
+    },
+  },
+  {
+    name: 'migrateCardVariantToColor',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['Card'], (tagNames) => [transformCardVariantToColor(tagNames)])
+    },
+  },
+  {
+    name: 'migrateConfirmationModalMoodsToVariant',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['ConfirmationModal'], (tagNames) => [
+        transformConfirmationModalMoodsToVariant(tagNames),
+      ])
+    },
+  },
+  {
+    name: 'migrateEmptyStateIllustrationTypeToVariant',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['EmptyState'], (tagNames) => [
+        transformEmptyStateIllustrationTypeToVariant(tagNames),
+      ])
+    },
+  },
+  {
+    name: 'migrateGlobalNotificationTypeToVariant',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['GlobalNotification'], (tagNames) => [
+        transformNotificationTypeToVariant(tagNames),
+      ])
+    },
+  },
+  {
+    name: 'migrateInformationTileMoodToVariant',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['InformationTile'], (tagNames) => [
+        transformInformationTileMoodToVariant(tagNames),
+      ])
+    },
+  },
+  {
+    name: 'migrateInlineNotificationTypeToVariant',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['InlineNotification'], (tagNames) => [
+        transformNotificationTypeToVariant(tagNames),
+      ])
+    },
+  },
+  {
+    name: 'migrateMultiActionTileMoodToVariant',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['MultiActionTile'], (tagNames) => [
+        transformMultiActionTileMoodToVariant(tagNames),
+      ])
+    },
+  },
+  {
+    name: 'migrateNotificationTypeToVariant',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['Notification'], (tagNames) => [
+        transformNotificationTypeToVariant(tagNames),
+      ])
+    },
+  },
+  {
+    name: 'migrateProgressBarMoodToColor',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['ProgressBar'], (tagNames) => [
+        transformProgressBarMoodToColor(tagNames),
+      ])
+    },
+  },
+  {
+    name: 'migrateToastNotificationTypeToVariant',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['ToastNotification'], (tagNames) => [
+        transformNotificationTypeToVariant(tagNames),
+      ])
+    },
+  },
+  {
+    name: 'migrateWellVariantToColor',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['Well'], (tagNames) => [transformWellVariantToColor(tagNames)])
+    },
+  },
+  {
+    name: 'removeInputEditModalMood',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['InputEditModal'], (tagNames) => [
+        removeInputEditModalMood(tagNames),
+      ])
+    },
+  },
+  {
+    name: 'removePopoverVariant',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['Popover'], (tagNames) => [removePopoverVariant(tagNames)])
+    },
+  },
+]
+
+export const runV1Codemods = (targetDir: string): void => {
+  console.log(`📝 Running ${codemods.length} codemods on directory: ${targetDir}`)
+  console.log('')
+
+  if (fs.existsSync(targetDir) === false) {
+    console.error(`Error: Target directory "${targetDir}" does not exist`)
+    process.exit(1)
+  }
+
+  let successCount = 0
+
+  for (const codemod of codemods) {
+    try {
+      console.log(`🔄 Starting codemod: ${codemod.name}`)
+      codemod.runner(targetDir)
+      console.log(`✅ Completed codemod: ${codemod.name}`)
+      successCount++
+    } catch (error) {
+      console.log(`💥 Error in codemod: ${codemod.name} - exiting early
+
+✅ ${successCount} codemods completed successfully
+😢 ${codemods.length - successCount} codemods did not run
+Address the issues in the following codemod before proceeding:
+        `)
+
+      console.error(`${codemod.name}\n`)
+      console.error(error)
+      process.exit(1)
+    }
+    console.log('')
+  }
+
+  console.log('\n🎉 All codemods completed successfully!')
+}

package/dist/styles.css

@@ -23,26 +23,6 @@
   }
 }
 
-@layer kz-components {
-  .Trigger-module_button__giSqA {
-    anchor-name: var(--anchor-name);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-family: var(--typography-paragraph-body-font-family);
-    font-weight: var(--typography-paragraph-body-font-weight);
-    font-size: var(--typography-paragraph-body-font-size);
-    line-height: var(--typography-paragraph-body-line-height);
-    letter-spacing: var(--typography-paragraph-body-letter-spacing);
-    padding: var(--spacing-12);
-    min-height: var(--spacing-48);
-    min-width: var(--spacing-200);
-    background-color: var(--color-white);
-    border-radius: var(--spacing-8);
-    border: 1px solid var(--color-gray-500);
-  }
-}
-
 @layer kz-components {
   .Popover-module_popover__BjY2S {
     position: absolute;
@@ -78,6 +58,26 @@
   }
 }
 
+@layer kz-components {
+  .Trigger-module_button__giSqA {
+    anchor-name: var(--anchor-name);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-family: var(--typography-paragraph-body-font-family);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+    padding: var(--spacing-12);
+    min-height: var(--spacing-48);
+    min-width: var(--spacing-200);
+    background-color: var(--color-white);
+    border-radius: var(--spacing-8);
+    border: 1px solid var(--color-gray-500);
+  }
+}
+
 @layer kz-components {
   /*
  * This is taken from the Material Symbols CDN

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.80.5",
+  "version": "1.80.6",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",