@atlaskit/ads-mcp 0.0.1

package/dist/es2019/tools/get-components/components.js

@@ -0,0 +1,2941 @@
+export const components = [{
+  name: 'Button',
+  packageName: '@atlaskit/button/new',
+  description: 'A versatile button component with multiple appearances and states.',
+  releasePhase: 'general_availability',
+  category: 'Forms and Input',
+  example: `import Button from '@atlaskit/button/new';
+import CopyIcon from '@atlaskit/icon/core/copy';
+import AddIcon from '@atlaskit/icon/core/add';
+
+<Button appearance="success" iconAfter={AddIcon}>Create</Button>
+<Button appearance="primary" iconBefore={CopyIcon}>Copy text</Button>`,
+  props: [{
+    name: 'appearance',
+    description: 'Visual style of the button',
+    type: "'default' | 'danger' | 'primary' | 'subtle' | 'warning' | 'discovery'"
+  }, {
+    name: 'spacing',
+    description: 'Spacing around the button',
+    type: "'compact' | 'default'"
+  }, {
+    name: 'isLoading',
+    description: 'Loading state',
+    type: 'boolean'
+  }, {
+    name: 'isDisabled',
+    description: 'Disabled state',
+    type: 'boolean'
+  }, {
+    name: 'isSelected',
+    description: 'Selected state',
+    type: 'boolean'
+  }, {
+    name: 'iconBefore',
+    description: 'Icon component to display before text',
+    type: 'IconProp'
+  }, {
+    name: 'iconAfter',
+    description: 'Icon component to display after text',
+    type: 'IconProp'
+  }, {
+    name: 'onClick',
+    description: 'Click handler with analytics event data',
+    type: '(e: MouseEvent, analyticsEvent: UIAnalyticsEvent) => void'
+  }]
+}, {
+  name: 'IconButton',
+  packageName: '@atlaskit/button/new',
+  description: 'A button that displays only an icon with an optional tooltip.',
+  releasePhase: 'general_availability',
+  category: 'Forms and Input',
+  example: `import { IconButton } from '@atlaskit/button/new';
+import EditIcon from '@atlaskit/icon/core/edit';
+import AddIcon from '@atlaskit/icon/core/add';
+
+// Default icon button
+<IconButton icon={EditIcon} label="Edit" />
+
+// Primary appearance with tooltip
+<IconButton
+	appearance="primary"
+	icon={AddIcon}
+	label="Create page"
+	isTooltipDisabled={false}
+/>
+
+// Circle shape with custom icon color
+<IconButton
+	shape="circle"
+	icon={(iconProps) => (
+		<StarIcon
+			{...iconProps}
+			primaryColor={token('color.icon.accent.orange')}
+		/>
+	)}
+	label="Add to favorites"
+/>`,
+  props: [{
+    name: 'icon',
+    description: 'Icon component to display',
+    type: 'IconProp | ((props: IconProps) => ReactNode)'
+  }, {
+    name: 'label',
+    description: 'Accessible label and tooltip content',
+    type: 'string'
+  }, {
+    name: 'appearance',
+    description: 'Visual style of the button',
+    type: "'default' | 'primary' | 'subtle'"
+  }, {
+    name: 'shape',
+    description: 'Shape of the button',
+    type: "'default' | 'circle'"
+  }, {
+    name: 'isTooltipDisabled',
+    description: 'Whether to disable the tooltip',
+    type: 'boolean'
+  }, {
+    name: 'spacing',
+    description: 'Button spacing',
+    type: "'default' | 'compact'"
+  }]
+}, {
+  name: 'SplitButton',
+  packageName: '@atlaskit/button/new',
+  description: 'A button that splits into a primary action and a dropdown menu.',
+  releasePhase: 'general_availability',
+  category: 'Forms and Input',
+  example: `import Button, { IconButton, SplitButton } from '@atlaskit/button/new';
+import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+
+// Default split button
+<SplitButton>
+	<Button>Link work item</Button>
+	<DropdownMenu<HTMLButtonElement>
+		shouldRenderToParent
+		trigger={({ triggerRef, ...triggerProps }) => (
+			<IconButton
+				ref={triggerRef}
+				{...triggerProps}
+				icon={ChevronDownIcon}
+				label="More link work item options"
+			/>
+		)}
+	>
+		<DropdownItemGroup>
+			<DropdownItem>Option one</DropdownItem>
+			<DropdownItem>Option two</DropdownItem>
+		</DropdownItemGroup>
+	</DropdownMenu>
+</SplitButton>
+
+// Primary appearance
+<SplitButton appearance="primary">
+	<Button>Update</Button>
+	<DropdownMenu<HTMLButtonElement>
+		shouldRenderToParent
+		trigger={({ triggerRef, ...triggerProps }) => (
+			<IconButton
+				ref={triggerRef}
+				{...triggerProps}
+				icon={ChevronDownIcon}
+				label="More update options"
+			/>
+		)}
+	>
+		<DropdownItemGroup>
+			<DropdownItem>Option one</DropdownItem>
+			<DropdownItem>Option two</DropdownItem>
+		</DropdownItemGroup>
+	</DropdownMenu>
+</SplitButton>`,
+  props: [{
+    name: 'appearance',
+    description: 'The style variation for child buttons',
+    type: "'default' | 'primary'"
+  }, {
+    name: 'spacing',
+    description: 'Controls the amount of padding in the child buttons',
+    type: "'default' | 'compact'"
+  }, {
+    name: 'isDisabled',
+    description: 'Whether all child buttons should be disabled',
+    type: 'boolean'
+  }, {
+    name: 'children',
+    description: 'Primary action button and secondary action button/dropdown',
+    type: 'ReactNode'
+  }]
+}, {
+  name: 'LinkButton',
+  packageName: '@atlaskit/button/new',
+  description: 'A button that renders as an anchor tag for navigation.',
+  releasePhase: 'general_availability',
+  category: 'Forms and Input',
+  example: `import { LinkButton } from '@atlaskit/button/new';
+import AddIcon from '@atlaskit/icon/core/add';
+
+// Default link button
+<LinkButton href="https://atlassian.com/">Default Link button</LinkButton>
+
+// Primary appearance with icon
+<LinkButton
+	appearance="primary"
+	href="https://atlassian.com/"
+	iconBefore={AddIcon}
+>
+	Primary link button
+</LinkButton>
+
+// Subtle appearance with target blank
+<LinkButton
+	appearance="subtle"
+	href="https://atlassian.com/"
+	target="_blank"
+>
+	Opens in new window
+</LinkButton>
+
+// With router configuration
+<LinkButton<MyRouterLinkConfig>
+	href={{
+		to: '/about',
+		replace: true,
+	}}
+>
+	Router link
+</LinkButton>`,
+  props: [{
+    name: 'href',
+    description: 'URL or router configuration object',
+    type: 'string | RouterLinkConfig'
+  }, {
+    name: 'appearance',
+    description: 'Visual style of the button',
+    type: "'default' | 'primary' | 'subtle' | 'warning' | 'danger'"
+  }, {
+    name: 'target',
+    description: 'Link target attribute',
+    type: 'string'
+  }, {
+    name: 'isDisabled',
+    description: 'Disabled state (removes href and adds aria-disabled)',
+    type: 'boolean'
+  }, {
+    name: 'iconBefore',
+    description: 'Icon component to display before text',
+    type: 'IconProp'
+  }, {
+    name: 'iconAfter',
+    description: 'Icon component to display after text',
+    type: 'IconProp'
+  }]
+}, {
+  name: 'ButtonGroup',
+  packageName: '@atlaskit/button',
+  description: 'A component for grouping related buttons together.',
+  releasePhase: 'general_availability',
+  category: 'Forms and Input',
+  example: `import Button, { ButtonGroup } from '@atlaskit/button/new';
+import AudioIcon from '@atlaskit/icon/core/audio';
+
+// Default button group
+<ButtonGroup>
+	<Button>First button</Button>
+	<Button>Second button</Button>
+	<Button>Third button</Button>
+</ButtonGroup>
+
+// Button group with primary appearance
+<ButtonGroup>
+	<Button appearance="primary">Save</Button>
+	<Button appearance="primary">Edit</Button>
+	<Button appearance="primary">Delete</Button>
+</ButtonGroup>
+
+// Button group with mixed button types
+<ButtonGroup>
+	<Button>Default</Button>
+	<Button appearance="primary">Primary</Button>
+	<Button appearance="warning">Warning</Button>
+	<Button appearance="danger">Error</Button>
+</ButtonGroup>
+
+// Button group with icons
+<ButtonGroup>
+	<Button>Good times</Button>
+	<Button iconAfter={AudioIcon}>Boogie</Button>
+	<Button iconAfter={AudioIcon}>Boogie more</Button>
+</ButtonGroup>`,
+  props: [{
+    name: 'children',
+    description: 'The buttons to be grouped together',
+    type: 'ReactNode'
+  }, {
+    name: 'label',
+    description: 'Accessible label for the button group',
+    type: 'string'
+  }, {
+    name: 'appearance',
+    description: 'The appearance to apply to all buttons in the group',
+    type: "'default' | 'primary' | 'warning' | 'danger'"
+  }, {
+    name: 'titleId',
+    description: 'ID of the heading that labels this group',
+    type: 'string'
+  }]
+}, {
+  name: 'Checkbox',
+  packageName: '@atlaskit/checkbox',
+  description: 'A checkbox input component with label support.',
+  releasePhase: 'general_availability',
+  category: 'Forms and Input',
+  example: `import { Checkbox } from '@atlaskit/checkbox';
+
+// Default checkbox
+<Checkbox
+	value="default"
+	label="Default checkbox"
+	onChange={event => console.log(event.target.checked)}
+	name="checkbox-default"
+/>
+
+// Controlled checkbox
+const [isChecked, setIsChecked] = useState(true);
+<Checkbox
+	isChecked={isChecked}
+	onChange={event => setIsChecked(event.target.checked)}
+	label={\`Controlled checkbox: \${isChecked}\`}
+	value="controlled"
+	name="checkbox-controlled"
+/>
+
+// Uncontrolled with default checked
+<Checkbox
+	defaultChecked
+	label="Checked by default"
+	value="default-checked"
+	onChange={onChange}
+	name="checkbox-default-checked"
+/>
+
+// Disabled state
+<Checkbox
+	isDisabled
+	label="Disabled checkbox"
+	value="disabled"
+	name="checkbox-disabled"
+/>
+
+// Invalid state
+<Checkbox
+	isInvalid
+	label="Invalid checkbox"
+	value="invalid"
+	name="checkbox-invalid"
+/>
+
+// Indeterminate state
+<Checkbox
+	isIndeterminate
+	label="Indeterminate checkbox"
+	value="indeterminate"
+	name="checkbox-indeterminate"
+/>`,
+  props: [{
+    name: 'label',
+    description: 'Text label for the checkbox',
+    type: 'string'
+  }, {
+    name: 'value',
+    description: 'Value of the checkbox when checked',
+    type: 'string'
+  }, {
+    name: 'name',
+    description: 'Name attribute of the input element',
+    type: 'string'
+  }, {
+    name: 'isChecked',
+    description: 'Controlled checked state',
+    type: 'boolean'
+  }, {
+    name: 'defaultChecked',
+    description: 'Initial checked state for uncontrolled component',
+    type: 'boolean'
+  }, {
+    name: 'isDisabled',
+    description: 'Whether the checkbox is disabled',
+    type: 'boolean'
+  }, {
+    name: 'isInvalid',
+    description: 'Whether the checkbox shows an error state',
+    type: 'boolean'
+  }, {
+    name: 'isIndeterminate',
+    description: 'Whether the checkbox is in an indeterminate state',
+    type: 'boolean'
+  }, {
+    name: 'onChange',
+    description: 'Handler called when the checked state changes',
+    type: '(event: ChangeEvent<HTMLInputElement>) => void'
+  }]
+}, {
+  name: 'Radio',
+  packageName: '@atlaskit/radio',
+  description: 'A radio input component for selecting a single option from a list.',
+  releasePhase: 'general_availability',
+  category: 'Forms and Input',
+  example: `import { Radio, RadioGroup } from '@atlaskit/radio';
+
+// Single radio button
+<Radio
+	value="default"
+	label="Default radio"
+	name="radio-default"
+	isChecked={true}
+	onChange={event => console.log(event.target.checked)}
+/>
+
+// Radio group with options
+const options = [
+	{ name: 'color', value: 'red', label: 'Red' },
+	{ name: 'color', value: 'blue', label: 'Blue' },
+	{ name: 'color', value: 'yellow', label: 'Yellow' },
+	{ name: 'color', value: 'green', label: 'Green' },
+	{ name: 'color', value: 'black', label: 'Black' },
+];
+
+<RadioGroup
+	options={options}
+	defaultValue="blue"
+	onChange={event => console.log(event.currentTarget.value)}
+/>
+
+// Controlled radio group
+const [value, setValue] = useState('red');
+<RadioGroup
+	options={options}
+	value={value}
+	onChange={event => setValue(event.currentTarget.value)}
+/>
+
+// Disabled radio
+<Radio
+	value="disabled"
+	label="Disabled radio"
+	name="radio-disabled"
+	isDisabled={true}
+	onChange={onChange}
+/>
+
+// Invalid radio
+<Radio
+	value="invalid"
+	label="Invalid radio"
+	name="radio-invalid"
+	isInvalid={true}
+	onChange={onChange}
+/>`,
+  props: [{
+    name: 'value',
+    description: 'Value of the radio input',
+    type: 'string'
+  }, {
+    name: 'label',
+    description: 'Label text for the radio input',
+    type: 'string'
+  }, {
+    name: 'name',
+    description: 'Name attribute of the input element',
+    type: 'string'
+  }, {
+    name: 'isChecked',
+    description: 'Whether the radio is checked',
+    type: 'boolean'
+  }, {
+    name: 'isDisabled',
+    description: 'Whether the radio is disabled',
+    type: 'boolean'
+  }, {
+    name: 'isInvalid',
+    description: 'Whether the radio shows an error state',
+    type: 'boolean'
+  }, {
+    name: 'isRequired',
+    description: 'Whether the radio is required in a form',
+    type: 'boolean'
+  }, {
+    name: 'onChange',
+    description: 'Handler called when the radio selection changes',
+    type: '(event: ChangeEvent<HTMLInputElement>) => void'
+  }]
+}, {
+  name: 'Select',
+  packageName: '@atlaskit/select',
+  description: 'A flexible select component for single and multi-selection.',
+  releasePhase: 'general_availability',
+  category: 'Forms and Input',
+  example: `import Select, { CheckboxSelect, CountrySelect } from '@atlaskit/select';
+
+// Single select
+<Select
+	inputId="single-select"
+	options={[
+		{ label: 'Adelaide', value: 'adelaide' },
+		{ label: 'Brisbane', value: 'brisbane' },
+		{ label: 'Canberra', value: 'canberra' },
+		{ label: 'Darwin', value: 'darwin' },
+		{ label: 'Melbourne', value: 'melbourne' },
+	]}
+	placeholder="Choose a city"
+/>
+
+// Multi select
+<Select
+	inputId="multi-select"
+	options={[
+		{ label: 'Red', value: 'red' },
+		{ label: 'Blue', value: 'blue' },
+		{ label: 'Yellow', value: 'yellow' },
+		{ label: 'Green', value: 'green' },
+	]}
+	isMulti
+	placeholder="Choose colors"
+/>
+
+// Grouped options
+<Select
+	inputId="grouped-select"
+	options={[
+		{
+			label: 'New South Wales',
+			options: [
+				{ label: 'Sydney', value: 's' },
+				{ label: 'Newcastle', value: 'n' },
+			],
+		},
+		{
+			label: 'Queensland',
+			options: [
+				{ label: 'Brisbane', value: 'b' },
+				{ label: 'Gold Coast', value: 'g' },
+			],
+		},
+	]}
+	placeholder="Choose a city"
+/>
+
+// Checkbox select
+<CheckboxSelect
+	inputId="checkbox-select"
+	options={[
+		{ label: 'Option 1', value: '1' },
+		{ label: 'Option 2', value: '2' },
+		{ label: 'Option 3', value: '3' },
+	]}
+	placeholder="Select options"
+/>
+
+// Country select
+<CountrySelect
+	inputId="country-select"
+	placeholder="Choose a country"
+/>`,
+  props: [{
+    name: 'options',
+    description: 'Array of options to display in the dropdown',
+    type: 'Array<{ label: string; value: string; isDisabled?: boolean }> | Array<{ label: string; options: Array<{ label: string; value: string }> }>'
+  }, {
+    name: 'value',
+    description: 'The selected value(s)',
+    type: 'Option | Option[] | null'
+  }, {
+    name: 'defaultValue',
+    description: 'The default selected value(s)',
+    type: 'Option | Option[] | null'
+  }, {
+    name: 'isMulti',
+    description: 'Allow multiple selections',
+    type: 'boolean'
+  }, {
+    name: 'isDisabled',
+    description: 'Disable the select',
+    type: 'boolean'
+  }, {
+    name: 'isLoading',
+    description: 'Show loading state',
+    type: 'boolean'
+  }, {
+    name: 'isClearable',
+    description: 'Allow clearing of selected value',
+    type: 'boolean'
+  }, {
+    name: 'isSearchable',
+    description: 'Allow filtering of options',
+    type: 'boolean'
+  }, {
+    name: 'placeholder',
+    description: 'Placeholder text',
+    type: 'string'
+  }, {
+    name: 'onChange',
+    description: 'Handler for value changes',
+    type: '(value: Option | Option[] | null) => void'
+  }, {
+    name: 'appearance',
+    description: 'Visual style of the select',
+    type: "'default' | 'subtle' | 'none'"
+  }, {
+    name: 'formatOptionLabel',
+    description: 'Custom option label renderer',
+    type: '(data: Option, formatOptionLabelMeta: FormatOptionLabelMeta) => ReactNode',
+    exampleValue: '(option, meta) => <span style={{ color: option.color }}>{option.label} ({meta.context})</span>'
+  }, {
+    name: 'noOptionsMessage',
+    description: 'Custom no options message',
+    type: '(obj: { inputValue: string }) => ReactNode',
+    exampleValue: '({ inputValue }) => <em>No results found for "{inputValue}"</em>'
+  }]
+}, {
+  name: 'DateTimePicker',
+  packageName: '@atlaskit/datetime-picker',
+  description: 'A component for selecting both date and time values.',
+  releasePhase: 'general_availability',
+  category: 'Forms and Input',
+  example: `import { DateTimePicker } from '@atlaskit/datetime-picker';
+import { Label } from '@atlaskit/form';
+
+// Basic usage
+<>
+	<Label htmlFor="datetime">Appointment date and time</Label>
+	<DateTimePicker
+		id="datetime"
+		clearControlLabel="Clear appointment"
+		datePickerProps={{
+			shouldShowCalendarButton: true,
+			label: 'Appointment date'
+		}}
+		timePickerProps={{ label: 'Appointment time' }}
+	/>
+</>
+
+// With form validation
+<Form onSubmit={formState => console.log('form submitted', formState)}>
+	{({ formProps }) => (
+		<form {...formProps}>
+			<Field name="datetime-picker" label="Scheduled run time" isRequired>
+				{({ fieldProps }) => (
+					<DateTimePicker
+						{...fieldProps}
+						clearControlLabel="Clear scheduled run time"
+						datePickerProps={{
+							shouldShowCalendarButton: true,
+							label: 'Scheduled run time, date'
+						}}
+						timePickerProps={{ label: 'Scheduled run time, time' }}
+					/>
+				)}
+			</Field>
+		</form>
+	)}
+</Form>
+
+// With custom formatting
+<DateTimePicker
+	datePickerProps={{
+		dateFormat: 'YYYY-MM-DD',
+		placeholder: '2021-06-10',
+		shouldShowCalendarButton: true,
+		label: 'Date'
+	}}
+	timePickerProps={{
+		timeFormat: 'HH:mm',
+		placeholder: '13:30',
+		label: 'Time'
+	}}
+	clearControlLabel="Clear date and time"
+/>`,
+  props: [{
+    name: 'datePickerProps',
+    description: 'Props to be passed to the DatePicker component',
+    type: 'DatePickerProps'
+  }, {
+    name: 'timePickerProps',
+    description: 'Props to be passed to the TimePicker component',
+    type: 'TimePickerProps'
+  }, {
+    name: 'value',
+    description: 'The current value in ISO format',
+    type: 'string'
+  }, {
+    name: 'defaultValue',
+    description: 'The default value in ISO format',
+    type: 'string'
+  }, {
+    name: 'onChange',
+    description: 'Callback when the value changes',
+    type: '(value: string | null) => void'
+  }, {
+    name: 'isDisabled',
+    description: 'Whether the input is disabled',
+    type: 'boolean'
+  }, {
+    name: 'locale',
+    description: 'The locale to use for formatting',
+    type: 'string'
+  }, {
+    name: 'clearControlLabel',
+    description: 'Aria label for the clear button',
+    type: 'string'
+  }]
+}, {
+  name: 'FocusRing',
+  packageName: '@atlaskit/focus-ring',
+  description: 'A utility component for managing focus styles.',
+  releasePhase: 'general_availability',
+  category: 'Forms and Input',
+  example: `import FocusRing from '@atlaskit/focus-ring';
+
+<FocusRing>
+  <button>Focusable element</button>
+</FocusRing>`,
+  props: []
+}, {
+  name: 'Form',
+  packageName: '@atlaskit/form',
+  description: 'A component for building forms with validation and state management.',
+  releasePhase: 'general_availability',
+  category: 'Forms and Input',
+  example: `import Form, { Field, FormFooter, FormHeader, FormSection, HelperMessage, ErrorMessage } from '@atlaskit/form';
+import Button from '@atlaskit/button/new';
+import TextField from '@atlaskit/textfield';
+import { Checkbox } from '@atlaskit/checkbox';
+
+// Basic form with validation
+<Form onSubmit={data => console.log('form data', data)}>
+	{({ formProps }) => (
+		<form {...formProps}>
+			<FormHeader title="Sign in">
+				<p>Required fields are marked with an asterisk *</p>
+			</FormHeader>
+
+			<FormSection>
+				<Field name="username" label="Username" isRequired>
+					{({ fieldProps, error }) => (
+						<>
+							<TextField autoComplete="username" {...fieldProps} />
+							{!error && <HelperMessage>You can use letters, numbers & periods.</HelperMessage>}
+							{error && <ErrorMessage>This username is already in use.</ErrorMessage>}
+						</>
+					)}
+				</Field>
+
+				<Field
+					name="password"
+					label="Password"
+					isRequired
+					validate={value => (value && value.length < 8 ? 'TOO_SHORT' : undefined)}
+				>
+					{({ fieldProps, error, valid }) => (
+						<>
+							<TextField type="password" {...fieldProps} />
+							{!error && !valid && (
+								<HelperMessage>
+									Use 8 or more characters with letters, numbers & symbols.
+								</HelperMessage>
+							)}
+							{error && <ErrorMessage>Password must be at least 8 characters.</ErrorMessage>}
+						</>
+					)}
+				</Field>
+
+				<Field name="remember" defaultValue={false}>
+					{({ fieldProps }) => (
+						<Checkbox {...fieldProps} label="Remember me" />
+					)}
+				</Field>
+			</FormSection>
+
+			<FormFooter>
+				<Button type="submit" appearance="primary">Sign in</Button>
+			</FormFooter>
+		</form>
+	)}
+</Form>`,
+  props: [{
+    name: 'onSubmit',
+    description: 'Callback when the form is submitted with valid data',
+    type: '(data: FormData) => void | Promise<void | { [key: string]: string }>'
+  }, {
+    name: 'children',
+    description: 'Render prop that provides form state and helpers',
+    type: '(renderProps: FormRenderProps) => ReactNode'
+  }, {
+    name: 'defaultValues',
+    description: 'Initial values for form fields',
+    type: 'FormData'
+  }, {
+    name: 'onValidate',
+    description: 'Custom validation function for the entire form',
+    type: '(data: FormData) => void | { [key: string]: string }'
+  }, {
+    name: 'shouldValidateOnBlur',
+    description: 'Whether to validate fields when they lose focus',
+    type: 'boolean'
+  }, {
+    name: 'shouldValidateOnChange',
+    description: 'Whether to validate fields as they change',
+    type: 'boolean'
+  }]
+}, {
+  name: 'Range',
+  packageName: '@atlaskit/range',
+  description: 'A component for selecting a value from a range of values.',
+  releasePhase: 'general_availability',
+  category: 'Forms and Input',
+  example: `import Range from '@atlaskit/range';
+
+<Range
+	value={50}
+	min={0}
+	max={100}
+	step={1}
+	onChange={value => console.log(value)}
+/>`,
+  props: []
+}, {
+  name: 'TextArea',
+  packageName: '@atlaskit/textarea',
+  description: 'A component for entering multi-line text input.',
+  releasePhase: 'general_availability',
+  category: 'Forms and Input',
+  example: `import TextArea from '@atlaskit/textarea';
+
+<TextArea
+	placeholder="Enter text here"
+	resize="auto"
+	maxHeight="20vh"
+	name="area"
+	defaultValue="Add a message here"
+/>`,
+  props: []
+}, {
+  name: 'TextField',
+  packageName: '@atlaskit/textfield',
+  description: 'A single-line text input component.',
+  releasePhase: 'general_availability',
+  category: 'Forms and Input',
+  example: `import TextField from '@atlaskit/textfield';
+
+<TextField
+  value="Text content"
+  onChange={(e) => console.log(e.target.value)}
+/>`,
+  props: [{
+    name: 'value',
+    description: 'Text content',
+    type: 'string'
+  }, {
+    name: 'onChange',
+    description: 'Change handler',
+    type: '(e: ChangeEvent) => void'
+  }, {
+    name: 'isDisabled',
+    description: 'Disabled state',
+    type: 'boolean'
+  }, {
+    name: 'isRequired',
+    description: 'Required field',
+    type: 'boolean'
+  }, {
+    name: 'type',
+    description: 'Input type',
+    type: 'string'
+  }]
+}, {
+  name: 'Toggle',
+  packageName: '@atlaskit/toggle',
+  description: 'A toggle switch component.',
+  releasePhase: 'general_availability',
+  category: 'Forms and Input',
+  example: `import Toggle from '@atlaskit/toggle';
+
+<Toggle
+  id="toggle-1"
+  label="Toggle switch"
+  onChange={(event) => console.log(event.target.checked)}
+  isChecked={false}
+/>`,
+  props: [{
+    name: 'id',
+    description: 'Unique identifier for the toggle',
+    type: 'string'
+  }, {
+    name: 'label',
+    description: 'Label for the toggle',
+    type: 'string'
+  }, {
+    name: 'onChange',
+    description: 'Change handler',
+    type: '(event: ChangeEvent) => void'
+  }, {
+    name: 'isChecked',
+    description: 'Checked state',
+    type: 'boolean'
+  }]
+}, {
+  name: 'Avatar',
+  packageName: '@atlaskit/avatar',
+  description: 'A component for displaying user avatars with support for images, initials, and status indicators.',
+  releasePhase: 'general_availability',
+  category: 'Images and Icons',
+  example: `import Avatar from '@atlaskit/avatar';
+
+<Avatar
+	src="https://example.com/avatar.jpg"
+	status="online"
+	size="large"
+/>`,
+  props: [{
+    name: 'appearance',
+    description: 'Shape of the avatar',
+    type: "'circle' | 'square'"
+  }, {
+    name: 'size',
+    description: 'Size of the avatar',
+    type: "'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'"
+  }, {
+    name: 'presence',
+    description: 'Presence indicator',
+    type: "'online' | 'busy' | 'focus' | 'offline' | ReactNode"
+  }, {
+    name: 'status',
+    description: 'Status indicator',
+    type: "'approved' | 'declined' | 'locked' | ReactNode"
+  }]
+}, {
+  name: 'AvatarGroup',
+  packageName: '@atlaskit/avatar-group',
+  description: 'A component for displaying multiple avatars in a group with overlap and overflow handling.',
+  releasePhase: 'general_availability',
+  category: 'Images and Icons',
+  example: `import AvatarGroup from '@atlaskit/avatar-group';
+
+<AvatarGroup
+	avatars={[
+		{ src: 'avatar1.jpg', name: 'User 1' },
+		{ src: 'avatar2.jpg', name: 'User 2' },
+		{ src: 'avatar3.jpg', name: 'User 3' }
+	]}
+	maxCount={3}
+/>`,
+  props: [{
+    name: 'avatars',
+    description: 'Array of avatar objects',
+    type: 'Array<{ src: string, name: string }>'
+  }, {
+    name: 'maxCount',
+    description: 'Maximum number of avatars to show',
+    type: 'number'
+  }, {
+    name: 'size',
+    description: 'Size of avatars',
+    type: "'small' | 'medium' | 'large' | 'xlarge'"
+  }, {
+    name: 'showMoreButtonProps',
+    description: 'Props for overflow button',
+    type: 'object'
+  }]
+}, {
+  name: 'Icon',
+  packageName: '@atlaskit/icon',
+  description: "These the new icons are part of Atlassian's visual refresh. Please use the Icon explorer to see the list of hundreds of icons and their purposes in full detail.",
+  releasePhase: 'beta',
+  category: 'Images and Icons',
+  example: `import AddIcon from '@atlaskit/icon/core/add';
+import CopyIcon from '@atlaskit/icon/core/copy';
+import EditIcon from '@atlaskit/icon/core/edit';
+import TrashIcon from '@atlaskit/icon/core/trash';
+import StarIcon from '@atlaskit/icon/core/star';
+import CommentIcon from '@atlaskit/icon/core/comment';
+
+// Basic usage
+<AddIcon label="Add" />
+<CopyIcon label="Copy" />
+<EditIcon label="Edit" />
+
+// With different sizes
+<TrashIcon label="Delete" size="small" />
+<StarIcon label="Star" size="medium" />
+<CommentIcon label="Comment" size="large" />`,
+  props: [{
+    name: 'label',
+    description: 'Accessibility label for the icon',
+    type: 'string'
+  }, {
+    name: 'size',
+    description: 'Size of the icon',
+    type: "'small' | 'medium' | 'large'"
+  }, {
+    name: 'primaryColor',
+    description: 'Primary color of the icon',
+    type: 'string'
+  }, {
+    name: 'secondaryColor',
+    description: 'Secondary color of the icon',
+    type: 'string'
+  }, {
+    name: 'testId',
+    description: 'Test ID for automated testing',
+    type: 'string'
+  }]
+}, {
+  name: 'Image',
+  packageName: '@atlaskit/image',
+  description: "A component for displaying images with theme support. This component is in Beta phase, meaning it's stable at version 1.0+ but may receive improvements based on customer feedback. Breaking changes will only be made in major releases.",
+  releasePhase: 'beta',
+  category: 'Images and Icons',
+  example: `import Image from '@atlaskit/image';
+
+<Image
+  src="image-url"
+  alt="Image description"
+  width={200}
+  height={200}
+  testId="image-test"
+/>`,
+  props: [{
+    name: 'src',
+    description: 'URL of the image',
+    type: 'string'
+  }, {
+    name: 'alt',
+    description: 'Alternative text for the image',
+    type: 'string'
+  }, {
+    name: 'width',
+    description: 'Width of the image in pixels',
+    type: 'number'
+  }, {
+    name: 'height',
+    description: 'Height of the image in pixels',
+    type: 'number'
+  }, {
+    name: 'testId',
+    description: 'Test ID for automated testing',
+    type: 'string'
+  }]
+}, {
+  name: 'PageHeader',
+  packageName: '@atlaskit/page-header',
+  description: 'A component for page headers.',
+  releasePhase: 'general_availability',
+  category: 'Layout and Structure',
+  example: `import PageHeader from '@atlaskit/page-header';
+
+<PageHeader
+	breadcrumbs={<Breadcrumbs />}
+	actions={<Actions />}
+	bottomBar={<BottomBar />}
+	testId="page-header-test"
+>
+	Page Title
+</PageHeader>`,
+  props: [{
+    name: 'breadcrumbs',
+    description: 'Breadcrumb navigation',
+    type: 'ReactNode'
+  }, {
+    name: 'actions',
+    description: 'Actions to display in the header',
+    type: 'ReactNode'
+  }, {
+    name: 'bottomBar',
+    description: 'Content to display in the bottom bar',
+    type: 'ReactNode'
+  }, {
+    name: 'children',
+    description: 'The title of the page',
+    type: 'ReactNode'
+  }, {
+    name: 'testId',
+    description: 'A unique string that appears as a data attribute data-testid in the rendered code',
+    type: 'string'
+  }]
+}, {
+  name: 'ProgressBar',
+  packageName: '@atlaskit/progress-bar',
+  description: 'A component for displaying progress.',
+  releasePhase: 'general_availability',
+  category: 'Loading',
+  example: `import ProgressBar from '@atlaskit/progress-bar';
+
+<ProgressBar
+	value={0.5}
+	isIndeterminate={false}
+	appearance="default"
+	ariaLabel="Loading progress"
+	testId="progress-bar-test"
+/>`,
+  props: [{
+    name: 'value',
+    description: 'Sets the value of the progress bar, between 0 and 1 inclusive',
+    type: 'number'
+  }, {
+    name: 'isIndeterminate',
+    description: 'Shows the progress bar in an indeterminate state when true',
+    type: 'boolean'
+  }, {
+    name: 'appearance',
+    description: 'The visual style of the progress bar',
+    type: "'default' | 'success' | 'inverse'"
+  }, {
+    name: 'ariaLabel',
+    description: 'Descriptive label associated with the progress bar for accessibility',
+    type: 'string'
+  }, {
+    name: 'testId',
+    description: 'A unique string that appears as a data attribute data-testid in the rendered code',
+    type: 'string'
+  }]
+}, {
+  name: 'Spinner',
+  packageName: '@atlaskit/spinner',
+  description: 'A loading spinner component.',
+  releasePhase: 'general_availability',
+  category: 'Loading',
+  example: `import Spinner from '@atlaskit/spinner';
+
+<Spinner size="large" />`,
+  props: [{
+    name: 'size',
+    description: 'Size of the spinner',
+    type: "'small' | 'medium' | 'large'"
+  }, {
+    name: 'appearance',
+    description: 'Visual style of the spinner',
+    type: "'inherit' | 'invert'"
+  }, {
+    name: 'delay',
+    description: 'Delay in milliseconds before showing the spinner',
+    type: 'number'
+  }]
+}, {
+  name: 'Skeleton',
+  packageName: '@atlaskit/skeleton',
+  description: 'A loading placeholder component.',
+  releasePhase: 'general_availability',
+  category: 'Loading',
+  example: `import Skeleton from '@atlaskit/skeleton';
+
+<Skeleton height="20px" width="200px" />`,
+  props: [{
+    name: 'height',
+    description: 'Height of the skeleton',
+    type: 'string | number'
+  }, {
+    name: 'width',
+    description: 'Width of the skeleton',
+    type: 'string | number'
+  }, {
+    name: 'isShimmering',
+    description: 'Enables the shimmer animation effect',
+    type: 'boolean'
+  }]
+}, {
+  name: 'Banner',
+  packageName: '@atlaskit/banner',
+  description: 'A component for displaying important messages or announcements.',
+  releasePhase: 'general_availability',
+  category: 'Messaging',
+  example: `import Banner from '@atlaskit/banner';
+
+<Banner
+	appearance="announcement"
+	isOpen={true}
+	icon={<Icon />}
+>
+	Important announcement
+</Banner>`,
+  props: [{
+    name: 'appearance',
+    description: 'Visual style of the banner',
+    type: "'announcement' | 'error' | 'warning'"
+  }, {
+    name: 'isOpen',
+    description: 'Control visibility',
+    type: 'boolean'
+  }, {
+    name: 'icon',
+    description: 'Optional icon',
+    type: 'ReactNode'
+  }, {
+    name: 'children',
+    description: 'Banner content',
+    type: 'ReactNode'
+  }]
+}, {
+  name: 'Flag',
+  packageName: '@atlaskit/flag',
+  description: 'A component for displaying brief messages.',
+  releasePhase: 'general_availability',
+  category: 'Messaging',
+  example: `import Flag, { FlagGroup } from '@atlaskit/flag';
+
+<FlagGroup>
+	<Flag
+		id="flag-1"
+		icon={<Icon label="Info" />}
+		title="Flag Title"
+		description="Flag description"
+		actions={[
+			{
+				content: 'Action',
+				onClick: () => {},
+				testId: 'action-test'
+			}
+		]}
+		appearance="normal"
+		testId="flag-test"
+	/>
+</FlagGroup>`,
+  props: [{
+    name: 'id',
+    description: 'A unique identifier used for rendering and onDismissed callbacks',
+    type: 'number | string'
+  }, {
+    name: 'icon',
+    description: 'The icon displayed in the top-left of the flag. Should be an instance of @atlaskit/icon',
+    type: 'ReactNode'
+  }, {
+    name: 'title',
+    description: 'The bold text shown at the top of the flag',
+    type: 'ReactNode'
+  }, {
+    name: 'description',
+    description: 'The secondary content shown below the flag title',
+    type: 'ReactNode'
+  }, {
+    name: 'actions',
+    description: 'Array of clickable actions to be shown at the bottom of the flag',
+    type: 'Array<{ content: ReactNode, onClick?: (e: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void, href?: string, target?: string, testId?: string }>'
+  }, {
+    name: 'appearance',
+    description: "Makes the flag appearance bold. Setting this to anything other than 'normal' hides the dismiss button",
+    type: "'error' | 'info' | 'normal' | 'success' | 'warning'"
+  }]
+}, {
+  name: 'InlineMessage',
+  packageName: '@atlaskit/inline-message',
+  description: 'A component for displaying inline messages.',
+  releasePhase: 'general_availability',
+  category: 'Messaging',
+  example: `import InlineMessage from '@atlaskit/inline-message';
+
+<InlineMessage
+  title="Inline Message Title"
+  secondaryText="Secondary text"
+  appearance="info"
+  testId="inline-message-test"
+>
+  <p>Content that appears in the dialog when opened</p>
+</InlineMessage>`,
+  props: [{
+    name: 'title',
+    description: 'Text to display first, bolded for emphasis',
+    type: 'ReactNode'
+  }, {
+    name: 'secondaryText',
+    description: 'Text to display second',
+    type: 'ReactNode'
+  }, {
+    name: 'appearance',
+    description: 'Set the icon to be used before the title',
+    type: "'connectivity' | 'confirmation' | 'info' | 'warning' | 'error'"
+  }, {
+    name: 'placement',
+    description: 'The placement to be passed to the inline dialog',
+    type: "'bottom-start' | 'bottom-center' | 'bottom-end' | 'top-start' | 'top-center' | 'top-end' | 'right-start' | 'right-center' | 'right-end' | 'left-start' | 'left-center' | 'left-end'"
+  }]
+}, {
+  name: 'Onboarding',
+  packageName: '@atlaskit/onboarding',
+  description: 'A component for feature onboarding.',
+  releasePhase: 'general_availability',
+  category: 'Messaging',
+  example: `import { Spotlight } from '@atlaskit/onboarding';
+
+<Spotlight
+  target="target-element"
+  content="Feature description"
+/>`,
+  props: [{
+    name: 'target',
+    description: 'Target element ID',
+    type: 'string'
+  }, {
+    name: 'content',
+    description: 'Onboarding content',
+    type: 'string'
+  }, {
+    name: 'actions',
+    description: 'Action buttons',
+    type: 'ReactNode[]'
+  }]
+}, {
+  name: 'SectionMessage',
+  packageName: '@atlaskit/section-message',
+  description: 'A component for section-level messages.',
+  releasePhase: 'general_availability',
+  category: 'Messaging',
+  example: `import SectionMessage from '@atlaskit/section-message';
+
+<SectionMessage
+  appearance="information"
+  title="Section Message Title"
+  testId="section-message-test"
+>
+  <p>Section message content</p>
+  <SectionMessage.Actions>
+    <SectionMessage.Action href="#">Action</SectionMessage.Action>
+  </SectionMessage.Actions>
+</SectionMessage>`,
+  props: [{
+    name: 'appearance',
+    description: 'The appearance styling to use for the section message',
+    type: "'information' | 'warning' | 'error' | 'success' | 'discovery'"
+  }, {
+    name: 'children',
+    description: 'The main content of the section message',
+    type: 'ReactNode'
+  }, {
+    name: 'title',
+    description: 'The heading of the section message',
+    type: 'string'
+  }, {
+    name: 'actions',
+    description: 'Actions for the user to take after reading the section message',
+    type: 'ReactElement | ReactElement<SectionMessageActionProps>[]'
+  }, {
+    name: 'icon',
+    description: 'An Icon component to be rendered instead of the default icon',
+    type: 'React.ElementType'
+  }, {
+    name: 'testId',
+    description: 'A unique string that appears as a data attribute data-testid in the rendered code',
+    type: 'string'
+  }]
+}, {
+  name: 'Breadcrumbs',
+  packageName: '@atlaskit/breadcrumbs',
+  description: 'A navigation component showing the current page hierarchy.',
+  releasePhase: 'general_availability',
+  category: 'Navigation',
+  example: `import Breadcrumbs, { BreadcrumbsItem } from '@atlaskit/breadcrumbs';
+
+<Breadcrumbs>
+  <BreadcrumbsItem href="/">Home</BreadcrumbsItem>
+  <BreadcrumbsItem href="/products">Products</BreadcrumbsItem>
+  <BreadcrumbsItem>Current Page</BreadcrumbsItem>
+</Breadcrumbs>`,
+  props: [{
+    name: 'children',
+    description: 'Breadcrumb items',
+    type: 'ReactNode'
+  }, {
+    name: 'maxItems',
+    description: 'Maximum number of items to show before truncating',
+    type: 'number'
+  }, {
+    name: 'separator',
+    description: 'Custom separator between breadcrumb items',
+    type: 'ReactNode'
+  }]
+}, {
+  name: 'Link',
+  packageName: '@atlaskit/link',
+  description: 'A component for navigation links.',
+  releasePhase: 'general_availability',
+  category: 'Navigation',
+  example: `import Link from '@atlaskit/link';
+
+<Link href="/path">Link text</Link>`,
+  props: [{
+    name: 'href',
+    description: 'Link destination',
+    type: 'string'
+  }, {
+    name: 'children',
+    description: 'Link content',
+    type: 'ReactNode'
+  }, {
+    name: 'isDisabled',
+    description: 'Disabled state',
+    type: 'boolean'
+  }]
+}, {
+  name: 'Menu',
+  packageName: '@atlaskit/menu',
+  description: 'A component for displaying menus.',
+  releasePhase: 'general_availability',
+  category: 'Navigation',
+  example: `import { MenuGroup, Section, ButtonItem, LinkItem, CustomItem } from '@atlaskit/menu';
+
+<MenuGroup spacing="cozy" testId="menu-test">
+  <Section title="Section Title">
+    <ButtonItem>Button Item</ButtonItem>
+    <LinkItem href="/path">Link Item</LinkItem>
+    <CustomItem component={CustomComponent}>Custom Item</CustomItem>
+  </Section>
+</MenuGroup>`,
+  props: [{
+    name: 'children',
+    description: 'Children of the menu group, generally Section components',
+    type: 'ReactNode'
+  }, {
+    name: 'isLoading',
+    description: 'Used to tell assistive technologies that the menu group is loading',
+    type: 'boolean'
+  }, {
+    name: 'spacing',
+    description: 'Configure the density of the menu group content',
+    type: "'compact' | 'cozy'"
+  }, {
+    name: 'role',
+    description: 'Override the accessibility role for the element',
+    type: 'string'
+  }, {
+    name: 'testId',
+    description: 'A unique string that appears as a data attribute data-testid in the rendered code',
+    type: 'string'
+  }]
+}, {
+  name: 'Pagination',
+  packageName: '@atlaskit/pagination',
+  description: 'A component for pagination controls.',
+  releasePhase: 'general_availability',
+  category: 'Navigation',
+  example: `import Pagination from '@atlaskit/pagination';
+
+<Pagination
+  pages={[1, 2, 3, 4, 5]}
+  defaultSelectedIndex={0}
+  label="pagination"
+  pageLabel="page"
+  previousLabel="previous"
+  nextLabel="next"
+  max={7}
+  onChange={(event, page) => console.log(page)}
+  testId="pagination-test"
+/>`,
+  props: [{
+    name: 'pages',
+    description: 'Array of the pages to display',
+    type: 'T[]'
+  }, {
+    name: 'defaultSelectedIndex',
+    description: 'Index of the page to be selected by default',
+    type: 'number'
+  }, {
+    name: 'label',
+    description: 'The aria-label for the pagination nav wrapper',
+    type: 'string'
+  }, {
+    name: 'pageLabel',
+    description: 'The aria-label for the individual page numbers',
+    type: 'string'
+  }, {
+    name: 'max',
+    description: 'Maximum number of pages to be displayed in the pagination',
+    type: 'number'
+  }, {
+    name: 'onChange',
+    description: 'The onChange handler which is called when the page is changed',
+    type: '(event: SyntheticEvent, page: T, analyticsEvent?: UIAnalyticsEvent) => void'
+  }]
+}, {
+  name: 'Tabs',
+  packageName: '@atlaskit/tabs',
+  description: 'A component for tabbed navigation.',
+  releasePhase: 'general_availability',
+  category: 'Navigation',
+  example: `import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
+
+<Tabs>
+  <TabList>
+    <Tab>Tab 1</Tab>
+    <Tab>Tab 2</Tab>
+  </TabList>
+  <TabPanel>Content 1</TabPanel>
+  <TabPanel>Content 2</TabPanel>
+</Tabs>`,
+  props: [{
+    name: 'children',
+    description: 'Tab content',
+    type: 'ReactNode'
+  }, {
+    name: 'selected',
+    description: 'Selected tab index',
+    type: 'number'
+  }, {
+    name: 'onChange',
+    description: 'Tab change handler',
+    type: '(index: number) => void'
+  }]
+}, {
+  name: 'NavigationSystem',
+  packageName: '@atlassian/navigation-system',
+  description: 'A modern navigation system for Atlassian products that provides a flexible and accessible layout structure.',
+  releasePhase: 'early_access',
+  category: 'Navigation',
+  example: `import React, { useState } from 'react';
+import AKBanner from '@atlaskit/banner';
+import { Banner } from '@atlassian/navigation-system/layout/banner';
+import { Main } from '@atlassian/navigation-system/layout/main';
+import { PanelSplitter } from '@atlassian/navigation-system/layout/panel-splitter';
+import { Root } from '@atlassian/navigation-system/layout/root';
+import { SideNav, SideNavContent, SideNavFooter, SideNavToggleButton } from '@atlassian/navigation-system/layout/side-nav';
+import { TopBar } from '@atlassian/navigation-system/layout/top-bar';
+import { CommonActions, Help, HomeActions, NavLogo, UserActions } from '@atlassian/navigation-system/top-nav';
+
+<Root>
+  <TopBar>
+    <HomeActions>
+      <SideNavToggleButton
+        collapseLabel="Collapse sidebar"
+        expandLabel="Expand sidebar"
+      />
+      <NavLogo
+        href="#"
+        logo={AtlassianLogo}
+        icon={AtlassianIcon}
+        label="Home page"
+      />
+    </HomeActions>
+    <CommonActions />
+    <UserActions />
+  </TopBar>
+  <SideNav>
+    <SideNavContent />
+    <SideNavFooter />
+  </SideNav>
+  <Main id="main-container" isFixed />
+</Root>`,
+  props: []
+}, {
+  name: 'Blanket',
+  packageName: '@atlaskit/blanket',
+  description: 'A component for overlays.',
+  releasePhase: 'general_availability',
+  category: 'Overlays and Layering',
+  example: `import Blanket from '@atlaskit/blanket';
+
+<Blanket isTinted />`,
+  props: [{
+    name: 'isTinted',
+    description: 'Tinted overlay',
+    type: 'boolean'
+  }, {
+    name: 'onBlanketClicked',
+    description: 'Click handler',
+    type: '() => void'
+  }]
+}, {
+  name: 'Drawer',
+  packageName: '@atlaskit/drawer',
+  description: 'A sliding panel component.',
+  releasePhase: 'general_availability',
+  category: 'Overlays and Layering',
+  example: `import Drawer from '@atlaskit/drawer';
+
+<Drawer
+  isOpen={true}
+  onClose={() => {}}
+  width="wide"
+>
+  Drawer content
+</Drawer>`,
+  props: [{
+    name: 'isOpen',
+    description: 'Controls the visibility of the drawer',
+    type: 'boolean'
+  }, {
+    name: 'width',
+    description: 'Width of the drawer',
+    type: "'narrow' | 'medium' | 'wide'"
+  }, {
+    name: 'onClose',
+    description: 'Handler called when drawer is closed',
+    type: '() => void'
+  }, {
+    name: 'children',
+    description: 'Content to display in the drawer',
+    type: 'ReactNode'
+  }]
+}, {
+  name: 'Popup',
+  packageName: '@atlaskit/popup',
+  description: 'A component for displaying popup content.',
+  releasePhase: 'general_availability',
+  category: 'Overlays and Layering',
+  example: `import Popup from '@atlaskit/popup';
+
+<Popup
+  content="Popup content"
+  isOpen={true}
+>
+  <button>Trigger</button>
+</Popup>`,
+  props: [{
+    name: 'content',
+    description: 'Popup content',
+    type: 'ReactNode'
+  }, {
+    name: 'isOpen',
+    description: 'Open state',
+    type: 'boolean'
+  }, {
+    name: 'onClose',
+    description: 'Close handler',
+    type: '() => void'
+  }, {
+    name: 'placement',
+    description: 'Popup placement',
+    type: 'string'
+  }]
+}, {
+  name: 'Tooltip',
+  packageName: '@atlaskit/tooltip',
+  description: 'A component for displaying tooltips.',
+  releasePhase: 'general_availability',
+  category: 'Overlays and Layering',
+  example: `import Tooltip from '@atlaskit/tooltip';
+
+<Tooltip content="Tooltip content">
+  <button>Hover me</button>
+</Tooltip>`,
+  props: [{
+    name: 'content',
+    description: 'Tooltip content',
+    type: 'ReactNode'
+  }, {
+    name: 'children',
+    description: 'Trigger element',
+    type: 'ReactNode'
+  }, {
+    name: 'position',
+    description: 'Tooltip position',
+    type: 'string'
+  }]
+}, {
+  name: 'Badge',
+  packageName: '@atlaskit/badge',
+  description: 'A component for displaying status indicators or counts.',
+  releasePhase: 'general_availability',
+  category: 'Status Indicators',
+  example: `import Badge from '@atlaskit/badge';
+
+// Status badge
+<Badge appearance="added">New</Badge>
+
+// Count badge
+<Badge max={99} value={100}>100</Badge>`,
+  props: [{
+    name: 'appearance',
+    description: 'Visual style of the badge',
+    type: "'added' | 'default' | 'important' | 'primary' | 'removed'"
+  }, {
+    name: 'value',
+    description: 'Number to display',
+    type: 'number'
+  }, {
+    name: 'max',
+    description: "Maximum value before showing '+'",
+    type: 'number'
+  }, {
+    name: 'children',
+    description: 'Custom content',
+    type: 'ReactNode'
+  }]
+}, {
+  name: 'EmptyState',
+  packageName: '@atlaskit/empty-state',
+  description: 'A component for empty states.',
+  releasePhase: 'general_availability',
+  category: 'Status Indicators',
+  example: `import EmptyState from '@atlaskit/empty-state';
+
+<EmptyState
+  header="No items"
+  description="Add items to get started"
+/>`,
+  props: [{
+    name: 'header',
+    description: 'Empty state header',
+    type: 'string'
+  }, {
+    name: 'description',
+    description: 'Empty state description',
+    type: 'string'
+  }, {
+    name: 'imageUrl',
+    description: 'Optional image URL',
+    type: 'string'
+  }]
+}, {
+  name: 'Lozenge',
+  packageName: '@atlaskit/lozenge',
+  description: 'A component for status indicators.',
+  releasePhase: 'general_availability',
+  category: 'Status Indicators',
+  example: `import Lozenge from '@atlaskit/lozenge';
+
+<Lozenge appearance="success">Success</Lozenge>`,
+  props: [{
+    name: 'appearance',
+    description: 'Visual style',
+    type: "'success' | 'removed' | 'inprogress'"
+  }, {
+    name: 'children',
+    description: 'Lozenge content',
+    type: 'ReactNode'
+  }, {
+    name: 'isBold',
+    description: 'Bold style',
+    type: 'boolean'
+  }]
+}, {
+  name: 'ProgressIndicator',
+  packageName: '@atlaskit/progress-indicator',
+  description: 'A component for showing progress through steps.',
+  releasePhase: 'general_availability',
+  category: 'Status Indicators',
+  example: `import { ProgressIndicator } from '@atlaskit/progress-indicator';
+
+<ProgressIndicator
+  selectedIndex={1}
+  values={['Step 1', 'Step 2', 'Step 3']}
+/>`,
+  props: [{
+    name: 'selectedIndex',
+    description: 'Current step',
+    type: 'number'
+  }, {
+    name: 'values',
+    description: 'Step labels',
+    type: 'string[]'
+  }, {
+    name: 'onSelect',
+    description: 'Step selection handler',
+    type: '(index: number) => void'
+  }]
+}, {
+  name: 'ProgressTracker',
+  packageName: '@atlaskit/progress-tracker',
+  description: 'A component for tracking progress through a journey.',
+  releasePhase: 'general_availability',
+  category: 'Status Indicators',
+  example: `import { ProgressTracker } from '@atlaskit/progress-tracker';
+
+<ProgressTracker
+  items={[
+    { id: '1', label: 'Step 1', percentageComplete: 100 },
+    { id: '2', label: 'Step 2', percentageComplete: 50 },
+  ]}
+/>`,
+  props: [{
+    name: 'items',
+    description: 'Progress items',
+    type: 'Array<{id: string, label: string, percentageComplete: number}>'
+  }, {
+    name: 'current',
+    description: 'Current item ID',
+    type: 'string'
+  }]
+}, {
+  name: 'Tag',
+  packageName: '@atlaskit/tag',
+  description: 'A component for displaying tags.',
+  releasePhase: 'general_availability',
+  category: 'Status Indicators',
+  example: `import Tag from '@atlaskit/tag';
+
+<Tag text="Tag" />`,
+  props: [{
+    name: 'text',
+    description: 'Tag text',
+    type: 'string'
+  }, {
+    name: 'appearance',
+    description: 'Visual style',
+    type: "'default' | 'rounded'"
+  }, {
+    name: 'color',
+    description: 'Tag color',
+    type: 'string'
+  }]
+}, {
+  name: 'TagGroup',
+  packageName: '@atlaskit/tag-group',
+  description: 'A component for managing multiple tags.',
+  releasePhase: 'general_availability',
+  category: 'Status Indicators',
+  example: `import TagGroup from '@atlaskit/tag-group';
+
+<TagGroup>
+  <Tag text="Tag 1" />
+  <Tag text="Tag 2" />
+</TagGroup>`,
+  props: [{
+    name: 'children',
+    description: 'Tag components',
+    type: 'ReactNode'
+  }, {
+    name: 'alignment',
+    description: 'Tag alignment',
+    type: "'start' | 'end'"
+  }]
+}, {
+  name: 'Code',
+  packageName: '@atlaskit/code',
+  description: 'A component for displaying code snippets.',
+  releasePhase: 'general_availability',
+  category: 'Text and Data Display',
+  example: `<Code>const greeting = 'Hello, world!';</Code>`,
+  props: [{
+    name: 'children',
+    description: 'Content to be rendered in the inline code block',
+    type: 'ReactNode'
+  }, {
+    name: 'testId',
+    description: 'A unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests',
+    type: 'string'
+  }, {
+    name: 'codeBidiWarnings',
+    description: 'When set to false, disables code decorating with bidi warnings',
+    type: 'boolean'
+  }, {
+    name: 'codeBidiWarningLabel',
+    description: 'Label for the bidi warning tooltip',
+    type: 'string'
+  }, {
+    name: 'codeBidiWarningTooltipEnabled',
+    description: 'Sets whether to render tooltip with the warning or not',
+    type: 'boolean'
+  }]
+}, {
+  name: 'Heading',
+  packageName: '@atlaskit/heading',
+  description: 'A typography component used to display text in defined sizes and styles.',
+  releasePhase: 'beta',
+  category: 'Text and Data Display',
+  example: `import Heading from '@atlaskit/heading';
+
+<Heading size="xxlarge">Page title</Heading>`,
+  props: [{
+    name: 'size',
+    description: 'Heading size. This value is detached from the specific heading level applied to allow for more flexibility',
+    type: "'xxlarge' | 'xlarge' | 'large' | 'medium' | 'small' | 'xsmall' | 'xxsmall'"
+  }, {
+    name: 'as',
+    description: 'Allows the component to be rendered as the specified DOM element, overriding a default element set by level prop',
+    type: "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span'"
+  }, {
+    name: 'color',
+    description: 'Token representing text color with a built-in fallback value. Will apply inverse text color automatically if placed within a Box with bold background color. Defaults to color.text',
+    type: "'color.text' | 'color.text.inverse' | 'color.text.warning.inverse'"
+  }, {
+    name: 'children',
+    description: 'The text of the heading',
+    type: 'ReactNode'
+  }, {
+    name: 'id',
+    description: 'Unique identifier for the heading DOM element',
+    type: 'string'
+  }, {
+    name: 'testId',
+    description: 'A unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests',
+    type: 'string'
+  }]
+}, {
+  name: 'InlineEdit',
+  packageName: '@atlaskit/inline-edit',
+  description: 'A component for inline editing.',
+  releasePhase: 'general_availability',
+  category: 'Text and Data Display',
+  example: `import InlineEdit from '@atlaskit/inline-edit';
+
+<InlineEdit
+  defaultValue="Editable text"
+  onConfirm={(value) => console.log(value)}
+  readView={() => <div>Read view</div>}
+  editView={(fieldProps) => <input {...fieldProps} />}
+  testId="inline-edit-test"
+/>`,
+  props: [{
+    name: 'defaultValue',
+    description: 'The user input entered into the field during editView',
+    type: 'any'
+  }, {
+    name: 'editButtonLabel',
+    description: 'Accessibility label for button to enter editView',
+    type: 'string'
+  }, {
+    name: 'editLabel',
+    description: "Append 'edit' to the end of the button label",
+    type: 'string'
+  }, {
+    name: 'hideActionButtons',
+    description: 'Whether to display confirm and cancel action buttons',
+    type: 'boolean'
+  }, {
+    name: 'isRequired',
+    description: 'Whether the input value can be confirmed as empty',
+    type: 'boolean'
+  }, {
+    name: 'onConfirm',
+    description: 'Handler to save and confirm value',
+    type: '(value: any, analyticsEvent: UIAnalyticsEvent) => void'
+  }]
+}, {
+  name: 'TableTree',
+  packageName: '@atlaskit/table-tree',
+  description: 'A component for displaying hierarchical data.',
+  releasePhase: 'general_availability',
+  category: 'Text and Data Display',
+  example: `import TableTree from '@atlaskit/table-tree';
+
+<TableTree
+  headers={['Column 1', 'Column 2']}
+  columns={[Cell, Cell]}
+  items={[
+    { content: 'Row 1', children: [{ content: 'Child 1' }] }
+  ]}
+  label="Table description"
+/>`,
+  props: [{
+    name: 'children',
+    description: 'Table contents when composing with internal components',
+    type: 'ReactNode'
+  }, {
+    name: 'columns',
+    description: 'Components to render cells in each column',
+    type: 'ElementType[]'
+  }, {
+    name: 'columnWidths',
+    description: 'Widths of table columns',
+    type: 'ColumnWidth[]'
+  }, {
+    name: 'headers',
+    description: 'Header text for table columns',
+    type: 'string[]'
+  }, {
+    name: 'items',
+    description: 'Data to render the table',
+    type: 'Array<{ content: ReactNode, children?: Array<{ content: ReactNode }> }>'
+  }]
+}, {
+  name: 'VisuallyHidden',
+  packageName: '@atlaskit/visually-hidden',
+  description: 'A utility component for accessibility.',
+  releasePhase: 'general_availability',
+  category: 'Text and Data Display',
+  example: `import VisuallyHidden from '@atlaskit/visually-hidden';
+
+<VisuallyHidden>
+  <span>Hidden content</span>
+</VisuallyHidden>`,
+  props: [{
+    name: 'children',
+    description: 'The element or elements that should be hidden',
+    type: 'ReactNode'
+  }, {
+    name: 'role',
+    description: 'An ARIA role attribute to aid screen readers',
+    type: 'string'
+  }, {
+    name: 'id',
+    description: 'An id may be appropriate for this component if used in conjunction with aria-describedby on a paired element',
+    type: 'string'
+  }, {
+    name: 'testId',
+    description: 'A unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests',
+    type: 'string'
+  }]
+}, {
+  name: 'Box',
+  packageName: '@atlaskit/primitives/compiled',
+  description: 'A fundamental layout primitive that provides a base for building other components. Box is a generic container that provides managed access to design tokens.',
+  releasePhase: 'general_availability',
+  category: 'Primitives',
+  example: `import { cssMap } from '@atlaskit/css';
+import { Box } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
+
+<Box backgroundColor="color.background.accent.blue.subtlest">
+  Content
+</Box>
+
+// A section with custom styling
+const styles = cssMap({
+  root: {
+    padding: token('space.200'),
+    border: \`\${token('border.width')} solid \${token('color.border')}\`,
+  }
+});
+
+<Box xcss={styles.root} as="section">
+  Styled content
+</Box>`,
+  props: [{
+    name: 'as',
+    description: 'The DOM element to render as the Box. Defaults to "div". Note: SVG elements, "button", and "a" are excluded.',
+    type: 'Exclude<keyof JSX.IntrinsicElements, SVGElements | "button" | "a">',
+    exampleValue: 'as="section"'
+  }, {
+    name: 'children',
+    description: 'Elements to be rendered inside the Box',
+    type: 'ReactNode'
+  }, {
+    name: 'backgroundColor',
+    description: 'Token representing background color with a built-in fallback value.',
+    type: `'elevation.surface' | 'elevation.surface.hovered' | 'elevation.surface.pressed' | 'elevation.surface.overlay' | 'elevation.surface.overlay.hovered' | 'elevation.surface.overlay.pressed' | 'elevation.surface.raised' | 'elevation.surface.raised.hovered' | 'elevation.surface.raised.pressed' | 'elevation.surface.sunken' | 'utility.elevation.surface.current' | 'color.background.accent.lime.subtlest' | 'color.background.accent.lime.subtlest.hovered' | 'color.background.accent.lime.subtlest.pressed' | 'color.background.accent.lime.subtler' | 'color.background.accent.lime.subtler.hovered' | 'color.background.accent.lime.subtler.pressed' | 'color.background.accent.lime.subtle' | 'color.background.accent.lime.subtle.hovered' | 'color.background.accent.lime.subtle.pressed' | 'color.background.accent.lime.bolder' | 'color.background.accent.lime.bolder.hovered' | 'color.background.accent.lime.bolder.pressed' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtlest.hovered' | 'color.background.accent.red.subtlest.pressed' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtler.hovered' | 'color.background.accent.red.subtler.pressed' | 'color.background.accent.red.subtle' | 'color.background.accent.red.subtle.hovered' | 'color.background.accent.red.subtle.pressed' | 'color.background.accent.red.bolder' | 'color.background.accent.red.bolder.hovered' | 'color.background.accent.red.bolder.pressed' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtlest.hovered' | 'color.background.accent.orange.subtlest.pressed' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtler.hovered' | 'color.background.accent.orange.subtler.pressed' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.subtle.hovered' | 'color.background.accent.orange.subtle.pressed' | 'color.background.accent.orange.bolder' | 'color.background.accent.orange.bolder.hovered' | 'color.background.accent.orange.bolder.pressed' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtlest.hovered' | 'color.background.accent.yellow.subtlest.pressed' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtler.hovered' | 'color.background.accent.yellow.subtler.pressed' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.subtle.hovered' | 'color.background.accent.yellow.subtle.pressed' | 'color.background.accent.yellow.bolder' | 'color.background.accent.yellow.bolder.hovered' | 'color.background.accent.yellow.bolder.pressed' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtlest.hovered' | 'color.background.accent.green.subtlest.pressed' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtler.hovered' | 'color.background.accent.green.subtler.pressed' | 'color.background.accent.green.subtle' | 'color.background.accent.green.subtle.hovered' | 'color.background.accent.green.subtle.pressed' | 'color.background.accent.green.bolder' | 'color.background.accent.green.bolder.hovered' | 'color.background.accent.green.bolder.pressed' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtlest.hovered' | 'color.background.accent.teal.subtlest.pressed' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtler.hovered' | 'color.background.accent.teal.subtler.pressed' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.subtle.hovered' | 'color.background.accent.teal.subtle.pressed' | 'color.background.accent.teal.bolder' | 'color.background.accent.teal.bolder.hovered' | 'color.background.accent.teal.bolder.pressed' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtlest.hovered' | 'color.background.accent.blue.subtlest.pressed' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtler.hovered' | 'color.background.accent.blue.subtler.pressed' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.subtle.hovered' | 'color.background.accent.blue.subtle.pressed' | 'color.background.accent.blue.bolder' | 'color.background.accent.blue.bolder.hovered' | 'color.background.accent.blue.bolder.pressed' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtlest.hovered' | 'color.background.accent.purple.subtlest.pressed' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtler.hovered' | 'color.background.accent.purple.subtler.pressed' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.subtle.hovered' | 'color.background.accent.purple.subtle.pressed' | 'color.background.accent.purple.bolder' | 'color.background.accent.purple.bolder.hovered' | 'color.background.accent.purple.bolder.pressed' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtlest.hovered' | 'color.background.accent.magenta.subtlest.pressed' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtler.hovered' | 'color.background.accent.magenta.subtler.pressed' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.subtle.hovered' | 'color.background.accent.magenta.subtle.pressed' | 'color.background.accent.magenta.bolder' | 'color.background.accent.magenta.bolder.hovered' | 'color.background.accent.magenta.bolder.pressed' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtlest.hovered' | 'color.background.accent.gray.subtlest.pressed' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtler.hovered' | 'color.background.accent.gray.subtler.pressed' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.subtle.hovered' | 'color.background.accent.gray.subtle.pressed' | 'color.background.accent.gray.bolder' | 'color.background.accent.gray.bolder.hovered' | 'color.background.accent.gray.bolder.pressed' | 'color.background.disabled' | 'color.background.input' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.inverse.subtle' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.neutral' | 'color.background.neutral.hovered' | 'color.background.neutral.pressed' | 'color.background.neutral.subtle' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.selected' | 'color.background.selected.hovered' | 'color.background.selected.pressed' | 'color.background.selected.bold' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.brand.subtlest' | 'color.background.brand.subtlest.hovered' | 'color.background.brand.subtlest.pressed' | 'color.background.brand.bold' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.brand.boldest' | 'color.background.brand.boldest.hovered' | 'color.background.brand.boldest.pressed' | 'color.background.danger' | 'color.background.danger.hovered' | 'color.background.danger.pressed' | 'color.background.danger.bold' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning' | 'color.background.warning.hovered' | 'color.background.warning.pressed' | 'color.background.warning.bold' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success' | 'color.background.success.hovered' | 'color.background.success.pressed' | 'color.background.success.bold' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery' | 'color.background.discovery.hovered' | 'color.background.discovery.pressed' | 'color.background.discovery.bold' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information' | 'color.background.information.hovered' | 'color.background.information.pressed' | 'color.background.information.bold' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.skeleton' | 'color.skeleton.subtle'`
+  }, {
+    name: 'style',
+    description: 'Inline styles to be applied to the Box (only use as last resort)',
+    type: 'CSSProperties'
+  }, {
+    name: 'xcss',
+    description: 'Apply a subset of permitted styles powered by Atlassian Design System design tokens.',
+    type: 'StrictXCSSProp',
+    exampleValue: 'xcss={cx(styles.root, isHovered && styles.hover)}'
+  }, {
+    name: 'ref',
+    description: 'Forwarded ref',
+    type: 'Ref'
+  }, {
+    name: 'testId',
+    description: 'Test ID for automated testing',
+    type: 'string'
+  }, {
+    name: 'role',
+    description: 'ARIA role attribute',
+    type: 'string'
+  }]
+}, {
+  name: 'Pressable',
+  packageName: '@atlaskit/primitives/compiled',
+  description: 'A primitive for creating interactive elements with consistent press states.',
+  releasePhase: 'general_availability',
+  category: 'Primitives',
+  example: `import { Pressable } from '@atlaskit/primitives/compiled';
+import { cssMap } from '@atlaskit/css';
+import { token } from '@atlaskit/tokens';
+
+const styles = cssMap({
+  pressable: {
+    backgroundColor: token('color.background.brand.subtlest'),
+    '&:hover': {
+      backgroundColor: token('color.background.brand.subtlest.hovered')
+    }
+  }
+});
+
+<Pressable xcss={styles.pressable} onClick={() => console.log('Pressed!')}>
+  Hover me
+</Pressable>`,
+  props: [{
+    name: 'children',
+    description: 'Elements to be rendered inside the Pressable',
+    type: 'ReactNode'
+  }, {
+    name: 'onClick',
+    description: 'Handler called on click with analytics event',
+    type: '(e: MouseEvent, analyticsEvent: UIAnalyticsEvent) => void'
+  }, {
+    name: 'isDisabled',
+    description: 'Whether the button is disabled',
+    type: 'boolean'
+  }, {
+    name: 'interactionName',
+    description: 'Optional name for React UFO press interactions',
+    type: 'string'
+  }, {
+    name: 'componentName',
+    description: 'Optional component name for analytics events',
+    type: 'string'
+  }, {
+    name: 'analyticsContext',
+    description: 'Additional information for analytics events',
+    type: 'Record<string, any>',
+    exampleValue: "{ source: 'form', action: 'submit' }"
+  }, {
+    name: 'ref',
+    description: 'Forwarded ref',
+    type: 'Ref'
+  }, {
+    name: 'testId',
+    description: 'Test ID for automated testing',
+    type: 'string'
+  }, {
+    name: 'role',
+    description: 'ARIA role attribute',
+    type: 'string'
+  }]
+}, {
+  name: 'Text',
+  packageName: '@atlaskit/primitives/compiled',
+  description: 'A primitive for rendering text with consistent typography styles.',
+  releasePhase: 'general_availability',
+  category: 'Primitives',
+  example: `import { Text } from '@atlaskit/primitives/compiled';
+
+<Text>Regular text</Text>
+<Text weight="bold">Heading text</Text>
+<Text color="color.text.accent.blue">
+  Accent text
+</Text>`,
+  props: [{
+    name: 'as',
+    description: 'HTML tag to be rendered. Defaults to `span`.',
+    type: "'span' | 'p' | 'strong' | 'em'"
+  }, {
+    name: 'children',
+    description: 'Elements rendered within the Text element',
+    type: 'ReactNode'
+  }, {
+    name: 'color',
+    description: 'Token representing text color with a built-in fallback value. Will apply inverse text color automatically if placed within a Box with bold background color. Defaults to "color.text" if not nested in other Text components.',
+    type: `'inherit' | 'color.text' | 'color.text.accent.lime' | 'color.text.accent.lime.bolder' | 'color.text.accent.red' | 'color.text.accent.red.bolder' | 'color.text.accent.orange' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green' | 'color.text.accent.green.bolder' | 'color.text.accent.teal' | 'color.text.accent.teal.bolder' | 'color.text.accent.blue' | 'color.text.accent.blue.bolder' | 'color.text.accent.purple' | 'color.text.accent.purple.bolder' | 'color.text.accent.magenta' | 'color.text.accent.magenta.bolder' | 'color.text.accent.gray' | 'color.text.accent.gray.bolder' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.selected' | 'color.text.brand' | 'color.text.danger' | 'color.text.warning' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.text.subtlest' | 'color.text.subtle' | 'color.link' | 'color.link.pressed' | 'color.link.visited' | 'color.link.visited.pressed'`
+  }, {
+    name: 'id',
+    description: 'The HTML id attribute',
+    type: 'string'
+  }, {
+    name: 'maxLines',
+    description: 'The number of lines to limit the provided text to. Text will be truncated with an ellipsis. When maxLines=1, wordBreak defaults to break-all to match the behaviour of text-overflow: ellipsis.',
+    type: 'number'
+  }, {
+    name: 'align',
+    description: 'Text alignment',
+    type: "'center' | 'end' | 'start'"
+  }, {
+    name: 'size',
+    description: 'Text size',
+    type: "'medium' | 'UNSAFE_small' | 'large' | 'small'"
+  }, {
+    name: 'weight',
+    description: 'The HTML font-weight attribute',
+    type: "'bold' | 'medium' | 'regular' | 'semibold'"
+  }, {
+    name: 'xcss',
+    description: 'Apply a subset of permitted styles powered by Atlassian Design System design tokens',
+    type: 'StrictXCSSProp',
+    exampleValue: 'xcss={cx(styles.root, isHovered && styles.hover)}'
+  }, {
+    name: 'ref',
+    description: 'Forwarded ref',
+    type: 'Ref'
+  }, {
+    name: 'testId',
+    description: 'Test ID for automated testing',
+    type: 'string'
+  }, {
+    name: 'role',
+    description: 'ARIA role attribute',
+    type: 'string'
+  }]
+}, {
+  name: 'Calendar',
+  packageName: '@atlaskit/calendar',
+  description: "A calendar component for date selection and display. This component is in Beta phase, meaning it's stable at version 1.0+ but may receive improvements based on customer feedback. Breaking changes will only be made in major releases.",
+  releasePhase: 'beta',
+  category: 'Forms and Input',
+  example: `import Calendar from '@atlaskit/calendar';
+
+// Single date selection
+<Calendar
+  selected={[new Date()]}
+  onChange={(date) => console.log(date)}
+/>
+
+// Multiple date selection
+<Calendar
+  selected={['2024-03-20', '2024-03-21']}
+  onChange={(dates) => console.log(dates)}
+/>`,
+  props: [{
+    name: 'selected',
+    description: 'Currently selected date(s). Can be a single Date object or an array of date strings in YYYY-MM-DD format',
+    type: 'string[]'
+  }, {
+    name: 'onChange',
+    description: 'Handler for date selection changes',
+    type: '(date: string[]) => void'
+  }, {
+    name: 'disabled',
+    description: 'Array of disabled dates (YYYY-MM-DD)',
+    type: 'string[]'
+  }, {
+    name: 'minDate',
+    description: 'Minimum selectable date (YYYY-MM-DD)',
+    type: 'string'
+  }, {
+    name: 'maxDate',
+    description: 'Maximum selectable date (YYYY-MM-DD)',
+    type: 'string'
+  }, {
+    name: 'day',
+    description: 'Currently focused day (0 for no focus)',
+    type: 'number'
+  }, {
+    name: 'defaultDay',
+    description: 'Default focused day',
+    type: 'number'
+  }, {
+    name: 'defaultMonth',
+    description: 'Default month (1-12)',
+    type: 'number'
+  }, {
+    name: 'defaultYear',
+    description: 'Default year',
+    type: 'number'
+  }, {
+    name: 'defaultSelected',
+    description: 'Default selected dates (YYYY-MM-DD)',
+    type: 'string[]'
+  }, {
+    name: 'defaultPreviouslySelected',
+    description: 'Default previously selected dates',
+    type: 'string[]'
+  }, {
+    name: 'disabledDateFilter',
+    description: 'Function to filter disabled dates',
+    type: '(date: string) => boolean'
+  }, {
+    name: 'month',
+    description: 'Current month (1-12)',
+    type: 'number'
+  }, {
+    name: 'nextMonthLabel',
+    description: 'Aria label for next month button',
+    type: 'string'
+  }, {
+    name: 'onBlur',
+    description: 'Blur handler',
+    type: 'FocusEventHandler'
+  }, {
+    name: 'onFocus',
+    description: 'Focus handler',
+    type: 'FocusEventHandler'
+  }, {
+    name: 'onSelect',
+    description: 'Selection handler',
+    type: '(event: SelectEvent, analyticsEvent: UIAnalyticsEvent) => void'
+  }, {
+    name: 'previouslySelected',
+    description: 'Previously selected dates',
+    type: 'string[]'
+  }, {
+    name: 'previousMonthLabel',
+    description: 'Aria label for previous month button',
+    type: 'string'
+  }, {
+    name: 'style',
+    description: 'Custom styles',
+    type: 'CSSProperties'
+  }, {
+    name: 'tabIndex',
+    description: 'Tab index',
+    type: '-1 | 0'
+  }, {
+    name: 'testId',
+    description: 'Test ID for automated tests',
+    type: 'string'
+  }, {
+    name: 'today',
+    description: "Today's date (YYYY-MM-DD)",
+    type: 'string'
+  }, {
+    name: 'weekStartDay',
+    description: 'First day of week (0=Sunday)',
+    type: '0-6'
+  }, {
+    name: 'year',
+    description: 'Current year',
+    type: 'number'
+  }, {
+    name: 'locale',
+    description: 'Locale for date formatting',
+    type: 'string'
+  }]
+}, {
+  name: 'DynamicTable',
+  packageName: '@atlaskit/dynamic-table',
+  description: 'A component for displaying dynamic data tables.',
+  releasePhase: 'general_availability',
+  category: 'Text and Data Display',
+  example: `import DynamicTable from '@atlaskit/dynamic-table';
+
+<DynamicTable
+  head={{
+    cells: [
+      { content: 'Header 1', isSortable: true },
+      { content: 'Header 2' }
+    ]
+  }}
+  rows={[
+    {
+      cells: [
+        { content: 'Cell 1', key: 'cell1' },
+        { content: 'Cell 2', key: 'cell2' }
+      ]
+    }
+  ]}
+  rowsPerPage={10}
+  defaultPage={1}
+  loadingSpinnerSize="large"
+  isLoading={false}
+  testId="dynamic-table-test"
+/>`,
+  props: [{
+    name: 'caption',
+    description: 'Caption for the table styled as a heading',
+    type: 'ReactNode'
+  }, {
+    name: 'head',
+    description: 'Configuration for table headers',
+    type: '{ cells: Array<{ content: ReactNode, isSortable?: boolean, width?: number }> }'
+  }, {
+    name: 'rows',
+    description: 'Data rows for the table',
+    type: 'Array<{ cells: Array<{ content: ReactNode, key: string }> }>'
+  }, {
+    name: 'emptyView',
+    description: 'Content shown when the table has no data',
+    type: 'ReactElement'
+  }, {
+    name: 'loadingSpinnerSize',
+    description: 'Size of the loading spinner',
+    type: "'large' | 'small'"
+  }, {
+    name: 'isLoading',
+    description: 'Whether the table is in a loading state',
+    type: 'boolean'
+  }, {
+    name: 'loadingLabel',
+    description: 'Accessible name for loading state',
+    type: 'string'
+  }, {
+    name: 'isFixedSize',
+    description: 'Force columns to use initial width',
+    type: 'boolean'
+  }, {
+    name: 'rowsPerPage',
+    description: 'Number of rows per page',
+    type: 'number'
+  }, {
+    name: 'totalRows',
+    description: 'Total number of rows for pagination',
+    type: 'number'
+  }, {
+    name: 'onSetPage',
+    description: 'Handler for page changes',
+    type: '(page: number, analyticsEvent?: UIAnalyticsEvent) => void'
+  }, {
+    name: 'onSort',
+    description: 'Handler for column sorting',
+    type: "(sortKey: string, sortOrder: 'ASC' | 'DESC', analyticsEvent?: UIAnalyticsEvent) => void"
+  }, {
+    name: 'onPageRowsUpdate',
+    description: 'Handler for page row updates',
+    type: 'Array<{ cells: Array<{ content: ReactNode, key: string }> }>) => void'
+  }, {
+    name: 'page',
+    description: 'Current page number',
+    type: 'number'
+  }, {
+    name: 'defaultPage',
+    description: 'Initial page number',
+    type: 'number'
+  }, {
+    name: 'sortKey',
+    description: 'Column key for sorting',
+    type: 'string'
+  }, {
+    name: 'defaultSortKey',
+    description: 'Initial sort column',
+    type: 'string'
+  }, {
+    name: 'sortOrder',
+    description: 'Sort direction',
+    type: "'ASC' | 'DESC'"
+  }, {
+    name: 'defaultSortOrder',
+    description: 'Initial sort direction',
+    type: "'ASC' | 'DESC'"
+  }, {
+    name: 'isRankable',
+    description: 'Enable drag and drop sorting',
+    type: 'boolean'
+  }, {
+    name: 'isRankingDisabled',
+    description: 'Disable row dropping',
+    type: 'boolean'
+  }, {
+    name: 'onRankStart',
+    description: 'Handler for drag start',
+    type: '(rankStart: { index: number }) => void'
+  }, {
+    name: 'onRankEnd',
+    description: 'Handler for drop complete',
+    type: '(rankEnd: { index: number, newIndex: number }) => void'
+  }, {
+    name: 'paginationi18n',
+    description: 'Pagination labels',
+    type: '{ label: string, next: string, pageLabel?: string, prev: string }'
+  }, {
+    name: 'highlightedRowIndex',
+    description: 'Index(es) of highlighted rows',
+    type: 'number | number[]'
+  }, {
+    name: 'testId',
+    description: 'Test ID for automated testing',
+    type: 'string'
+  }, {
+    name: 'label',
+    description: 'Accessible label for the table',
+    type: 'string'
+  }]
+}, {
+  name: 'ModalDialog',
+  packageName: '@atlaskit/modal-dialog',
+  description: 'A modal dialog component for important content.',
+  releasePhase: 'general_availability',
+  category: 'Messaging',
+  example: `import React, { Fragment, useCallback, useState } from 'react';
+import Button from '@atlaskit/button/new';
+import Modal, {
+	ModalBody,
+	ModalFooter,
+	ModalHeader,
+	ModalTitle,
+	ModalTransition,
+} from '@atlaskit/modal-dialog';
+
+export default function Example() {
+	const [isOpen, setIsOpen] = useState(false);
+	const openModal = useCallback(() => setIsOpen(true), []);
+	const closeModal = useCallback(() => setIsOpen(false), []);
+
+	return (
+		<Fragment>
+			<Button aria-haspopup="dialog" appearance="primary" onClick={openModal}>
+				Open modal
+			</Button>
+
+			<ModalTransition>
+				{isOpen && (
+					<Modal onClose={closeModal}>
+						<ModalHeader hasCloseButton>
+							<ModalTitle>Default modal header</ModalTitle>
+						</ModalHeader>
+						<ModalBody>
+							Your modal content.
+						</ModalBody>
+						<ModalFooter>
+							<Button appearance="subtle">About modals</Button>
+							<Button appearance="primary" onClick={closeModal}>
+								Close
+							</Button>
+						</ModalFooter>
+					</Modal>
+				)}
+			</ModalTransition>
+		</Fragment>
+	);
+}`,
+  props: [{
+    name: 'autoFocus',
+    description: 'Focus is moved to the first interactive element or specified element',
+    type: 'boolean | RefObject<HTMLElement>'
+  }, {
+    name: 'children',
+    description: 'Contents of the modal dialog',
+    type: 'ReactNode'
+  }, {
+    name: 'focusLockAllowlist',
+    description: 'Callback to allowlist nodes for interaction outside focus lock',
+    type: 'function'
+  }, {
+    name: 'height',
+    description: 'Height of the modal dialog',
+    type: 'number | string'
+  }, {
+    name: 'width',
+    description: 'Width of the modal dialog',
+    type: "'small' | 'medium' | 'large' | 'x-large' | number | string"
+  }, {
+    name: 'onClose',
+    description: 'Callback when modal requests to close',
+    type: '(KeyboardOrMouseEvent, UIAnalyticsEvent) => void'
+  }, {
+    name: 'onCloseComplete',
+    description: 'Callback when modal finishes closing',
+    type: '(element: HTMLElement) => void'
+  }, {
+    name: 'onOpenComplete',
+    description: 'Callback when modal finishes opening',
+    type: '(node: HTMLElement, isAppearing: boolean) => void'
+  }, {
+    name: 'onStackChange',
+    description: 'Callback when modal changes stack position',
+    type: '(stackIndex: number) => void'
+  }, {
+    name: 'shouldScrollInViewport',
+    description: 'Set scroll boundary to viewport instead of modal body',
+    type: 'boolean'
+  }, {
+    name: 'shouldCloseOnOverlayClick',
+    description: 'Close modal when clicking the blanket',
+    type: 'boolean'
+  }, {
+    name: 'shouldCloseOnEscapePress',
+    description: 'Close modal when pressing escape',
+    type: 'boolean'
+  }, {
+    name: 'shouldReturnFocus',
+    description: 'Controls focus behavior on modal exit',
+    type: 'boolean | RefObject<HTMLElement>'
+  }, {
+    name: 'isBlanketHidden',
+    description: 'Remove blanket tinted background',
+    type: 'boolean'
+  }, {
+    name: 'stackIndex',
+    description: 'Position in modal stack (0 is highest)',
+    type: 'number'
+  }, {
+    name: 'label',
+    description: 'Accessibility label when no modal title is present',
+    type: 'string'
+  }, {
+    name: 'testId',
+    description: 'Test ID for automated testing',
+    type: 'string'
+  }]
+}, {
+  name: 'Anchor',
+  packageName: '@atlaskit/primitives/compiled',
+  description: 'A primitive for creating accessible links.',
+  releasePhase: 'general_availability',
+  category: 'Primitives',
+  example: `import { Anchor } from '@atlaskit/primitives/compiled';
+
+<Anchor href="https://example.com">
+  Visit example.com
+</Anchor>`,
+  props: [{
+    name: 'children',
+    description: 'Elements to be rendered inside the Anchor',
+    type: 'ReactNode'
+  }, {
+    name: 'onClick',
+    description: 'Handler called on click with analytics event',
+    type: '(e: MouseEvent, analyticsEvent: UIAnalyticsEvent) => void'
+  }, {
+    name: 'interactionName',
+    description: 'Optional name for React UFO press interactions',
+    type: 'string'
+  }, {
+    name: 'componentName',
+    description: 'Optional component name for analytics events',
+    type: 'string'
+  }, {
+    name: 'analyticsContext',
+    description: 'Additional information for analytics events',
+    type: 'Record<string, any>',
+    exampleValue: "{ source: 'form', action: 'submit' }"
+  }, {
+    name: 'newWindowLabel',
+    description: 'Override text for new window links',
+    type: 'string'
+  }, {
+    name: 'ref',
+    description: 'Forwarded ref',
+    type: 'Ref'
+  }, {
+    name: 'testId',
+    description: 'Test ID for automated testing',
+    type: 'string'
+  }, {
+    name: 'role',
+    description: 'ARIA role attribute',
+    type: 'string'
+  }]
+}, {
+  name: 'Bleed',
+  packageName: '@atlaskit/primitives/compiled',
+  description: 'A utility for creating negative margin effects.',
+  releasePhase: 'general_availability',
+  category: 'Primitives',
+  example: `import { Bleed } from '@atlaskit/primitives/compiled';
+
+<Bleed
+  inline="space.200"
+  block="space.100"
+>
+  Content that bleeds on all sides
+</Bleed>`,
+  props: [{
+    name: 'children',
+    description: 'Elements to be rendered inside the Bleed',
+    type: 'ReactNode'
+  }, {
+    name: 'all',
+    description: 'Bleed along both axes',
+    type: "'space.025' | 'space.050' | 'space.100' | 'space.150' | 'space.200'"
+  }, {
+    name: 'inline',
+    description: 'Bleed along the inline axis',
+    type: "'space.025' | 'space.050' | 'space.100' | 'space.150' | 'space.200'"
+  }, {
+    name: 'block',
+    description: 'Bleed along the block axis',
+    type: "'space.025' | 'space.050' | 'space.100' | 'space.150' | 'space.200'"
+  }, {
+    name: 'testId',
+    description: 'Test ID for automated testing',
+    type: 'string'
+  }, {
+    name: 'role',
+    description: 'ARIA role attribute',
+    type: 'string'
+  }]
+}, {
+  name: 'Show',
+  packageName: '@atlaskit/primitives/compiled',
+  description: 'A primitive for conditionally showing content at specific breakpoints. By default, content is hidden and will be shown at the specified breakpoint.',
+  releasePhase: 'general_availability',
+  category: 'Primitives',
+  example: `import { Show } from '@atlaskit/primitives/compiled';
+
+// Show content above medium breakpoint
+<Show above="md">
+  <div>This content shows on medium screens and up</div>
+</Show>
+
+// Show content below medium breakpoint
+<Show below="md">
+  <div>This content shows on small screens and down</div>
+</Show>`,
+  props: [{
+    name: 'above',
+    description: 'Shows content above the specified breakpoint',
+    type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+  }, {
+    name: 'below',
+    description: 'Shows content below the specified breakpoint',
+    type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+  }, {
+    name: 'as',
+    description: 'The DOM element to render as. Defaults to "div"',
+    type: "'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul'"
+  }, {
+    name: 'children',
+    description: 'Content to be conditionally shown',
+    type: 'ReactNode'
+  }, {
+    name: 'xcss',
+    description: 'Apply a subset of permitted styles powered by Atlassian Design System design tokens',
+    type: 'StrictXCSSProp',
+    exampleValue: 'xcss={cx(styles.root, isHovered && styles.hover)}'
+  }, {
+    name: 'testId',
+    description: 'Test ID for automated testing',
+    type: 'string'
+  }, {
+    name: 'role',
+    description: 'ARIA role attribute',
+    type: 'string'
+  }]
+}, {
+  name: 'Hide',
+  packageName: '@atlaskit/primitives/compiled',
+  description: 'A primitive for conditionally hiding content at specific breakpoints. By default, content is shown and will be hidden at the specified breakpoint.',
+  releasePhase: 'general_availability',
+  category: 'Primitives',
+  example: `import { Hide } from '@atlaskit/primitives/compiled';
+
+<Hide above="md">
+  <div>This content hides on medium screens and up</div>
+</Hide>
+
+<Hide below="md">
+  <div>This content hides on small screens and down</div>
+</Hide>`,
+  props: [{
+    name: 'above',
+    description: 'Hides content above the specified breakpoint',
+    type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+  }, {
+    name: 'below',
+    description: 'Hides content below the specified breakpoint',
+    type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+  }, {
+    name: 'as',
+    description: 'The DOM element to render as. Defaults to "div"',
+    type: "'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul'"
+  }, {
+    name: 'children',
+    description: 'Content to be conditionally hidden',
+    type: 'ReactNode'
+  }, {
+    name: 'xcss',
+    description: 'Apply a subset of permitted styles powered by Atlassian Design System design tokens',
+    type: 'StrictXCSSProp',
+    exampleValue: 'xcss={cx(styles.root, isHovered && styles.hover)}'
+  }, {
+    name: 'testId',
+    description: 'Test ID for automated testing',
+    type: 'string'
+  }, {
+    name: 'role',
+    description: 'ARIA role attribute',
+    type: 'string'
+  }]
+}, {
+  name: 'Flex',
+  packageName: '@atlaskit/primitives/compiled',
+  description: 'A primitive for creating flexible layouts using flexbox.',
+  releasePhase: 'general_availability',
+  category: 'Primitives',
+  example: `import { Flex } from '@atlaskit/primitives/compiled';
+
+<Flex gap="space.100" alignItems="center">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</Flex>
+
+// With responsive props
+<Flex
+  gap={['space.100', 'space.200', 'space.300']}
+  alignItems={['start', 'center', 'end']}
+>
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</Flex>`,
+  props: [{
+    name: 'alignItems',
+    description: 'Aligns flex items along the cross axis',
+    type: "'baseline' | 'center' | 'end' | 'start' | 'stretch'"
+  }, {
+    name: 'as',
+    description: 'The DOM element to render as. Defaults to "div"',
+    type: "'div' | 'span' | 'ul' | 'ol' | 'li' | 'dl'"
+  }, {
+    name: 'children',
+    description: 'Elements to be rendered inside the Flex container',
+    type: 'ReactNode'
+  }, {
+    name: 'direction',
+    description: 'Direction of the flex container',
+    type: "'column' | 'column-reverse' | 'row' | 'row-reverse'"
+  }, {
+    name: 'gap',
+    description: 'Space between flex items',
+    type: "'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000'"
+  }, {
+    name: 'justify',
+    description: 'Aligns flex items along the main axis',
+    type: "'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly' | 'start'"
+  }, {
+    name: 'wrap',
+    description: 'Controls whether flex items can wrap to multiple lines',
+    type: 'boolean'
+  }, {
+    name: 'xcss',
+    description: 'Apply a subset of permitted styles powered by Atlassian Design System design tokens',
+    type: 'StrictXCSSProp',
+    exampleValue: 'xcss={cx(styles.root, isHovered && styles.hover)}'
+  }, {
+    name: 'testId',
+    description: 'Test ID for automated testing',
+    type: 'string'
+  }, {
+    name: 'role',
+    description: 'ARIA role attribute',
+    type: 'string'
+  }]
+}, {
+  name: 'Grid',
+  packageName: '@atlaskit/primitives/compiled',
+  description: 'A primitive for creating grid layouts.',
+  releasePhase: 'general_availability',
+  category: 'Primitives',
+  example: `import { Grid } from '@atlaskit/primitives/compiled';
+
+<Grid
+  templateColumns="repeat(3, 1fr)"
+  gap="space.100"
+>
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</Grid>
+
+// With responsive props
+<Grid
+  templateColumns={['1fr', 'repeat(2, 1fr)', 'repeat(3, 1fr)']}
+  gap={['space.100', 'space.200', 'space.300']}
+>
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</Grid>`,
+  props: [{
+    name: 'as',
+    description: 'The DOM element to render as. Defaults to "div"',
+    type: "'div' | 'span' | 'ul' | 'ol'"
+  }, {
+    name: 'children',
+    description: 'Elements to be rendered inside the Grid container',
+    type: 'ReactNode'
+  }, {
+    name: 'columnGap',
+    description: 'Space between grid columns',
+    type: "'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000'"
+  }, {
+    name: 'gap',
+    description: 'Space between grid items (both rows and columns)',
+    type: "'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000'"
+  }, {
+    name: 'rowGap',
+    description: 'Space between grid rows',
+    type: "'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000'"
+  }, {
+    name: 'templateColumns',
+    description: 'Defines the columns of the grid with a space-separated list of values',
+    type: 'string'
+  }, {
+    name: 'templateRows',
+    description: 'Defines the rows of the grid with a space-separated list of values',
+    type: 'string'
+  }, {
+    name: 'xcss',
+    description: 'Apply a subset of permitted styles powered by Atlassian Design System design tokens',
+    type: 'StrictXCSSProp',
+    exampleValue: 'xcss={cx(styles.root, isHovered && styles.hover)}'
+  }, {
+    name: 'testId',
+    description: 'Test ID for automated testing',
+    type: 'string'
+  }, {
+    name: 'role',
+    description: 'ARIA role attribute',
+    type: 'string'
+  }]
+}, {
+  name: 'Stack',
+  packageName: '@atlaskit/primitives/compiled',
+  description: 'A primitive for creating vertical stacks of content with consistent spacing.',
+  releasePhase: 'general_availability',
+  category: 'Primitives',
+  example: `import { Stack } from '@atlaskit/primitives/compiled';
+
+<Stack gap="space.100">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</Stack>
+
+// With responsive props
+<Stack gap={['space.100', 'space.200', 'space.300']}>
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</Stack>`,
+  props: [{
+    name: 'as',
+    description: 'The DOM element to render as. Defaults to "div"',
+    type: "'div' | 'span' | 'ul' | 'ol'"
+  }, {
+    name: 'children',
+    description: 'Elements to be rendered inside the Stack container',
+    type: 'ReactNode'
+  }, {
+    name: 'gap',
+    description: 'Space between stack items',
+    type: "'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000'"
+  }, {
+    name: 'xcss',
+    description: 'Apply a subset of permitted styles powered by Atlassian Design System design tokens',
+    type: 'StrictXCSSProp',
+    exampleValue: 'xcss={cx(styles.root, isHovered && styles.hover)}'
+  }, {
+    name: 'testId',
+    description: 'Test ID for automated testing',
+    type: 'string'
+  }, {
+    name: 'role',
+    description: 'ARIA role attribute',
+    type: 'string'
+  }]
+}, {
+  name: 'Inline',
+  packageName: '@atlaskit/primitives/compiled',
+  description: 'A primitive for creating horizontal layouts with consistent spacing that can wrap to multiple lines.',
+  releasePhase: 'general_availability',
+  category: 'Primitives',
+  example: `import { Inline } from '@atlaskit/primitives/compiled';
+
+<Inline gap="space.100" alignItems="center">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</Inline>
+
+// With responsive props
+<Inline
+  gap={['space.100', 'space.200', 'space.300']}
+  alignItems={['start', 'center', 'end']}
+>
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</Inline>`,
+  props: [{
+    name: 'alignItems',
+    description: 'Aligns items along the cross axis',
+    type: "'baseline' | 'center' | 'end' | 'start' | 'stretch'"
+  }, {
+    name: 'as',
+    description: 'The DOM element to render as. Defaults to "div"',
+    type: "'div' | 'span' | 'ul' | 'ol' | 'li' | 'dl'"
+  }, {
+    name: 'children',
+    description: 'Elements to be rendered inside the Inline container',
+    type: 'ReactNode'
+  }, {
+    name: 'gap',
+    description: 'Space between inline items',
+    type: "'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000'"
+  }, {
+    name: 'xcss',
+    description: 'Apply a subset of permitted styles powered by Atlassian Design System design tokens',
+    type: 'StrictXCSSProp',
+    exampleValue: 'xcss={cx(styles.root, isHovered && styles.hover)}'
+  }, {
+    name: 'testId',
+    description: 'Test ID for automated testing',
+    type: 'string'
+  }, {
+    name: 'role',
+    description: 'ARIA role attribute',
+    type: 'string'
+  }]
+}];