@atlaskit/ads-mcp 0.17.1 → 0.17.3

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

@@ -3,9 +3,10 @@
  *
  * Generates TypeScript components data for AI tooling from offerings.json files
  *
- * @codegen <<SignedSource::1d781f4539138bf6cabcd8c01b207b06>>
+ * @codegen <<SignedSource::8e120a2eb2205e4c89f4bdddbf4e436f>>
  * @codegenCommand yarn workspace @af/ads-ai-tooling codegen:prototyping
  */
+/* eslint-disable @repo/internal/react/boolean-prop-naming-convention -- not our types */
 
 export var components = [{
   name: 'Avatar',
@@ -21,6 +22,18 @@ export var components = [{
     name: 'appearance',
     description: "Indicates the shape of the avatar. Most avatars are circular, but square avatars\ncan be used for 'container' objects.",
     type: '"circle" | "square" | "hexagon"'
+  }, {
+    name: 'aria-controls',
+    description: 'Identifies the popup element that the avatar controls.\nUsed when Avatar is a trigger for a popup.',
+    type: 'string'
+  }, {
+    name: 'aria-expanded',
+    description: 'Announces to assistive technology whether the controlled popup is currently open or closed.',
+    type: 'boolean'
+  }, {
+    name: 'aria-haspopup',
+    description: 'Informs assistive technology that this element triggers a popup.\nWhen set, Avatar will render as a `<button>` element even without `onClick`.',
+    type: 'boolean | "dialog"'
   }, {
     name: 'as',
     description: 'Replace the wrapping element. This accepts the name of a html tag which will\nbe used to wrap the element.',
@@ -104,11 +117,13 @@ export var components = [{
   props: [{
     name: 'appearance',
     description: 'Indicates the layout of the avatar group.\nAvatars will either be overlapped in a stack, or\nlaid out in an even grid formation.\nDefaults to "stack".',
-    type: '"grid" | "stack"'
+    type: '"grid" | "stack"',
+    defaultValue: '"stack"'
   }, {
     name: 'avatar',
     description: 'Component used to render each avatar.',
-    type: 'React.ForwardRefExoticComponent<AvatarPropTypes & React.RefAttributes<HTMLElement>> | React.ElementType<AvatarProps>'
+    type: 'React.ForwardRefExoticComponent<AvatarPropTypes & React.RefAttributes<HTMLElement>> | React.ElementType<AvatarProps, keyof React.JSX.IntrinsicElements>',
+    defaultValue: 'Avatar'
   }, {
     name: 'borderColor',
     description: 'Typically the background color that the avatar is presented on.\nAccepts any color argument that the CSS border-color property accepts.',
@@ -120,7 +135,8 @@ export var components = [{
   }, {
     name: 'data',
     description: "An array of avatar prop data, that are spread onto each `avatar` component.\n\nFor further usage information on AvatarPropTypes, the supported props for `avatar`, refer to [Avatar's prop documentation](https://atlassian.design/components/avatar/code).",
-    type: '(AvatarPropTypes & { name: string; key?: string | number; })[]'
+    type: '(AvatarPropTypes & { name: string; key?: string | number; })[]',
+    isRequired: true
   }, {
     name: 'isTooltipDisabled',
     description: 'Disables tooltips.',
@@ -128,7 +144,8 @@ export var components = [{
   }, {
     name: 'label',
     description: 'Text to be used as aria-label for the list of avatars.\nScreen reader announcement with default label, which is `avatar group`, is `list, avatar group, X items`.\n\nThe label should describe the `AvatarGroup`\'s entities, for instance:\n- `label="team members"`, screen reader announcement would be `list team members, X items`\n- `label="reviewers"` screen reader announcement would be `list reviewers, X items`\n\nWhen there are several AvatarGroups on the page you should use a unique label to let users distinguish different lists.',
-    type: 'string'
+    type: 'string',
+    defaultValue: '"avatar group"'
   }, {
     name: 'maxCount',
     description: 'The maximum number of avatars allowed in the list.\nDefaults to 5 when displayed as a stack,\nand 11 when displayed as a grid.',
@@ -152,19 +169,23 @@ export var components = [{
   }, {
     name: 'shouldPopupRenderToParent',
     description: "Determines whether the 'show more' popup has `shouldRenderToParent` applied.",
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'false'
   }, {
     name: 'showMoreButtonProps',
     description: 'Provide additional props to the MoreButton.\nExample use cases: altering tab order by providing tabIndex;\nadding onClick behaviour without losing the default dropdown',
-    type: '{ defaultChecked?: boolean; defaultValue?: string | number | readonly string[]; suppressContentEditableWarning?: boolean; suppressHydrationWarning?: boolean; accessKey?: string; autoFocus?: boolean; ... 258 more ...; onTransitionEndCapture?: React.TransitionEventHandler<...>; }'
+    type: '{ defaultChecked?: boolean; defaultValue?: string | number | readonly string[]; suppressContentEditableWarning?: boolean; suppressHydrationWarning?: boolean; accessKey?: string; autoCapitalize?: (string & {}) | ... 5 more ... | "characters"; ... 257 more ...; onTransitionEndCapture?: React.TransitionEventHandler<......',
+    defaultValue: '{}'
   }, {
     name: 'size',
     description: 'Defines the size of the avatar.\nDefaults to "medium".\n\nNote: The "xsmall" size that exists on Avatar is not supported here because elements such as the more indicator cannot be displayed in an accessible manner at that size.',
-    type: '"small" | "medium" | "large" | "xlarge" | "xxlarge"'
+    type: '"small" | "medium" | "large" | "xlarge" | "xxlarge"',
+    defaultValue: '"medium"'
   }, {
     name: 'tooltipPosition',
     description: 'Where the tooltip should appear relative to its target.\nDefaults to tooltip position "bottom".',
-    type: '"top" | "bottom"'
+    type: '"top" | "bottom"',
+    defaultValue: '"bottom"'
   }]
 }, {
   name: 'Badge',
@@ -197,7 +218,7 @@ export var components = [{
   category: 'messaging',
   description: 'A banner displays a prominent message at the top of the screen to communicate important information to users.',
   status: 'general-availability',
-  examples: ['import Banner from \'@atlaskit/banner\';\nimport WarningIcon from \'@atlaskit/icon/core/status-warning\';\nimport Box from \'@atlaskit/primitives/box\';\nexport default (): React.JSX.Element => (\n\t<Box>\n\t\t<Banner\n\t\t\ticon={<WarningIcon label="Warning"   spacing="spacious" />}\n\t\t\ttestId="basicTestId"\n\t\t>\n\t\t\tYour license is about to expire. Please renew your license within the next week.\n\t\t</Banner>\n\t</Box>\n);'],
+  examples: ['import Banner from \'@atlaskit/banner\';\nimport WarningIcon from \'@atlaskit/icon/core/status-warning\';\nimport Box from \'@atlaskit/primitives/box\';\nexport default (): React.JSX.Element => (\n\t<Box>\n\t\t<Banner icon={<WarningIcon label="Warning" spacing="spacious" />} testId="basicTestId">\n\t\t\tYour license is about to expire. Please renew your license within the next week.\n\t\t</Banner>\n\t</Box>\n);'],
   accessibilityGuidelines: ['Ensure banner content is announced by screen readers', 'Use appropriate color contrast for text readability', 'Provide clear, actionable messaging', 'Consider keyboard navigation for interactive banners'],
   usageGuidelines: ['Use for important messages that need immediate attention', 'Place at the top of the screen for maximum visibility', 'Keep messaging concise and actionable', 'Use appropriate appearance variants for different message types', 'Consider dismissibility for non-critical messages'],
   contentGuidelines: ['Write clear, concise messages', 'Use action-oriented language when appropriate', 'Ensure messages are relevant to the current context', 'Provide clear next steps when needed'],
@@ -312,7 +333,8 @@ export var components = [{
   }, {
     name: 'children',
     description: 'Text content to be rendered in the button.',
-    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
+    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
+    isRequired: true
   }, {
     name: 'iconAfter',
     description: "Places an icon within the button, after the button's text.",
@@ -361,7 +383,7 @@ export var components = [{
   category: 'form',
   description: 'A button that displays only an icon with an optional tooltip. Perfect for toolbar actions, compact interfaces, and when space is limited.',
   status: 'general-availability',
-  examples: ['import { IconButton } from \'@atlaskit/button/new\';\nimport AddIcon from \'@atlaskit/icon/core/add\';\nimport DeleteIcon from \'@atlaskit/icon/core/delete\';\nimport InfoIcon from \'@atlaskit/icon/core/status-information\';\nexport default [\n\t<IconButton icon={AddIcon} label="Add new item" appearance="primary" />,\n\t<IconButton icon={InfoIcon} label="Show information" appearance="subtle" spacing="compact" />,\n\t<IconButton icon={DeleteIcon} label="Delete permanently" appearance="discovery" shape="circle" />,\n];'],
+  examples: ['import { IconButton } from \'@atlaskit/button/new\';\nimport AddIcon from \'@atlaskit/icon/core/add\';\nimport DeleteIcon from \'@atlaskit/icon/core/delete\';\nimport InfoIcon from \'@atlaskit/icon/core/status-information\';\nconst _default_1: React.JSX.Element[] = [\n\t<IconButton icon={AddIcon} label="Add new item" appearance="primary" />,\n\t<IconButton icon={InfoIcon} label="Show information" appearance="subtle" spacing="compact" />,\n\t<IconButton icon={DeleteIcon} label="Delete permanently" appearance="discovery" shape="circle" />,\n];\nexport default _default_1;'],
   usageGuidelines: ['Use for toolbar actions and compact interfaces', 'Choose icons that clearly represent their function', 'Group related icon buttons together', 'Use sparingly to avoid visual clutter', 'Consider using tooltips for additional context', 'Always provide a meaningful label for accessibility', 'The icon should clearly represent the action it performs'],
   contentGuidelines: ['Use clear, concise, descriptive labels', 'Use action verbs (e.g., "Edit item", "Delete comment")', 'Choose icons that are universally understood', 'Avoid using icons without labels in critical actions'],
   props: [{
@@ -375,7 +397,8 @@ export var components = [{
   }, {
     name: 'icon',
     description: 'Places an icon within the button.',
-    type: 'ComponentClass<Omit<IconProps, "size"> | Omit<NewIconProps, "spacing" | "size">, any> | FunctionComponent<Omit<IconProps, "size"> | Omit<...>>'
+    type: 'ComponentClass<Omit<IconProps, "size"> | Omit<NewIconProps, "spacing" | "size">, any> | FunctionComponent<Omit<IconProps, "size"> | Omit<...>>',
+    isRequired: true
   }, {
     name: 'isDisabled',
     description: 'Disable the button to prevent user interaction.',
@@ -395,7 +418,8 @@ export var components = [{
   }, {
     name: 'label',
     description: 'Provide an accessible label, often used by screen readers.',
-    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
+    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
+    isRequired: true
   }, {
     name: 'onBlur',
     description: 'Handler called on blur.',
@@ -419,7 +443,7 @@ export var components = [{
   }, {
     name: 'tooltip',
     description: 'Props passed down to the Tooltip component.',
-    type: '{ testId?: string; analyticsContext?: Record<string, any>; content?: ReactNode | (({ update }: { update?: () => void; }) => ReactNode); component?: ComponentType<TooltipPrimitiveProps> | ForwardRefExoticComponent<...>; ... 13 more ...; shortcut?: string[]; }'
+    type: '{ testId?: string; analyticsContext?: Record<string, any>; content?: ReactNode | (({ update }: { update?: () => void; }) => ReactNode); component?: ComponentType<TooltipPrimitiveProps> | ForwardRefExoticComponent<...>; ... 15 more ...; UNSAFE_shouldRenderToParent?: boolean; }'
   }]
 }, {
   name: 'SplitButton',
@@ -428,26 +452,30 @@ export var components = [{
   category: 'form',
   description: 'A button that splits into a primary action and a dropdown menu. The main button performs the primary action, while the dropdown arrow reveals additional related actions.',
   status: 'general-availability',
-  examples: ["import Button, { IconButton, SplitButton } from '@atlaskit/button/new';\nimport DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';\nimport ChevronDownIcon from '@atlaskit/icon/core/chevron-down';\nexport default (\n\t<SplitButton spacing=\"compact\">\n\t\t<Button>Link work item</Button>\n\t\t<DropdownMenu\n\t\t\tshouldRenderToParent\n\t\t\ttrigger={({ triggerRef, ...triggerProps }) => (\n\t\t\t\t<IconButton\n\t\t\t\t\tref={triggerRef}\n\t\t\t\t\t{...triggerProps}\n\t\t\t\t\ticon={ChevronDownIcon}\n\t\t\t\t\tlabel=\"More link work item options\"\n\t\t\t\t/>\n\t\t\t)}\n\t\t>\n\t\t\t<DropdownItemGroup>\n\t\t\t\t<DropdownItem>Create new link</DropdownItem>\n\t\t\t\t<DropdownItem>Link existing item</DropdownItem>\n\t\t\t</DropdownItemGroup>\n\t\t</DropdownMenu>\n\t</SplitButton>\n);"],
+  examples: ["import Button, { IconButton, SplitButton } from '@atlaskit/button/new';\nimport DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';\nimport ChevronDownIcon from '@atlaskit/icon/core/chevron-down';\nconst _default_1: React.JSX.Element = (\n\t<SplitButton spacing=\"compact\">\n\t\t<Button>Link work item</Button>\n\t\t<DropdownMenu\n\t\t\tshouldRenderToParent\n\t\t\ttrigger={({ triggerRef, ...triggerProps }) => (\n\t\t\t\t<IconButton\n\t\t\t\t\tref={triggerRef}\n\t\t\t\t\t{...triggerProps}\n\t\t\t\t\ticon={ChevronDownIcon}\n\t\t\t\t\tlabel=\"More link work item options\"\n\t\t\t\t/>\n\t\t\t)}\n\t\t>\n\t\t\t<DropdownItemGroup>\n\t\t\t\t<DropdownItem>Create new link</DropdownItem>\n\t\t\t\t<DropdownItem>Link existing item</DropdownItem>\n\t\t\t</DropdownItemGroup>\n\t\t</DropdownMenu>\n\t</SplitButton>\n);\nexport default _default_1;"],
   accessibilityGuidelines: ['Provide descriptive labels for the IconButton trigger'],
   usageGuidelines: ['Always must have exactly two children: `Button` and `DropdownMenu` that are related to each other', 'Use `shouldRenderToParent` on `DropdownMenu` for proper positioning', 'Make the primary action the most common or important action', 'Limit dropdown items to avoid overwhelming users'],
   contentGuidelines: ['Use clear, action-oriented text for the primary button', 'Keep dropdown item labels concise and descriptive', 'Use consistent terminology across related actions'],
   props: [{
     name: 'appearance',
     description: 'The style variation for child buttons. Will override any appearance set on a child button.',
-    type: '"default" | "primary"'
+    type: '"default" | "primary"',
+    defaultValue: '"default"'
   }, {
     name: 'children',
     description: 'Only two children are allowed.\nFirst child is the primary action, second child is the secondary action.\nThe assumption is that for both children trees there is a button reading the context.',
-    type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | React.ReactPortal'
+    type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | React.ReactPortal',
+    isRequired: true
   }, {
     name: 'isDisabled',
     description: 'Whether all child buttons should be disabled.',
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'false'
   }, {
     name: 'spacing',
     description: 'Controls the amount of padding in the child buttons.',
-    type: '"default" | "compact"'
+    type: '"default" | "compact"',
+    defaultValue: '"default"'
   }]
 }, {
   name: 'LinkButton',
@@ -456,7 +484,7 @@ export var components = [{
   category: 'form',
   description: 'A button that renders as an anchor tag for navigation. Combines the visual appearance of a button with the semantic behavior of a link.',
   status: 'general-availability',
-  examples: ['import { LinkButton } from \'@atlaskit/button/new\';\nexport default [\n\t<LinkButton href="https://atlassian.com" target="_blank" appearance="subtle">\n\t\tExternal Link\n\t</LinkButton>,\n\t// With a Router (requires `<AppProvider routerLinkComponent={Link} />` setup at the root)\n\t<LinkButton href={{ to: \'/about\', replace: true }}>About Page</LinkButton>,\n];'],
+  examples: ['import { LinkButton } from \'@atlaskit/button/new\';\nconst _default_1: React.JSX.Element[] = [\n\t<LinkButton href="https://atlassian.com" target="_blank" appearance="subtle">\n\t\tExternal Link\n\t</LinkButton>,\n\t// With a Router (requires `<AppProvider routerLinkComponent={Link} />` setup at the root)\n\t<LinkButton href={{ to: \'/about\', replace: true }}>About Page</LinkButton>,\n];\nexport default _default_1;'],
   usageGuidelines: ['Use for navigation actions that change the URL', 'Use for external links and internal navigation', "Consider using regular buttons for actions that don't navigate", 'Provide clear visual indication of link behavior', 'Use consistent styling with other buttons when appropriate', 'Use for navigation actions that should look like buttons but behave like links', 'Perfect for external links, internal navigation, or any action that changes the URL'],
   contentGuidelines: ['Use clear, descriptive text that indicates the destination', 'Be specific about where the link will take the user', 'Use action-oriented language when appropriate', "Avoid generic terms like 'Click here' or 'Learn more'"],
   props: [{
@@ -470,11 +498,13 @@ export var components = [{
   }, {
     name: 'children',
     description: 'Text content to be rendered in the button.',
-    type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
+    type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
+    isRequired: true
   }, {
     name: 'href',
     description: 'Provides a URL for link buttons. When using an AppProvider with a configured router link component, a `RouterLinkConfig` object type can be provided for advanced usage. See the [Link Button routing example](/components/button/examples#routing) for more details.',
-    type: 'string | RouterLinkConfig'
+    type: 'string | RouterLinkConfig',
+    isRequired: true
   }, {
     name: 'iconAfter',
     description: "Places an icon within the button, after the button's text.",
@@ -519,7 +549,7 @@ export var components = [{
   category: 'form',
   description: 'A component for grouping related buttons together with consistent spacing and alignment.',
   status: 'general-availability',
-  examples: ['import { ButtonGroup } from \'@atlaskit/button\';\nimport Button from \'@atlaskit/button/new\';\nexport default [\n\t<ButtonGroup titleId="heading-options">\n\t\t<Button appearance="primary">Save</Button>\n\t\t<Button appearance="danger">Delete</Button>\n\t\t<Button appearance="subtle">Cancel</Button>\n\t</ButtonGroup>,\n];'],
+  examples: ['import { ButtonGroup } from \'@atlaskit/button\';\nimport Button from \'@atlaskit/button/new\';\nconst _default_1: React.JSX.Element[] = [\n\t<ButtonGroup titleId="heading-options">\n\t\t<Button appearance="primary">Save</Button>\n\t\t<Button appearance="danger">Delete</Button>\n\t\t<Button appearance="subtle">Cancel</Button>\n\t</ButtonGroup>,\n];\nexport default _default_1;'],
   usageGuidelines: ['Use for related actions that belong together', 'Group buttons that perform similar or complementary actions', 'Maintain consistent spacing and alignment', 'Consider the visual hierarchy within the group', "Don't group unrelated actions together", 'Use when you have multiple related actions that should be visually grouped', 'Provides consistent spacing and alignment between buttons'],
   contentGuidelines: ['Ensure button labels are consistent in tone and style', 'Use parallel structure for related actions', 'Keep labels concise but descriptive', 'Consider the order of actions within the group'],
   props: [{
@@ -549,7 +579,7 @@ export var components = [{
   props: [{
     name: 'appearance',
     description: 'The base styling to apply to the button.',
-    type: '"link" | "default" | "danger" | "primary" | "subtle" | "subtle-link" | "warning"'
+    type: '"default" | "danger" | "link" | "primary" | "subtle" | "subtle-link" | "warning"'
   }, {
     name: 'autoFocus',
     description: 'Set the button to autofocus on mount.',
@@ -561,7 +591,7 @@ export var components = [{
   }, {
     name: 'component',
     description: '',
-    type: 'ComponentType<AllHTMLAttributes<HTMLElement>> | ElementType<any>'
+    type: 'ComponentType<AllHTMLAttributes<HTMLElement>> | ElementType<any, keyof JSX.IntrinsicElements>'
   }, {
     name: 'href',
     description: "Provides a URL that's used when the button is a link styled as a button.",
@@ -794,7 +824,7 @@ export var components = [{
   category: 'data-display',
   description: 'A component for displaying code snippets.',
   status: 'general-availability',
-  examples: ["import { Code } from '@atlaskit/code';\nexport default [<Code>{`<Code />`}</Code>];"],
+  examples: ["import { Code } from '@atlaskit/code';\nconst _default_1: React.JSX.Element[] = [<Code>{`<Code />`}</Code>];\nexport default _default_1;"],
   accessibilityGuidelines: ['Ensure code content is announced properly by screen readers', 'Use appropriate contrast for code readability', 'Consider code context and meaning'],
   usageGuidelines: ['Use for inline code snippets', 'Consider syntax highlighting needs', 'Use appropriate font styling', 'Consider code block vs inline code'],
   contentGuidelines: ['Use clear, readable code examples', 'Consider code formatting and indentation', 'Use meaningful variable names in examples', 'Keep code snippets concise'],
@@ -822,22 +852,25 @@ export var components = [{
   category: 'data-display',
   description: 'A component for displaying multi-line code blocks with syntax highlighting.',
   status: 'general-availability',
-  examples: ['import { CodeBlock } from \'@atlaskit/code\';\nconst exampleCodeBlock = `export default ({ name }: { name: string }) => <div>Hello {name}</div>;`;\nexport default [<CodeBlock highlight="15" language="tsx" text={exampleCodeBlock} />];'],
+  examples: ['import { CodeBlock } from \'@atlaskit/code\';\nconst exampleCodeBlock = `export default ({ name }: { name: string }) => <div>Hello {name}</div>;`;\nconst _default_1: React.JSX.Element[] = [\n\t<CodeBlock highlight="15" language="tsx" text={exampleCodeBlock} />,\n];\nexport default _default_1;'],
   accessibilityGuidelines: ['Ensure code blocks are announced properly by screen readers', 'Use appropriate contrast for code readability', 'Consider code context and meaning', 'Provide proper language identification'],
   usageGuidelines: ['Use for multi-line code examples', 'Specify appropriate language for syntax highlighting', 'Consider code block sizing and scrolling', 'Use for code snippets that need formatting'],
   contentGuidelines: ['Use clear, readable code examples', 'Consider code formatting and indentation', 'Use meaningful variable names in examples', 'Keep code blocks focused and relevant'],
   props: [{
     name: 'codeBidiWarningLabel',
     description: 'Label for the bidi warning tooltip.',
-    type: 'string'
+    type: 'string',
+    defaultValue: "'Bidirectional characters change the order that text is rendered. This could be used to obscure malicious code.'"
   }, {
     name: 'firstLineNumber',
     description: 'Sets the number of the first line, if showLineNumbers is set to true.',
-    type: 'number'
+    type: 'number',
+    defaultValue: '1'
   }, {
     name: 'hasBidiWarnings',
     description: 'When set to `false`, disables code decorating with bidi warnings.',
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'true'
   }, {
     name: 'highlight',
     description: 'Comma delimited lines to highlight.\n\nExample uses:\n- To highlight one line `highlight="3"`\n- To highlight a group of lines `highlight="1-5"`\n- To highlight multiple groups `highlight="1-5,7,10,15-20"`',
@@ -853,7 +886,8 @@ export var components = [{
   }, {
     name: 'isBidiWarningTooltipEnabled',
     description: 'Sets whether to render tooltip with the warning or not.\nIntended to be disabled when used in a mobile view, such as in the editor via mobile bridge,\nwhere the tooltip could end up being cut off or otherwise not work as expected.',
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'true'
   }, {
     name: 'label',
     description: "Text used to describe that the content of the code block is scrollable.\nSet only if the code block is scrollable. Defaults to 'Scrollable content'.",
@@ -861,19 +895,23 @@ export var components = [{
   }, {
     name: 'language',
     description: 'Language reference designed to be populated from `SUPPORTED_LANGUAGES` in\n`design-system/code`. Run against language grammars from PrismJS (full list\navailable at [PrismJS documentation](https://prismjs.com/#supported-languages)).\n\nWhen set to "text" will not perform highlighting. If unsupported language\nprovided - code will be treated as "text" with no highlighting.',
-    type: '"text" | "PHP" | "php" | "php3" | "php4" | "php5" | "Java" | "java" | "CSharp" | "csharp" | "c#" | "Python" | "python" | "py" | "JavaScript" | "javascript" | "js" | "Html" | "html" | ... 234 more ... | "markdown"'
+    type: '"PHP" | "php" | "php3" | "php4" | "php5" | "Java" | "java" | "CSharp" | "csharp" | "c#" | "Python" | "python" | "py" | "JavaScript" | "javascript" | "js" | "Html" | "html" | "xml" | ... 234 more ... | "markdown"',
+    defaultValue: "'text'"
   }, {
     name: 'shouldShowLineNumbers',
     description: 'Sets whether to display code line numbers or not.',
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'true'
   }, {
     name: 'shouldWrapLongLines',
     description: 'Sets whether long lines will create a horizontally scrolling container.\nWhen set to `true`, these lines will visually wrap instead.',
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'false'
   }, {
     name: 'text',
     description: 'The code to be formatted.',
-    type: 'string'
+    type: 'string',
+    isRequired: true
   }]
 }, {
   name: 'Comment',
@@ -889,47 +927,53 @@ export var components = [{
   props: [{
     name: 'actions',
     description: 'A list of `CommentAction` items rendered as a row of buttons below the content.',
-    type: 'ReactNode[]'
+    type: 'React.ReactNode[]',
+    defaultValue: '[]'
   }, {
     name: 'afterContent',
     description: "Content that is rendered after the comment's content.",
-    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
+    type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
   }, {
     name: 'author',
     description: 'A `CommentAuthor` element containing the name of the author.',
-    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
+    type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
   }, {
     name: 'avatar',
     description: "The element to display as the avatar. It's best to use `@atlaskit/avatar`.",
-    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
+    type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
+    isRequired: true
   }, {
     name: 'children',
     description: 'Provide nested comments as children.',
-    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
+    type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
   }, {
     name: 'content',
     description: 'The main content for the comment.',
-    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
+    type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
   }, {
     name: 'edited',
     description: 'A `CommentEdited` element which displays next to the time. Indicates whether the comment has been edited.',
-    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
+    type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
   }, {
     name: 'errorActions',
     description: 'A list of `CommentAction` items rendered with a warning icon instead of the actions.',
-    type: 'ReactNode[]'
+    type: 'React.ReactNode[]',
+    defaultValue: '[]'
   }, {
     name: 'errorIconLabel',
     description: 'Text to show in the error icon label.',
-    type: 'string'
+    type: 'string',
+    defaultValue: '""'
   }, {
     name: 'headingLevel',
     description: 'Use this to set the semantic heading level of the comment. The default comment heading has an `h3` tag. Make sure that headings are in the correct order and don’t skip levels.',
-    type: '"1" | "2" | "3" | "4" | "5" | "6"'
+    type: '"3" | "1" | "2" | "4" | "5" | "6"',
+    defaultValue: '"3"'
   }, {
     name: 'highlighted',
     description: 'Sets whether this comment should be highlighted.',
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'false'
   }, {
     name: 'id',
     description: 'An ID to be applied to the comment.',
@@ -937,19 +981,23 @@ export var components = [{
   }, {
     name: 'isError',
     description: 'Indicates whether the component is in an error state. Hides actions and time.',
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'false'
   }, {
     name: 'isSaving',
     description: 'Enables "optimistic saving" mode which removes actions and displays text from the `savingText` prop.',
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'false'
   }, {
     name: 'restrictedTo',
     description: 'Text for the "restricted to" label. This will display in the top items, before the main content.',
-    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
+    type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
+    defaultValue: '""'
   }, {
     name: 'savingText',
     description: 'Text to show when in "optimistic saving" mode.',
-    type: 'string'
+    type: 'string',
+    defaultValue: '"Sending..."'
   }, {
     name: 'shouldHeaderWrap',
     description: 'Controls if the comment header should wrap.',
@@ -961,7 +1009,7 @@ export var components = [{
   }, {
     name: 'time',
     description: 'A `CommentTime` element containing the time to display.',
-    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
+    type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
   }, {
     name: 'type',
     description: 'The type of comment. This will be rendered in a lozenge at the top of the comment, before the main content.',
@@ -974,7 +1022,7 @@ export var components = [{
   category: 'form',
   description: 'A component for selecting date values with calendar support.',
   status: 'general-availability',
-  examples: ['import { DatePicker } from \'@atlaskit/datetime-picker\';\nconst Example = (): React.JSX.Element => (\n\t<DatePicker\n\t\tclearControlLabel="Clear select date"\n\t\tonChange={() => {}}\n\t\tshouldShowCalendarButton\n\t\topenCalendarLabel="open calendar"\n\t/>\n);\nexport default Example;'],
+  examples: ['import { DatePicker } from \'@atlaskit/datetime-picker\';\nimport __noop from \'@atlaskit/ds-lib/noop\';\nconst Example = (): React.JSX.Element => (\n\t<DatePicker\n\t\tclearControlLabel="Clear select date"\n\t\tonChange={__noop}\n\t\tshouldShowCalendarButton\n\t\topenCalendarLabel="open calendar"\n\t/>\n);\nexport default Example;'],
   accessibilityGuidelines: ['Ensure proper keyboard navigation', 'Use appropriate date formats', 'Provide clear date labels', 'Consider screen reader announcements'],
   usageGuidelines: ['Use for date selection only', 'Provide clear date formats', 'Handle date validation appropriately', 'Consider calendar button visibility'],
   contentGuidelines: ['Use clear, descriptive labels', 'Provide helpful placeholder text', 'Use appropriate date formats', 'Keep labels concise but descriptive'],
@@ -1017,7 +1065,8 @@ export var components = [{
   }, {
     name: 'inputLabel',
     description: 'The name of the input, used when `shouldShowCalendarButton` is true. See `shouldShowCalendarButton` description for more details.',
-    type: 'string'
+    type: 'string',
+    defaultValue: "'Date picker'"
   }, {
     name: 'inputLabelId',
     description: 'The ID of the label for the input, used when `shouldShowCalendarButton` is\ntrue. See `shouldShowCalendarButton` description for more details.',
@@ -1081,7 +1130,8 @@ export var components = [{
   }, {
     name: 'openCalendarLabel',
     description: 'The label associated with the button to open the calendar, rendered via the\n`shouldShowCalendarButton` prop. If a `label` prop is provided, this\ncalendar button label will be prefixed by the value of `label`. If no\n`label` prop is provided, this prefix should be manually added. For\nexample,\n\n```tsx\n<label id="label" htmlFor="datepicker">Desired Appointment Date</label>\n<DatePicker\n\tid="datepicker"\n\tshouldShowCalendarButton\n\tinputLabel="Desired Appointment Date"\n\topenCalendarLabel="open calendar"\n/>\n```',
-    type: 'string'
+    type: 'string',
+    defaultValue: "'open calendar'"
   }, {
     name: 'parseInputValue',
     description: 'A function for parsing input characters and transforming them into a Date object.\nBy default parses the date string based off the locale. Note that this does\nnot affect how the resulting value is displayed in the input. Use the\n`dateFormat` or `formatDisplayLabel` prop to handle how the value is\ndisplayed.',
@@ -1097,11 +1147,12 @@ export var components = [{
   }, {
     name: 'selectProps',
     description: '',
-    type: 'Omit<SelectProps<OptionType, false>, "aria-describedby" | "placeholder" | "aria-label" | "inputId"> & { \'aria-describedby\'?: never; \'aria-label\'?: never; inputId?: never; placeholder?: never; }'
+    type: 'Omit<SelectProps<OptionType, false>, "aria-label" | "aria-describedby" | "inputId" | "placeholder"> & { \'aria-describedby\'?: never; \'aria-label\'?: never; inputId?: never; placeholder?: never; } & { ...; }'
   }, {
     name: 'shouldShowCalendarButton',
     description: 'Provides a functional calendar button that opens the calendar picker that\nlives on the right side of the date picker.\n\nThe accessible name for this button is caculated using either the `label`,\n`inputLabel`, or `inputLabelId` props, along with the `openCalendarLabel`\nprop.',
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'false'
   }, {
     name: 'spacing',
     description: 'The spacing for the select control.\n\nCompact is `gridSize() * 4`, default is `gridSize * 5`.',
@@ -1122,7 +1173,7 @@ export var components = [{
   category: 'form',
   description: 'A component for selecting time values with clock interface.',
   status: 'general-availability',
-  examples: ['import { TimePicker } from \'@atlaskit/datetime-picker\';\nconst Example = (): React.JSX.Element => (\n\t<TimePicker\n\t\tclearControlLabel="Clear select time (editable)"\n\t\tdefaultValue="14:30"\n\t\tonChange={() => {}}\n\t\ttimeFormat="HH:mm:ss A"\n\t\ttimeIsEditable\n\t\tselectProps={{\n\t\t\tclassNamePrefix: \'timepicker-select\',\n\t\t}}\n\t/>\n);\nexport default Example;'],
+  examples: ['import { TimePicker } from \'@atlaskit/datetime-picker\';\nimport __noop from \'@atlaskit/ds-lib/noop\';\nconst Example = (): React.JSX.Element => (\n\t<TimePicker\n\t\tclearControlLabel="Clear select time (editable)"\n\t\tdefaultValue="14:30"\n\t\tonChange={__noop}\n\t\ttimeFormat="HH:mm:ss A"\n\t\ttimeIsEditable\n\t\tselectProps={{\n\t\t\tclassNamePrefix: \'timepicker-select\',\n\t\t}}\n\t/>\n);\nexport default Example;'],
   accessibilityGuidelines: ['Ensure proper keyboard navigation', 'Use appropriate time formats', 'Provide clear time labels', 'Consider screen reader announcements'],
   usageGuidelines: ['Use for time selection only', 'Provide clear time formats', 'Handle time validation appropriately', 'Consider editable time input'],
   contentGuidelines: ['Use clear, descriptive labels', 'Provide helpful placeholder text', 'Use appropriate time formats', 'Keep labels concise but descriptive'],
@@ -1234,81 +1285,81 @@ export var components = [{
   category: 'form',
   description: 'A component for selecting both date and time values.',
   status: 'general-availability',
-  examples: ["import { DateTimePicker } from '@atlaskit/datetime-picker';\nconst Example = (): React.JSX.Element => (\n\t<DateTimePicker\n\t\tclearControlLabel=\"Clear date / time picker (editable times)\"\n\t\tdefaultValue=\"2018-01-02T14:30+10:00\"\n\t\tonChange={() => {}}\n\t\ttimePickerProps={{\n\t\t\ttimeIsEditable: true,\n\t\t\tlabel: 'Time picker (editable)',\n\t\t}}\n\t\tdatePickerProps={{\n\t\t\tlabel: 'Date picker (editable times)',\n\t\t\tshouldShowCalendarButton: true,\n\t\t\topenCalendarLabel: 'open calendar',\n\t\t}}\n\t/>\n);\nexport default Example;"],
+  examples: ["import { DateTimePicker } from '@atlaskit/datetime-picker';\nimport __noop from '@atlaskit/ds-lib/noop';\nconst Example = (): React.JSX.Element => (\n\t<DateTimePicker\n\t\tclearControlLabel=\"Clear date / time picker (editable times)\"\n\t\tdefaultValue=\"2018-01-02T14:30+10:00\"\n\t\tonChange={__noop}\n\t\ttimePickerProps={{\n\t\t\ttimeIsEditable: true,\n\t\t\tlabel: 'Time picker (editable)',\n\t\t}}\n\t\tdatePickerProps={{\n\t\t\tlabel: 'Date picker (editable times)',\n\t\t\tshouldShowCalendarButton: true,\n\t\t\topenCalendarLabel: 'open calendar',\n\t\t}}\n\t/>\n);\nexport default Example;"],
   accessibilityGuidelines: ['Ensure proper keyboard navigation', 'Use appropriate date/time formats', 'Provide clear date/time labels', 'Consider screen reader announcements'],
   usageGuidelines: ['Use for combined date and time selection', 'Provide clear date/time formats', 'Handle timezone considerations', 'Consider validation requirements'],
   contentGuidelines: ['Use clear, descriptive labels', 'Provide helpful placeholder text', 'Use appropriate date/time formats', 'Keep labels concise but descriptive'],
   props: [{
     name: 'aria-describedby',
-    description: 'Used to associate accessible descriptions to both the date and time\npicker. If you want to associate individual accessible descriptions, this\nshould be done through the `aria-describedby` props on the\n`datePickerProps` and `timePickerProps`.\nUsed to associate accessible descriptions to both the date and time\npicker. If you want to associate individual accessible descriptions, this\nshould be done through the `aria-describedby` props on the\n`datePickerProps` and `timePickerProps`.',
+    description: 'Used to associate accessible descriptions to both the date and time\npicker. If you want to associate individual accessible descriptions, this\nshould be done through the `aria-describedby` props on the\n`datePickerProps` and `timePickerProps`.',
     type: 'string'
   }, {
     name: 'autoFocus',
-    description: 'Set the picker to autofocus on mount.\nSet the picker to autofocus on mount.',
+    description: 'Set the picker to autofocus on mount.',
     type: 'boolean'
   }, {
     name: 'clearControlLabel',
-    description: 'Set the `aria-label` for the clear button.\nAdd the word "Clear" at the beginning of the clearControlLabel.\nFor instance, for a field to set an appointment, use "Clear appointment date and time".\nSet the `aria-label` for the clear button.\nAdd the word "Clear" at the beginning of the clearControlLabel.\nFor instance, for a field to set an appointment, use "Clear appointment date and time".',
+    description: 'Set the `aria-label` for the clear button.\nAdd the word "Clear" at the beginning of the clearControlLabel.\nFor instance, for a field to set an appointment, use "Clear appointment date and time".',
     type: 'string'
   }, {
     name: 'datePickerProps',
-    description: 'Props applied to the `DatePicker`.\nProps applied to the `DatePicker`.',
+    description: 'Props applied to the `DatePicker`.',
     type: 'DatePickerBaseProps'
   }, {
     name: 'defaultValue',
-    description: 'The default for `value`.\nThe default for `value`.',
+    description: 'The default for `value`.',
     type: 'string'
   }, {
     name: 'id',
-    description: 'Set the id of the field.\nSet the id of the field.',
+    description: 'Set the id of the field.',
     type: 'string'
   }, {
     name: 'isDisabled',
-    description: 'Set if the field is disabled.\nSet if the field is disabled.',
+    description: 'Set if the field is disabled.',
     type: 'boolean'
   }, {
     name: 'isInvalid',
-    description: 'Set if the picker has an invalid value.\nSet if the picker has an invalid value.',
+    description: 'Set if the picker has an invalid value.',
     type: 'boolean'
   }, {
     name: 'isRequired',
-    description: 'Set the field as required.\nSet the field as required.',
+    description: 'Set the field as required.',
     type: 'boolean'
   }, {
     name: 'locale',
-    description: 'Locale used for formatting dates and times. See [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat).\nLocale used for formatting dates and times. See [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat).',
+    description: 'Locale used for formatting dates and times. See [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat).',
     type: 'string'
   }, {
     name: 'name',
-    description: 'The name of the field.\nThe name of the field.',
+    description: 'The name of the field.',
     type: 'string'
   }, {
     name: 'onBlur',
-    description: 'Called when the field is blurred.\nCalled when the field is blurred.',
+    description: 'Called when the field is blurred.',
     type: '(event: FocusEvent<HTMLInputElement, Element>) => void'
   }, {
     name: 'onChange',
-    description: 'Called when the value changes and the date / time is a complete value, or empty. The only value is an ISO string or empty string.\nCalled when the value changes and the date / time is a complete value, or empty. The only value is an ISO string or empty string.',
-    type: '(value: string) => void'
+    description: 'Called when the value changes and the date / time is a complete value, or empty. The only value is an ISO string or empty string.',
+    type: '((value: string) => void) & ((value: string) => void)'
   }, {
     name: 'onFocus',
-    description: 'Called when the field is focused.\nCalled when the field is focused.',
+    description: 'Called when the field is focused.',
     type: '(event: FocusEvent<HTMLInputElement, Element>) => void'
   }, {
     name: 'parseValue',
-    description: 'Function used to parse datetime values into their date, time and timezone sub-values. *\nFunction used to parse datetime values into their date, time and timezone sub-values. *',
-    type: '(dateTimeValue: string, date: string, time: string, timezone: string) => { dateValue: string; timeValue: string; zoneValue: string; }'
+    description: 'Function used to parse datetime values into their date, time and timezone sub-values. *',
+    type: '((dateTimeValue: string, date: string, time: string, timezone: string) => { dateValue: string; timeValue: string; zoneValue: string; }) & ((dateTimeValue: string, date: string, time: string, timezone: string) => { ...; })'
   }, {
     name: 'spacing',
-    description: 'The spacing for the select control.\n\nCompact is `gridSize() * 4`, default is `gridSize() * 5`.\nThe spacing for the select control.\n\nCompact is `gridSize() * 4`, default is `gridSize() * 5`.',
+    description: 'The spacing for the select control.\n\nCompact is `gridSize() * 4`, default is `gridSize() * 5`.',
     type: '"default" | "compact"'
   }, {
     name: 'timePickerProps',
-    description: 'Props applied to the `TimePicker`.\nProps applied to the `TimePicker`.',
+    description: 'Props applied to the `TimePicker`.',
     type: 'TimePickerBaseProps'
   }, {
     name: 'value',
-    description: 'The ISO time that should be used as the input value.\nThe ISO time that should be used as the input value.',
+    description: 'The ISO time that should be used as the input value.',
     type: 'string'
   }]
 }, {
@@ -1325,7 +1376,8 @@ export var components = [{
   props: [{
     name: 'autoFocusFirstElem',
     description: 'Controls whether to focus the first tabbable element inside the focus lock. Set to `true` by default.',
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'true'
   }, {
     name: 'children',
     description: 'The content of the drawer.',
@@ -1337,11 +1389,13 @@ export var components = [{
   }, {
     name: 'isFocusLockEnabled',
     description: 'Enable this to keep focus inside the component until it’s closed. This is strongly recommended, as it prevents people who use assistive technology from accidentally navigating out of the drawer using the tab key.',
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'true'
   }, {
     name: 'isOpen',
     description: 'Controls if the drawer is open or closed.',
-    type: 'boolean'
+    type: 'boolean',
+    isRequired: true
   }, {
     name: 'label',
     description: 'This is an `aria-label` attribute. It sets an accessible name for the drawer wrapper, for people who use assistive technology.\nUsage of either this, or the `titleId` attribute is strongly recommended.',
@@ -1365,7 +1419,8 @@ export var components = [{
   }, {
     name: 'shouldReturnFocus',
     description: 'ReturnFocus controls what happens when the user exits focus lock mode.\nIf true, focus returns to the trigger element . If false, focus remains where it was when the FocusLock was deactivated.\nIf ref is passed, focus returns to that specific ref element.',
-    type: 'boolean | React.RefObject<HTMLElement>'
+    type: 'boolean | React.RefObject<HTMLElement>',
+    defaultValue: 'true'
   }, {
     name: 'titleId',
     description: "This is an ID referenced by the drawer wrapper's `aria-labelledby` attribute. This ID should be assigned to the drawer `title` element.\nUsage of either this, or the `label` attribute is strongly recommended.",
@@ -1373,11 +1428,13 @@ export var components = [{
   }, {
     name: 'width',
     description: 'Sets the width of the drawer.',
-    type: '"extended" | "full" | "medium" | "narrow" | "wide"'
+    type: '"extended" | "full" | "medium" | "narrow" | "wide"',
+    defaultValue: '"narrow"'
   }, {
     name: 'zIndex',
     description: 'Z-index that the popup should be displayed in.\nThis is passed to the portal component.\nDefaults to `unset`.',
-    type: 'number | "unset"'
+    type: 'number | "unset"',
+    defaultValue: '"unset"'
   }]
 }, {
   name: 'DrawerContent',
@@ -1400,7 +1457,7 @@ export var components = [{
   }, {
     name: 'xcss',
     description: '',
-    type: 'false | (XCSSValue<"backgroundColor" | "marginTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "padding", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
+    type: 'false | (XCSSValue<"backgroundColor" | "marginBlockStart" | "marginTop" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "padding", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
   }]
 }, {
   name: 'DrawerSidebar',
@@ -1438,7 +1495,8 @@ export var components = [{
   }, {
     name: 'label',
     description: 'This is the accessible name for the close/back control of the drawer. The default is "Close drawer".',
-    type: 'string'
+    type: 'string',
+    defaultValue: '"Close drawer"'
   }]
 }, {
   name: 'DropdownMenu',
@@ -1458,7 +1516,8 @@ export var components = [{
   }, {
     name: 'autoFocus',
     description: 'Controls if the first menu item receives focus when menu is opened. Note that the menu has a focus lock\nwhich traps the focus within the menu. The first item gets focus automatically\nif the menu is triggered using the keyboard.',
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'false'
   }, {
     name: 'children',
     description: 'Content that will be rendered inside the layer element. Should typically be\n`DropdownItemGroup` or `DropdownItem`, or the checkbox and radio variants of those.',
@@ -1466,11 +1525,13 @@ export var components = [{
   }, {
     name: 'defaultOpen',
     description: 'Controls the initial open state of the dropdown. If provided, the component is considered to be controlled\nwhich means that the user is responsible for managing the open and close state of the menu.\nUsing `defaultOpen` may cause accessiblity issues because it will automatically shift focus to the first menu item; which can be disorienting.\nOnly use this if action on the menu is required to proceed.',
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'false'
   }, {
     name: 'isLoading',
     description: 'If true, a spinner is rendered instead of the items.',
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'false'
   }, {
     name: 'isOpen',
     description: 'Controls the open state of the dropdown.',
@@ -1486,11 +1547,13 @@ export var components = [{
   }, {
     name: 'onOpenChange',
     description: 'Called when the menu should be open/closed. Receives an object with `isOpen` state.\n\nIf the dropdown was closed programatically, the `event` parameter will be `null`.',
-    type: '(args: OnOpenChangeArgs) => void'
+    type: '(args: OnOpenChangeArgs) => void',
+    defaultValue: 'noop'
   }, {
     name: 'placement',
     description: 'Position of the menu.',
-    type: '"auto-start" | "auto" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left" | "left-start"'
+    type: '"auto-start" | "auto" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left" | "left-start"',
+    defaultValue: '"bottom-start"'
   }, {
     name: 'returnFocusRef',
     description: 'If ref is passed, focus returns to that specific ref element after dropdown dismissed.',
@@ -1498,15 +1561,23 @@ export var components = [{
   }, {
     name: 'shouldFitContainer',
     description: "This fits the dropdown menu width to its parent's width.\nWhen set to `true`, the trigger and dropdown menu elements will be wrapped in a `div` with `position: relative`.\nThe dropdown menu will be rendered as a sibling to the trigger element, and will be full width.\nThe default is `false`.\n\nThis fits the dropdown menu width to its parent's width.\nWhen set to `true`, the trigger and dropdown menu elements will be wrapped in a `div` with `position: relative`.\nThe dropdown menu will be rendered as a sibling to the trigger element, and will be full width.\nThe default is `false`.",
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'false'
   }, {
     name: 'shouldFlip',
     description: 'Allows the dropdown menu to be placed on the opposite side of its trigger if it does not\nfit in the viewport.',
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'true'
+  }, {
+    name: 'shouldPreventEscapePropagation',
+    description: 'When set to true, will call stopPropagation on the ESCAPE key event.\nThis prevents the ESCAPE event from bubbling up to parent elements.',
+    type: 'boolean',
+    defaultValue: 'false'
   }, {
     name: 'shouldRenderToParent',
     description: 'Controls whether the popup is rendered inline within its parent component or in a portal at the document root.\n`true` renders the dropdown menu in the DOM node closest to the trigger; focus is not trapped inside the element.\n`false` renders the dropdown menu in React.Portal and focus is trapped inside the element.\nDefaults to `false`.\nControls whether the popup is rendered inline within its parent component or in a portal at the document root.\n`true` renders the dropdown menu in the DOM node closest to the trigger; focus is not trapped inside the element.\n`false` renders the dropdown menu in React.Portal and focus is trapped inside the element.\nDefaults to `false`.',
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'false'
   }, {
     name: 'spacing',
     description: 'Controls the spacing density of the menu.',
@@ -1526,7 +1597,8 @@ export var components = [{
   }, {
     name: 'zIndex',
     description: 'Z-index that the popup should be displayed in.\nThis is passed to the portal component.\nDefaults to `layers.modal()` from `@atlaskit/theme` which is 510.',
-    type: 'number'
+    type: 'number',
+    defaultValue: '510'
   }]
 }, {
   name: 'EmptyState',
@@ -1550,15 +1622,18 @@ export var components = [{
   }, {
     name: 'header',
     description: 'Title that briefly describes the page to the user.',
-    type: 'string'
+    type: 'string',
+    isRequired: true
   }, {
     name: 'headingLevel',
     description: 'The value used to set the heading level of the header element.\nMust be in the range of 1 to 6. Defaults to 4.',
-    type: 'number'
+    type: 'number',
+    defaultValue: '4'
   }, {
     name: 'headingSize',
     description: 'The keyword used to set the visual appearance of the header element.\nDefaults to "medium". "xsmall" can be used for empty states in smaller contexts such as popups.',
-    type: '"xsmall" | "medium"'
+    type: '"xsmall" | "medium"',
+    defaultValue: '"medium"'
   }, {
     name: 'imageHeight',
     description: 'Height of the image that is rendered in EmptyState component.\nUseful when you want image to be of exact height to stop it bouncing around when loading in.\nOnly set `height` if you want the image to resize down on smaller devices.',
@@ -1578,11 +1653,13 @@ export var components = [{
   }, {
     name: 'maxImageHeight',
     description: 'Maximum height (in pixels) of the image, default value is 160.',
-    type: 'number'
+    type: 'number',
+    defaultValue: '160'
   }, {
     name: 'maxImageWidth',
     description: 'Maximum width (in pixels) of the image, default value is 160.',
-    type: 'number'
+    type: 'number',
+    defaultValue: '160'
   }, {
     name: 'primaryAction',
     description: 'Primary action button for the page, usually it will be something like "Create" (or "Retry" for error pages).',
@@ -1634,7 +1711,7 @@ export var components = [{
   }, {
     name: 'description',
     description: 'The secondary content shown below the flag title.',
-    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
+    type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
   }, {
     name: 'headingLevel',
     description: 'Specifies the heading level in the document structure.\nIf not specified, the default is `2`.',
@@ -1642,19 +1719,20 @@ export var components = [{
   }, {
     name: 'icon',
     description: 'The icon displayed in the top-left of the flag. Should be an instance of `@atlaskit/icon`.\nYour icon will receive the appropriate default color, which you can override by setting\nthe `color` prop on the icon to your preferred icon color.\nIf no icon is provided, a default icon will be used based on the appearance prop.',
-    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
+    type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
   }, {
     name: 'id',
     description: 'A unique identifier used for rendering and onDismissed callbacks.',
-    type: 'string | number'
+    type: 'string | number',
+    isRequired: true
   }, {
     name: 'linkComponent',
     description: 'A link component that is passed down to the `@atlaskit/button` used by actions,\nto allow custom routers to be used. See the\n[button with router](https://atlaskit.atlassian.com/packages/design-system/button/example/ButtonWithRouter)\nexample of what this component should look like.',
-    type: 'ComponentClass<CustomThemeButtonProps, any> | FunctionComponent<CustomThemeButtonProps>'
+    type: 'React.ComponentClass<CustomThemeButtonProps, any> | React.FunctionComponent<CustomThemeButtonProps>'
   }, {
     name: 'onBlur',
     description: 'Standard onBlur event, applied to Flag by AutoDismissFlag.',
-    type: '(e: FocusEvent<HTMLElement, Element>, analyticsEvent: UIAnalyticsEvent) => void'
+    type: '(e: React.FocusEvent<HTMLElement, Element>, analyticsEvent: UIAnalyticsEvent) => void'
   }, {
     name: 'onDismissed',
     description: "Handler which will be called when a Flag's dismiss button is clicked.\nReceives the id of the dismissed Flag as a parameter.",
@@ -1662,19 +1740,20 @@ export var components = [{
   }, {
     name: 'onFocus',
     description: 'Standard onFocus event, applied to Flag by AutoDismissFlag.',
-    type: '(e: FocusEvent<HTMLElement, Element>, analyticsEvent: UIAnalyticsEvent) => void'
+    type: '(e: React.FocusEvent<HTMLElement, Element>, analyticsEvent: UIAnalyticsEvent) => void'
   }, {
     name: 'onMouseOut',
     description: 'Standard onMouseOut event, applied to Flag by AutoDismissFlag.',
-    type: '(event: MouseEvent<Element, globalThis.MouseEvent>) => void'
+    type: '(event: React.MouseEvent<Element, MouseEvent>) => void'
   }, {
     name: 'onMouseOver',
     description: 'Standard onMouseOver event, applied to Flag by AutoDismissFlag.',
-    type: '(event: MouseEvent<Element, globalThis.MouseEvent>) => void'
+    type: '(event: React.MouseEvent<Element, MouseEvent>) => void'
   }, {
     name: 'title',
     description: 'The bold text shown at the top of the flag.',
-    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
+    type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
+    isRequired: true
   }]
 }, {
   name: 'Form',
@@ -1694,7 +1773,8 @@ export var components = [{
   }, {
     name: 'children',
     description: 'The contents rendered inside of the form. This is a function where the props will be passed from the form. The function props you can access are `dirty`, `submitting` and `disabled`.\nYou can read more about these props in [react-final form documentation](https://final-form.org/docs/final-form/types/FormState).\n\nIf you are only spreading `formProps` onto the HTML `<form>` element and not using any of the other props (like `submitting`, etc.), `children` can be plain JSX. All of the children will be wrapped within an HTML `<form>` element that includes all necessary props, including those provided on the form component.',
-    type: '(() => void) | React.ReactNode | ((args: FormChildrenArgs<FormValues>) => React.ReactNode)'
+    type: '(() => void) | React.ReactNode | ((args: FormChildrenArgs<FormValues>) => React.ReactNode)',
+    isRequired: true
   }, {
     name: 'formProps',
     description: 'When `Form` renders JSX children directly and not using a function to\nspread `formProps` manually, the properties in this `formProps` prop will\nbe spread on an internally rendered  HTML `form` element.',
@@ -1726,7 +1806,8 @@ export var components = [{
   }, {
     name: 'onSubmit',
     description: 'Event handler called when the form is submitted. Fields must be free of validation errors.',
-    type: '(values: FormValues, form: FormApi<FormValues>, callback?: (errors?: Record<string, string>) => void) => void | Object | Promise<...>'
+    type: '(values: FormValues, form: FormApi<FormValues>, callback?: (errors?: Record<string, string>) => void) => void | Object | Promise<...>',
+    isRequired: true
   }, {
     name: 'xcss',
     description: 'Apply a subset of permitted styles powered by Atlassian Design System design tokens.',
@@ -1739,30 +1820,32 @@ export var components = [{
   category: 'primitive',
   description: 'A component for creating accessible, consistently styled headings with proper hierarchy. Headings are sized to contrast with content, increase visual hierarchy, and help readers easily understand the structure of content.',
   status: 'general-availability',
-  examples: ['import Heading from \'@atlaskit/heading\';\nexport default [\n\t<Heading size="xxlarge">Page Title</Heading>,\n\t<Heading size="large" color="color.text.inverse">\n\t\tInverted section title\n\t</Heading>,\n];'],
+  examples: ['import Heading from \'@atlaskit/heading\';\nconst _default_1: React.JSX.Element[] = [\n\t<Heading size="xxlarge">Page Title</Heading>,\n\t<Heading size="large" color="color.text.inverse">\n\t\tInverted section title\n\t</Heading>,\n];\nexport default _default_1;'],
   accessibilityGuidelines: ['Maintain proper heading hierarchy (h1 to h6)', 'Use only one h1 per page for main page titles', 'Ensure minimum 4.5:1 color contrast for text readability', 'Use clear, descriptive heading text that describes the content below'],
   usageGuidelines: ['Use the `HeadingContextProvider` offering to maintain heading levels in complex layouts', 'Maintain proper heading hierarchy', 'Keep headings concise and meaningful', 'Use sentence case for most headings', 'Use the `color` prop for inverse text on dark backgrounds', 'Do NOT use any inline styles, you must use the `size` (required) and `color` (optional) props available'],
   contentGuidelines: ['Use clear, descriptive heading text', 'Maintain proper heading hierarchy', 'Keep headings concise and meaningful', 'Use sentence case for most headings', 'Make headings descriptive of the content that follows'],
   props: [{
     name: 'as',
-    description: 'Allows the component to be rendered as the specified DOM element, overriding a default element set by `level` prop.',
+    description: 'Allows the component to be rendered as the specified HTML element, overriding a default element set by the `size` prop.',
     type: '"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span"'
   }, {
     name: 'children',
     description: 'The text of the heading.',
-    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
+    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
+    isRequired: true
   }, {
     name: 'color',
     description: 'Token representing text color with a built-in fallback value.\nWill apply inverse text color automatically if placed within a Box with bold background color.\nDefaults to `color.text`.',
     type: '"color.text" | "color.text.inverse" | "color.text.warning.inverse"'
   }, {
     name: 'id',
-    description: 'Unique identifier for the heading DOM element.',
+    description: 'Unique identifier for the heading HTML element.',
     type: 'string'
   }, {
     name: 'size',
-    description: 'Heading size. This value is detached from the specific heading level applied to allow for more flexibility.\nUse instead of the deprecated `level` prop.',
-    type: '"xxlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall" | "xxsmall"'
+    description: 'Determines which text styles are applied. A corresponding HTML element is automatically applied from h1 to h6 based on the size.\nThis can be overriden using the `as` prop to allow for more flexibility.',
+    type: '"xxlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall" | "xxsmall"',
+    isRequired: true
   }]
 }, {
   name: 'HeadingContextProvider',
@@ -1771,13 +1854,14 @@ export var components = [{
   category: 'primitive',
   description: 'A context provider that allows you to configure the default HTML heading level for all headings within its subtree. Useful for maintaining proper heading hierarchy in complex layouts.',
   status: 'general-availability',
-  examples: ['import Heading, { HeadingContextProvider } from \'@atlaskit/heading\';\nexport default [\n\t<HeadingContextProvider>\n\t\t<Heading size="xxlarge">h1</Heading>\n\t\t<Heading size="medium">h2</Heading>\n\t\t<Heading size="large">h3</Heading>\n\t</HeadingContextProvider>,\n];'],
+  examples: ['import Heading, { HeadingContextProvider } from \'@atlaskit/heading\';\nconst _default_1: React.JSX.Element[] = [\n\t<HeadingContextProvider>\n\t\t<Heading size="xxlarge">h1</Heading>\n\t\t<Heading size="medium">h2</Heading>\n\t\t<Heading size="large">h3</Heading>\n\t</HeadingContextProvider>,\n];\nexport default _default_1;'],
   usageGuidelines: ['Wrap sections that need different heading hierarchy', 'Use for complex layouts where heading levels need adjustment'],
   contentGuidelines: ['Ensure proper heading hierarchy is maintained', 'Use clear, descriptive heading text', 'Keep headings concise and meaningful'],
   props: [{
     name: 'children',
     description: 'Semantic hierarchy of content below the heading context.',
-    type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
+    type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
+    isRequired: true
   }, {
     name: 'value',
     description: 'Optional - only apply this value if the intent is to reset the heading context outside the normal content flow, for example inside a `section`.',
@@ -1790,7 +1874,7 @@ export var components = [{
   category: 'images-and-icons',
   description: 'An icon is a symbol representing a command, device, directory, or common action.',
   status: 'general-availability',
-  examples: ["import AddIcon from '@atlaskit/icon/core/add';\nimport DeleteIcon from '@atlaskit/icon/core/delete';\nimport StarIcon from '@atlaskit/icon/core/star-starred';\nimport { token } from '@atlaskit/tokens';\nexport default [\n\t<AddIcon label=\"Add\" />,\n\t<StarIcon label=\"Star\" color=\"currentColor\" />,\n\t<DeleteIcon label=\"Delete\" color={token('color.icon.danger')} />,\n];"],
+  examples: ["import AddIcon from '@atlaskit/icon/core/add';\nimport DeleteIcon from '@atlaskit/icon/core/delete';\nimport StarIcon from '@atlaskit/icon/core/star-starred';\nimport { token } from '@atlaskit/tokens';\nconst _default_1: React.JSX.Element[] = [\n\t<AddIcon label=\"Add\" />,\n\t<StarIcon label=\"Star\" color=\"currentColor\" />,\n\t<DeleteIcon label=\"Delete\" color={token('color.icon.danger')} />,\n];\nexport default _default_1;"],
   accessibilityGuidelines: ['Provide appropriate alt text or labels for icons', 'Use meaningful icon choices that convey clear meaning', 'Ensure sufficient color contrast for icon visibility', 'Consider icon size for touch targets', 'Use consistent iconography across the interface'],
   usageGuidelines: ['Use icons to enhance visual communication', 'Choose icons that clearly represent their function', 'Maintain consistent icon style and size', 'Use appropriate icon sizes for different contexts', 'Consider cultural and contextual icon meanings'],
   contentGuidelines: ['Use clear, recognizable icon symbols', 'Ensure icons are culturally appropriate', 'Maintain visual consistency across icon sets', 'Use appropriate icon labels and descriptions'],
@@ -1809,7 +1893,8 @@ export var components = [{
   }, {
     name: 'label',
     description: 'Text used to describe what the icon is in context.',
-    type: 'string'
+    type: 'string',
+    isRequired: true
   }, {
     name: 'primaryColor',
     description: 'Primary color for the icon.\nInherits the current font color by default.',
@@ -1830,22 +1915,25 @@ export var components = [{
   category: 'images-and-icons',
   description: 'A tile component that displays an icon with customizable background, shape, and appearance.',
   status: 'release-candidate',
-  examples: ['import { IconTile } from \'@atlaskit/icon\';\nimport AddIcon from \'@atlaskit/icon/core/add\';\nexport default [\n\t<IconTile icon={AddIcon} label="Add" appearance="redBold" />,\n\t<IconTile icon={AddIcon} label="Add" shape="circle" appearance="blue" />,\n];'],
+  examples: ['import { IconTile } from \'@atlaskit/icon\';\nimport AddIcon from \'@atlaskit/icon/core/add\';\nconst _default_1: React.JSX.Element[] = [\n\t<IconTile icon={AddIcon} label="Add" appearance="redBold" />,\n\t<IconTile icon={AddIcon} label="Add" shape="circle" appearance="blue" />,\n];\nexport default _default_1;'],
   accessibilityGuidelines: ['Provide appropriate labels for icon tiles', 'Ensure sufficient color contrast', 'Use meaningful icon choices', 'Consider touch target sizes'],
   usageGuidelines: ['Use for icon presentation with background styling', 'Choose appropriate shapes and appearances', 'Maintain consistent sizing across tiles', 'Use for visual emphasis or categorization'],
   contentGuidelines: ['Use clear, recognizable icons', 'Choose appropriate colors and shapes', 'Ensure visual consistency across tiles'],
   props: [{
     name: 'appearance',
     description: 'The appearance of the tile',
-    type: '"gray" | "blue" | "teal" | "green" | "lime" | "yellow" | "orange" | "red" | "magenta" | "purple" | "grayBold" | "blueBold" | "tealBold" | "greenBold" | "limeBold" | "yellowBold" | "orangeBold" | "redBold" | "magentaBold" | "purpleBold"'
+    type: '"gray" | "blue" | "teal" | "green" | "lime" | "yellow" | "orange" | "red" | "magenta" | "purple" | "grayBold" | "blueBold" | "tealBold" | "greenBold" | "limeBold" | "yellowBold" | "orangeBold" | "redBold" | "magentaBold" | "purpleBold"',
+    isRequired: true
   }, {
     name: 'icon',
     description: 'The icon to display',
-    type: 'React.ComponentClass<NewCoreIconProps, any> | React.FunctionComponent<NewCoreIconProps>'
+    type: 'React.ComponentClass<NewCoreIconProps, any> | React.FunctionComponent<NewCoreIconProps>',
+    isRequired: true
   }, {
     name: 'label',
     description: 'The label for the icon',
-    type: 'string'
+    type: 'string',
+    isRequired: true
   }, {
     name: 'size',
     description: 'Size of the tile, in pixels. Defaults to `24`.\n\nNow supports both semantic t-shirt size names and pixel number values. Pixel number values are deprecated and will be removed in a future release, however they will both be available and backwards-compatible during a transition period.\n\nSize `16` will not have a replacement after deprecation, and should be replaced with direct icons without a tile or enlarging to the next available size `xsmall`.\n\nAll available sizes:\n- `16` (deprecated)\n- `xsmall` (new)\n- `small` or `24`\n- `medium` or `32`\n- `large` or `40`\n- `xlarge` or `48`',
@@ -1885,11 +1973,13 @@ export var components = [{
   props: [{
     name: 'children',
     description: 'The elements that the InlineDialog will be positioned relative to.',
-    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
+    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
+    isRequired: true
   }, {
     name: 'content',
     description: 'The elements to be displayed within the InlineDialog.',
-    type: 'ReactNode | (() => ReactNode)'
+    type: 'ReactNode | (() => ReactNode)',
+    isRequired: true
   }, {
     name: 'fallbackPlacements',
     description: "This is a list of backup placements to try.\nWhen the preferred placement doesn't have enough space,\nthe modifier will test the ones provided in the list, and use the first suitable one.\nIf no fallback placements are suitable, it reverts back to the original placement.",
@@ -1945,7 +2035,8 @@ export var components = [{
   }, {
     name: 'defaultValue',
     description: 'The user input entered into the field during `editView`. This value is updated and saved by `onConfirm`.',
-    type: 'any'
+    type: 'any',
+    isRequired: true
   }, {
     name: 'editButtonLabel',
     description: 'Accessibility label for button, which is used to enter `editView` from keyboard.',
@@ -1957,7 +2048,8 @@ export var components = [{
   }, {
     name: 'editView',
     description: 'The component shown when user is editing (when the inline edit is not in `readView`).',
-    type: '(fieldProps: ExtendedFieldProps<FieldValue>, ref: React.RefObject<any>) => React.ReactNode'
+    type: '(fieldProps: ExtendedFieldProps<FieldValue>, ref: React.RefObject<any>) => React.ReactNode',
+    isRequired: true
   }, {
     name: 'hideActionButtons',
     description: 'Sets whether the confirm and cancel action buttons are displayed in the bottom right of the field.',
@@ -1985,7 +2077,8 @@ export var components = [{
   }, {
     name: 'onConfirm',
     description: 'Saves and confirms the value entered into the field. It exits `editView` and returns to `readView`.',
-    type: '(value: any, analyticsEvent: UIAnalyticsEvent) => void'
+    type: '(value: any, analyticsEvent: UIAnalyticsEvent) => void',
+    isRequired: true
   }, {
     name: 'onEdit',
     description: 'Handler called when readView is clicked.',
@@ -1993,7 +2086,8 @@ export var components = [{
   }, {
     name: 'readView',
     description: 'The component shown when not in `editView`. This is when the inline edit is read-only and not being edited.',
-    type: '() => React.ReactNode'
+    type: '() => React.ReactNode',
+    isRequired: true
   }, {
     name: 'readViewFitContainerWidth',
     description: 'Determines whether the `readView` has 100% width within its container, or whether it fits the content.',
@@ -2021,15 +2115,16 @@ export var components = [{
   props: [{
     name: 'appearance',
     description: 'Set the icon to be used before the title. Options are: connectivity,\nconfirmation, info, warning, and error.',
-    type: '"connectivity" | "confirmation" | "info" | "warning" | "error"'
+    type: '"connectivity" | "confirmation" | "info" | "warning" | "error"',
+    defaultValue: '"connectivity"'
   }, {
     name: 'children',
     description: 'The elements to be displayed by the popup.',
-    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
+    type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | React.ReactPortal'
   }, {
     name: 'fallbackPlacements',
     description: "This is a list of backup placements for the popup to try.\nWhen the preferred placement doesn't have enough space,\nthe modifier will test the ones provided in the list, and use the first suitable one.\nIf no fallback placements are suitable, it reverts back to the original placement.",
-    type: 'Placement[]'
+    type: 'PopupPlacement[]'
   }, {
     name: 'iconLabel',
     description: 'Text to be used as the label for the button icon. You must use this to provide information for people who use assistive technology when there is no title and/or secondaryText.',
@@ -2037,19 +2132,23 @@ export var components = [{
   }, {
     name: 'placement',
     description: 'The placement to be passed to the popup. Determines where around\nthe text the dialog is displayed.',
-    type: 'AutoPlacement | BasePlacement | VariationPlacement'
+    type: 'AutoPlacement | BasePlacement | VariationPlacement',
+    defaultValue: '"bottom-start"'
   }, {
     name: 'secondaryText',
     description: 'Text to display second.',
-    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
+    type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | React.ReactPortal',
+    defaultValue: '""'
   }, {
     name: 'spacing',
     description: 'The spacing of the underlying icon button. Options are: spacious and compact.',
-    type: '"spacious" | "compact"'
+    type: '"spacious" | "compact"',
+    defaultValue: '"spacious"'
   }, {
     name: 'title',
     description: 'Text to display first, bolded for emphasis.',
-    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
+    type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | React.ReactPortal',
+    defaultValue: '""'
   }]
 }, {
   name: 'Link',
@@ -2058,7 +2157,7 @@ export var components = [{
   category: 'navigation',
   description: 'A component for navigation links.',
   status: 'general-availability',
-  examples: ['import Link from \'@atlaskit/link\';\nexport default [\n\t<Link href="/dashboard">Go to Dashboard</Link>,\n\t<Link href="https://atlassian.design" target="_blank">\n\t\tAtlassian Design System\n\t</Link>,\n];'],
+  examples: ['import Link from \'@atlaskit/link\';\nconst _default_1: React.JSX.Element[] = [\n\t<Link href="/dashboard">Go to Dashboard</Link>,\n\t<Link href="https://atlassian.design" target="_blank">\n\t\tAtlassian Design System\n\t</Link>,\n];\nexport default _default_1;'],
   accessibilityGuidelines: ['Provide clear link text that describes the destination', 'Use appropriate ARIA attributes for links', 'Ensure keyboard navigation support', 'Provide clear visual indicators for link state'],
   usageGuidelines: ['Use for navigation to other pages or sections', 'Provide clear link text', 'Consider link behavior and target attributes', 'Use appropriate link styling'],
   contentGuidelines: ['Use clear, descriptive link text', 'Maintain consistent link styling', 'Consider link context and destination', "Avoid generic text like 'click here'"],
@@ -2073,7 +2172,8 @@ export var components = [{
   }, {
     name: 'href',
     description: 'Standard links can be provided as a string, which should be mapped to the\nunderlying router link component.\n\nAlternatively, you can provide an object for advanced link configurations\nby supplying the expected object type to the generic.\n\n@example\n```\nconst MyRouterLink = forwardRef(\n(\n  {\n    href,\n    children,\n    ...rest\n  }: RouterLinkComponentProps<{\n    href: string;\n    replace: boolean;\n  }>,\n  ref: Ref<HTMLAnchorElement>,\n) => { ...\n```',
-    type: 'string | RouterLinkConfig'
+    type: 'string | RouterLinkConfig',
+    isRequired: true
   }, {
     name: 'newWindowLabel',
     description: 'Override the default text to signify that a link opens in a new window.\nThis is appended to the `aria-label` attribute when the `target` prop is set to `_blank`.',
@@ -2090,7 +2190,7 @@ export var components = [{
   category: 'brand',
   description: 'A component for displaying the Atlassian icon.',
   status: 'general-availability',
-  examples: ['import { AtlassianIcon } from \'@atlaskit/logo\';\nexport default [\n\t<AtlassianIcon appearance="brand" shouldUseNewLogoDesign />,\n\t<AtlassianIcon appearance="neutral" shouldUseNewLogoDesign />,\n];'],
+  examples: ['import { AtlassianIcon } from \'@atlaskit/logo\';\nconst _default_1: React.JSX.Element[] = [\n\t<AtlassianIcon appearance="brand" shouldUseNewLogoDesign />,\n\t<AtlassianIcon appearance="neutral" shouldUseNewLogoDesign />,\n];\nexport default _default_1;'],
   accessibilityGuidelines: ['Provide appropriate alt text for the icon', 'Ensure icon visibility and contrast', 'Consider icon sizing and placement', 'Use appropriate icon variants'],
   usageGuidelines: ['Use for Atlassian brand representation', 'Choose appropriate icon variants', 'Consider icon sizing and placement', 'Maintain brand consistency'],
   props: [{
@@ -2100,7 +2200,8 @@ export var components = [{
   }, {
     name: 'label',
     description: "Accessible text to be used for screen readers (it's optional since the default props provide a label that matches the logo).",
-    type: 'string'
+    type: 'string',
+    defaultValue: '"Atlassian"'
   }, {
     name: 'shouldUseNewLogoDesign',
     description: 'For logos that support it, enables the new logo design ahead of an upcoming feature flag roll-out.',
@@ -2108,7 +2209,8 @@ export var components = [{
   }, {
     name: 'size',
     description: 'The size of the icon.',
-    type: '"xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge"'
+    type: '"xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge"',
+    defaultValue: 'defaultLogoParams.size'
   }]
 }, {
   name: 'Lozenge',
@@ -2123,8 +2225,8 @@ export var components = [{
   contentGuidelines: ['Use clear, concise text', 'Ensure text is meaningful and descriptive', 'Use consistent terminology across lozenges', 'Consider text length and readability'],
   props: [{
     name: 'appearance',
-    description: 'The appearance type.\nThe appearance of the lozenge. Supports both legacy semantic appearances and new accent/semantic colors.\nLegacy appearances (default, success, removed, inprogress, new, moved) are automatically mapped to the new semantic colors.',
-    type: 'ThemeAppearance | "warning" | "danger" | "information" | "neutral" | "discovery" | "accent-red" | "accent-orange" | "accent-yellow" | "accent-lime" | "accent-green" | ... 4 more ... | "accent-gray"'
+    description: 'The appearance type.\nThe appearance of the lozenge. Supports legacy semantic appearances and new semantic colors.\nAccent appearance values.',
+    type: 'ThemeAppearance | "warning" | "danger" | "information" | "neutral" | "discovery" | AccentColor'
   }, {
     name: 'children',
     description: 'Elements to be rendered inside the lozenge. This should ideally be just a word or two.\nElements to be rendered inside the lozenge. This should ideally be just a word or two.',
@@ -2148,7 +2250,8 @@ export var components = [{
   props: [{
     name: 'children',
     description: 'Children of the menu group.\nThis should generally be `Section` components.',
-    type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
+    type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
+    isRequired: true
   }, {
     name: 'isLoading',
     description: 'Used this to tell assistive technologies that the menu group is loading.',
@@ -2184,7 +2287,8 @@ export var components = [{
   }, {
     name: 'spacing',
     description: 'Configure the density of the menu group content.',
-    type: '"compact" | "cozy"'
+    type: '"cozy" | "compact"',
+    defaultValue: '"cozy"'
   }]
 }, {
   name: 'Modal',
@@ -2288,7 +2392,8 @@ export var components = [{
   }, {
     name: 'disableTitleStyles',
     description: 'Content of the page title. The text wraps by default.',
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'false'
   }, {
     name: 'id',
     description: 'Used as the ID of the inner h1 tag. This is exposed so the header text can be used as label of other elements by aria-labelledby.',
@@ -2300,7 +2405,8 @@ export var components = [{
   }, {
     name: 'truncateTitle',
     description: 'Prevent the title from wrapping across lines. Avoid using this wherever possible, as truncation can make page headings inaccessible.',
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'false'
   }]
 }, {
   name: 'Pagination',
@@ -2316,7 +2422,7 @@ export var components = [{
   props: [{
     name: 'components',
     description: 'Replace the built-in page, previous, next and/ or ellipsis component',
-    type: '{ Page?: React.ElementType<any>; Previous?: React.ElementType<any>; Next?: React.ElementType<any>; }'
+    type: '{ Page?: React.ElementType<any, keyof React.JSX.IntrinsicElements>; Previous?: React.ElementType<any, keyof React.JSX.IntrinsicElements>; Next?: React.ElementType<...>; }'
   }, {
     name: 'defaultSelectedIndex',
     description: 'Index of the page to be selected by default.',
@@ -2352,7 +2458,8 @@ export var components = [{
   }, {
     name: 'pages',
     description: 'Array of the pages to display.',
-    type: 'T[]'
+    type: 'T[]',
+    isRequired: true
   }, {
     name: 'previousLabel',
     description: 'The aria-label for the previous button.\nThe default value is "previous".',
@@ -2380,7 +2487,8 @@ export var components = [{
   props: [{
     name: 'children',
     description: 'Returns the element to be positioned.',
-    type: '(childrenProps: PopperChildrenProps) => React.ReactNode'
+    type: '(childrenProps: PopperChildrenProps) => React.ReactNode',
+    defaultValue: 'defaultChildrenFn'
   }, {
     name: 'modifiers',
     description: 'Additional modifiers and modifier overwrites.',
@@ -2388,23 +2496,28 @@ export var components = [{
   }, {
     name: 'offset',
     description: 'Distance the popup should be offset from the reference in the format of [along, away] (units in px).\nDefaults to [0, 8] - which means the popup will be 8px away from the edge of the reference specified\nby the `placement` prop.',
-    type: '[number, number]'
+    type: '[number, number]',
+    defaultValue: 'defaultOffset'
   }, {
     name: 'placement',
     description: 'Which side of the Reference to show on.',
-    type: 'AutoPlacement | BasePlacement | VariationPlacement'
+    type: 'AutoPlacement | BasePlacement | VariationPlacement',
+    defaultValue: '"bottom-start"'
   }, {
     name: 'referenceElement',
     description: 'Replacement reference element to position popper relative to.',
-    type: 'HTMLElement | VirtualElement'
+    type: 'HTMLElement | VirtualElement',
+    defaultValue: 'undefined'
   }, {
     name: 'shouldFitViewport',
     description: 'Determines if the popper will have a `max-width` and `max-height` set to\nconstrain it to the viewport.',
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'false'
   }, {
     name: 'strategy',
     description: "Placement strategy used. Can be 'fixed' or 'absolute'",
-    type: '"fixed" | "absolute"'
+    type: '"fixed" | "absolute"',
+    defaultValue: '"fixed"'
   }]
 }, {
   name: 'Popup',
@@ -2432,7 +2545,8 @@ export var components = [{
   }, {
     name: 'content',
     description: 'Render props for content that is displayed inside the popup.',
-    type: '(props: ContentProps) => ReactNode'
+    type: '(props: ContentProps) => ReactNode',
+    isRequired: true
   }, {
     name: 'fallbackPlacements',
     description: "This is a list of backup placements for the popup to try.\nWhen the preferred placement doesn't have enough space,\nthe modifier will test the ones provided in the list, and use the first suitable one.\nIf no fallback placements are suitable, it reverts back to the original placement.",
@@ -2444,7 +2558,8 @@ export var components = [{
   }, {
     name: 'isOpen',
     description: 'Use this to either show or hide the popup.\nWhen set to `false` the popup will not render anything to the DOM.',
-    type: 'boolean'
+    type: 'boolean',
+    isRequired: true
   }, {
     name: 'label',
     description: 'Refers to an `aria-label` attribute. Sets an accessible name for the popup to announce it to users of assistive technology.\nUsage of either this, or the `titleId` attribute is strongly recommended.',
@@ -2516,7 +2631,8 @@ export var components = [{
   }, {
     name: 'trigger',
     description: 'Render props used to anchor the popup to your content.\nMake this an interactive element,\nsuch as an `@atlaskit/button` component.',
-    type: '(props: TriggerProps) => ReactNode'
+    type: '(props: TriggerProps) => ReactNode',
+    isRequired: true
   }, {
     name: 'xcss',
     description: 'Bounded style overrides.',
@@ -2540,15 +2656,18 @@ export var components = [{
   props: [{
     name: 'children',
     description: '',
-    type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
+    type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
+    isRequired: true
   }, {
     name: 'mountStrategy',
     description: 'Specify the mount strategy: useEffect or useLayoutEffect.\nNote: UseLayoutEffect can lead to performance issues and is discouraged.',
-    type: '"effect" | "layoutEffect"'
+    type: '"effect" | "layoutEffect"',
+    defaultValue: '"effect"'
   }, {
     name: 'zIndex',
     description: '',
-    type: 'string | number'
+    type: 'string | number',
+    defaultValue: '0'
   }]
 }, {
   name: 'Anchor',
@@ -2557,7 +2676,7 @@ export var components = [{
   category: 'primitive',
   description: 'A primitive Anchor component for navigation links with compiled styling support.',
   status: 'general-availability',
-  examples: ['import { Anchor } from \'@atlaskit/primitives/compiled\';\nexport default [\n\t<Anchor href="https://atlassian.design">Atlassian Design System</Anchor>,\n\t<Anchor href="/docs" target="_blank">\n\t\tOpen docs\n\t</Anchor>,\n];'],
+  examples: ['import { Anchor } from \'@atlaskit/primitives/compiled\';\nconst _default_1: React.JSX.Element[] = [\n\t<Anchor href="https://atlassian.design">Atlassian Design System</Anchor>,\n\t<Anchor href="/docs" target="_blank">\n\t\tOpen docs\n\t</Anchor>,\n];\nexport default _default_1;'],
   accessibilityGuidelines: ['Provide clear link text that describes the destination', 'Use appropriate ARIA attributes for links', 'Ensure keyboard navigation support', 'Provide clear visual indicators for link state', 'Use descriptive link text for screen readers'],
   usageGuidelines: ['Use for navigation links to other pages or sections', 'Leverage compiled styling for performance', 'Use appropriate link styling and states', 'Consider link behavior and target attributes'],
   contentGuidelines: ['Use clear, descriptive link text', 'Maintain consistent link styling', 'Consider link context and destination'],
@@ -2568,7 +2687,8 @@ export var components = [{
   }, {
     name: 'href',
     description: 'Standard links can be provided as a string, which should be mapped to the\nunderlying router link component.\n\nAlternatively, you can provide an object for advanced link configurations\nby supplying the expected object type to the generic.\n\n@example\n```\nconst MyRouterLink = forwardRef(\n(\n  {\n    href,\n    children,\n    ...rest\n  }: RouterLinkComponentProps<{\n    href: string;\n    replace: boolean;\n  }>,\n  ref: Ref<HTMLAnchorElement>,\n) => { ...\n```',
-    type: 'string | RouterLinkConfig'
+    type: 'string | RouterLinkConfig',
+    isRequired: true
   }, {
     name: 'newWindowLabel',
     description: 'Override the default text to signify that a link opens in a new window.\nThis is appended to the `aria-label` attribute when the `target` prop is set to `_blank`.',
@@ -2589,7 +2709,7 @@ export var components = [{
   category: 'primitive',
   description: 'A primitive Bleed component for extending content beyond container boundaries with compiled styling support.',
   status: 'general-availability',
-  examples: ['import { Bleed, Box } from \'@atlaskit/primitives/compiled\';\nexport default [\n\t<Box padding="space.200" backgroundColor="color.background.neutral.subtle">\n\t\t<Bleed inline="space.100">\n\t\t\t<Box backgroundColor="color.background.brand.bold" padding="space.100">\n\t\t\t\tBleed content\n\t\t\t</Box>\n\t\t</Bleed>\n\t</Box>,\n];'],
+  examples: ['import { Bleed, Box } from \'@atlaskit/primitives/compiled\';\nconst _default_1: React.JSX.Element[] = [\n\t<Box padding="space.200" backgroundColor="color.background.neutral.subtle">\n\t\t<Bleed inline="space.100">\n\t\t\t<Box backgroundColor="color.background.brand.bold" padding="space.100">\n\t\t\t\tBleed content\n\t\t\t</Box>\n\t\t</Bleed>\n\t</Box>,\n];\nexport default _default_1;'],
   usageGuidelines: ['Use for extending content beyond container margins', 'Leverage compiled styling for performance', 'Use appropriate bleed directions and amounts', 'Consider responsive behavior and container constraints'],
   contentGuidelines: ['Use for appropriate layout bleeding', 'Maintain consistent bleeding patterns', 'Consider content hierarchy and visual flow'],
   props: [{
@@ -2603,7 +2723,8 @@ export var components = [{
   }, {
     name: 'children',
     description: 'Elements to be rendered inside the Flex.',
-    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
+    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
+    isRequired: true
   }, {
     name: 'inline',
     description: 'Bleed along the inline axis.',
@@ -2624,13 +2745,14 @@ export var components = [{
   category: 'primitive',
   description: 'A primitive Box component for layout and container purposes with compiled styling support.',
   status: 'general-availability',
-  examples: ["/**\n * @jsxRuntime classic\n * @jsx jsx\n */\nimport { cssMap, jsx } from '@atlaskit/css';\nimport { Box } from '@atlaskit/primitives/compiled';\nimport { token } from '@atlaskit/tokens';\nconst styles = cssMap({\n\tbox: {\n\t\tpaddingTop: token('space.200'),\n\t\tpaddingRight: token('space.200'),\n\t\tpaddingBottom: token('space.200'),\n\t\tpaddingLeft: token('space.200'),\n\t\tbackgroundColor: token('color.background.neutral.subtle'),\n\t},\n});\nexport default [\n\t<Box padding=\"space.200\" backgroundColor=\"color.background.neutral.subtle\">\n\t\tBasic box\n\t</Box>,\n\t<Box xcss={styles.box}>Styled box</Box>,\n];"],
+  examples: ["/**\n * @jsxRuntime classic\n * @jsx jsx\n */\nimport { cssMap, jsx } from '@atlaskit/css';\nimport { Box } from '@atlaskit/primitives/compiled';\nimport { token } from '@atlaskit/tokens';\nconst styles = cssMap({\n\tbox: {\n\t\tpaddingTop: token('space.200'),\n\t\tpaddingRight: token('space.200'),\n\t\tpaddingBottom: token('space.200'),\n\t\tpaddingLeft: token('space.200'),\n\t\tbackgroundColor: token('color.background.neutral.subtle'),\n\t},\n});\nconst _default_1: JSX.Element[] = [\n\t<Box padding=\"space.200\" backgroundColor=\"color.background.neutral.subtle\">\n\t\tBasic box\n\t</Box>,\n\t<Box xcss={styles.box}>Styled box</Box>,\n];\nexport default _default_1;"],
   usageGuidelines: ['Use for basic layout and container needs', 'Leverage compiled styling for performance', 'Use appropriate spacing and layout props', 'Consider semantic HTML when possible'],
   contentGuidelines: ['Use for appropriate layout purposes', 'Maintain consistent spacing and layout patterns', 'Consider accessibility and semantic structure'],
   props: [{
     name: 'as',
     description: "The DOM element to render as the Box.\n- This cannot be any SVG-related element such as `'svg'`, `'animate', `'circle'`, and many more\n- This cannot be a `'a'` (use the `Anchor` primitive instead)\n- This cannot be a `'button'` (use the `Anchor` primitive instead)",
-    type: '"object" | "style" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "canvas" | "caption" | "center" | ... 97 more ... | "webview"'
+    type: '"object" | "style" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "canvas" | "caption" | "center" | ... 98 more ... | "set"',
+    defaultValue: "'div'"
   }, {
     name: 'backgroundColor',
     description: 'Token representing background color with a built-in fallback value.',
@@ -2638,7 +2760,7 @@ export var components = [{
   }, {
     name: 'xcss',
     description: "Apply a subset of permitted styles powered by Atlassian Design System design tokens.\nIt's preferred you do not use `background` in `xcss` or `cssMap()` and instead use `props.backgroundColor` for surface awareness.",
-    type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "height" | "width" | "translate" | "content" | "color" | "border" | "grid" | "page" | "all" | "backgroundColor" | "accentColor" | ... 485 more ... | "glyphOrientationVertical", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
+    type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "height" | "width" | "translate" | "content" | "color" | "border" | "alignmentBaseline" | "baselineShift" | "clip" | ... 487 more ... | "viewTimeline", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
   }]
 }, {
   name: 'Flex',
@@ -2647,7 +2769,7 @@ export var components = [{
   category: 'primitive',
   description: 'A primitive Flex component for flexbox layout with compiled styling support.',
   status: 'general-availability',
-  examples: ['import { Box, Flex } from \'@atlaskit/primitives/compiled\';\nexport default [\n\t<Flex gap="space.100" alignItems="center">\n\t\t<Box backgroundColor="color.background.accent.blue.subtle" padding="space.100">\n\t\t\tItem 1\n\t\t</Box>\n\t\t<Box backgroundColor="color.background.accent.green.subtle" padding="space.100">\n\t\t\tItem 2\n\t\t</Box>\n\t</Flex>,\n];'],
+  examples: ['import { Box, Flex } from \'@atlaskit/primitives/compiled\';\nconst _default_1: React.JSX.Element[] = [\n\t<Flex gap="space.100" alignItems="center">\n\t\t<Box backgroundColor="color.background.accent.blue.subtle" padding="space.100">\n\t\t\tItem 1\n\t\t</Box>\n\t\t<Box backgroundColor="color.background.accent.green.subtle" padding="space.100">\n\t\t\tItem 2\n\t\t</Box>\n\t</Flex>,\n];\nexport default _default_1;'],
   usageGuidelines: ['Use for flexbox layout needs', 'Leverage compiled styling for performance', 'Use appropriate flex properties and alignment', 'Consider responsive behavior'],
   contentGuidelines: ['Use for appropriate flex layout', 'Maintain consistent flex patterns', 'Consider content alignment and distribution'],
   props: [{
@@ -2661,7 +2783,8 @@ export var components = [{
   }, {
     name: 'children',
     description: 'Elements to be rendered inside the Flex.',
-    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
+    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
+    isRequired: true
   }, {
     name: 'columnGap',
     description: 'Represents the space between each child.',
@@ -2693,7 +2816,7 @@ export var components = [{
   }, {
     name: 'xcss',
     description: 'Apply a subset of permitted styles powered by Atlassian Design System design tokens.',
-    type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "alignItems" | "justifyContent" | "gap" | "columnGap" | "rowGap" | "direction" | "flex" | "grid" | "fill" | "stroke" | ... 487 more ... | "glyphOrientationVertical", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
+    type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "justifyContent" | "alignItems" | "columnGap" | "gap" | "rowGap" | "direction" | "flex" | "grid" | "fill" | "stroke" | ... 487 more ... | "glyphOrientationVertical", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
   }]
 }, {
   name: 'Focusable',
@@ -2702,14 +2825,15 @@ export var components = [{
   category: 'primitive',
   description: 'A primitive Focusable component for keyboard navigation and focus management with compiled styling support.',
   status: 'general-availability',
-  examples: ['import { Box, Focusable } from \'@atlaskit/primitives/compiled\';\nexport default [\n\t<Focusable>\n\t\t<Box padding="space.200" backgroundColor="color.background.neutral.subtle">\n\t\t\tFocusable content\n\t\t</Box>\n\t</Focusable>,\n];'],
+  examples: ['import { Box, Focusable } from \'@atlaskit/primitives/compiled\';\nconst _default_1: React.JSX.Element[] = [\n\t<Focusable>\n\t\t<Box padding="space.200" backgroundColor="color.background.neutral.subtle">\n\t\t\tFocusable content\n\t\t</Box>\n\t</Focusable>,\n];\nexport default _default_1;'],
   accessibilityGuidelines: ['Provide clear focus indicators', 'Use appropriate tab order and navigation', 'Ensure keyboard accessibility', 'Provide clear visual feedback for focus state', 'Use appropriate ARIA attributes'],
   usageGuidelines: ['Use for elements that need keyboard focus', 'Leverage compiled styling for performance', 'Use appropriate focus management', 'Consider keyboard navigation patterns'],
   contentGuidelines: ['Use for appropriate focusable content', 'Maintain consistent focus patterns', 'Consider keyboard navigation flow'],
   props: [{
     name: 'as',
     description: 'The DOM element to render as the Focusable element.',
-    type: '"symbol" | "object" | "style" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "canvas" | "caption" | ... 155 more ... | "view"'
+    type: '"symbol" | "object" | "style" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "canvas" | "caption" | ... 156 more ... | "view"',
+    defaultValue: "'button'"
   }, {
     name: 'children',
     description: '',
@@ -2730,7 +2854,7 @@ export var components = [{
   category: 'primitive',
   description: 'A primitive Grid component for CSS Grid layout with compiled styling support.',
   status: 'general-availability',
-  examples: ['import { cssMap } from \'@atlaskit/css\';\nimport { Box, Grid } from \'@atlaskit/primitives/compiled\';\nconst styles = cssMap({\n\tgrid: {\n\t\tgridTemplateColumns: \'1fr 1fr\',\n\t},\n});\nexport default [\n\t<Grid gap="space.200" xcss={styles.grid}>\n\t\t<Box backgroundColor="color.background.accent.blue.subtle" padding="space.200">\n\t\t\tGrid item 1\n\t\t</Box>\n\t\t<Box backgroundColor="color.background.accent.green.subtle" padding="space.200">\n\t\t\tGrid item 2\n\t\t</Box>\n\t</Grid>,\n];'],
+  examples: ['import { cssMap } from \'@atlaskit/css\';\nimport { Box, Grid } from \'@atlaskit/primitives/compiled\';\nconst styles = cssMap({\n\tgrid: {\n\t\tgridTemplateColumns: \'1fr 1fr\',\n\t},\n});\nconst _default_1: React.JSX.Element[] = [\n\t<Grid gap="space.200" xcss={styles.grid}>\n\t\t<Box backgroundColor="color.background.accent.blue.subtle" padding="space.200">\n\t\t\tGrid item 1\n\t\t</Box>\n\t\t<Box backgroundColor="color.background.accent.green.subtle" padding="space.200">\n\t\t\tGrid item 2\n\t\t</Box>\n\t</Grid>,\n];\nexport default _default_1;'],
   usageGuidelines: ['Use for CSS Grid layout needs', 'Leverage compiled styling for performance', 'Use appropriate grid properties and alignment', 'Consider responsive behavior'],
   contentGuidelines: ['Use for appropriate grid layout', 'Maintain consistent grid patterns', 'Consider content alignment and distribution'],
   props: [{
@@ -2752,7 +2876,8 @@ export var components = [{
   }, {
     name: 'children',
     description: 'Elements to be rendered inside the grid. Required as a grid without children should not be a grid.',
-    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
+    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
+    isRequired: true
   }, {
     name: 'columnGap',
     description: 'Represents the space between each column.',
@@ -2780,7 +2905,7 @@ export var components = [{
   }, {
     name: 'xcss',
     description: 'Apply a subset of permitted styles powered by Atlassian Design System design tokens.',
-    type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "alignItems" | "alignContent" | "justifyContent" | "gap" | "columnGap" | "rowGap" | "flex" | "grid" | "fill" | "stroke" | ... 487 more ... | "glyphOrientationVertical", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
+    type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "justifyContent" | "justifyItems" | "alignItems" | "alignContent" | "columnGap" | "gap" | "rowGap" | "flex" | "grid" | ... 488 more ... | "glyphOrientationVertical", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
   }]
 }, {
   name: 'Inline',
@@ -2789,7 +2914,7 @@ export var components = [{
   category: 'primitive',
   description: 'A primitive Inline component for horizontal layout with consistent spacing.',
   status: 'general-availability',
-  examples: ['import AddIcon from \'@atlaskit/icon/core/add\';\nimport { Inline, Text } from \'@atlaskit/primitives/compiled\';\nexport default [\n\t<Inline space="space.100">\n\t\t<AddIcon label="Add item" />\n\t\t<Text>Add item</Text>\n\t</Inline>,\n];'],
+  examples: ['import AddIcon from \'@atlaskit/icon/core/add\';\nimport { Inline, Text } from \'@atlaskit/primitives/compiled\';\nconst _default_1: React.JSX.Element[] = [\n\t<Inline space="space.100">\n\t\t<AddIcon label="Add item" />\n\t\t<Text>Add item</Text>\n\t</Inline>,\n];\nexport default _default_1;'],
   usageGuidelines: ['Use for horizontal layout needs', 'Leverage compiled styling for performance', 'Use appropriate spacing and alignment props', 'Consider wrapping behavior'],
   contentGuidelines: ['Use for appropriate horizontal grouping', 'Maintain consistent spacing patterns', 'Consider content flow and readability'],
   props: [{
@@ -2807,7 +2932,8 @@ export var components = [{
   }, {
     name: 'children',
     description: 'Elements to be rendered inside the Inline.',
-    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
+    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
+    isRequired: true
   }, {
     name: 'grow',
     description: 'Used to set whether the container should grow to fill the available space.',
@@ -2848,7 +2974,7 @@ export var components = [{
   category: 'primitive',
   description: 'A primitive Text component for typography with compiled styling support.',
   status: 'general-availability',
-  examples: ['import { MetricText } from \'@atlaskit/primitives/compiled\';\nexport default [\n\t<MetricText size="small">42</MetricText>,\n\t<MetricText size="large">1,234</MetricText>,\n];'],
+  examples: ['import { MetricText } from \'@atlaskit/primitives/compiled\';\nconst _default_1: React.JSX.Element[] = [\n\t<MetricText size="small">42</MetricText>,\n\t<MetricText size="large">1,234</MetricText>,\n];\nexport default _default_1;'],
   usageGuidelines: ['Use for text content with consistent typography', 'Leverage compiled styling for performance', 'Use appropriate font size and weight props', 'Consider semantic HTML elements'],
   contentGuidelines: ['Use for appropriate text content', 'Maintain consistent typography patterns', 'Consider readability and hierarchy'],
   props: [{
@@ -2862,7 +2988,8 @@ export var components = [{
   }, {
     name: 'children',
     description: 'Elements rendered within the Text element.',
-    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
+    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
+    isRequired: true
   }, {
     name: 'id',
     description: 'The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).',
@@ -2874,7 +3001,8 @@ export var components = [{
   }, {
     name: 'size',
     description: 'Text size.',
-    type: '"small" | "medium" | "large"'
+    type: '"small" | "medium" | "large"',
+    isRequired: true
   }]
 }, {
   name: 'Pressable',
@@ -2883,7 +3011,7 @@ export var components = [{
   category: 'primitive',
   description: 'A primitive Pressable component for handling touch and click interactions with compiled styling support.',
   status: 'general-availability',
-  examples: ["import { Pressable } from '@atlaskit/primitives/compiled';\nexport default [<Pressable onClick={() => alert('Pressed!')}>Custom button</Pressable>];"],
+  examples: ["import { Pressable } from '@atlaskit/primitives/compiled';\nconst _default_1: React.JSX.Element[] = [\n\t<Pressable onClick={() => alert('Pressed!')}>Custom button</Pressable>,\n];\nexport default _default_1;"],
   accessibilityGuidelines: ['Provide clear visual feedback for press states', 'Ensure appropriate touch target sizes', 'Use appropriate ARIA attributes for interactive elements', 'Provide keyboard navigation support'],
   usageGuidelines: ['Use for interactive elements that need press feedback', 'Leverage compiled styling for performance', 'Use appropriate press states and feedback', 'Consider touch target accessibility'],
   contentGuidelines: ['Use for appropriate interactive content', 'Maintain consistent press patterns', 'Consider user interaction expectations'],
@@ -2907,7 +3035,7 @@ export var components = [{
   category: 'primitive',
   description: 'A primitive Stack component for vertical and horizontal layout with consistent spacing.',
   status: 'general-availability',
-  examples: ['import Heading from \'@atlaskit/heading\';\nimport { Stack, Text } from \'@atlaskit/primitives/compiled\';\nexport default [\n\t<Stack space="space.100">\n\t\t<Heading size="medium">User name</Heading>\n\t\t<Text>Description</Text>\n\t</Stack>,\n];'],
+  examples: ['import Heading from \'@atlaskit/heading\';\nimport { Stack, Text } from \'@atlaskit/primitives/compiled\';\nconst _default_1: React.JSX.Element[] = [\n\t<Stack space="space.100">\n\t\t<Heading size="medium">User name</Heading>\n\t\t<Text>Description</Text>\n\t</Stack>,\n];\nexport default _default_1;'],
   usageGuidelines: ['Use for consistent vertical or horizontal layouts', 'Leverage compiled styling for performance', 'Use appropriate spacing and alignment props', 'Consider responsive behavior'],
   contentGuidelines: ['Use for appropriate layout grouping', 'Maintain consistent spacing patterns', 'Consider content hierarchy and flow'],
   props: [{
@@ -2925,7 +3053,8 @@ export var components = [{
   }, {
     name: 'children',
     description: 'Elements to be rendered inside the Stack.',
-    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
+    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
+    isRequired: true
   }, {
     name: 'grow',
     description: 'Used to set whether the container should grow to fill the available space.',
@@ -2954,7 +3083,7 @@ export var components = [{
   category: 'primitive',
   description: 'A primitive Text component for typography with compiled styling support.',
   status: 'general-availability',
-  examples: ['import { Text } from \'@atlaskit/primitives/compiled\';\nexport default [\n\t<Text>Default text</Text>,\n\t<Text size="large" weight="bold">\n\t\tLarge bold text\n\t</Text>,\n];'],
+  examples: ['import { Text } from \'@atlaskit/primitives/compiled\';\nconst _default_1: React.JSX.Element[] = [\n\t<Text>Default text</Text>,\n\t<Text size="large" weight="bold">\n\t\tLarge bold text\n\t</Text>,\n];\nexport default _default_1;'],
   usageGuidelines: ['Use for text content with consistent typography', 'Leverage compiled styling for performance', 'Use appropriate font size and weight props', 'Consider semantic HTML elements'],
   contentGuidelines: ['Use for appropriate text content', 'Maintain consistent typography patterns', 'Consider readability and hierarchy'],
   props: [{
@@ -2968,7 +3097,8 @@ export var components = [{
   }, {
     name: 'children',
     description: 'Elements rendered within the Text element.',
-    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
+    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
+    isRequired: true
   }, {
     name: 'color',
     description: 'Token representing text color with a built-in fallback value.\nWill apply inverse text color automatically if placed within a Box with bold background color.\nDefaults to `color.text` if not nested in other Text components.',
@@ -3012,7 +3142,8 @@ export var components = [{
   props: [{
     name: 'appearance',
     description: 'The visual style of the progress bar.',
-    type: '"default" | "success" | "inverse"'
+    type: '"default" | "success" | "inverse"',
+    defaultValue: '"default"'
   }, {
     name: 'ariaLabel',
     description: "This is the descriptive label that's associated with the progress bar.\nAlways include useful information on the current state of the progress bar so that people who use assistive technology can understand what the current state of the progress bar is.",
@@ -3020,11 +3151,13 @@ export var components = [{
   }, {
     name: 'isIndeterminate',
     description: 'Shows the progress bar in an indeterminate state when `true`.',
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'false'
   }, {
     name: 'value',
     description: 'Sets the value of the progress bar, between `0` and `1` inclusive.',
-    type: 'number'
+    type: 'number',
+    defaultValue: '0'
   }]
 }, {
   name: 'SuccessProgressBar',
@@ -3043,11 +3176,13 @@ export var components = [{
   }, {
     name: 'isIndeterminate',
     description: 'Shows the progress bar in an indeterminate state when `true`.',
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'false'
   }, {
     name: 'value',
     description: 'Sets the value of the progress bar, between `0` and `1` inclusive.',
-    type: 'number'
+    type: 'number',
+    defaultValue: '0'
   }]
 }, {
   name: 'TransparentProgressBar',
@@ -3066,11 +3201,13 @@ export var components = [{
   }, {
     name: 'isIndeterminate',
     description: 'Shows the progress bar in an indeterminate state when `true`.',
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'false'
   }, {
     name: 'value',
     description: 'Sets the value of the progress bar, between `0` and `1` inclusive.',
-    type: 'number'
+    type: 'number',
+    defaultValue: '0'
   }]
 }, {
   name: 'ProgressIndicator',
@@ -3086,27 +3223,32 @@ export var components = [{
   props: [{
     name: 'appearance',
     description: 'Sets the color of the indicators.',
-    type: '"default" | "help" | "inverted" | "primary"'
+    type: '"default" | "help" | "inverted" | "primary"',
+    defaultValue: '"default"'
   }, {
     name: 'ariaControls',
     description: 'If interaction is enabled, use `ariaControls` to tell assistive technology what elements are controlled by the progress indicator.',
-    type: 'string'
+    type: 'string',
+    defaultValue: '"panel"'
   }, {
     name: 'ariaLabel',
     description: 'Describes what the indicator represents to assistive technology. The selected index number will be appended to the label.',
-    type: 'string'
+    type: 'string',
+    defaultValue: '"tab"'
   }, {
     name: 'onSelect',
     description: 'Function called when an indicator is selected.',
-    type: '(eventData: { event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>; index: number; }, analyticsEvent: UIAnalyticsEvent) => void'
+    type: '(eventData: { event: React.MouseEvent<HTMLButtonElement, MouseEvent>; index: number; }, analyticsEvent: UIAnalyticsEvent) => void'
   }, {
     name: 'selectedIndex',
     description: 'Which indicator is currently selected.',
-    type: 'number'
+    type: 'number',
+    isRequired: true
   }, {
     name: 'size',
     description: 'Sets the width and height of each indicator.',
-    type: '"default" | "large"'
+    type: '"default" | "large"',
+    defaultValue: '"default"'
   }, {
     name: 'spacing',
     description: 'Specifies how much of a gutter there is between indicators.',
@@ -3114,7 +3256,8 @@ export var components = [{
   }, {
     name: 'values',
     description: 'An array of values mapped over to create the indicators.',
-    type: 'any[]'
+    type: 'any[]',
+    isRequired: true
   }]
 }, {
   name: 'ProgressTracker',
@@ -3130,19 +3273,24 @@ export var components = [{
   props: [{
     name: 'animated',
     description: 'Turns off transition animations if set to false.',
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'true'
   }, {
     name: 'items',
     description: 'Ordered list of stage data.',
-    type: 'Stage[]'
+    type: 'Stage[]',
+    isRequired: true,
+    defaultValue: '[]'
   }, {
     name: 'label',
     description: 'Use this to provide an aria-label for the overall progress tracker, so that people who use assistive technology get an overview of the tracker\'s purpose. For example, "Sign up progress".',
-    type: 'string'
+    type: 'string',
+    defaultValue: '"Progress"'
   }, {
     name: 'spacing',
     description: 'Sets the amount of spacing between the steps.',
-    type: '"comfortable" | "cozy" | "compact"'
+    type: '"cozy" | "comfortable" | "compact"',
+    defaultValue: '"cozy"'
   }]
 }, {
   name: 'Radio',
@@ -3242,7 +3390,8 @@ export var components = [{
   }, {
     name: 'options',
     description: 'An array of objects, each object is mapped onto a `Radio` element within the group. Name must be unique to the group.',
-    type: 'OptionPropType[]'
+    type: 'OptionPropType[]',
+    isRequired: true
   }, {
     name: 'value',
     description: 'Once set, controls the selected value on the `RadioGroup`.',
@@ -3310,11 +3459,12 @@ export var components = [{
   }, {
     name: 'children',
     description: 'The main content of the section message. This accepts a react node, although\nwe recommend that this should be a paragraph.',
-    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
+    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
+    isRequired: true
   }, {
     name: 'icon',
     description: 'An Icon component to be rendered instead of the default icon for the component.\nThis should only be an `@atlaskit/icon` icon. You can check out [this example](/packages/design-system/section-message/example/custom-icon)\nto see how to provide this icon.',
-    type: '"symbol" | "object" | "title" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | ... 158 more ... | ComponentType<...>'
+    type: '"symbol" | "object" | "title" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | ... 159 more ... | ComponentType<...>'
   }, {
     name: 'isDismissible',
     description: 'Displays a dismiss button, that allows the user to dismiss the message.\nIt will be removed from the DOM immediately and will not be re-rendered.\nIt does not handle persistence of the dismissed state across page reloads or remounts.',
@@ -3635,14 +3785,15 @@ export var components = [{
   category: 'loading',
   description: 'A skeleton acts as a placeholder for content, usually while the content loads.',
   status: 'early-access',
-  examples: ['import Skeleton from \'@atlaskit/skeleton\';\nexport default [<Skeleton width="200px" height="100px" isShimmering />];'],
+  examples: ['import Skeleton from \'@atlaskit/skeleton\';\nconst _default_1: React.JSX.Element[] = [<Skeleton width="200px" height="100px" isShimmering />];\nexport default _default_1;'],
   accessibilityGuidelines: ['Provide appropriate loading announcements', 'Use skeleton patterns that match actual content structure', 'Ensure skeleton content is not announced as actual content', 'Consider screen reader experience during loading states'],
   usageGuidelines: ['Use to indicate content is loading', 'Match skeleton structure to actual content layout', 'Use appropriate animation and timing', 'Replace with actual content when ready', 'Consider different skeleton patterns for different content types'],
   contentGuidelines: ['Use skeleton patterns that represent actual content structure', 'Maintain consistent skeleton styling', 'Consider content hierarchy in skeleton design', 'Use appropriate animation timing'],
   props: [{
     name: 'borderRadius',
     description: "Controls the border radius, or rounding of the skeleton's corners.",
-    type: 'string | number'
+    type: 'string | number',
+    defaultValue: '"var(--ds-radius-small)"'
   }, {
     name: 'color',
     description: 'Overrides the default color of skeleton, and overrides the default shimmering start color if ShimmeringEndColor also provided.',
@@ -3654,11 +3805,13 @@ export var components = [{
   }, {
     name: 'height',
     description: '',
-    type: 'string | number'
+    type: 'string | number',
+    isRequired: true
   }, {
     name: 'isShimmering',
     description: 'Enables the shimmering animation.',
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'false'
   }, {
     name: 'ShimmeringEndColor',
     description: 'Overrides the default shimmering ending color of skeleton.',
@@ -3666,7 +3819,8 @@ export var components = [{
   }, {
     name: 'width',
     description: '',
-    type: 'string | number'
+    type: 'string | number',
+    isRequired: true
   }]
 }, {
   name: 'Spinner',
@@ -3675,7 +3829,7 @@ export var components = [{
   category: 'feedback',
   description: 'A loading spinner component.',
   status: 'general-availability',
-  examples: ['import Spinner from \'@atlaskit/spinner\';\nexport default [<Spinner size="small" />, <Spinner size="medium" />, <Spinner size="large" />];'],
+  examples: ['import Spinner from \'@atlaskit/spinner\';\nconst _default_1: React.JSX.Element[] = [\n\t<Spinner size="small" />,\n\t<Spinner size="medium" />,\n\t<Spinner size="large" />,\n];\nexport default _default_1;'],
   accessibilityGuidelines: ['Provide appropriate loading announcements', 'Use appropriate timing for spinner display', 'Ensure spinner is announced to screen readers', 'Consider alternative loading indicators'],
   usageGuidelines: ['Use for loading states of unknown duration', 'Consider delay before showing spinner', 'Use appropriate size for context', 'Provide loading context when possible'],
   contentGuidelines: ['Use consistent spinner sizing', 'Consider spinner placement and context', 'Provide loading feedback when appropriate'],
@@ -3710,7 +3864,8 @@ export var components = [{
   props: [{
     name: 'children',
     description: "The children of Tabs. The first child should be a `TabList` filled with `Tab`'s.\nSubsequent children should be `TabPanel`'s. There should be a `Tab` for each `TabPanel`.\nIf you want to customize `Tab` or `TabPanel`, refer to the examples in the documentation.",
-    type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | React.ReactPortal'
+    type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | React.ReactPortal',
+    isRequired: true
   }, {
     name: 'defaultSelected',
     description: 'The index of the tab that will be selected by default when the component mounts.\nIf not set the first tab will be displayed by default.',
@@ -3718,7 +3873,8 @@ export var components = [{
   }, {
     name: 'id',
     description: 'A unique ID that will be used to generate IDs for tabs and tab panels.\nThis is required for accessibility purposes.',
-    type: 'string'
+    type: 'string',
+    isRequired: true
   }, {
     name: 'onChange',
     description: 'A callback function which will be fired when a changed. It will be passed\nthe index of the selected tab and a `UIAnalyticsEvent`.',
@@ -3767,6 +3923,14 @@ export var components = [{
     name: 'linkComponent',
     description: '',
     type: 'ComponentClass<any, any> | FunctionComponent<any>'
+  }, {
+    name: 'maxWidth',
+    description: "Maximum width of the tag text. When exceeded, text will be truncated with ellipsis.\nAccepts any valid CSS max-width value (e.g., '200px', '15rem', '100%').",
+    type: 'string | number'
+  }, {
+    name: 'migration_fallback',
+    description: "@internal\n**Temporary / Internal only for migration.**\n\nWhen set to `'lozenge'` and the feature flag `platform-dst-lozenge-tag-badge-visual-uplifts`\nis OFF, renders as a Lozenge component instead of Tag. This enables safe, staged migration\nfrom Lozenge to Tag for large consumers.\n\nThis prop will be removed via codemod after migration is complete.",
+    type: 'string'
   }, {
     name: 'onAfterRemoveAction',
     description: "Handler to be called after tag is removed. Called with the string 'Post\nRemoval Hook'.",
@@ -3782,7 +3946,8 @@ export var components = [{
   }, {
     name: 'text',
     description: 'Text to be displayed in the tag.',
-    type: 'string'
+    type: 'string',
+    isRequired: true
   }]
 }, {
   name: 'TagGroup',
@@ -3802,7 +3967,8 @@ export var components = [{
   }, {
     name: 'children',
     description: 'Tags to render within the tag group.',
-    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
+    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
+    isRequired: true
   }, {
     name: 'label',
     description: 'Refers to an `aria-label` attribute. Sets an accessible name for the tags group wrapper to announce it to users of assistive technology.\nUsage of either this, or the `titleId` attribute is strongly recommended.',
@@ -4050,7 +4216,8 @@ export var components = [{
   }, {
     name: 'children',
     description: 'Elements to be wrapped by the tooltip.\nIt can be either a:\n1. `ReactNode`\n2. Function which returns a `ReactNode`',
-    type: 'React.ReactNode | ((props: TriggerProps) => React.ReactNode)'
+    type: 'React.ReactNode | ((props: TriggerProps) => React.ReactNode)',
+    isRequired: true
   }, {
     name: 'component',
     description: 'Extend `TooltipPrimitive` to create your own tooltip and pass it as component.',
@@ -4058,43 +4225,53 @@ export var components = [{
   }, {
     name: 'content',
     description: 'The content of the tooltip. It can be either a:\n1. `ReactNode`\n2. Function which returns a `ReactNode`\nThe benefit of the second approach is that it allows you to consume the `update` render prop.\nThis `update` function can be called to manually recalculate the position of the tooltip.\n\nThis content will be rendered into two places:\n1. Into the tooltip\n2. Into a hidden element for screen readers (unless `isScreenReaderAnnouncementDisabled` is set to `true`)',
-    type: 'React.ReactNode | (({ update }: { update?: () => void; }) => React.ReactNode)'
+    type: 'React.ReactNode | (({ update }: { update?: () => void; }) => React.ReactNode)',
+    isRequired: true
   }, {
     name: 'delay',
     description: 'Time in milliseconds to wait before showing and hiding the tooltip. Defaults to 300.',
-    type: 'number'
+    type: 'number',
+    defaultValue: '300'
   }, {
     name: 'hideTooltipOnClick',
     description: 'Hide the tooltip when the click event is triggered. Use this when the tooltip should be hidden if `onClick` react synthetic event\nis triggered, which happens after `onMouseDown` event.',
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'false'
   }, {
     name: 'hideTooltipOnMouseDown',
     description: 'Hide the tooltip when the mousedown event is triggered. This should be\nused when tooltip should be hidden if `onMouseDown` react synthetic event\nis triggered, which happens before `onClick` event.',
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'false'
   }, {
     name: 'ignoreTooltipPointerEvents',
     description: 'Adds `pointer-events: none` to the tooltip itself. Setting this to true will also prevent the tooltip from persisting when hovered.',
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'false'
   }, {
     name: 'isScreenReaderAnnouncementDisabled',
     description: 'By default tooltip content will be duplicated into a hidden element so\nit can be read out by a screen reader. Sometimes this is not ideal as\nit can result in the same content be announced twice. For those situations,\nyou can leverage this prop to disable the duplicate hidden text.',
-    type: 'boolean'
+    type: 'boolean',
+    defaultValue: 'false'
   }, {
     name: 'mousePosition',
-    description: 'Where the tooltip should appear relative to the mouse pointer.\nOnly use this when the `position` prop is set to `"mouse"`.\nWhen interacting with the target element using a keyboard, it will use this position against the target element instead.',
-    type: 'AutoPlacement | BasePlacement | VariationPlacement'
+    description: 'Where the tooltip should appear relative to the mouse pointer.\nOnly use this when the `position` prop is set to `"mouse"`, `"mouse-y"`, or `"mouse-x"`.\nWhen interacting with the target element using a keyboard, it will use this position against the target element instead.',
+    type: 'AutoPlacement | BasePlacement | VariationPlacement',
+    defaultValue: '"bottom"'
   }, {
     name: 'onHide',
     description: "Function to be called when the tooltip will be hidden. It's called after the\ndelay, when the tooltip begins to animate out.",
-    type: '(analyticsEvent: UIAnalyticsEvent) => void'
+    type: '(analyticsEvent: UIAnalyticsEvent) => void',
+    defaultValue: 'noop'
   }, {
     name: 'onShow',
     description: "Function to be called when the tooltip will be shown. It's called when the\ntooltip begins to animate in.",
-    type: '(analyticsEvent: UIAnalyticsEvent) => void'
+    type: '(analyticsEvent: UIAnalyticsEvent) => void',
+    defaultValue: 'noop'
   }, {
     name: 'position',
-    description: 'Where the tooltip should appear relative to its target.\nIf set to `"mouse"`, the tooltip will display next to the mouse pointer instead.\nMake sure to utilize the `mousePosition` if you want to customize where the tooltip will show in relation to the mouse.',
-    type: 'Placement | "mouse"'
+    description: 'Where the tooltip should appear relative to its target.\nIf set to `"mouse"`, the tooltip will display next to the mouse pointer instead.\nIf set to `"mouse-y"`, the tooltip will use the mouse Y coordinate but the target X coordinate.\nIf set to `"mouse-x"`, the tooltip will use the mouse X coordinate but the target Y coordinate.\nMake sure to utilize the `mousePosition` if you want to customize where the tooltip will show in relation to the mouse.',
+    type: 'Placement | "mouse" | "mouse-y" | "mouse-x"',
+    defaultValue: '"bottom"'
   }, {
     name: 'shortcut',
     description: 'Display a keyboard shortcut in the tooltip.\n\nKeys will be displayed as individual keyboard key segments after the tooltip content.',
@@ -4102,11 +4279,21 @@ export var components = [{
   }, {
     name: 'strategy',
     description: 'Use this to define the strategy of popper.',
-    type: '"fixed" | "absolute"'
+    type: '"fixed" | "absolute"',
+    defaultValue: '"fixed"'
   }, {
     name: 'tag',
     description: 'Replace the wrapping element. This accepts the name of a html tag which will\nbe used to wrap the element.\nIf you provide a component, it needs to support a ref prop which is used by popper for positioning.',
     type: 'keyof JSX.IntrinsicElements | React.ComponentType<React.AllHTMLAttributes<HTMLElement> & { ref: React.Ref<HTMLElement>; }> | React.ForwardRefExoticComponent<...>'
+  }, {
+    name: 'UNSAFE_shouldAlwaysFadeIn',
+    description: 'When set to true, the tooltip will always use the fade-in animation\nand never use the show-immediate behavior, even when another tooltip\nis already visible.',
+    type: 'boolean'
+  }, {
+    name: 'UNSAFE_shouldRenderToParent',
+    description: 'When enabled, the tooltip will be rendered as a sibling to the trigger element instead of being portaled to the document body.\n\nThis is an experimental prop and may be removed at any time. It is not yet intended for public use.',
+    type: 'boolean',
+    defaultValue: 'false'
   }]
 }, {
   name: 'VisuallyHidden',
@@ -4122,7 +4309,8 @@ export var components = [{
   props: [{
     name: 'children',
     description: 'The element or elements that should be hidden.',
-    type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
+    type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
+    isRequired: true
   }, {
     name: 'id',
     description: 'An id may be appropriate for this component if used in conjunction with `aria-describedby`\non a paired element.',