@atlaskit/forge-react-types 0.42.9 → 0.42.11

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/forge-react-types
 
+## 0.42.11
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.42.10
+
+### Patch Changes
+
+- [#186460](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/186460)
+  [`a06d9cf8482bf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a06d9cf8482bf) -
+  Improve prop types for Checkbox, EmptyState, ErrorMessage, and Lozenge components
+- Updated dependencies
+
 ## 0.42.9
 
 ### Patch Changes

package/dist/types/components/__generated__/CheckboxProps.codegen.d.ts

@@ -3,14 +3,72 @@
  *
  * Extract component prop types from UIKit 2 components - CheckboxProps
  *
- * @codegen <<SignedSource::d5cd5c6518e80c98416fc61091717141>>
+ * @codegen <<SignedSource::634533a7eaed746ad58981b553539cdf>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
  * @codegenDependency ../../../../forge-ui/src/components/UIKit/checkbox/__generated__/index.partial.tsx <<SignedSource::e34c0ab52d3409a8548b6e51450ba43b>>
  */
-import React from 'react';
-import PlatformCheckbox from '@atlaskit/checkbox';
 import type { EventHandlerProps } from './types.codegen';
-type PlatformCheckboxProps = React.ComponentProps<typeof PlatformCheckbox>;
+import type React from 'react';
+type PlatformCheckboxProps = {
+    /**
+       * The name of the submitted field in a checkbox.
+       */
+    name?: string;
+    /**
+       * The value to be used in the checkbox input. This is the value that will be returned on form submission.
+       */
+    value?: string | number;
+    /**
+       * Sets whether the checkbox begins as checked or unchecked.
+       */
+    defaultChecked?: boolean;
+    /**
+       * The ID assigned to the input.
+       */
+    id?: string;
+    /**
+           * Indicates the entered value does not conform to the format expected by the application.
+           * @see aria-errormessage.
+           */
+    "aria-invalid"?: false | true | 'false' | 'true' | 'grammar' | 'spelling';
+    /**
+           * Identifies the element (or elements) that labels the current element.
+           * @see aria-describedby.
+           */
+    "aria-labelledby"?: string;
+    /**
+       * Sets whether the checkbox is checked or unchecked.
+       */
+    isChecked?: boolean;
+    /**
+       * Sets whether the checkbox is disabled. Don’t use a disabled checkbox if it needs to remain in the tab order for assistive technologies.
+       */
+    isDisabled?: boolean;
+    /**
+       * Sets whether the checkbox is indeterminate. This only affects the
+       * style and does not modify the isChecked property.
+       */
+    isIndeterminate?: boolean;
+    /**
+       * Marks the field as invalid. Changes style of unchecked component.
+       */
+    isInvalid?: boolean;
+    /**
+       * Marks the field as required & changes the label style.
+       */
+    isRequired?: boolean;
+    /**
+       * The label to be displayed to the right of the checkbox. The label is part
+       * of the clickable element to select the checkbox.
+       */
+    label?: React.ReactChild;
+    /**
+       * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
+       * we have generated testid based on the one you pass to the Checkbox component:
+       * - `{testId}--hidden-checkbox` to check if it got changed to checked/unchecked.
+       */
+    testId?: string;
+};
 export type CheckboxProps = Pick<PlatformCheckboxProps, 'testId' | 'defaultChecked' | 'isChecked' | 'isIndeterminate' | 'label' | 'id' | 'isRequired' | 'isDisabled' | 'isInvalid' | 'value' | 'aria-invalid' | 'aria-labelledby' | 'name'> & Pick<EventHandlerProps, 'onChange' | 'onBlur' | 'onFocus'>;
 /**
  * A checkbox is an input control that allows a user to select one or more options from a number of choices.

package/dist/types/components/__generated__/EmptyStateProps.codegen.d.ts

@@ -3,13 +3,54 @@
  *
  * Extract component prop types from UIKit 2 components - EmptyStateProps
  *
- * @codegen <<SignedSource::142748ed4aa864312e3b9ea16f297672>>
+ * @codegen <<SignedSource::62fe186d8326a7c3e8533e18dba9fcfb>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
  * @codegenDependency ../../../../forge-ui/src/components/UIKit/emptystate/__generated__/index.partial.tsx <<SignedSource::d6c509a722d55de0f55d401cd2e75435>>
  */
-import React from 'react';
-import PlatformEmptyState from '@atlaskit/empty-state';
-type PlatformEmptyStateProps = React.ComponentProps<typeof PlatformEmptyState>;
+import type React from 'react';
+type PlatformEmptyStateProps = {
+    /**
+       * Accessible name for the action buttons group of empty state. Can be used for internationalization. Default is "Button group".
+       */
+    buttonGroupLabel?: string;
+    /**
+       * The main block of text that holds additional supporting information.
+       */
+    description?: React.ReactNode;
+    /**
+       * Title that briefly describes the page to the user.
+       */
+    header: string;
+    /**
+       * The value used to set the heading level of the header element.
+       * Must be in the range of 1 to 6. Defaults to 4.
+       */
+    headingLevel?: number;
+    /**
+       * Used to indicate a loading state. Will show a spinner next to the action buttons when true.
+       */
+    isLoading?: boolean;
+    /**
+       * Primary action button for the page, usually it will be something like "Create" (or "Retry" for error pages).
+       */
+    primaryAction?: React.ReactNode;
+    /**
+       * Secondary action button for the page.
+       */
+    secondaryAction?: React.ReactNode;
+    /**
+       * Controls how much horizontal space the component fills. Defaults to "wide".
+       */
+    width?: 'narrow' | 'wide';
+    /**
+       * Button with link to some external resource like documentation or tutorial, it will be opened in a new tab.
+       */
+    tertiaryAction?: React.ReactNode;
+    /**
+       * A hook for automated testing.
+       */
+    testId?: string;
+};
 export type EmptyStateProps = Pick<PlatformEmptyStateProps, 'buttonGroupLabel' | 'description' | 'header' | 'headingLevel' | 'isLoading' | 'primaryAction' | 'secondaryAction' | 'tertiaryAction' | 'testId' | 'width'>;
 /**
  * An empty state appears when there is no data to display and describes what the user can do next.

package/dist/types/components/__generated__/ErrorMessageProps.codegen.d.ts

@@ -3,13 +3,23 @@
  *
  * Extract component prop types from UIKit 2 components - ErrorMessageProps
  *
- * @codegen <<SignedSource::f2821b3d824a19e37d6d769695a883f4>>
+ * @codegen <<SignedSource::e5e94f85cf8efd7d6cc06b1355785c4b>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
  * @codegenDependency ../../../../forge-ui/src/components/UIKit/form/__generated__/error-message.partial.tsx <<SignedSource::3758488a0115c629a624fcaae1f524c7>>
  */
-import React from 'react';
-import { ErrorMessage as PlatformErrorMessage } from '@atlaskit/form';
-type PlatformErrorMessageProps = React.ComponentProps<typeof PlatformErrorMessage>;
+import type React from 'react';
+type PlatformErrorMessageProps = {
+    /**
+       * The content of the message
+       */
+    children: React.ReactNode;
+    /**
+       * A testId prop is provided for specified elements, which is a unique string
+       *  that appears as a data attribute data-testid in the rendered code,
+       *  serving as a hook for automated tests
+       */
+    testId?: string;
+};
 export type ErrorMessageProps = Pick<PlatformErrorMessageProps, 'children' | 'testId'>;
 /**
  * An error message is used to tell a user that the field input is invalid.

package/dist/types/components/__generated__/LozengeProps.codegen.d.ts

@@ -3,13 +3,35 @@
  *
  * Extract component prop types from UIKit 2 components - LozengeProps
  *
- * @codegen <<SignedSource::25dee9ab928c0059e43d176df9313264>>
+ * @codegen <<SignedSource::0ef732d9e1b715ee6f4229d3ef5b4649>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
  * @codegenDependency ../../../../forge-ui/src/components/UIKit/lozenge/__generated__/index.partial.tsx <<SignedSource::e362dbb308b0f7785d47bb5e9aa46ab0>>
  */
-import React from 'react';
-import PlatformLozenge from '@atlaskit/lozenge';
-type PlatformLozengeProps = React.ComponentProps<typeof PlatformLozenge>;
+import type React from 'react';
+type PlatformLozengeProps = {
+    /**
+       * Elements to be rendered inside the lozenge. This should ideally be just a word or two.
+       */
+    children?: React.ReactNode;
+    /**
+       * A `testId` prop is provided for specified elements, which is a unique
+       * string that appears as a data attribute `data-testid` in the rendered code,
+       * serving as a hook for automated tests
+       */
+    testId?: string;
+    /**
+       * Determines whether to apply the bold style or not.
+       */
+    isBold?: boolean;
+    /**
+       * The appearance type.
+       */
+    appearance?: 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success';
+    /**
+       * max-width of lozenge container. Default to 200px.
+       */
+    maxWidth?: string | number;
+};
 export type LozengeProps = Pick<PlatformLozengeProps, 'appearance' | 'children' | 'isBold' | 'maxWidth' | 'testId'>;
 /**
  * A lozenge is a visual indicator used to highlight an item's status for quick recognition.

package/dist/types-ts4.5/components/__generated__/CheckboxProps.codegen.d.ts

@@ -3,14 +3,72 @@
  *
  * Extract component prop types from UIKit 2 components - CheckboxProps
  *
- * @codegen <<SignedSource::d5cd5c6518e80c98416fc61091717141>>
+ * @codegen <<SignedSource::634533a7eaed746ad58981b553539cdf>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
  * @codegenDependency ../../../../forge-ui/src/components/UIKit/checkbox/__generated__/index.partial.tsx <<SignedSource::e34c0ab52d3409a8548b6e51450ba43b>>
  */
-import React from 'react';
-import PlatformCheckbox from '@atlaskit/checkbox';
 import type { EventHandlerProps } from './types.codegen';
-type PlatformCheckboxProps = React.ComponentProps<typeof PlatformCheckbox>;
+import type React from 'react';
+type PlatformCheckboxProps = {
+    /**
+       * The name of the submitted field in a checkbox.
+       */
+    name?: string;
+    /**
+       * The value to be used in the checkbox input. This is the value that will be returned on form submission.
+       */
+    value?: string | number;
+    /**
+       * Sets whether the checkbox begins as checked or unchecked.
+       */
+    defaultChecked?: boolean;
+    /**
+       * The ID assigned to the input.
+       */
+    id?: string;
+    /**
+           * Indicates the entered value does not conform to the format expected by the application.
+           * @see aria-errormessage.
+           */
+    "aria-invalid"?: false | true | 'false' | 'true' | 'grammar' | 'spelling';
+    /**
+           * Identifies the element (or elements) that labels the current element.
+           * @see aria-describedby.
+           */
+    "aria-labelledby"?: string;
+    /**
+       * Sets whether the checkbox is checked or unchecked.
+       */
+    isChecked?: boolean;
+    /**
+       * Sets whether the checkbox is disabled. Don’t use a disabled checkbox if it needs to remain in the tab order for assistive technologies.
+       */
+    isDisabled?: boolean;
+    /**
+       * Sets whether the checkbox is indeterminate. This only affects the
+       * style and does not modify the isChecked property.
+       */
+    isIndeterminate?: boolean;
+    /**
+       * Marks the field as invalid. Changes style of unchecked component.
+       */
+    isInvalid?: boolean;
+    /**
+       * Marks the field as required & changes the label style.
+       */
+    isRequired?: boolean;
+    /**
+       * The label to be displayed to the right of the checkbox. The label is part
+       * of the clickable element to select the checkbox.
+       */
+    label?: React.ReactChild;
+    /**
+       * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
+       * we have generated testid based on the one you pass to the Checkbox component:
+       * - `{testId}--hidden-checkbox` to check if it got changed to checked/unchecked.
+       */
+    testId?: string;
+};
 export type CheckboxProps = Pick<PlatformCheckboxProps, 'testId' | 'defaultChecked' | 'isChecked' | 'isIndeterminate' | 'label' | 'id' | 'isRequired' | 'isDisabled' | 'isInvalid' | 'value' | 'aria-invalid' | 'aria-labelledby' | 'name'> & Pick<EventHandlerProps, 'onChange' | 'onBlur' | 'onFocus'>;
 /**
  * A checkbox is an input control that allows a user to select one or more options from a number of choices.

package/dist/types-ts4.5/components/__generated__/EmptyStateProps.codegen.d.ts

@@ -3,13 +3,54 @@
  *
  * Extract component prop types from UIKit 2 components - EmptyStateProps
  *
- * @codegen <<SignedSource::142748ed4aa864312e3b9ea16f297672>>
+ * @codegen <<SignedSource::62fe186d8326a7c3e8533e18dba9fcfb>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
  * @codegenDependency ../../../../forge-ui/src/components/UIKit/emptystate/__generated__/index.partial.tsx <<SignedSource::d6c509a722d55de0f55d401cd2e75435>>
  */
-import React from 'react';
-import PlatformEmptyState from '@atlaskit/empty-state';
-type PlatformEmptyStateProps = React.ComponentProps<typeof PlatformEmptyState>;
+import type React from 'react';
+type PlatformEmptyStateProps = {
+    /**
+       * Accessible name for the action buttons group of empty state. Can be used for internationalization. Default is "Button group".
+       */
+    buttonGroupLabel?: string;
+    /**
+       * The main block of text that holds additional supporting information.
+       */
+    description?: React.ReactNode;
+    /**
+       * Title that briefly describes the page to the user.
+       */
+    header: string;
+    /**
+       * The value used to set the heading level of the header element.
+       * Must be in the range of 1 to 6. Defaults to 4.
+       */
+    headingLevel?: number;
+    /**
+       * Used to indicate a loading state. Will show a spinner next to the action buttons when true.
+       */
+    isLoading?: boolean;
+    /**
+       * Primary action button for the page, usually it will be something like "Create" (or "Retry" for error pages).
+       */
+    primaryAction?: React.ReactNode;
+    /**
+       * Secondary action button for the page.
+       */
+    secondaryAction?: React.ReactNode;
+    /**
+       * Controls how much horizontal space the component fills. Defaults to "wide".
+       */
+    width?: 'narrow' | 'wide';
+    /**
+       * Button with link to some external resource like documentation or tutorial, it will be opened in a new tab.
+       */
+    tertiaryAction?: React.ReactNode;
+    /**
+       * A hook for automated testing.
+       */
+    testId?: string;
+};
 export type EmptyStateProps = Pick<PlatformEmptyStateProps, 'buttonGroupLabel' | 'description' | 'header' | 'headingLevel' | 'isLoading' | 'primaryAction' | 'secondaryAction' | 'tertiaryAction' | 'testId' | 'width'>;
 /**
  * An empty state appears when there is no data to display and describes what the user can do next.

package/dist/types-ts4.5/components/__generated__/ErrorMessageProps.codegen.d.ts

@@ -3,13 +3,23 @@
  *
  * Extract component prop types from UIKit 2 components - ErrorMessageProps
  *
- * @codegen <<SignedSource::f2821b3d824a19e37d6d769695a883f4>>
+ * @codegen <<SignedSource::e5e94f85cf8efd7d6cc06b1355785c4b>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
  * @codegenDependency ../../../../forge-ui/src/components/UIKit/form/__generated__/error-message.partial.tsx <<SignedSource::3758488a0115c629a624fcaae1f524c7>>
  */
-import React from 'react';
-import { ErrorMessage as PlatformErrorMessage } from '@atlaskit/form';
-type PlatformErrorMessageProps = React.ComponentProps<typeof PlatformErrorMessage>;
+import type React from 'react';
+type PlatformErrorMessageProps = {
+    /**
+       * The content of the message
+       */
+    children: React.ReactNode;
+    /**
+       * A testId prop is provided for specified elements, which is a unique string
+       *  that appears as a data attribute data-testid in the rendered code,
+       *  serving as a hook for automated tests
+       */
+    testId?: string;
+};
 export type ErrorMessageProps = Pick<PlatformErrorMessageProps, 'children' | 'testId'>;
 /**
  * An error message is used to tell a user that the field input is invalid.

package/dist/types-ts4.5/components/__generated__/LozengeProps.codegen.d.ts

@@ -3,13 +3,35 @@
  *
  * Extract component prop types from UIKit 2 components - LozengeProps
  *
- * @codegen <<SignedSource::25dee9ab928c0059e43d176df9313264>>
+ * @codegen <<SignedSource::0ef732d9e1b715ee6f4229d3ef5b4649>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
  * @codegenDependency ../../../../forge-ui/src/components/UIKit/lozenge/__generated__/index.partial.tsx <<SignedSource::e362dbb308b0f7785d47bb5e9aa46ab0>>
  */
-import React from 'react';
-import PlatformLozenge from '@atlaskit/lozenge';
-type PlatformLozengeProps = React.ComponentProps<typeof PlatformLozenge>;
+import type React from 'react';
+type PlatformLozengeProps = {
+    /**
+       * Elements to be rendered inside the lozenge. This should ideally be just a word or two.
+       */
+    children?: React.ReactNode;
+    /**
+       * A `testId` prop is provided for specified elements, which is a unique
+       * string that appears as a data attribute `data-testid` in the rendered code,
+       * serving as a hook for automated tests
+       */
+    testId?: string;
+    /**
+       * Determines whether to apply the bold style or not.
+       */
+    isBold?: boolean;
+    /**
+       * The appearance type.
+       */
+    appearance?: 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success';
+    /**
+       * max-width of lozenge container. Default to 200px.
+       */
+    maxWidth?: string | number;
+};
 export type LozengeProps = Pick<PlatformLozengeProps, 'appearance' | 'children' | 'isBold' | 'maxWidth' | 'testId'>;
 /**
  * A lozenge is a visual indicator used to highlight an item's status for quick recognition.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/forge-react-types",
-	"version": "0.42.9",
+	"version": "0.42.11",
 	"description": "Component types for Forge UI Kit React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -24,32 +24,29 @@
 		"team": "Forge UI"
 	},
 	"dependencies": {
-		"@atlaskit/button": "^23.2.0",
-		"@atlaskit/checkbox": "^17.1.0",
+		"@atlaskit/button": "^23.3.0",
 		"@atlaskit/comment": "^13.0.0",
 		"@atlaskit/datetime-picker": "^17.0.0",
 		"@atlaskit/dynamic-table": "^18.2.0",
-		"@atlaskit/empty-state": "^10.1.0",
 		"@atlaskit/form": "^12.0.0",
 		"@atlaskit/inline-edit": "^15.3.0",
-		"@atlaskit/lozenge": "^13.0.0",
-		"@atlaskit/modal-dialog": "^14.2.0",
+		"@atlaskit/modal-dialog": "^14.3.0",
 		"@atlaskit/popup": "^4.3.0",
 		"@atlaskit/primitives": "^14.10.0",
 		"@atlaskit/progress-bar": "^4.0.0",
-		"@atlaskit/progress-tracker": "^10.2.0",
+		"@atlaskit/progress-tracker": "^10.3.0",
 		"@atlaskit/radio": "^8.1.0",
-		"@atlaskit/section-message": "^8.2.0",
-		"@atlaskit/select": "^21.1.0",
-		"@atlaskit/spinner": "^18.0.0",
+		"@atlaskit/section-message": "^8.5.0",
+		"@atlaskit/select": "^21.2.0",
+		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/tabs": "^18.1.0",
-		"@atlaskit/tag": "^14.0.0",
+		"@atlaskit/tag": "^14.1.0",
 		"@atlaskit/tag-group": "^12.0.0",
 		"@atlaskit/textarea": "^8.0.0",
 		"@atlaskit/textfield": "^8.0.0",
-		"@atlaskit/toggle": "^15.0.0",
-		"@atlaskit/tokens": "^5.4.0",
-		"@atlaskit/tooltip": "^20.3.0",
+		"@atlaskit/toggle": "^15.1.0",
+		"@atlaskit/tokens": "^5.6.0",
+		"@atlaskit/tooltip": "^20.4.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
@@ -57,7 +54,7 @@
 	},
 	"devDependencies": {
 		"@atlassian/codegen": "^0.1.0",
-		"@atlassian/forge-ui": "^32.24.0",
+		"@atlassian/forge-ui": "^32.28.0",
 		"@types/node": "~20.16.5",
 		"lodash": "^4.17.21",
 		"react": "^18.2.0",

package/scripts/codegen/codeGenerator.ts

@@ -578,7 +578,7 @@ const registeredExternalTypes: Record<
 		defaultImport: string;
 	}
 > = {
-	'^React\..+$': {
+	'^React..+$': {
 		package: 'react',
 		defaultImport: 'React',
 	},
@@ -824,9 +824,13 @@ const codeConsolidators: Record<string, CodeConsolidator> = {
 
 const typeSerializableComponentPropSymbols = [
 	'CalendarProps',
+	'CheckboxProps',
 	'CodeProps',
 	'CodeBlockProps',
 	'BadgeProps',
+	'EmptyStateProps',
+	'ErrorMessageProps',
+	'LozengeProps',
 	'HeadingProps',
 	'RangeProps',
 ];

package/scripts/typechecker.ts

@@ -2,16 +2,24 @@
 import {
 	type BadgeProps,
 	type CalendarProps,
+	type CheckboxProps,
 	type CodeBlockProps,
 	type CodeProps,
+	type EmptyStateProps,
+	type ErrorMessageProps,
 	type HeadingProps,
+	type LozengeProps,
 	type RangeProps,
 } from '@atlassian/forge-ui/src/components/UIKit';
 import { type BadgeProps as GeneratedBadgeProps } from '../src/components/__generated__/BadgeProps.codegen';
 import { type CalendarProps as GeneratedCalendarProps } from '../src/components/__generated__/CalendarProps.codegen';
+import { type CheckboxProps as GeneratedCheckboxProps } from '../src/components/__generated__/CheckboxProps.codegen';
 import { type CodeBlockProps as GeneratedCodeBlockProps } from '../src/components/__generated__/CodeBlockProps.codegen';
 import { type CodeProps as GeneratedCodeProps } from '../src/components/__generated__/CodeProps.codegen';
+import { type EmptyStateProps as GeneratedEmptyStateProps } from '../src/components/__generated__/EmptyStateProps.codegen';
+import { type ErrorMessageProps as GeneratedErrorMessageProps } from '../src/components/__generated__/ErrorMessageProps.codegen';
 import { type HeadingProps as GeneratedHeadingProps } from '../src/components/__generated__/HeadingProps.codegen';
+import { type LozengeProps as GeneratedLozengeProps } from '../src/components/__generated__/LozengeProps.codegen';
 import { type RangeProps as GeneratedRangeProps } from '../src/components/__generated__/RangeProps.codegen';
 
 const assertAssignable = <A, B extends A>() => {};
@@ -33,3 +41,15 @@ assertAssignable<RangeProps, GeneratedRangeProps>();
 
 assertAssignable<GeneratedCalendarProps, CalendarProps>();
 assertAssignable<CalendarProps, GeneratedCalendarProps>();
+
+assertAssignable<GeneratedCheckboxProps, CheckboxProps>();
+assertAssignable<CheckboxProps, GeneratedCheckboxProps>();
+
+assertAssignable<GeneratedEmptyStateProps, EmptyStateProps>();
+assertAssignable<EmptyStateProps, GeneratedEmptyStateProps>();
+
+assertAssignable<GeneratedErrorMessageProps, ErrorMessageProps>();
+assertAssignable<ErrorMessageProps, GeneratedErrorMessageProps>();
+
+assertAssignable<GeneratedLozengeProps, LozengeProps>();
+assertAssignable<LozengeProps, GeneratedLozengeProps>();

package/src/components/__generated__/CheckboxProps.codegen.tsx

@@ -3,17 +3,77 @@
  *
  * Extract component prop types from UIKit 2 components - CheckboxProps
  *
- * @codegen <<SignedSource::d5cd5c6518e80c98416fc61091717141>>
+ * @codegen <<SignedSource::634533a7eaed746ad58981b553539cdf>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
  * @codegenDependency ../../../../forge-ui/src/components/UIKit/checkbox/__generated__/index.partial.tsx <<SignedSource::e34c0ab52d3409a8548b6e51450ba43b>>
  */
 /* eslint @repo/internal/codegen/signed-source-integrity: "warn" */
 
-import React from 'react';
-import PlatformCheckbox from '@atlaskit/checkbox';
 import type { EventHandlerProps } from './types.codegen';
+import type React from 'react';
 
-type PlatformCheckboxProps = React.ComponentProps<typeof PlatformCheckbox>;
+
+// Serialized type
+type PlatformCheckboxProps = {
+  /**
+	 * The name of the submitted field in a checkbox.
+	 */
+	name?: string;
+  /**
+	 * The value to be used in the checkbox input. This is the value that will be returned on form submission.
+	 */
+	value?: string | number;
+  /**
+	 * Sets whether the checkbox begins as checked or unchecked.
+	 */
+	defaultChecked?: boolean;
+  /**
+	 * The ID assigned to the input.
+	 */
+	id?: string;
+  /**
+         * Indicates the entered value does not conform to the format expected by the application.
+         * @see aria-errormessage.
+         */
+	"aria-invalid"?: false | true | 'false' | 'true' | 'grammar' | 'spelling';
+  /**
+         * Identifies the element (or elements) that labels the current element.
+         * @see aria-describedby.
+         */
+	"aria-labelledby"?: string;
+  /**
+	 * Sets whether the checkbox is checked or unchecked.
+	 */
+	isChecked?: boolean;
+  /**
+	 * Sets whether the checkbox is disabled. Don’t use a disabled checkbox if it needs to remain in the tab order for assistive technologies.
+	 */
+	isDisabled?: boolean;
+  /**
+	 * Sets whether the checkbox is indeterminate. This only affects the
+	 * style and does not modify the isChecked property.
+	 */
+	isIndeterminate?: boolean;
+  /**
+	 * Marks the field as invalid. Changes style of unchecked component.
+	 */
+	isInvalid?: boolean;
+  /**
+	 * Marks the field as required & changes the label style.
+	 */
+	isRequired?: boolean;
+  /**
+	 * The label to be displayed to the right of the checkbox. The label is part
+	 * of the clickable element to select the checkbox.
+	 */
+	label?: React.ReactChild;
+  /**
+	 * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
+	 * we have generated testid based on the one you pass to the Checkbox component:
+	 * - `{testId}--hidden-checkbox` to check if it got changed to checked/unchecked.
+	 */
+	testId?: string;
+};
 
 export type CheckboxProps = Pick<
   PlatformCheckboxProps,

package/src/components/__generated__/EmptyStateProps.codegen.tsx

@@ -3,16 +3,59 @@
  *
  * Extract component prop types from UIKit 2 components - EmptyStateProps
  *
- * @codegen <<SignedSource::142748ed4aa864312e3b9ea16f297672>>
+ * @codegen <<SignedSource::62fe186d8326a7c3e8533e18dba9fcfb>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
  * @codegenDependency ../../../../forge-ui/src/components/UIKit/emptystate/__generated__/index.partial.tsx <<SignedSource::d6c509a722d55de0f55d401cd2e75435>>
  */
 /* eslint @repo/internal/codegen/signed-source-integrity: "warn" */
 
-import React from 'react';
-import PlatformEmptyState from '@atlaskit/empty-state';
+import type React from 'react';
 
-type PlatformEmptyStateProps = React.ComponentProps<typeof PlatformEmptyState>;
+
+// Serialized type
+type PlatformEmptyStateProps = {
+  /**
+	 * Accessible name for the action buttons group of empty state. Can be used for internationalization. Default is "Button group".
+	 */
+	buttonGroupLabel?: string;
+  /**
+	 * The main block of text that holds additional supporting information.
+	 */
+	description?: React.ReactNode;
+  /**
+	 * Title that briefly describes the page to the user.
+	 */
+	header: string;
+  /**
+	 * The value used to set the heading level of the header element.
+	 * Must be in the range of 1 to 6. Defaults to 4.
+	 */
+	headingLevel?: number;
+  /**
+	 * Used to indicate a loading state. Will show a spinner next to the action buttons when true.
+	 */
+	isLoading?: boolean;
+  /**
+	 * Primary action button for the page, usually it will be something like "Create" (or "Retry" for error pages).
+	 */
+	primaryAction?: React.ReactNode;
+  /**
+	 * Secondary action button for the page.
+	 */
+	secondaryAction?: React.ReactNode;
+  /**
+	 * Controls how much horizontal space the component fills. Defaults to "wide".
+	 */
+	width?: 'narrow' | 'wide';
+  /**
+	 * Button with link to some external resource like documentation or tutorial, it will be opened in a new tab.
+	 */
+	tertiaryAction?: React.ReactNode;
+  /**
+	 * A hook for automated testing.
+	 */
+	testId?: string;
+};
 
 export type EmptyStateProps = Pick<
   PlatformEmptyStateProps,

package/src/components/__generated__/ErrorMessageProps.codegen.tsx

@@ -3,16 +3,28 @@
  *
  * Extract component prop types from UIKit 2 components - ErrorMessageProps
  *
- * @codegen <<SignedSource::f2821b3d824a19e37d6d769695a883f4>>
+ * @codegen <<SignedSource::e5e94f85cf8efd7d6cc06b1355785c4b>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
  * @codegenDependency ../../../../forge-ui/src/components/UIKit/form/__generated__/error-message.partial.tsx <<SignedSource::3758488a0115c629a624fcaae1f524c7>>
  */
 /* eslint @repo/internal/codegen/signed-source-integrity: "warn" */
 
-import React from 'react';
-import { ErrorMessage as PlatformErrorMessage } from '@atlaskit/form';
+import type React from 'react';
 
-type PlatformErrorMessageProps = React.ComponentProps<typeof PlatformErrorMessage>;
+
+// Serialized type
+type PlatformErrorMessageProps = {
+  /**
+	 * The content of the message
+	 */
+	children: React.ReactNode;
+  /**
+	 * A testId prop is provided for specified elements, which is a unique string
+	 *  that appears as a data attribute data-testid in the rendered code,
+	 *  serving as a hook for automated tests
+	 */
+	testId?: string;
+};
 
 export type ErrorMessageProps = Pick<
   PlatformErrorMessageProps,

package/src/components/__generated__/LozengeProps.codegen.tsx

@@ -3,16 +3,40 @@
  *
  * Extract component prop types from UIKit 2 components - LozengeProps
  *
- * @codegen <<SignedSource::25dee9ab928c0059e43d176df9313264>>
+ * @codegen <<SignedSource::0ef732d9e1b715ee6f4229d3ef5b4649>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
  * @codegenDependency ../../../../forge-ui/src/components/UIKit/lozenge/__generated__/index.partial.tsx <<SignedSource::e362dbb308b0f7785d47bb5e9aa46ab0>>
  */
 /* eslint @repo/internal/codegen/signed-source-integrity: "warn" */
 
-import React from 'react';
-import PlatformLozenge from '@atlaskit/lozenge';
+import type React from 'react';
 
-type PlatformLozengeProps = React.ComponentProps<typeof PlatformLozenge>;
+
+// Serialized type
+type PlatformLozengeProps = {
+  /**
+	 * Elements to be rendered inside the lozenge. This should ideally be just a word or two.
+	 */
+	children?: React.ReactNode;
+  /**
+	 * A `testId` prop is provided for specified elements, which is a unique
+	 * string that appears as a data attribute `data-testid` in the rendered code,
+	 * serving as a hook for automated tests
+	 */
+	testId?: string;
+  /**
+	 * Determines whether to apply the bold style or not.
+	 */
+	isBold?: boolean;
+  /**
+	 * The appearance type.
+	 */
+	appearance?: 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success';
+  /**
+	 * max-width of lozenge container. Default to 200px.
+	 */
+	maxWidth?: string | number;
+};
 
 export type LozengeProps = Pick<
   PlatformLozengeProps,