@atlaskit/forge-react-types 0.52.1 → 0.53.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/forge-react-types
 
+## 0.53.0
+
+### Minor Changes
+
+- [`6f93643f9e844`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6f93643f9e844) -
+  [ux] Addition of Tile component for Forge UIKit
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.52.2
+
+### Patch Changes
+
+- [`baaa9523c646c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/baaa9523c646c) -
+  Update Lozenge and Badge prop types
+
 ## 0.52.1
 
 ### Patch Changes

package/dist/cjs/components/__generated__/TileProps.codegen.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/es2019/components/__generated__/TileProps.codegen.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/__generated__/TileProps.codegen.js

@@ -0,0 +1 @@
+export {};

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

@@ -3,9 +3,9 @@
  *
  * Extract component prop types from UIKit 2 components - BadgeProps
  *
- * @codegen <<SignedSource::dded43c94e5bc997c5df041eeb253927>>
+ * @codegen <<SignedSource::9d4cb948f5d6ac145a3d3e82ab8cfa92>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit/badge/__generated__/index.partial.tsx <<SignedSource::002a848f01b18a8dea0ea160d731edbf>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/badge/__generated__/index.partial.tsx <<SignedSource::f9bf0bacecb91875eab391c4148409c1>>
  */
 import type React from 'react';
 export type PlatformBadgeProps = Omit<_PlatformBadgeProps, 'children'> & {
@@ -20,7 +20,7 @@ type _PlatformBadgeProps = {
     /**
        * Affects the visual style of the badge.
        */
-    appearance?: 'added' | 'default' | 'important' | 'primary' | 'primaryInverted' | 'removed';
+    appearance?: 'added' | 'default' | 'important' | 'primary' | 'primaryInverted' | 'removed' | 'warning' | 'discovery' | 'danger' | 'neutral' | 'success' | 'information' | 'inverse';
     children?: React.ReactNode;
     /**
        * The maximum value to display. Defaults to `99`. If the value is 100, and max is 50, "50+" will be displayed.

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

@@ -3,34 +3,36 @@
  *
  * Extract component prop types from UIKit 2 components - LozengeProps
  *
- * @codegen <<SignedSource::2c6d1eb88477563937e65c98996d0b92>>
+ * @codegen <<SignedSource::abe727d97158c4d16d13504ebd7f60d6>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit/lozenge/__generated__/index.partial.tsx <<SignedSource::5e9e88bd5dd513ba567d815ada9e7eae>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/lozenge/__generated__/index.partial.tsx <<SignedSource::9799ca9fa788b29c08dfbdb778da62b4>>
  */
 import type React from 'react';
 type PlatformLozengeProps = {
     /**
-       * Elements to be rendered inside the lozenge. This should ideally be just a word or two.
+       * The appearance of the lozenge. Supports both legacy semantic appearances and new accent/semantic colors.
+       * Legacy appearances (default, success, removed, inprogress, new, moved) are automatically mapped to the new semantic colors.
        */
-    children?: React.ReactNode;
+    appearance?: 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success' | 'warning' | 'danger' | 'information' | 'neutral' | 'discovery' | 'accent-red' | 'accent-orange' | 'accent-yellow' | 'accent-lime' | 'accent-green' | 'accent-teal' | 'accent-blue' | 'accent-purple' | 'accent-magenta' | 'accent-gray';
     /**
-       * 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
+       * Elements to be rendered inside the lozenge. This should ideally be just a word or two.
        */
-    testId?: string;
+    children?: React.ReactNode;
     /**
        * Determines whether to apply the bold style or not.
+       * @deprecated This prop is deprecated and will be removed in an upcoming major release. Use Tag component for non-bold styles.
        */
     isBold?: boolean;
-    /**
-       * The appearance type.
-       */
-    appearance?: 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success';
     /**
        * max-width of lozenge container. Default to 200px.
        */
     maxWidth?: string | number;
+    /**
+       * 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 LozengeProps = Pick<PlatformLozengeProps, 'appearance' | 'children' | 'isBold' | 'maxWidth' | 'testId'>;
 /**

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

@@ -0,0 +1,20 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * Extract component prop types from UIKit 2 components - TileProps
+ *
+ * @codegen <<SignedSource::8b1e13d93e3348f59fa7b79a0da227aa>>
+ * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/tile/__generated__/index.partial.tsx <<SignedSource::d7ec62556fa495888b1d4326b71c4d52>>
+ */
+import React from 'react';
+import PlatformTile from '@atlaskit/tile';
+type PlatformTileProps = React.ComponentProps<typeof PlatformTile>;
+export type TileProps = Pick<PlatformTileProps, 'backgroundColor' | 'label' | 'size' | 'children' | 'hasBorder' | 'isInset' | 'testId'>;
+/**
+ * A tile is a rounded square that takes an asset and represents a noun.
+ *
+ * @see [Tile](https://developer.atlassian.com/platform/forge/ui-kit/components/tile/) in UI Kit documentation for more information
+ */
+export type TTile<T> = (props: TileProps) => T;
+export {};

package/dist/types/components/__generated__/index.d.ts

@@ -54,6 +54,7 @@ export type { TagGroupProps, TTagGroup } from './TagGroupProps.codegen';
 export type { SimpleTagProps as TagProps, TSimpleTag as TTag } from './TagProps.codegen';
 export type { TextAreaProps, TTextArea } from './TextAreaProps.codegen';
 export type { TextfieldProps, TTextfield } from './TextfieldProps.codegen';
+export type { TileProps, TTile } from './TileProps.codegen';
 export type { TimePickerProps, TTimePicker } from './TimePickerProps.codegen';
 export type { ToggleProps, TToggle } from './ToggleProps.codegen';
 export type { TooltipProps, TTooltip } from './TooltipProps.codegen';

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export type { AdfRendererProps, BadgeProps, BoxProps, ButtonGroupProps, ButtonProps, CalendarProps, CheckboxProps, CheckboxGroupProps, CodeBlockProps, CodeProps, CommentProps, DatePickerProps, DynamicTableProps, EmptyStateProps, ErrorMessageProps, FlexProps, FormFooterProps, FormHeaderProps, FormProps, FormSectionProps, GridProps, HeadingProps, HelperMessageProps, IconProps, InlineProps, LabelProps, LinkButtonProps, ListProps, ListItemProps, LoadingButtonProps, LozengeProps, ModalBodyProps, ModalFooterProps, ModalHeaderProps, ModalProps, ModalTitleProps, ModalTransitionProps, ProgressBarProps, ProgressTrackerProps, RadioGroupProps, RadioProps, RangeProps, SectionMessageActionProps, SectionMessageProps, SelectProps, SpinnerProps, StackProps, TabListProps, TabPanelProps, TabProps, TabsProps, TagGroupProps, TagProps, TextProps, TextAreaProps, TextfieldProps, ToggleProps, TooltipProps, TimePickerProps, ValidMessageProps, PopupProps, InlineEditProps, PressableProps, TBadge, TBox, TButtonGroup, TButton, TCalendar, TCheckbox, TCheckboxGroup, TCodeBlock, TCode, TComment, TDatePicker, TDynamicTable, TEmptyState, TErrorMessage, TFileCard, TFlex, TFormFooter, TFormHeader, TForm, TFormSection, TGrid, THeading, THelperMessage, TIcon, TInline, TInlineEdit, TLabel, TLinkButton, TList, TListItem, TLoadingButton, TLozenge, TModalBody, TModalFooter, TModalHeader, TModal, TModalTitle, TModalTransition, TProgressBar, TProgressTracker, TRadioGroup, TRadio, TRange, TSectionMessageAction, TSectionMessage, TSelect, TSpinner, TStack, TTabList, TTabPanel, TTab, TTabs, TTagGroup, TTag, TTextArea, TTextfield, TTimePicker, TToggle, TTooltip, TValidMessage, TPopup, TAdfRenderer, TText, TPressable, TFilePicker, } from './components/__generated__';
+export type { AdfRendererProps, BadgeProps, BoxProps, ButtonGroupProps, ButtonProps, CalendarProps, CheckboxProps, CheckboxGroupProps, CodeBlockProps, CodeProps, CommentProps, DatePickerProps, DynamicTableProps, EmptyStateProps, ErrorMessageProps, FlexProps, FormFooterProps, FormHeaderProps, FormProps, FormSectionProps, GridProps, HeadingProps, HelperMessageProps, IconProps, InlineProps, LabelProps, LinkButtonProps, ListProps, ListItemProps, LoadingButtonProps, LozengeProps, ModalBodyProps, ModalFooterProps, ModalHeaderProps, ModalProps, ModalTitleProps, ModalTransitionProps, ProgressBarProps, ProgressTrackerProps, RadioGroupProps, RadioProps, RangeProps, SectionMessageActionProps, SectionMessageProps, SelectProps, SpinnerProps, StackProps, TabListProps, TabPanelProps, TabProps, TabsProps, TagGroupProps, TagProps, TextProps, TextAreaProps, TextfieldProps, TileProps, ToggleProps, TooltipProps, TimePickerProps, ValidMessageProps, PopupProps, InlineEditProps, PressableProps, TBadge, TBox, TButtonGroup, TButton, TCalendar, TCheckbox, TCheckboxGroup, TCodeBlock, TCode, TComment, TDatePicker, TDynamicTable, TEmptyState, TErrorMessage, TFileCard, TFlex, TFormFooter, TFormHeader, TForm, TFormSection, TGrid, THeading, THelperMessage, TIcon, TInline, TInlineEdit, TLabel, TLinkButton, TList, TListItem, TLoadingButton, TLozenge, TModalBody, TModalFooter, TModalHeader, TModal, TModalTitle, TModalTransition, TProgressBar, TProgressTracker, TRadioGroup, TRadio, TRange, TSectionMessageAction, TSectionMessage, TSelect, TSpinner, TStack, TTabList, TTabPanel, TTab, TTabs, TTagGroup, TTag, TTextArea, TTextfield, TTimePicker, TToggle, TTooltip, TValidMessage, TPopup, TAdfRenderer, TText, TPressable, TFilePicker, TTile, } from './components/__generated__';
 export type { BarChartProps, StackBarChartProps, HorizontalStackBarChartProps, HorizontalBarChartProps, LineChartProps, DonutChartProps, PieChartProps, TBarChart, TStackBarChart, THorizontalStackBarChart, THorizontalBarChart, TLineChart, TDonutChart, TPieChart, } from './components/charts';
 export type { ChromelessEditorProps, CommentEditorProps, TChromelessEditor, TCommentEditor, } from './components/editor';
 export type { ChartColorTokens } from './types';

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

@@ -3,9 +3,9 @@
  *
  * Extract component prop types from UIKit 2 components - BadgeProps
  *
- * @codegen <<SignedSource::dded43c94e5bc997c5df041eeb253927>>
+ * @codegen <<SignedSource::9d4cb948f5d6ac145a3d3e82ab8cfa92>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit/badge/__generated__/index.partial.tsx <<SignedSource::002a848f01b18a8dea0ea160d731edbf>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/badge/__generated__/index.partial.tsx <<SignedSource::f9bf0bacecb91875eab391c4148409c1>>
  */
 import type React from 'react';
 export type PlatformBadgeProps = Omit<_PlatformBadgeProps, 'children'> & {
@@ -20,7 +20,7 @@ type _PlatformBadgeProps = {
     /**
        * Affects the visual style of the badge.
        */
-    appearance?: 'added' | 'default' | 'important' | 'primary' | 'primaryInverted' | 'removed';
+    appearance?: 'added' | 'default' | 'important' | 'primary' | 'primaryInverted' | 'removed' | 'warning' | 'discovery' | 'danger' | 'neutral' | 'success' | 'information' | 'inverse';
     children?: React.ReactNode;
     /**
        * The maximum value to display. Defaults to `99`. If the value is 100, and max is 50, "50+" will be displayed.

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

@@ -3,34 +3,36 @@
  *
  * Extract component prop types from UIKit 2 components - LozengeProps
  *
- * @codegen <<SignedSource::2c6d1eb88477563937e65c98996d0b92>>
+ * @codegen <<SignedSource::abe727d97158c4d16d13504ebd7f60d6>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit/lozenge/__generated__/index.partial.tsx <<SignedSource::5e9e88bd5dd513ba567d815ada9e7eae>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/lozenge/__generated__/index.partial.tsx <<SignedSource::9799ca9fa788b29c08dfbdb778da62b4>>
  */
 import type React from 'react';
 type PlatformLozengeProps = {
     /**
-       * Elements to be rendered inside the lozenge. This should ideally be just a word or two.
+       * The appearance of the lozenge. Supports both legacy semantic appearances and new accent/semantic colors.
+       * Legacy appearances (default, success, removed, inprogress, new, moved) are automatically mapped to the new semantic colors.
        */
-    children?: React.ReactNode;
+    appearance?: 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success' | 'warning' | 'danger' | 'information' | 'neutral' | 'discovery' | 'accent-red' | 'accent-orange' | 'accent-yellow' | 'accent-lime' | 'accent-green' | 'accent-teal' | 'accent-blue' | 'accent-purple' | 'accent-magenta' | 'accent-gray';
     /**
-       * 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
+       * Elements to be rendered inside the lozenge. This should ideally be just a word or two.
        */
-    testId?: string;
+    children?: React.ReactNode;
     /**
        * Determines whether to apply the bold style or not.
+       * @deprecated This prop is deprecated and will be removed in an upcoming major release. Use Tag component for non-bold styles.
        */
     isBold?: boolean;
-    /**
-       * The appearance type.
-       */
-    appearance?: 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success';
     /**
        * max-width of lozenge container. Default to 200px.
        */
     maxWidth?: string | number;
+    /**
+       * 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 LozengeProps = Pick<PlatformLozengeProps, 'appearance' | 'children' | 'isBold' | 'maxWidth' | 'testId'>;
 /**

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

@@ -0,0 +1,20 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * Extract component prop types from UIKit 2 components - TileProps
+ *
+ * @codegen <<SignedSource::8b1e13d93e3348f59fa7b79a0da227aa>>
+ * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/tile/__generated__/index.partial.tsx <<SignedSource::d7ec62556fa495888b1d4326b71c4d52>>
+ */
+import React from 'react';
+import PlatformTile from '@atlaskit/tile';
+type PlatformTileProps = React.ComponentProps<typeof PlatformTile>;
+export type TileProps = Pick<PlatformTileProps, 'backgroundColor' | 'label' | 'size' | 'children' | 'hasBorder' | 'isInset' | 'testId'>;
+/**
+ * A tile is a rounded square that takes an asset and represents a noun.
+ *
+ * @see [Tile](https://developer.atlassian.com/platform/forge/ui-kit/components/tile/) in UI Kit documentation for more information
+ */
+export type TTile<T> = (props: TileProps) => T;
+export {};

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

@@ -54,6 +54,7 @@ export type { TagGroupProps, TTagGroup } from './TagGroupProps.codegen';
 export type { SimpleTagProps as TagProps, TSimpleTag as TTag } from './TagProps.codegen';
 export type { TextAreaProps, TTextArea } from './TextAreaProps.codegen';
 export type { TextfieldProps, TTextfield } from './TextfieldProps.codegen';
+export type { TileProps, TTile } from './TileProps.codegen';
 export type { TimePickerProps, TTimePicker } from './TimePickerProps.codegen';
 export type { ToggleProps, TToggle } from './ToggleProps.codegen';
 export type { TooltipProps, TTooltip } from './TooltipProps.codegen';

package/dist/types-ts4.5/index.d.ts

@@ -1,4 +1,4 @@
-export type { AdfRendererProps, BadgeProps, BoxProps, ButtonGroupProps, ButtonProps, CalendarProps, CheckboxProps, CheckboxGroupProps, CodeBlockProps, CodeProps, CommentProps, DatePickerProps, DynamicTableProps, EmptyStateProps, ErrorMessageProps, FlexProps, FormFooterProps, FormHeaderProps, FormProps, FormSectionProps, GridProps, HeadingProps, HelperMessageProps, IconProps, InlineProps, LabelProps, LinkButtonProps, ListProps, ListItemProps, LoadingButtonProps, LozengeProps, ModalBodyProps, ModalFooterProps, ModalHeaderProps, ModalProps, ModalTitleProps, ModalTransitionProps, ProgressBarProps, ProgressTrackerProps, RadioGroupProps, RadioProps, RangeProps, SectionMessageActionProps, SectionMessageProps, SelectProps, SpinnerProps, StackProps, TabListProps, TabPanelProps, TabProps, TabsProps, TagGroupProps, TagProps, TextProps, TextAreaProps, TextfieldProps, ToggleProps, TooltipProps, TimePickerProps, ValidMessageProps, PopupProps, InlineEditProps, PressableProps, TBadge, TBox, TButtonGroup, TButton, TCalendar, TCheckbox, TCheckboxGroup, TCodeBlock, TCode, TComment, TDatePicker, TDynamicTable, TEmptyState, TErrorMessage, TFileCard, TFlex, TFormFooter, TFormHeader, TForm, TFormSection, TGrid, THeading, THelperMessage, TIcon, TInline, TInlineEdit, TLabel, TLinkButton, TList, TListItem, TLoadingButton, TLozenge, TModalBody, TModalFooter, TModalHeader, TModal, TModalTitle, TModalTransition, TProgressBar, TProgressTracker, TRadioGroup, TRadio, TRange, TSectionMessageAction, TSectionMessage, TSelect, TSpinner, TStack, TTabList, TTabPanel, TTab, TTabs, TTagGroup, TTag, TTextArea, TTextfield, TTimePicker, TToggle, TTooltip, TValidMessage, TPopup, TAdfRenderer, TText, TPressable, TFilePicker, } from './components/__generated__';
+export type { AdfRendererProps, BadgeProps, BoxProps, ButtonGroupProps, ButtonProps, CalendarProps, CheckboxProps, CheckboxGroupProps, CodeBlockProps, CodeProps, CommentProps, DatePickerProps, DynamicTableProps, EmptyStateProps, ErrorMessageProps, FlexProps, FormFooterProps, FormHeaderProps, FormProps, FormSectionProps, GridProps, HeadingProps, HelperMessageProps, IconProps, InlineProps, LabelProps, LinkButtonProps, ListProps, ListItemProps, LoadingButtonProps, LozengeProps, ModalBodyProps, ModalFooterProps, ModalHeaderProps, ModalProps, ModalTitleProps, ModalTransitionProps, ProgressBarProps, ProgressTrackerProps, RadioGroupProps, RadioProps, RangeProps, SectionMessageActionProps, SectionMessageProps, SelectProps, SpinnerProps, StackProps, TabListProps, TabPanelProps, TabProps, TabsProps, TagGroupProps, TagProps, TextProps, TextAreaProps, TextfieldProps, TileProps, ToggleProps, TooltipProps, TimePickerProps, ValidMessageProps, PopupProps, InlineEditProps, PressableProps, TBadge, TBox, TButtonGroup, TButton, TCalendar, TCheckbox, TCheckboxGroup, TCodeBlock, TCode, TComment, TDatePicker, TDynamicTable, TEmptyState, TErrorMessage, TFileCard, TFlex, TFormFooter, TFormHeader, TForm, TFormSection, TGrid, THeading, THelperMessage, TIcon, TInline, TInlineEdit, TLabel, TLinkButton, TList, TListItem, TLoadingButton, TLozenge, TModalBody, TModalFooter, TModalHeader, TModal, TModalTitle, TModalTransition, TProgressBar, TProgressTracker, TRadioGroup, TRadio, TRange, TSectionMessageAction, TSectionMessage, TSelect, TSpinner, TStack, TTabList, TTabPanel, TTab, TTabs, TTagGroup, TTag, TTextArea, TTextfield, TTimePicker, TToggle, TTooltip, TValidMessage, TPopup, TAdfRenderer, TText, TPressable, TFilePicker, TTile, } from './components/__generated__';
 export type { BarChartProps, StackBarChartProps, HorizontalStackBarChartProps, HorizontalBarChartProps, LineChartProps, DonutChartProps, PieChartProps, TBarChart, TStackBarChart, THorizontalStackBarChart, THorizontalBarChart, TLineChart, TDonutChart, TPieChart, } from './components/charts';
 export type { ChromelessEditorProps, CommentEditorProps, TChromelessEditor, TCommentEditor, } from './components/editor';
 export type { ChartColorTokens } from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/forge-react-types",
-	"version": "0.52.1",
+	"version": "0.53.0",
 	"description": "Component types for Forge UI Kit React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -23,17 +23,17 @@
 	"dependencies": {
 		"@atlaskit/button": "^23.9.0",
 		"@atlaskit/comment": "^13.2.0",
-		"@atlaskit/datetime-picker": "^17.2.0",
+		"@atlaskit/datetime-picker": "^17.4.0",
 		"@atlaskit/dynamic-table": "^18.3.0",
-		"@atlaskit/form": "^15.1.0",
-		"@atlaskit/inline-edit": "^15.4.0",
+		"@atlaskit/form": "^15.2.0",
+		"@atlaskit/inline-edit": "^15.5.0",
 		"@atlaskit/modal-dialog": "^14.9.0",
-		"@atlaskit/navigation-system": "^5.13.0",
-		"@atlaskit/popup": "^4.8.0",
+		"@atlaskit/navigation-system": "^5.21.0",
+		"@atlaskit/popup": "^4.13.0",
 		"@atlaskit/primitives": "^17.0.0",
 		"@atlaskit/progress-bar": "^4.1.0",
 		"@atlaskit/progress-tracker": "^10.4.0",
-		"@atlaskit/radio": "^8.3.0",
+		"@atlaskit/radio": "^8.4.0",
 		"@atlaskit/section-message": "^8.11.0",
 		"@atlaskit/select": "^21.6.0",
 		"@atlaskit/spinner": "^19.0.0",
@@ -42,9 +42,10 @@
 		"@atlaskit/tag-group": "^12.0.0",
 		"@atlaskit/textarea": "^8.2.0",
 		"@atlaskit/textfield": "^8.2.0",
+		"@atlaskit/tile": "^1.0.0",
 		"@atlaskit/toggle": "^15.2.0",
-		"@atlaskit/tokens": "^9.0.0",
-		"@atlaskit/tooltip": "^20.11.0",
+		"@atlaskit/tokens": "^9.1.0",
+		"@atlaskit/tooltip": "^20.12.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
@@ -52,7 +53,7 @@
 	},
 	"devDependencies": {
 		"@atlassian/codegen": "^0.1.0",
-		"@atlassian/forge-ui": "^32.60.0",
+		"@atlassian/forge-ui": "^32.64.0",
 		"@types/node": "~22.17.1",
 		"lodash": "^4.17.21",
 		"react": "^18.2.0",

package/scripts/codegen/typeSerializer.ts

@@ -4,6 +4,7 @@ import {
 	type Type as TSType,
 	type UnionTypeNode,
 	type TypeReferenceNode,
+	type Symbol as TSSymbol,
 	SyntaxKind,
 } from 'ts-morph';
 
@@ -139,10 +140,17 @@ const flattenPickType = (
 
 	const serializedProperties = properties
 		.map((prop) => {
-			const propertySignature = prop.getDeclarations()[0] as PropertySignature | undefined;
-			if (!propertySignature) {
-				return null; // Skip if no declaration
+			const propertySignatures = extractPropertySignatures(prop);
+			if (propertySignatures.length === 0) {
+				return null;
+			} else if (propertySignatures.length > 1) {
+				// Currently we only support union type with same property signatures or a superset signature
+				// as we assume this setup is to support gradual type changes behind feature flags.
+				// other use cases are not supported currently.
+				throw new Error(`Unsupported union prop type with multiple different property signatures, ${prop.getName()}`);
 			}
+
+			const propertySignature = propertySignatures[0];
 			const { jsDoc, typeCode } =
 				propertyCallback({
 					propertySignature,
@@ -162,6 +170,70 @@ const flattenPickType = (
 	return `{\n${serializedProperties.map((prop) => (!!prop?.trim() ? `  ${prop}` : '')).join('\n')}\n}`;
 };
 
+// Note: ADS components uses union types to rollout new component type changes gradually (behind feature flags).
+// e.g. LozengeProps = LegacyLozengeProps | NewLozengeProps
+// In such cases, we need to consolidate property signatures from all union members.
+const extractPropertySignatures = (prop: TSSymbol): PropertySignature[] => {
+	const declarations = prop.getDeclarations();
+	if (!declarations) {
+		return [];
+	}
+	const signatures = declarations.filter((decl) => decl.getKind() === SyntaxKind.PropertySignature) as PropertySignature[];
+	if (signatures.length <= 1) {
+		return signatures;
+	}
+
+	// consolidate signatures if they are exactly the same
+	const uniqSignatures: PropertySignature[] = [];
+	const signatureTexts = new Set<string>();
+	for (const sig of signatures) {
+		const sigText = sig.getText();
+		if (!signatureTexts.has(sigText)) {
+			signatureTexts.add(sigText);
+			uniqSignatures.push(sig);
+		}
+	}
+
+	// next we should find one that's the supperset of others
+	if (uniqSignatures.length <= 1) {
+		return uniqSignatures;
+	}
+
+	const supersetSignatures: PropertySignature[] = [];
+	for (const sig of uniqSignatures) {
+		const sigType = sig.getType();
+		let isSuperset = true;
+		for (const otherSig of uniqSignatures) {
+			if (sig === otherSig) {
+				continue;
+			}
+			const otherSigType = otherSig.getType();
+			if (!isTypeAssignableTo(prop, otherSigType, sigType)) {
+				isSuperset = false;
+				break;
+			}
+		}
+		if (isSuperset) {
+			supersetSignatures.push(sig);
+		}
+	}
+
+	if (supersetSignatures.length > 0) {
+		return supersetSignatures;
+	}
+	return uniqSignatures;
+};
+
+const isTypeAssignableTo = (prop: TSSymbol, sourceType: TSType, targetType: TSType): boolean => {
+	const typeChecker = prop.getDeclarations()[0].getProject().getTypeChecker().compilerObject;
+
+	// ts typecker has an intneral method `isTypeAssignableTo` we can leverage here:
+	//   https://github.com/microsoft/TypeScript/pull/56448
+	return (typeChecker as unknown as {
+		isTypeAssignableTo: (source: unknown, target: unknown) => boolean;
+	}).isTypeAssignableTo(sourceType.compilerType, targetType.compilerType);
+};
+
 const getUnresolvableTypes = (tsType: TSType) => {
 	const unresolvableTypes = new Set<string>();
 	getUnresolvableTypesBase(tsType, unresolvableTypes);

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

@@ -3,9 +3,9 @@
  *
  * Extract component prop types from UIKit 2 components - BadgeProps
  *
- * @codegen <<SignedSource::dded43c94e5bc997c5df041eeb253927>>
+ * @codegen <<SignedSource::9d4cb948f5d6ac145a3d3e82ab8cfa92>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit/badge/__generated__/index.partial.tsx <<SignedSource::002a848f01b18a8dea0ea160d731edbf>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/badge/__generated__/index.partial.tsx <<SignedSource::f9bf0bacecb91875eab391c4148409c1>>
  */
 /* eslint @repo/internal/codegen/signed-source-integrity: "warn" */
 
@@ -25,7 +25,7 @@ type _PlatformBadgeProps = {
   /**
 	 * Affects the visual style of the badge.
 	 */
-	appearance?: 'added' | 'default' | 'important' | 'primary' | 'primaryInverted' | 'removed';
+	appearance?: 'added' | 'default' | 'important' | 'primary' | 'primaryInverted' | 'removed' | 'warning' | 'discovery' | 'danger' | 'neutral' | 'success' | 'information' | 'inverse';
   
 	children?: React.ReactNode;
   /**

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

@@ -3,9 +3,9 @@
  *
  * Extract component prop types from UIKit 2 components - LozengeProps
  *
- * @codegen <<SignedSource::2c6d1eb88477563937e65c98996d0b92>>
+ * @codegen <<SignedSource::abe727d97158c4d16d13504ebd7f60d6>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit/lozenge/__generated__/index.partial.tsx <<SignedSource::5e9e88bd5dd513ba567d815ada9e7eae>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/lozenge/__generated__/index.partial.tsx <<SignedSource::9799ca9fa788b29c08dfbdb778da62b4>>
  */
 /* eslint @repo/internal/codegen/signed-source-integrity: "warn" */
 
@@ -15,27 +15,29 @@ import type React from 'react';
 // Serialized type
 type PlatformLozengeProps = {
   /**
-	 * Elements to be rendered inside the lozenge. This should ideally be just a word or two.
+	 * The appearance of the lozenge. Supports both legacy semantic appearances and new accent/semantic colors.
+	 * Legacy appearances (default, success, removed, inprogress, new, moved) are automatically mapped to the new semantic colors.
 	 */
-	children?: React.ReactNode;
+	appearance?: 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success' | 'warning' | 'danger' | 'information' | 'neutral' | 'discovery' | 'accent-red' | 'accent-orange' | 'accent-yellow' | 'accent-lime' | 'accent-green' | 'accent-teal' | 'accent-blue' | 'accent-purple' | 'accent-magenta' | 'accent-gray';
   /**
-	 * 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
+	 * Elements to be rendered inside the lozenge. This should ideally be just a word or two.
 	 */
-	testId?: string;
+	children?: React.ReactNode;
   /**
 	 * Determines whether to apply the bold style or not.
+	 * @deprecated This prop is deprecated and will be removed in an upcoming major release. Use Tag component for non-bold styles.
 	 */
 	isBold?: boolean;
-  /**
-	 * The appearance type.
-	 */
-	appearance?: 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success';
   /**
 	 * max-width of lozenge container. Default to 200px.
 	 */
 	maxWidth?: string | number;
+  /**
+	 * 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 LozengeProps = Pick<

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

@@ -0,0 +1,27 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * Extract component prop types from UIKit 2 components - TileProps
+ *
+ * @codegen <<SignedSource::8b1e13d93e3348f59fa7b79a0da227aa>>
+ * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/tile/__generated__/index.partial.tsx <<SignedSource::d7ec62556fa495888b1d4326b71c4d52>>
+ */
+/* eslint @repo/internal/codegen/signed-source-integrity: "warn" */
+
+import React from 'react';
+import PlatformTile from '@atlaskit/tile';
+
+type PlatformTileProps = React.ComponentProps<typeof PlatformTile>;
+
+export type TileProps = Pick<
+  PlatformTileProps,
+  'backgroundColor' | 'label' | 'size' | 'children' | 'hasBorder' | 'isInset' | 'testId'
+>;
+
+/**
+ * A tile is a rounded square that takes an asset and represents a noun.
+ *
+ * @see [Tile](https://developer.atlassian.com/platform/forge/ui-kit/components/tile/) in UI Kit documentation for more information
+ */
+export type TTile<T> = (props: TileProps) => T;

package/src/components/__generated__/index.ts

@@ -57,6 +57,7 @@ export type { TagGroupProps, TTagGroup } from './TagGroupProps.codegen';
 export type { SimpleTagProps as TagProps, TSimpleTag as TTag } from './TagProps.codegen';
 export type { TextAreaProps, TTextArea } from './TextAreaProps.codegen';
 export type { TextfieldProps, TTextfield } from './TextfieldProps.codegen';
+export type { TileProps, TTile } from './TileProps.codegen';
 export type { TimePickerProps, TTimePicker } from './TimePickerProps.codegen';
 export type { ToggleProps, TToggle } from './ToggleProps.codegen';
 export type { TooltipProps, TTooltip } from './TooltipProps.codegen';

package/src/index.ts

@@ -55,6 +55,7 @@ export type {
 	TextProps,
 	TextAreaProps,
 	TextfieldProps,
+	TileProps,
 	ToggleProps,
 	TooltipProps,
 	TimePickerProps,
@@ -127,6 +128,7 @@ export type {
 	TText,
 	TPressable,
 	TFilePicker,
+	TTile,
 } from './components/__generated__';
 
 export type {