@atlaskit/ads-mcp 0.13.0 → 0.13.2

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

@@ -3,7 +3,7 @@
  *
  * Generates TypeScript components data for AI tooling from offerings.json files
  *
- * @codegen <<SignedSource::f835c392bd49a057135d06af127f2dfa>>
+ * @codegen <<SignedSource::1d781f4539138bf6cabcd8c01b207b06>>
  * @codegenCommand yarn workspace @af/ads-ai-tooling codegen:prototyping
  */
 
@@ -14,7 +14,7 @@ export const components = [{
   category: 'images',
   description: 'A component for displaying user avatars with support for images, initials, and status indicators. An avatar is a visual representation of a user or entity. It can display user images, initials, presence indicators, and status indicators. Avatars help users quickly identify people and entities in your application. They provide visual context and make interfaces more personal and engaging.',
   status: 'general-availability',
-  examples: ['import Avatar from \'@atlaskit/avatar\';\nexport default [\n\t<Avatar src="https://example.com/avatar.jpg" name="John Doe" />,\n\t<Avatar name="Jane Smith" appearance="hexagon" size="large" status="locked" />,\n\t<Avatar name="Bob Wilson" appearance="square" size="small" presence="online" status="approved" />,\n];'],
+  examples: ['import Avatar from \'@atlaskit/avatar\';\nconst Examples = (): React.JSX.Element => (\n\t<>\n\t\t<Avatar src="https://example.com/avatar.jpg" name="John Doe" />\n\t\t<Avatar name="Jane Smith" appearance="hexagon" size="large" status="locked" />\n\t\t<Avatar\n\t\t\tname="Bob Wilson"\n\t\t\tappearance="square"\n\t\t\tsize="small"\n\t\t\tpresence="online"\n\t\t\tstatus="approved"\n\t\t/>\n\t</>\n);\nexport default Examples;'],
   usageGuidelines: ['Use consistent sizing within the same context', 'Place avatars in logical groupings (e.g., team members)', 'Use presence indicators sparingly for real-time status only', 'Use status indicators for approval/permission states', 'Provide fallback initials when images fail to load', 'Use avatars to represent users, teams, projects, or any other entity that needs visual identification', 'Always provide meaningful names for accessibility', 'Use the `name` prop to include alternative text for screen readers', 'For decorative images, remove the `name` prop or leave it empty so it will be ignored by assistive technologies', "Don't use a tooltip with an avatar when it's non-interactive or disabled. The tooltip won't work for keyboard users and screen readers"],
   contentGuidelines: ['Use full names when possible for better recognition', 'For companies/projects, use descriptive names', "Avoid generic terms like 'User' or 'Admin'", 'Use consistent naming conventions across your app', 'Keep names concise but meaningful'],
   props: [{
@@ -97,7 +97,7 @@ export const components = [{
   category: 'data-display',
   description: 'A component for displaying multiple avatars in a group with overlap and overflow handling.',
   status: 'general-availability',
-  examples: ["import AvatarGroup from '@atlaskit/avatar-group';\nexport default [\n\t<AvatarGroup\n\t\tappearance=\"stack\"\n\t\tsize=\"large\"\n\t\tonAvatarClick={console.log}\n\t\tdata={[\n\t\t\t{ key: 'uid1', name: 'Bob Smith' },\n\t\t\t{ key: 'uid2', name: 'Design System Team', appearance: 'square' },\n\t\t\t{ key: 'uid3', name: 'Review Agent', appearance: 'hexagon' },\n\t\t\t{ key: 'uid4', name: 'Carol Davis' },\n\t\t]}\n\t\tmaxCount={3}\n\t/>,\n];"],
+  examples: ["import AvatarGroup from '@atlaskit/avatar-group';\nconst Example = (): React.JSX.Element => (\n\t<AvatarGroup\n\t\tappearance=\"stack\"\n\t\tsize=\"large\"\n\t\tonAvatarClick={console.log}\n\t\tdata={[\n\t\t\t{ key: 'uid1', name: 'Bob Smith' },\n\t\t\t{ key: 'uid2', name: 'Design System Team', appearance: 'square' },\n\t\t\t{ key: 'uid3', name: 'Review Agent', appearance: 'hexagon' },\n\t\t\t{ key: 'uid4', name: 'Carol Davis' },\n\t\t]}\n\t\tmaxCount={3}\n\t/>\n);\nexport default Example;"],
   accessibilityGuidelines: ['Provide clear labels for avatar groups', 'Use appropriate overflow handling', 'Ensure keyboard navigation support', 'Provide clear user identification'],
   usageGuidelines: ['Use for displaying multiple users or team members', 'Consider overflow behavior for large groups', 'Use appropriate sizing for context', 'Provide clear user identification'],
   contentGuidelines: ['Use meaningful names for users', 'Consider group context and purpose', 'Provide clear overflow indicators', 'Use consistent naming patterns'],
@@ -173,14 +173,14 @@ export const components = [{
   category: 'status-indicators',
   description: 'A badge is a visual indicator for numeric values such as tallies and scores, providing quick visual feedback.',
   status: 'general-availability',
-  examples: ['import Badge from \'@atlaskit/badge\';\nexport default [\n\t<Badge appearance="primary">5</Badge>,\n\t<Badge appearance="important" max={99}>\n\t\t150\n\t</Badge>,\n];'],
+  examples: ['import Badge from \'@atlaskit/badge\';\nconst Examples = (): React.JSX.Element => (\n\t<>\n\t\t<Badge appearance="primary">5</Badge>\n\t\t<Badge appearance="important" max={99}>\n\t\t\t150\n\t\t</Badge>\n\t</>\n);\nexport default Examples;'],
   accessibilityGuidelines: ['Ensure badge content is announced by screen readers', 'Use appropriate color contrast for text readability', 'Provide meaningful context for numeric values', 'Consider alternative text for non-numeric badges'],
   usageGuidelines: ['Use for displaying counts, scores, or status indicators', 'Keep badge content concise and meaningful', 'Use appropriate appearance variants for different contexts', 'Position badges near relevant content', 'Consider maximum value display limits'],
   contentGuidelines: ['Use clear, concise numeric or text values', 'Ensure values are meaningful to users', 'Consider localization for number formatting', 'Use consistent formatting across similar badges'],
   props: [{
     name: 'appearance',
     description: 'Affects the visual style of the badge.',
-    type: '"added" | "default" | "important" | "primary" | "primaryInverted" | "removed"'
+    type: '"added" | "default" | "important" | "primary" | "primaryInverted" | "removed" | "warning" | "discovery" | "danger" | "neutral" | "success" | "information" | "inverse"'
   }, {
     name: 'children',
     description: 'The value displayed within the badge. A `ReactNode` can be provided for\ncustom-formatted numbers, however, badge should only be used in cases where you want to represent\na number.\nUse a [lozenge](/packages/design-system/lozenge) for non-numeric information.',
@@ -197,7 +197,7 @@ export const 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 () => (\n\t<Box>\n\t\t<Banner\n\t\t\ticon={<WarningIcon label="Warning" secondaryColor="inherit" size="medium" />}\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\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);'],
   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'],
@@ -221,7 +221,7 @@ export const components = [{
   category: 'overlay',
   description: 'A component for creating overlay backgrounds behind modals and other layered content.',
   status: 'general-availability',
-  examples: ["import Blanket from '@atlaskit/blanket';\nexport default [\n\t<Blanket />,\n\t<Blanket isTinted onBlanketClicked={() => console.log('Blanket clicked')} />,\n];"],
+  examples: ["import Blanket from '@atlaskit/blanket';\nconst Examples = (): React.JSX.Element => (\n\t<>\n\t\t<Blanket />\n\t\t<Blanket isTinted onBlanketClicked={() => console.log('Blanket clicked')} />\n\t</>\n);\nexport default Examples;"],
   accessibilityGuidelines: ["Ensure blanket doesn't interfere with focus management", 'Provide appropriate click handling for dismissal', 'Consider screen reader experience with overlays'],
   usageGuidelines: ['Use behind modals and overlays', 'Consider click-to-dismiss behavior', 'Use appropriate tinting for context', 'Ensure proper z-index layering'],
   contentGuidelines: ['Use consistently across similar overlay contexts', 'Consider visual hierarchy with overlays', 'Ensure appropriate contrast with content'],
@@ -249,7 +249,7 @@ export const components = [{
   category: 'navigation',
   description: 'A navigation component showing the current page hierarchy.',
   status: 'general-availability',
-  examples: ['import Breadcrumbs, { BreadcrumbsItem } from \'@atlaskit/breadcrumbs\';\nexport default [\n\t<Breadcrumbs maxItems={3}>\n\t\t<BreadcrumbsItem href="/" text="Home" />\n\t\t<BreadcrumbsItem href="/category" text="Category" />\n\t\t<BreadcrumbsItem href="/category/products" text="Products" />\n\t\t<BreadcrumbsItem text="Current Page" />\n\t</Breadcrumbs>,\n];'],
+  examples: ['import Breadcrumbs, { BreadcrumbsItem } from \'@atlaskit/breadcrumbs\';\nconst Example = (): React.JSX.Element => (\n\t<Breadcrumbs maxItems={3}>\n\t\t<BreadcrumbsItem href="/" text="Home" />\n\t\t<BreadcrumbsItem href="/category" text="Category" />\n\t\t<BreadcrumbsItem href="/category/products" text="Products" />\n\t\t<BreadcrumbsItem text="Current Page" />\n\t</Breadcrumbs>\n);\nexport default Example;'],
   accessibilityGuidelines: ['Provide clear navigation labels', 'Use appropriate ARIA landmarks', 'Ensure keyboard navigation support', 'Provide clear path context'],
   usageGuidelines: ['Use to show page hierarchy', 'Keep breadcrumb labels concise', 'Consider truncation for long paths', 'Use appropriate separators'],
   contentGuidelines: ['Use clear, descriptive page labels', 'Keep labels concise but meaningful', 'Use consistent naming conventions', 'Consider user understanding of hierarchy'],
@@ -297,7 +297,7 @@ export const components = [{
   category: 'form',
   description: 'A versatile button component with multiple appearances and states for triggering actions. A button triggers an event or action. They let users know what will happen next. Note the root entrypoint of `@atlaskit/button` is deprecated and being replaced with `@atlaskit/button/new`.',
   status: 'general-availability',
-  examples: ['import Button from \'@atlaskit/button/new\';\nexport default function ButtonDisabledExample() {\n\treturn (\n\t\t<Button appearance="primary" isDisabled>\n\t\t\tDisabled button\n\t\t</Button>\n\t);\n}', 'import Button from \'@atlaskit/button/new\';\nexport default function ButtonDangerExample() {\n\treturn <Button appearance="danger">Danger button</Button>;\n}', "import Button from '@atlaskit/button/new';\nimport StarIcon from '@atlaskit/icon/core/star-starred';\nexport default function ButtonIconAfterExample() {\n\treturn (\n\t\t<Button iconAfter={StarIcon} appearance=\"primary\">\n\t\t\tIcon after\n\t\t</Button>\n\t);\n}"],
+  examples: ['import Button from \'@atlaskit/button/new\';\nexport default function ButtonDisabledExample(): React.JSX.Element {\n\treturn (\n\t\t<Button appearance="primary" isDisabled>\n\t\t\tDisabled button\n\t\t</Button>\n\t);\n}', 'import Button from \'@atlaskit/button/new\';\nexport default function ButtonDangerExample(): React.JSX.Element {\n\treturn <Button appearance="danger">Danger button</Button>;\n}', "import Button from '@atlaskit/button/new';\nimport StarIcon from '@atlaskit/icon/core/star-starred';\nexport default function ButtonIconAfterExample(): React.JSX.Element {\n\treturn (\n\t\t<Button iconAfter={StarIcon} appearance=\"primary\">\n\t\t\tIcon after\n\t\t</Button>\n\t);\n}"],
   accessibilityGuidelines: ['Always provide meaningful labels for screen readers', 'Provide loading state announcements for async actions'],
   usageGuidelines: ['Use primary buttons for the main action on a page', 'Limit to one primary button per section', 'Use subtle buttons for secondary actions', 'Use danger buttons sparingly for destructive actions', 'Group related buttons together with ButtonGroup'],
   contentGuidelines: ['Use action verbs that describe the interaction', 'Keep text concise (1-3 words ideal)', 'Avoid generic terms like "Submit" or "Click here"', 'Use sentence case', 'Use buttons for actions, links for navigation', 'Only include one primary call to action (CTA) per area', "Start with the verb and specify what's being acted on", "Don't use punctuation in button labels"],
@@ -542,7 +542,7 @@ export const components = [{
   category: 'form',
   description: 'Legacy button component (deprecated). Use Button from @atlaskit/button/new instead.',
   status: 'intent-to-deprecate',
-  examples: ["import Button from '@atlaskit/button';\nexport default () => <Button>Button</Button>;"],
+  examples: ["import Button from '@atlaskit/button';\nexport default (): React.JSX.Element => <Button>Button</Button>;"],
   accessibilityGuidelines: ['Always provide meaningful labels for screen readers', 'Provide loading state announcements for async actions'],
   usageGuidelines: ['Use the new Button component from @atlaskit/button/new instead', 'Migrate existing usage to the new Button API', 'Consider this component deprecated'],
   contentGuidelines: ['Use action verbs that describe the interaction', 'Keep text concise (1-3 words ideal)', "Avoid generic terms like 'Submit' or 'Click here'"],
@@ -622,7 +622,7 @@ export const components = [{
   category: 'form',
   description: "A calendar component for date selection and display. This component is in Beta phase, meaning it's stable at version 1.0+ but may receive improvements based on customer feedback.",
   status: 'general-availability',
-  examples: ["import Calendar from '@atlaskit/calendar';\nexport default [\n\t<Calendar\n\t\tselected={['2024-03-15']}\n\t\tonChange={(dates) => console.log('Selected dates:', dates)}\n\t/>,\n\t<Calendar\n\t\tselected={['2024-03-20', '2024-03-21', '2024-03-22']}\n\t\tonChange={(dates) => console.log('Multiple dates:', dates)}\n\t\tdefaultMonth={3}\n\t\tdefaultYear={2024}\n\t/>,\n\t<Calendar\n\t\tselected={[]}\n\t\tdisabled={['2024-03-10', '2024-03-11']}\n\t\tminDate=\"2024-03-01\"\n\t\tmaxDate=\"2024-03-31\"\n\t\tonChange={(dates) => console.log('Constrained dates:', dates)}\n\t/>,\n];"],
+  examples: ["import Calendar from '@atlaskit/calendar';\nconst Examples = (): React.JSX.Element => (\n\t<>\n\t\t<Calendar\n\t\t\tselected={['2024-03-15']}\n\t\t\tonChange={(dates) => console.log('Selected dates:', dates)}\n\t\t/>\n\t\t<Calendar\n\t\t\tselected={['2024-03-20', '2024-03-21', '2024-03-22']}\n\t\t\tonChange={(dates) => console.log('Multiple dates:', dates)}\n\t\t\tdefaultMonth={3}\n\t\t\tdefaultYear={2024}\n\t\t/>\n\t\t<Calendar\n\t\t\tselected={[]}\n\t\t\tdisabled={['2024-03-10', '2024-03-11']}\n\t\t\tminDate=\"2024-03-01\"\n\t\t\tmaxDate=\"2024-03-31\"\n\t\t\tonChange={(dates) => console.log('Constrained dates:', dates)}\n\t\t/>\n\t</>\n);\nexport default Examples;"],
   accessibilityGuidelines: ['Provide clear date selection feedback', 'Ensure keyboard navigation between dates', 'Use appropriate ARIA labels for dates', 'Support screen reader announcements for date changes'],
   usageGuidelines: ['Use for date selection interfaces', 'Consider date range limitations', 'Provide clear visual feedback for selected dates', 'Handle disabled dates appropriately'],
   contentGuidelines: ['Use clear date formatting', 'Provide helpful date labels', 'Consider localization for date display', 'Use consistent date terminology'],
@@ -734,7 +734,7 @@ export const components = [{
   category: 'forms-and-input',
   description: 'A checkbox is an input control that allows a user to select one or more options from a number of choices.',
   status: 'general-availability',
-  examples: ['import Checkbox from \'@atlaskit/checkbox\';\nexport default [\n\t<Checkbox label="Basic checkbox" />,\n\t<Checkbox label="Checked checkbox" isChecked />,\n];'],
+  examples: ['import Checkbox from \'@atlaskit/checkbox\';\nconst Examples = (): React.JSX.Element => (\n\t<>\n\t\t<Checkbox label="Basic checkbox" />\n\t\t<Checkbox label="Checked checkbox" isChecked />\n\t</>\n);\nexport default Examples;'],
   accessibilityGuidelines: ['Ensure proper labeling for all checkboxes', 'Use clear, descriptive labels that explain the choice', 'Provide keyboard navigation support', 'Indicate required fields clearly', 'Use appropriate error states and messaging'],
   usageGuidelines: ['Use for multiple choice selections', 'Group related checkboxes logically', 'Provide clear labels for each option', 'Use indeterminate state for partial selections', 'Consider default states carefully'],
   contentGuidelines: ['Write clear, descriptive labels', 'Use consistent language across related options', 'Avoid negative phrasing when possible', 'Group related options together'],
@@ -882,7 +882,7 @@ export const components = [{
   category: 'data-display',
   description: 'A component for displaying comments and discussions.',
   status: 'general-availability',
-  examples: ['import Comment from \'@atlaskit/comment\';\nexport default [\n\t<Comment\n\t\tauthor="Bob Johnson"\n\t\ttime="30 minutes ago"\n\t\tcontent="Another comment in the thread"\n\t\tavatar="https://picsum.photos/32/32"\n\t/>,\n];'],
+  examples: ['import Comment from \'@atlaskit/comment\';\nconst Example = (): React.JSX.Element => (\n\t<Comment\n\t\tauthor="Bob Johnson"\n\t\ttime="30 minutes ago"\n\t\tcontent="Another comment in the thread"\n\t\tavatar="https://picsum.photos/32/32"\n\t/>\n);\nexport default Example;'],
   accessibilityGuidelines: ['Ensure proper comment structure', 'Provide clear comment attribution', 'Use appropriate heading hierarchy', 'Consider screen reader navigation'],
   usageGuidelines: ['Use for comment threads and discussions', 'Provide clear comment attribution', 'Handle comment nesting appropriately', 'Consider comment moderation features'],
   contentGuidelines: ['Use clear, constructive comment content', 'Provide meaningful comment attribution', 'Use appropriate comment formatting', 'Consider comment context and purpose'],
@@ -974,7 +974,7 @@ export const components = [{
   category: 'form',
   description: 'A component for selecting date values with calendar support.',
   status: 'general-availability',
-  examples: ['import { DatePicker } from \'@atlaskit/datetime-picker\';\nexport default [\n\t<DatePicker\n\t\tclearControlLabel="Clear select date"\n\t\tonChange={() => {}}\n\t\tshouldShowCalendarButton\n\t\topenCalendarLabel="open calendar"\n\t/>,\n];'],
+  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;'],
   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'],
@@ -1122,7 +1122,7 @@ export const components = [{
   category: 'form',
   description: 'A component for selecting time values with clock interface.',
   status: 'general-availability',
-  examples: ['import { TimePicker } from \'@atlaskit/datetime-picker\';\nexport default [\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];'],
+  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;'],
   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,7 +1234,7 @@ export const components = [{
   category: 'form',
   description: 'A component for selecting both date and time values.',
   status: 'general-availability',
-  examples: ["import { DateTimePicker } from '@atlaskit/datetime-picker';\nexport default [\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];"],
+  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;"],
   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'],
@@ -1386,7 +1386,7 @@ export const components = [{
   category: 'overlays-and-layering',
   description: 'The main content area of a drawer panel.',
   status: 'intent-to-deprecate',
-  examples: ["import { DrawerContent } from '@atlaskit/drawer';\nimport Heading from '@atlaskit/heading';\nimport { Text } from '@atlaskit/primitives/compiled';\nexport default [\n\t<DrawerContent>\n\t\t<Heading size=\"large\">Content Title</Heading>\n\t\t<Text>This is the main content area of the drawer.</Text>\n\t</DrawerContent>,\n\t<DrawerContent>\n\t\t<Heading size=\"medium\">Settings</Heading>\n\t\t<Text>Configure your preferences here.</Text>\n\t</DrawerContent>,\n];"],
+  examples: ["import { DrawerContent } from '@atlaskit/drawer';\nimport Heading from '@atlaskit/heading';\nimport { Text } from '@atlaskit/primitives/compiled';\nconst Examples = (): React.JSX.Element => (\n\t<>\n\t\t<DrawerContent>\n\t\t\t<Heading size=\"large\">Content Title</Heading>\n\t\t\t<Text>This is the main content area of the drawer.</Text>\n\t\t</DrawerContent>\n\t\t<DrawerContent>\n\t\t\t<Heading size=\"medium\">Settings</Heading>\n\t\t\t<Text>Configure your preferences here.</Text>\n\t\t</DrawerContent>\n\t</>\n);\nexport default Examples;"],
   usageGuidelines: ['Use as the main content container within a drawer', 'Place primary content and actions here', 'Ensure proper scrolling behavior for long content'],
   contentGuidelines: ['Organize content logically', 'Use appropriate spacing and layout', 'Consider content hierarchy'],
   props: [{
@@ -1409,7 +1409,7 @@ export const components = [{
   category: 'overlays-and-layering',
   description: 'A sidebar component within a drawer for navigation or secondary content.',
   status: 'intent-to-deprecate',
-  examples: ["import { DrawerCloseButton, DrawerSidebar } from '@atlaskit/drawer';\nexport default [\n\t<DrawerSidebar>\n\t\t<DrawerCloseButton />\n\t</DrawerSidebar>,\n];"],
+  examples: ["import { DrawerCloseButton, DrawerSidebar } from '@atlaskit/drawer';\nconst Example = (): React.JSX.Element => (\n\t<DrawerSidebar>\n\t\t<DrawerCloseButton />\n\t</DrawerSidebar>\n);\nexport default Example;"],
   usageGuidelines: ['Use for navigation or secondary content in a drawer', 'Keep sidebar content focused and organized', 'Consider responsive behavior'],
   contentGuidelines: ['Use clear navigation labels', 'Organize content hierarchically', 'Keep sidebar content concise'],
   props: [{
@@ -1428,7 +1428,7 @@ export const components = [{
   category: 'overlays-and-layering',
   description: 'A close button specifically designed for drawer components.',
   status: 'intent-to-deprecate',
-  examples: ["import { DrawerCloseButton } from '@atlaskit/drawer';\nexport default [<DrawerCloseButton />];"],
+  examples: ["import { DrawerCloseButton } from '@atlaskit/drawer';\nconst Example = (): React.JSX.Element => <DrawerCloseButton />;\nexport default Example;"],
   usageGuidelines: ['Use to provide clear close functionality for drawers', 'Position prominently for easy access', 'Ensure keyboard accessibility'],
   contentGuidelines: ['Use clear close icon or text', 'Ensure button is easily discoverable', 'Provide appropriate hover/focus states'],
   props: [{
@@ -1447,7 +1447,7 @@ export const components = [{
   category: 'navigation',
   description: 'A dropdown menu component for displaying contextual actions and options.',
   status: 'general-availability',
-  examples: ['import { IconButton } from \'@atlaskit/button/new\';\nimport DropdownMenu, { DropdownItem, DropdownItemGroup } from \'@atlaskit/dropdown-menu\';\nimport MoreIcon from \'@atlaskit/icon/core/show-more-horizontal\';\nexport default [\n\t<DropdownMenu\n\t\tshouldRenderToParent\n\t\ttrigger={({ triggerRef, ...props }) => (\n\t\t\t<IconButton ref={triggerRef} {...props} icon={MoreIcon} label="More" />\n\t\t)}\n\t>\n\t\t<DropdownItemGroup>\n\t\t\t<DropdownItem href="/dashboard">Dashboard</DropdownItem>\n\t\t\t<DropdownItem>Create</DropdownItem>\n\t\t\t<DropdownItem>Delete</DropdownItem>\n\t\t</DropdownItemGroup>\n\t</DropdownMenu>,\n\t<DropdownMenu shouldRenderToParent trigger="Actions">\n\t\t<DropdownItemGroup>\n\t\t\t<DropdownItem>Export</DropdownItem>\n\t\t\t<DropdownItem>Share</DropdownItem>\n\t\t</DropdownItemGroup>\n\t</DropdownMenu>,\n];'],
+  examples: ['import { IconButton } from \'@atlaskit/button/new\';\nimport DropdownMenu, { DropdownItem, DropdownItemGroup } from \'@atlaskit/dropdown-menu\';\nimport MoreIcon from \'@atlaskit/icon/core/show-more-horizontal\';\nconst Examples = (): React.JSX.Element => (\n\t<>\n\t\t<DropdownMenu\n\t\t\tshouldRenderToParent\n\t\t\ttrigger={({ triggerRef, ...props }) => (\n\t\t\t\t<IconButton ref={triggerRef} {...props} icon={MoreIcon} label="More" />\n\t\t\t)}\n\t\t>\n\t\t\t<DropdownItemGroup>\n\t\t\t\t<DropdownItem href="/dashboard">Dashboard</DropdownItem>\n\t\t\t\t<DropdownItem>Create</DropdownItem>\n\t\t\t\t<DropdownItem>Delete</DropdownItem>\n\t\t\t</DropdownItemGroup>\n\t\t</DropdownMenu>\n\t\t<DropdownMenu shouldRenderToParent trigger="Actions">\n\t\t\t<DropdownItemGroup>\n\t\t\t\t<DropdownItem>Export</DropdownItem>\n\t\t\t\t<DropdownItem>Share</DropdownItem>\n\t\t\t</DropdownItemGroup>\n\t\t</DropdownMenu>\n\t</>\n);\nexport default Examples;'],
   accessibilityGuidelines: ['Provide clear labels for dropdown triggers', 'Ensure keyboard navigation with arrow keys', 'Use appropriate ARIA attributes', 'Provide clear menu item descriptions', 'Support escape key to close menu'],
   usageGuidelines: ['Use for contextual actions and options', 'Group related menu items together', 'Use clear, descriptive menu item labels', 'Consider menu positioning and overflow', 'Use appropriate trigger elements'],
   contentGuidelines: ['Use clear, action-oriented menu item labels', 'Keep menu item text concise', 'Group related actions logically', 'Use consistent terminology across menu items'],
@@ -1535,7 +1535,7 @@ export const components = [{
   category: 'status',
   description: 'A component for empty states.',
   status: 'general-availability',
-  examples: ['import EmptyState from \'@atlaskit/empty-state\';\nexport default [\n\t<EmptyState header="No items" description="Add items to get started" />,\n\t<EmptyState\n\t\theader="No search results"\n\t\tdescription="Try adjusting your search criteria or browse all items."\n\t/>,\n\t<EmptyState\n\t\theader="Welcome to your dashboard"\n\t\tdescription="Create your first project to get started with the platform."\n\t/>,\n];'],
+  examples: ['import EmptyState from \'@atlaskit/empty-state\';\nconst Examples = (): React.JSX.Element => (\n\t<>\n\t\t<EmptyState header="No items" description="Add items to get started" />\n\t\t<EmptyState\n\t\t\theader="No search results"\n\t\t\tdescription="Try adjusting your search criteria or browse all items."\n\t\t/>\n\t\t<EmptyState\n\t\t\theader="Welcome to your dashboard"\n\t\t\tdescription="Create your first project to get started with the platform."\n\t\t/>\n\t</>\n);\nexport default Examples;'],
   accessibilityGuidelines: ['Provide clear empty state messaging', 'Use appropriate headings and structure', 'Ensure actionable content is accessible', 'Consider screen reader experience'],
   usageGuidelines: ['Use when nothing to display in a view', 'Explain why the state is empty', 'Provide clear next steps', 'Keep tone helpful and encouraging', 'Consider all scenarios causing the empty state'],
   contentGuidelines: ['Use inspirational, motivating tone for first-time view', 'Provide specific next steps', 'Avoid negative language', 'Use clear, descriptive headers'],
@@ -1611,7 +1611,7 @@ export const components = [{
   category: 'feedback',
   description: 'A component for displaying brief messages.',
   status: 'general-availability',
-  examples: ['import Flag, { FlagGroup } from \'@atlaskit/flag\';\nimport InfoIcon from \'@atlaskit/icon/core/status-information\';\nexport default [\n\t<FlagGroup>\n\t\t<Flag\n\t\t\tid="flag-1"\n\t\t\ticon={<InfoIcon label="Info" />}\n\t\t\ttitle="Success"\n\t\t\tdescription="Your changes have been saved successfully."\n\t\t\tappearance="success"\n\t\t/>\n\t</FlagGroup>,\n\t<FlagGroup>\n\t\t<Flag\n\t\t\tid="flag-2"\n\t\t\ticon={<InfoIcon label="Warning" />}\n\t\t\ttitle="Warning"\n\t\t\tdescription="This action cannot be undone."\n\t\t\tappearance="warning"\n\t\t\tactions={[\n\t\t\t\t{\n\t\t\t\t\tcontent: \'Proceed\',\n\t\t\t\t\tonClick: () => console.log(\'Proceed clicked\'),\n\t\t\t\t},\n\t\t\t]}\n\t\t/>\n\t</FlagGroup>,\n\t<FlagGroup>\n\t\t<Flag\n\t\t\tid="flag-3"\n\t\t\ticon={<InfoIcon label="Error" />}\n\t\t\ttitle="Error"\n\t\t\tdescription="Something went wrong. Please try again."\n\t\t\tappearance="error"\n\t\t\tactions={[\n\t\t\t\t{\n\t\t\t\t\tcontent: \'Retry\',\n\t\t\t\t\tonClick: () => console.log(\'Retry clicked\'),\n\t\t\t\t},\n\t\t\t]}\n\t\t/>\n\t</FlagGroup>,\n];'],
+  examples: ['import Flag, { FlagGroup } from \'@atlaskit/flag\';\nimport InfoIcon from \'@atlaskit/icon/core/status-information\';\nconst Examples = (): React.JSX.Element => (\n\t<>\n\t\t<FlagGroup>\n\t\t\t<Flag\n\t\t\t\tid="flag-1"\n\t\t\t\ticon={<InfoIcon label="Info" />}\n\t\t\t\ttitle="Success"\n\t\t\t\tdescription="Your changes have been saved successfully."\n\t\t\t\tappearance="success"\n\t\t\t/>\n\t\t</FlagGroup>\n\t\t<FlagGroup>\n\t\t\t<Flag\n\t\t\t\tid="flag-2"\n\t\t\t\ticon={<InfoIcon label="Warning" />}\n\t\t\t\ttitle="Warning"\n\t\t\t\tdescription="This action cannot be undone."\n\t\t\t\tappearance="warning"\n\t\t\t\tactions={[\n\t\t\t\t\t{\n\t\t\t\t\t\tcontent: \'Proceed\',\n\t\t\t\t\t\tonClick: () => console.log(\'Proceed clicked\'),\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t/>\n\t\t</FlagGroup>\n\t\t<FlagGroup>\n\t\t\t<Flag\n\t\t\t\tid="flag-3"\n\t\t\t\ticon={<InfoIcon label="Error" />}\n\t\t\t\ttitle="Error"\n\t\t\t\tdescription="Something went wrong. Please try again."\n\t\t\t\tappearance="error"\n\t\t\t\tactions={[\n\t\t\t\t\t{\n\t\t\t\t\t\tcontent: \'Retry\',\n\t\t\t\t\t\tonClick: () => console.log(\'Retry clicked\'),\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t/>\n\t\t</FlagGroup>\n\t</>\n);\nexport default Examples;'],
   accessibilityGuidelines: ['Ensure flag content is announced by screen readers', 'Use appropriate timing for auto-dismiss', 'Provide clear action options', 'Consider screen reader announcement conflicts', 'Use an h2 heading level for the title', 'Use the `headingLevel` prop to maintain proper heading hierarchy'],
   usageGuidelines: ['Use for confirmations and alerts needing minimal interaction', 'Display event-driven messages', 'Position at bottom left of screen', 'Consider auto-dismiss timing'],
   contentGuidelines: ['Be clear about what went wrong for errors', 'Provide specific steps to resolve issues', 'Use a helpful, non-threatening tone', 'Clearly state potential consequences for warnings', 'Confirm outcome then get out of the way for success messages'],
@@ -1623,6 +1623,10 @@ export const components = [{
     name: 'appearance',
     description: "Makes the flag appearance bold. Setting this to anything other than 'normal' hides the\ndismiss button.",
     type: '"error" | "info" | "success" | "warning" | "normal"'
+  }, {
+    name: 'autoDismissSeconds',
+    description: 'Duration in seconds before flag gets auto dismissed.\nDefault is 8 seconds. For a11y reasons 8s is also a strongly-suggested minimum.\nOnly applies to auto-dismissable flags.',
+    type: 'number'
   }, {
     name: 'delayAnnouncement',
     description: 'Milliseconds to delay the screen reader announcement due to announcement conflict.',
@@ -1679,7 +1683,7 @@ export const components = [{
   category: 'form',
   description: 'A component for building forms with validation and state management.',
   status: 'general-availability',
-  examples: ['import Button from \'@atlaskit/button/new\';\nimport { Checkbox } from \'@atlaskit/checkbox\';\nimport Form, { CheckboxField, ErrorMessage, Field, FormFooter, FormHeader } from \'@atlaskit/form\';\nimport TextField from \'@atlaskit/textfield\';\nexport default [\n\t<Form onSubmit={(data) => console.log(\'validated form\', data)}>\n\t\t<FormHeader title="Basic Form">\n\t\t\t<p>Fill out the form below</p>\n\t\t</FormHeader>\n\t\t<Field\n\t\t\tname="username"\n\t\t\tlabel="Username"\n\t\t\tisRequired\n\t\t\tvalidate={(value) => (value && value.length < 3 ? \'Too short\' : undefined)}\n\t\t>\n\t\t\t{({ fieldProps, error }) => (\n\t\t\t\t<>\n\t\t\t\t\t<TextField {...fieldProps} />\n\t\t\t\t\t{error && <ErrorMessage>Username must be at least 3 characters</ErrorMessage>}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</Field>\n\t\t<CheckboxField name="terms" value="terms">\n\t\t\t{({ fieldProps }) => <Checkbox {...fieldProps} label="I accept the terms" />}\n\t\t</CheckboxField>\n\t\t<FormFooter>\n\t\t\t<Button type="submit" appearance="primary">\n\t\t\t\tCreate Account\n\t\t\t</Button>\n\t\t</FormFooter>\n\t</Form>,\n];'],
+  examples: ['import Button from \'@atlaskit/button/new\';\nimport { Checkbox } from \'@atlaskit/checkbox\';\nimport Form, { CheckboxField, ErrorMessage, Field, FormFooter, FormHeader } from \'@atlaskit/form\';\nimport TextField from \'@atlaskit/textfield\';\nconst Example = (): React.JSX.Element => (\n\t<Form onSubmit={(data) => console.log(\'validated form\', data)}>\n\t\t<FormHeader title="Basic Form">\n\t\t\t<p>Fill out the form below</p>\n\t\t</FormHeader>\n\t\t<Field\n\t\t\tname="username"\n\t\t\tlabel="Username"\n\t\t\tisRequired\n\t\t\tvalidate={(value) => (value && value.length < 3 ? \'Too short\' : undefined)}\n\t\t>\n\t\t\t{({ fieldProps, error }) => (\n\t\t\t\t<>\n\t\t\t\t\t<TextField {...fieldProps} />\n\t\t\t\t\t{error && <ErrorMessage>Username must be at least 3 characters</ErrorMessage>}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</Field>\n\t\t<CheckboxField name="terms" value="terms">\n\t\t\t{({ fieldProps }) => <Checkbox {...fieldProps} label="I accept the terms" />}\n\t\t</CheckboxField>\n\t\t<FormFooter>\n\t\t\t<Button type="submit" appearance="primary">\n\t\t\t\tCreate Account\n\t\t\t</Button>\n\t\t</FormFooter>\n\t</Form>\n);\nexport default Example;'],
   accessibilityGuidelines: ['Provide clear labels for all form fields', 'Use appropriate error messaging', 'Ensure keyboard navigation between fields', 'Mark required fields clearly', 'Provide helpful validation feedback'],
   usageGuidelines: ['Use for complex forms with validation', 'Provide clear field labels and instructions', 'Use single column layout for better comprehension', 'Mark required fields with asterisk (*)', 'Provide specific error messages'],
   contentGuidelines: ['Use clear, concise labels', 'Write helpful placeholder text', 'Provide specific error messages', 'Use consistent terminology', 'Always include a visible label (exception: search fields)', 'Match field length to intended content length'],
@@ -1726,7 +1730,7 @@ export const components = [{
   }, {
     name: 'xcss',
     description: 'Apply a subset of permitted styles powered by Atlassian Design System design tokens.',
-    type: 'false | (XCSSValue<"flex" | "grid" | "fill" | "stroke" | "all" | "bottom" | "left" | "right" | "top" | "clip" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | ... 458 more ... | "vectorEffect", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
+    type: 'false | (XCSSValue<"flex" | "grid" | "fill" | "stroke" | "all" | "bottom" | "left" | "right" | "top" | "clip" | "overlay" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | ... 486 more ... | "glyphOrientationVertical", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
   }]
 }, {
   name: 'Heading',
@@ -1858,7 +1862,7 @@ export const components = [{
   category: 'data-display',
   description: 'A component for displaying images with theme support.',
   status: 'open-beta',
-  examples: ['import Image from \'@atlaskit/image\';\nexport default [\n\t<Image src="https://picsum.photos/300/150" alt="Wide view" width={300} height={150} />,\n\t<Image src="https://picsum.photos/100/100" alt="User profile" width={100} height={100} />,\n];'],
+  examples: ['import Image from \'@atlaskit/image\';\nconst Examples = (): React.JSX.Element => (\n\t<>\n\t\t<Image src="https://picsum.photos/300/150" alt="Wide view" width={300} height={150} />\n\t\t<Image src="https://picsum.photos/100/100" alt="User profile" width={100} height={100} />\n\t</>\n);\nexport default Examples;'],
   accessibilityGuidelines: ['Always provide meaningful alt text', 'Ensure appropriate image sizing', 'Consider loading states and error handling', 'Use appropriate image formats'],
   usageGuidelines: ['Use for displaying images in content', 'Provide appropriate alt text', 'Consider responsive image sizing', 'Handle loading and error states'],
   contentGuidelines: ['Use clear, descriptive alt text', 'Choose appropriate image dimensions', 'Consider image quality and file size', 'Use meaningful image content'],
@@ -1874,7 +1878,7 @@ export const components = [{
   category: 'overlay',
   description: 'A component for displaying content in an inline dialog.',
   status: 'general-availability',
-  examples: ["import Button from '@atlaskit/button/new';\nimport Heading from '@atlaskit/heading';\nimport InlineDialog from '@atlaskit/inline-dialog';\nimport { Text } from '@atlaskit/primitives/compiled';\nexport default [\n\t<InlineDialog content={<div>This is an inline dialog</div>} isOpen={true}>\n\t\t<Button>Trigger</Button>\n\t</InlineDialog>,\n\t<InlineDialog\n\t\tcontent={\n\t\t\t<div>\n\t\t\t\t<Heading size=\"large\">Dialog Title</Heading>\n\t\t\t\t<Text>Dialog content goes here</Text>\n\t\t\t</div>\n\t\t}\n\t\tisOpen={false}\n\t>\n\t\t<Button>Open Dialog</Button>\n\t</InlineDialog>,\n];"],
+  examples: ["import Button from '@atlaskit/button/new';\nimport Heading from '@atlaskit/heading';\nimport InlineDialog from '@atlaskit/inline-dialog';\nimport { Text } from '@atlaskit/primitives/compiled';\nconst Examples = (): React.JSX.Element => (\n\t<>\n\t\t<InlineDialog content={<div>This is an inline dialog</div>} isOpen={true}>\n\t\t\t<Button>Trigger</Button>\n\t\t</InlineDialog>\n\t\t<InlineDialog\n\t\t\tcontent={\n\t\t\t\t<div>\n\t\t\t\t\t<Heading size=\"large\">Dialog Title</Heading>\n\t\t\t\t\t<Text>Dialog content goes here</Text>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\tisOpen={false}\n\t\t>\n\t\t\t<Button>Open Dialog</Button>\n\t\t</InlineDialog>\n\t</>\n);\nexport default Examples;"],
   accessibilityGuidelines: ['Ensure proper focus management', 'Provide clear dialog labels', 'Use appropriate ARIA attributes', 'Consider keyboard navigation'],
   usageGuidelines: ['Use for contextual information display', 'Position appropriately relative to trigger', 'Consider dialog sizing and content', 'Handle focus and escape key behavior'],
   contentGuidelines: ['Use clear, concise dialog content', 'Provide meaningful dialog titles', 'Keep content focused and relevant', 'Use appropriate dialog sizing'],
@@ -1926,7 +1930,7 @@ export const components = [{
   category: 'form',
   description: 'A component for inline editing of text content.',
   status: 'general-availability',
-  examples: ['import InlineEdit from \'@atlaskit/inline-edit\';\nexport default [\n\t<InlineEdit\n\t\tonConfirm={() => {}}\n\t\tonCancel={() => {}}\n\t\tdefaultValue="Editable text"\n\t\teditView={() => <div>Edit view</div>}\n\t\treadView={() => <div>Read view</div>}\n\t/>,\n];'],
+  examples: ['import InlineEdit from \'@atlaskit/inline-edit\';\nconst Example = (): React.JSX.Element => (\n\t<InlineEdit\n\t\tonConfirm={() => {}}\n\t\tonCancel={() => {}}\n\t\tdefaultValue="Editable text"\n\t\teditView={() => <div>Edit view</div>}\n\t\treadView={() => <div>Read view</div>}\n\t/>\n);\nexport default Example;'],
   accessibilityGuidelines: ['Ensure proper focus management', 'Provide clear edit state indicators', 'Use appropriate ARIA attributes', 'Consider keyboard navigation'],
   usageGuidelines: ['Use for inline text editing', 'Provide clear edit state indicators', 'Handle save and cancel actions', 'Consider validation requirements'],
   contentGuidelines: ['Use clear, descriptive text content', 'Provide helpful placeholder text', 'Use appropriate validation messages', 'Keep content concise but meaningful'],
@@ -2010,7 +2014,7 @@ export const components = [{
   category: 'feedback',
   description: 'A component for displaying inline messages and feedback.',
   status: 'general-availability',
-  examples: ['import InlineMessage from \'@atlaskit/inline-message\';\nexport default [\n\t<InlineMessage\n\t\ttitle="Success"\n\t\tsecondaryText="Your changes have been saved successfully."\n\t\tappearance="confirmation"\n\t/>,\n\t<InlineMessage\n\t\ttitle="Warning"\n\t\tsecondaryText="This action cannot be undone."\n\t\tappearance="warning"\n\t/>,\n\t<InlineMessage\n\t\ttitle="Error"\n\t\tsecondaryText="Something went wrong. Please try again."\n\t\tappearance="error"\n\t/>,\n];'],
+  examples: ['import InlineMessage from \'@atlaskit/inline-message\';\nconst Examples = (): React.JSX.Element => (\n\t<>\n\t\t<InlineMessage\n\t\t\ttitle="Success"\n\t\t\tsecondaryText="Your changes have been saved successfully."\n\t\t\tappearance="confirmation"\n\t\t/>\n\t\t<InlineMessage\n\t\t\ttitle="Warning"\n\t\t\tsecondaryText="This action cannot be undone."\n\t\t\tappearance="warning"\n\t\t/>\n\t\t<InlineMessage\n\t\t\ttitle="Error"\n\t\t\tsecondaryText="Something went wrong. Please try again."\n\t\t\tappearance="error"\n\t\t/>\n\t</>\n);\nexport default Examples;'],
   accessibilityGuidelines: ['Ensure message content is announced by screen readers', 'Use appropriate message types and colors', 'Provide clear message context', 'Consider message timing and persistence'],
   usageGuidelines: ['Use for inline feedback and messages', 'Choose appropriate message types', 'Position messages near relevant content', 'Consider message timing and dismissal'],
   contentGuidelines: ['Use clear, concise message text', 'Provide specific, actionable feedback', 'Use appropriate tone for message type', 'Keep messages focused and relevant'],
@@ -2119,19 +2123,15 @@ export const 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.',
-    type: '"default" | "inprogress" | "moved" | "new" | "removed" | "success"'
+    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"'
   }, {
     name: 'children',
-    description: 'Elements to be rendered inside the lozenge. This should ideally be just a word or two.',
+    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.',
     type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
-  }, {
-    name: 'isBold',
-    description: 'Determines whether to apply the bold style or not.',
-    type: 'boolean'
   }, {
     name: 'maxWidth',
-    description: 'max-width of lozenge container. Default to 200px.',
+    description: 'max-width of lozenge container. Default to 200px.\nmax-width of lozenge container. Default to 200px.',
     type: 'string | number'
   }]
 }, {
@@ -2141,7 +2141,7 @@ export const components = [{
   category: 'navigation',
   description: 'A component for displaying menus with grouped items.',
   status: 'general-availability',
-  examples: ['import { ButtonItem, LinkItem, MenuGroup, Section } from \'@atlaskit/menu\';\nexport default [\n\t<MenuGroup spacing="cozy">\n\t\t<Section title="Navigation">\n\t\t\t<LinkItem href="/dashboard">Dashboard</LinkItem>\n\t\t\t<LinkItem href="/projects">Projects</LinkItem>\n\t\t\t<LinkItem href="/settings">Settings</LinkItem>\n\t\t</Section>\n\t</MenuGroup>,\n\t<MenuGroup spacing="compact">\n\t\t<Section title="Actions">\n\t\t\t<ButtonItem>Create New</ButtonItem>\n\t\t\t<ButtonItem>Import</ButtonItem>\n\t\t\t<ButtonItem>Export</ButtonItem>\n\t\t</Section>\n\t\t<Section title="Help">\n\t\t\t<LinkItem href="/docs">Documentation</LinkItem>\n\t\t\t<LinkItem href="/support">Support</LinkItem>\n\t\t</Section>\n\t</MenuGroup>,\n];'],
+  examples: ['import { ButtonItem, LinkItem, MenuGroup, Section } from \'@atlaskit/menu\';\nconst Examples = (): React.JSX.Element => (\n\t<>\n\t\t<MenuGroup spacing="cozy">\n\t\t\t<Section title="Navigation">\n\t\t\t\t<LinkItem href="/dashboard">Dashboard</LinkItem>\n\t\t\t\t<LinkItem href="/projects">Projects</LinkItem>\n\t\t\t\t<LinkItem href="/settings">Settings</LinkItem>\n\t\t\t</Section>\n\t\t</MenuGroup>\n\t\t<MenuGroup spacing="compact">\n\t\t\t<Section title="Actions">\n\t\t\t\t<ButtonItem>Create New</ButtonItem>\n\t\t\t\t<ButtonItem>Import</ButtonItem>\n\t\t\t\t<ButtonItem>Export</ButtonItem>\n\t\t\t</Section>\n\t\t\t<Section title="Help">\n\t\t\t\t<LinkItem href="/docs">Documentation</LinkItem>\n\t\t\t\t<LinkItem href="/support">Support</LinkItem>\n\t\t\t</Section>\n\t\t</MenuGroup>\n\t</>\n);\nexport default Examples;'],
   accessibilityGuidelines: ['Provide clear menu item labels', 'Use appropriate ARIA attributes', 'Ensure keyboard navigation with arrow keys', 'Provide clear section titles'],
   usageGuidelines: ['Use for organizing menu items into sections', 'Group related menu items together', 'Use clear section titles', 'Consider menu density and spacing'],
   contentGuidelines: ['Use clear, descriptive menu item labels', 'Group related items logically', 'Use consistent terminology', 'Keep menu structure simple'],
@@ -2193,15 +2193,11 @@ export const components = [{
   category: 'overlay',
   description: 'A modal dialog component for important content.',
   status: 'general-availability',
-  examples: ['import React, { Fragment, useCallback, useState } from \'react\';\nimport Button from \'@atlaskit/button/new\';\nimport Modal, {\n\tModalBody,\n\tModalFooter,\n\tModalHeader,\n\tModalTitle,\n\tModalTransition,\n} from \'@atlaskit/modal-dialog\';\nimport { Text } from \'@atlaskit/primitives/compiled\';\nexport default function Example() {\n\tconst [isOpen, setIsOpen] = useState(false);\n\tconst openModal = useCallback(() => setIsOpen(true), []);\n\tconst closeModal = useCallback(() => setIsOpen(false), []);\n\treturn (\n\t\t<Fragment>\n\t\t\t<Button aria-haspopup="dialog" appearance="primary" onClick={openModal}>\n\t\t\t\tOpen modal\n\t\t\t</Button>\n\t\t\t<ModalTransition>\n\t\t\t\t{isOpen && (\n\t\t\t\t\t<Modal onClose={closeModal}>\n\t\t\t\t\t\t<ModalHeader hasCloseButton>\n\t\t\t\t\t\t\t<ModalTitle>Duplicate this page</ModalTitle>\n\t\t\t\t\t\t</ModalHeader>\n\t\t\t\t\t\t<ModalBody>\n\t\t\t\t\t\t\tDuplicating this page will make it a child page of{\' \'}\n\t\t\t\t\t\t\t<Text weight="bold">Search - user exploration</Text>, in the{\' \'}\n\t\t\t\t\t\t\t<Text weight="bold">Search & Smarts</Text> space.\n\t\t\t\t\t\t</ModalBody>\n\t\t\t\t\t\t<ModalFooter>\n\t\t\t\t\t\t\t<Button appearance="subtle" onClick={closeModal}>\n\t\t\t\t\t\t\t\tCancel\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button appearance="primary" onClick={closeModal}>\n\t\t\t\t\t\t\t\tDuplicate\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</ModalFooter>\n\t\t\t\t\t</Modal>\n\t\t\t\t)}\n\t\t\t</ModalTransition>\n\t\t</Fragment>\n\t);\n}'],
+  examples: ['import React, { Fragment, useCallback, useState } from \'react\';\nimport Button from \'@atlaskit/button/new\';\nimport Modal, {\n\tModalBody,\n\tModalFooter,\n\tModalHeader,\n\tModalTitle,\n\tModalTransition,\n} from \'@atlaskit/modal-dialog\';\nimport { Text } from \'@atlaskit/primitives/compiled\';\nexport default function Example(): React.JSX.Element {\n\tconst [isOpen, setIsOpen] = useState(false);\n\tconst openModal = useCallback(() => setIsOpen(true), []);\n\tconst closeModal = useCallback(() => setIsOpen(false), []);\n\treturn (\n\t\t<Fragment>\n\t\t\t<Button aria-haspopup="dialog" appearance="primary" onClick={openModal}>\n\t\t\t\tOpen modal\n\t\t\t</Button>\n\t\t\t<ModalTransition>\n\t\t\t\t{isOpen && (\n\t\t\t\t\t<Modal onClose={closeModal}>\n\t\t\t\t\t\t<ModalHeader hasCloseButton>\n\t\t\t\t\t\t\t<ModalTitle>Duplicate this page</ModalTitle>\n\t\t\t\t\t\t</ModalHeader>\n\t\t\t\t\t\t<ModalBody>\n\t\t\t\t\t\t\tDuplicating this page will make it a child page of{\' \'}\n\t\t\t\t\t\t\t<Text weight="bold">Search - user exploration</Text>, in the{\' \'}\n\t\t\t\t\t\t\t<Text weight="bold">Search & Smarts</Text> space.\n\t\t\t\t\t\t</ModalBody>\n\t\t\t\t\t\t<ModalFooter>\n\t\t\t\t\t\t\t<Button appearance="subtle" onClick={closeModal}>\n\t\t\t\t\t\t\t\tCancel\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button appearance="primary" onClick={closeModal}>\n\t\t\t\t\t\t\t\tDuplicate\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</ModalFooter>\n\t\t\t\t\t</Modal>\n\t\t\t\t)}\n\t\t\t</ModalTransition>\n\t\t</Fragment>\n\t);\n}'],
   accessibilityGuidelines: ['Ensure modal content is announced by screen readers', 'Provide appropriate focus management', 'Use clear, descriptive modal titles', 'Ensure keyboard navigation and escape key support', 'Maintain focus within modal when open'],
   usageGuidelines: ['Use for important content that requires user attention', 'Keep modal content focused on a single task', 'Provide clear action buttons', 'Use appropriate modal sizes for content', 'Consider mobile responsiveness'],
   contentGuidelines: ['Use clear, descriptive titles', 'Keep content focused on a single task or message', 'Include clear action buttons', 'Use sentence case for all text', 'Provide clear next steps'],
   props: [{
-    name: 'autoFocus',
-    description: 'Focus is moved to the first interactive element inside the modal dialog\nwhen `true`. It is not recommended to set to `false` as this creates\naccessibility regressions. Pass an element `ref` to focus on a specific element.\n\nDefault value is `true`.',
-    type: 'boolean | React.RefObject<HTMLElement>'
-  }, {
     name: 'children',
     description: 'Contents of the modal dialog.',
     type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
@@ -2269,7 +2265,7 @@ export const components = [{
   category: 'layout',
   description: 'A component for page headers.',
   status: 'general-availability',
-  examples: ['import Breadcrumbs, { BreadcrumbsItem } from \'@atlaskit/breadcrumbs\';\nimport Button from \'@atlaskit/button/new\';\nimport PageHeader from \'@atlaskit/page-header\';\nexport default [\n\t<PageHeader>Page Title</PageHeader>,\n\t<PageHeader\n\t\tbreadcrumbs={\n\t\t\t<Breadcrumbs>\n\t\t\t\t<BreadcrumbsItem href="/" text="Home" />\n\t\t\t\t<BreadcrumbsItem href="/projects" text="Projects" />\n\t\t\t\t<BreadcrumbsItem text="Current Project" />\n\t\t\t</Breadcrumbs>\n\t\t}\n\t\tactions={<Button appearance="primary">Create</Button>}\n\t>\n\t\tProject Settings\n\t</PageHeader>,\n\t<PageHeader\n\t\tactions={\n\t\t\t<>\n\t\t\t\t<Button appearance="subtle">Cancel</Button>\n\t\t\t\t<Button appearance="primary">Save Changes</Button>\n\t\t\t</>\n\t\t}\n\t>\n\t\tEdit Profile\n\t</PageHeader>,\n];'],
+  examples: ['import Breadcrumbs, { BreadcrumbsItem } from \'@atlaskit/breadcrumbs\';\nimport Button from \'@atlaskit/button/new\';\nimport PageHeader from \'@atlaskit/page-header\';\nconst Examples = (): React.JSX.Element => (\n\t<>\n\t\t<PageHeader>Page Title</PageHeader>\n\t\t<PageHeader\n\t\t\tbreadcrumbs={\n\t\t\t\t<Breadcrumbs>\n\t\t\t\t\t<BreadcrumbsItem href="/" text="Home" />\n\t\t\t\t\t<BreadcrumbsItem href="/projects" text="Projects" />\n\t\t\t\t\t<BreadcrumbsItem text="Current Project" />\n\t\t\t\t</Breadcrumbs>\n\t\t\t}\n\t\t\tactions={<Button appearance="primary">Create</Button>}\n\t\t>\n\t\t\tProject Settings\n\t\t</PageHeader>\n\t\t<PageHeader\n\t\t\tactions={\n\t\t\t\t<>\n\t\t\t\t\t<Button appearance="subtle">Cancel</Button>\n\t\t\t\t\t<Button appearance="primary">Save Changes</Button>\n\t\t\t\t</>\n\t\t\t}\n\t\t>\n\t\t\tEdit Profile\n\t\t</PageHeader>\n\t</>\n);\nexport default Examples;'],
   accessibilityGuidelines: ['Provide clear page titles', 'Use appropriate heading hierarchy', 'Ensure breadcrumb navigation is accessible', 'Provide clear action labels'],
   usageGuidelines: ['Use for consistent page header layout', 'Include breadcrumbs for navigation context', 'Provide relevant page actions', 'Use appropriate header hierarchy'],
   contentGuidelines: ['Use clear, descriptive page titles', 'Provide meaningful breadcrumb labels', 'Use action-oriented button text', 'Keep header content focused'],
@@ -2313,7 +2309,7 @@ export const components = [{
   category: 'navigation',
   description: 'A component for pagination controls.',
   status: 'general-availability',
-  examples: ["import Pagination from '@atlaskit/pagination';\nexport default [\n\t<Pagination\n\t\tpages={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}\n\t\tdefaultSelectedIndex={2}\n\t\tmax={7}\n\t\tonChange={(event, page) => console.log('Page selected:', page)}\n\t/>,\n\t<Pagination\n\t\tpages={['A', 'B', 'C', 'D']}\n\t\tdefaultSelectedIndex={1}\n\t\tonChange={(event, page) => console.log('Letter page:', page)}\n\t/>,\n];"],
+  examples: ["import Pagination from '@atlaskit/pagination';\nconst Examples = (): React.JSX.Element => (\n\t<>\n\t\t<Pagination\n\t\t\tpages={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}\n\t\t\tdefaultSelectedIndex={2}\n\t\t\tmax={7}\n\t\t\tonChange={(_event, page) => console.log('Page selected:', page)}\n\t\t/>\n\t\t<Pagination\n\t\t\tpages={['A', 'B', 'C', 'D']}\n\t\t\tdefaultSelectedIndex={1}\n\t\t\tonChange={(_event, page) => console.log('Letter page:', page)}\n\t\t/>\n\t</>\n);\nexport default Examples;"],
   accessibilityGuidelines: ['Provide clear page navigation labels', 'Use appropriate ARIA labels for pagination', 'Ensure keyboard navigation support', 'Announce page changes to screen readers'],
   usageGuidelines: ['Use for navigating through paged content', 'Provide clear page indicators', 'Consider total page count display', 'Use appropriate page limits'],
   contentGuidelines: ['Use clear page labels', 'Provide meaningful navigation text', 'Use consistent pagination terminology', 'Consider page context information'],
@@ -2377,7 +2373,7 @@ export const components = [{
   category: 'utility',
   description: 'A component for positioning elements relative to other elements.',
   status: 'general-availability',
-  examples: ['import { Manager, Popper, Reference } from \'@atlaskit/popper\';\nexport default () => (\n\t<Manager>\n\t\t<Reference>\n\t\t\t{({ ref }) => (\n\t\t\t\t<button ref={ref} type="button">\n\t\t\t\t\tReference element\n\t\t\t\t</button>\n\t\t\t)}\n\t\t</Reference>\n\t\t<Popper placement="right">\n\t\t\t{({ ref, style }) => (\n\t\t\t\t<div ref={ref} style={style} >\n\t\t\t\t\t↔ This text is a popper placed to the right\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Popper>\n\t</Manager>\n);'],
+  examples: ['import { Manager, Popper, Reference } from \'@atlaskit/popper\';\nexport default (): React.JSX.Element => (\n\t<Manager>\n\t\t<Reference>\n\t\t\t{({ ref }) => (\n\t\t\t\t<button ref={ref} type="button">\n\t\t\t\t\tReference element\n\t\t\t\t</button>\n\t\t\t)}\n\t\t</Reference>\n\t\t<Popper placement="right">\n\t\t\t{({ ref, style }) => (\n\t\t\t\t<div ref={ref} style={style} >\n\t\t\t\t\t↔ This text is a popper placed to the right\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Popper>\n\t</Manager>\n);'],
   accessibilityGuidelines: ['Ensure proper positioning and visibility', 'Consider screen reader accessibility', 'Use appropriate ARIA attributes', 'Handle focus management'],
   usageGuidelines: ['Use for positioning overlays and tooltips', 'Consider positioning constraints', 'Handle responsive positioning', 'Use appropriate z-index management'],
   contentGuidelines: ['Ensure positioned content is accessible', 'Use appropriate positioning strategies', 'Consider content visibility and readability'],
@@ -2417,7 +2413,7 @@ export const components = [{
   category: 'overlay',
   description: 'A component for displaying popup content relative to a trigger element.',
   status: 'general-availability',
-  examples: ["import React, { useState } from 'react';\nimport Button from '@atlaskit/button/new';\nimport Popup from '@atlaskit/popup';\nexport default () => {\n\tconst [isOpen, setIsOpen] = useState(false);\n\treturn (\n\t\t<Popup\n\t\t\tcontent={() => <div>Basic popup content</div>}\n\t\t\tisOpen={isOpen}\n\t\t\tonClose={() => setIsOpen(false)}\n\t\t\tplacement=\"bottom-start\"\n\t\t\ttrigger={(triggerProps) => (\n\t\t\t\t<Button {...triggerProps} onClick={() => setIsOpen(!isOpen)}>\n\t\t\t\t\tToggle Popup\n\t\t\t\t</Button>\n\t\t\t)}\n\t\t\tshouldRenderToParent\n\t\t/>\n\t);\n};"],
+  examples: ["import React, { useState } from 'react';\nimport Button from '@atlaskit/button/new';\nimport Popup from '@atlaskit/popup';\nexport default (): React.JSX.Element => {\n\tconst [isOpen, setIsOpen] = useState(false);\n\treturn (\n\t\t<Popup\n\t\t\tcontent={() => <div>Basic popup content</div>}\n\t\t\tisOpen={isOpen}\n\t\t\tonClose={() => setIsOpen(false)}\n\t\t\tplacement=\"bottom-start\"\n\t\t\ttrigger={(triggerProps) => (\n\t\t\t\t<Button {...triggerProps} onClick={() => setIsOpen(!isOpen)}>\n\t\t\t\t\tToggle Popup\n\t\t\t\t</Button>\n\t\t\t)}\n\t\t\tshouldRenderToParent\n\t\t/>\n\t);\n};"],
   accessibilityGuidelines: ['Provide appropriate focus management', 'Use clear trigger labels', 'Ensure keyboard navigation support', 'Provide escape key dismissal'],
   usageGuidelines: ['Use for contextual content that appears on demand', 'Position appropriately relative to trigger', 'Consider dismissal behavior', 'Use appropriate content sizing'],
   contentGuidelines: ['Keep popup content focused and relevant', 'Use clear, concise content', 'Provide appropriate actions when needed', 'Consider content hierarchy'],
@@ -2537,7 +2533,7 @@ export const components = [{
   category: 'utility',
   description: 'A component for rendering content outside the normal DOM hierarchy.',
   status: 'general-availability',
-  examples: ["import Portal from '@atlaskit/portal';\nexport default [\n\t<Portal>\n\t\t<div>This content is rendered in a portal</div>\n\t</Portal>,\n\t<Portal zIndex={1000}>\n\t\t<div>This content has a custom z-index</div>\n\t</Portal>,\n];"],
+  examples: ["import Portal from '@atlaskit/portal';\nconst Examples = (): React.JSX.Element => (\n\t<>\n\t\t<Portal>\n\t\t\t<div>This content is rendered in a portal</div>\n\t\t</Portal>\n\t\t<Portal zIndex={1000}>\n\t\t\t<div>This content has a custom z-index</div>\n\t\t</Portal>\n\t</>\n);\nexport default Examples;"],
   accessibilityGuidelines: ['Ensure proper focus management', 'Consider screen reader accessibility', 'Use appropriate ARIA attributes', 'Handle keyboard navigation'],
   usageGuidelines: ['Use for rendering content outside normal DOM', 'Consider z-index and positioning', 'Handle focus management appropriately', 'Use for modals and overlays'],
   contentGuidelines: ['Ensure portaled content is accessible', 'Consider content context and purpose', 'Use appropriate portal placement'],
@@ -2584,7 +2580,7 @@ export const components = [{
   }, {
     name: 'xcss',
     description: 'Apply a subset of permitted styles powered by Atlassian Design System design tokens.',
-    type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "translate" | "content" | "color" | "grid" | "flex" | "fill" | "stroke" | "all" | "bottom" | "left" | "right" | "top" | ... 457 more ... | "vectorEffect", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
+    type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "translate" | "content" | "color" | "grid" | "flex" | "fill" | "stroke" | "all" | "bottom" | "left" | "right" | "top" | ... 485 more ... | "glyphOrientationVertical", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
   }]
 }, {
   name: 'Bleed',
@@ -2619,7 +2615,7 @@ export const components = [{
   }, {
     name: 'xcss',
     description: 'Apply a subset of permitted styles powered by Atlassian Design System design tokens.',
-    type: 'false | (XCSSValue<"all" | "flex" | "grid" | "fill" | "stroke" | "bottom" | "left" | "right" | "top" | "clip" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | ... 458 more ... | "vectorEffect", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
+    type: 'false | (XCSSValue<"all" | "flex" | "grid" | "fill" | "stroke" | "bottom" | "left" | "right" | "top" | "clip" | "overlay" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | ... 486 more ... | "glyphOrientationVertical", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
   }]
 }, {
   name: 'Box',
@@ -2638,11 +2634,11 @@ export const components = [{
   }, {
     name: 'backgroundColor',
     description: 'Token representing background color with a built-in fallback value.',
-    type: '"utility.elevation.surface.current" | "elevation.surface" | "elevation.surface.overlay" | "elevation.surface.raised" | "elevation.surface.sunken" | "color.background.accent.lime.subtlest" | ... 190 more ... | "elevation.surface.raised.pressed"'
+    type: '"utility.elevation.surface.current" | "elevation.surface" | "elevation.surface.overlay" | "elevation.surface.raised" | "elevation.surface.sunken" | "color.background.accent.lime.subtlest" | ... 205 more ... | "elevation.surface.raised.pressed"'
   }, {
     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" | ... 457 more ... | "vectorEffect", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
+    type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "height" | "width" | "translate" | "content" | "color" | "border" | "grid" | "page" | "all" | "backgroundColor" | "accentColor" | ... 485 more ... | "glyphOrientationVertical", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
   }]
 }, {
   name: 'Flex',
@@ -2697,7 +2693,7 @@ export const 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" | ... 459 more ... | "vectorEffect", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
+    type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "alignItems" | "justifyContent" | "gap" | "columnGap" | "rowGap" | "direction" | "flex" | "grid" | "fill" | "stroke" | ... 487 more ... | "glyphOrientationVertical", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
   }]
 }, {
   name: 'Focusable',
@@ -2725,7 +2721,7 @@ export const components = [{
   }, {
     name: 'xcss',
     description: 'Apply a subset of permitted styles powered by Atlassian Design System design tokens.',
-    type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "color" | "height" | "width" | "alignmentBaseline" | "baselineShift" | "clip" | "clipRule" | "colorInterpolation" | ... 461 more ... | "viewTimeline", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
+    type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "color" | "height" | "width" | "alignmentBaseline" | "baselineShift" | "clip" | "clipRule" | "colorInterpolation" | ... 489 more ... | "viewTimeline", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
   }]
 }, {
   name: 'Grid',
@@ -2784,7 +2780,7 @@ export const 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" | ... 459 more ... | "vectorEffect", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
+    type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "alignItems" | "alignContent" | "justifyContent" | "gap" | "columnGap" | "rowGap" | "flex" | "grid" | "fill" | "stroke" | ... 487 more ... | "glyphOrientationVertical", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
   }]
 }, {
   name: 'Inline',
@@ -2843,7 +2839,7 @@ export const components = [{
   }, {
     name: 'xcss',
     description: 'Apply a subset of permitted styles powered by Atlassian Design System design tokens.',
-    type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "fill" | "gap" | "rowGap" | "flex" | "grid" | "stroke" | "all" | "bottom" | "left" | "right" | "top" | "clip" | "accentColor" | ... 456 more ... | "vectorEffect", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
+    type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "fill" | "gap" | "rowGap" | "flex" | "grid" | "stroke" | "all" | "bottom" | "left" | "right" | "top" | "clip" | "overlay" | ... 484 more ... | "glyphOrientationVertical", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
   }]
 }, {
   name: 'MetricText',
@@ -2902,7 +2898,7 @@ export const components = [{
   }, {
     name: 'xcss',
     description: 'Apply a subset of permitted styles powered by Atlassian Design System design tokens.',
-    type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "translate" | "content" | "color" | "grid" | "flex" | "fill" | "stroke" | "all" | "bottom" | "left" | "right" | "top" | ... 457 more ... | "vectorEffect", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
+    type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "translate" | "content" | "color" | "grid" | "flex" | "fill" | "stroke" | "all" | "bottom" | "left" | "right" | "top" | ... 485 more ... | "glyphOrientationVertical", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
   }]
 }, {
   name: 'Stack',
@@ -2949,7 +2945,7 @@ export const components = [{
   }, {
     name: 'xcss',
     description: 'Apply a subset of permitted styles powered by Atlassian Design System design tokens.',
-    type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "fill" | "gap" | "flex" | "grid" | "stroke" | "all" | "bottom" | "left" | "right" | "top" | "clip" | "accentColor" | "alignContent" | ... 456 more ... | "vectorEffect", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
+    type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "fill" | "gap" | "flex" | "grid" | "stroke" | "all" | "bottom" | "left" | "right" | "top" | "clip" | "overlay" | "accentColor" | ... 484 more ... | "glyphOrientationVertical", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
   }]
 }, {
   name: 'Text',
@@ -3000,7 +2996,7 @@ export const components = [{
   }, {
     name: 'xcss',
     description: 'Bounded style overrides.',
-    type: 'false | (XCSSValue<"overflowWrap" | "textDecorationLine", DesignTokenStyles, ""> & {} & XCSSPseudo<"overflowWrap" | "textDecorationLine", never, never, DesignTokenStyles> & XCSSMediaQuery<...> & { ...; } & { ...; })'
+    type: 'false | (XCSSValue<"fontVariantNumeric" | "overflowWrap" | "textDecorationLine", DesignTokenStyles, ""> & {} & XCSSPseudo<"fontVariantNumeric" | "overflowWrap" | "textDecorationLine", never, never, DesignTokenStyles> & XCSSMediaQuery<...> & { ...; } & { ...; })'
   }]
 }, {
   name: 'ProgressBar',
@@ -3009,7 +3005,7 @@ export const components = [{
   category: 'loading',
   description: 'A progress bar communicates the status of a system process, showing completion percentage or indeterminate progress.',
   status: 'general-availability',
-  examples: ['import ProgressBar from \'@atlaskit/progress-bar\';\nexport default [<ProgressBar value={0.5} />, <ProgressBar value={0.8} appearance="success" />];'],
+  examples: ['import ProgressBar from \'@atlaskit/progress-bar\';\nconst Examples = (): React.JSX.Element => (\n\t<>\n\t\t<ProgressBar value={0.5} />\n\t\t<ProgressBar value={0.8} appearance="success" />\n\t</>\n);\nexport default Examples;'],
   accessibilityGuidelines: ['Provide appropriate ARIA labels for progress bars', 'Announce progress changes to screen readers', 'Use appropriate color contrast for visibility', 'Provide alternative text for progress status'],
   usageGuidelines: ['Use for showing progress of known duration', 'Provide clear progress indicators', 'Use indeterminate state for unknown duration', 'Position progress bars prominently when active', 'Consider providing percentage or time estimates'],
   contentGuidelines: ['Use clear, descriptive progress messages', 'Provide meaningful context for progress', 'Consider showing estimated time remaining', 'Use consistent progress terminology'],
@@ -3037,7 +3033,7 @@ export const components = [{
   category: 'loading',
   description: 'A progress bar variant that indicates successful completion of a process.',
   status: 'general-availability',
-  examples: ["import { SuccessProgressBar } from '@atlaskit/progress-bar';\nexport default [<SuccessProgressBar value={1.0} />, <SuccessProgressBar value={0.9} />];"],
+  examples: ["import { SuccessProgressBar } from '@atlaskit/progress-bar';\nconst Examples = (): React.JSX.Element => (\n\t<>\n\t\t<SuccessProgressBar value={1.0} />\n\t\t<SuccessProgressBar value={0.9} />\n\t</>\n);\nexport default Examples;"],
   usageGuidelines: ['Use to indicate successful completion', 'Show briefly before transitioning to next state', 'Use appropriate success styling', 'Consider providing success message'],
   contentGuidelines: ['Use clear success messaging', 'Indicate what was completed successfully', 'Provide next steps if applicable'],
   props: [{
@@ -3060,7 +3056,7 @@ export const components = [{
   category: 'loading',
   description: 'A progress bar variant with transparent background for overlay contexts.',
   status: 'general-availability',
-  examples: ["import { TransparentProgressBar } from '@atlaskit/progress-bar';\nexport default [<TransparentProgressBar value={0.6} />, <TransparentProgressBar value={0.3} />];"],
+  examples: ["import { TransparentProgressBar } from '@atlaskit/progress-bar';\nconst Examples = (): React.JSX.Element => (\n\t<>\n\t\t<TransparentProgressBar value={0.6} />\n\t\t<TransparentProgressBar value={0.3} />\n\t</>\n);\nexport default Examples;"],
   usageGuidelines: ['Use in overlay or modal contexts', 'Ensure sufficient contrast with background', 'Use for subtle progress indication', 'Consider backdrop visibility'],
   contentGuidelines: ['Ensure progress is visible against background', 'Use appropriate contrast for readability', 'Keep progress indication clear'],
   props: [{
@@ -3083,7 +3079,7 @@ export const components = [{
   category: 'feedback',
   description: 'A component for displaying progress through steps or completion status.',
   status: 'general-availability',
-  examples: ["import { ProgressIndicator } from '@atlaskit/progress-indicator';\nexport default [\n\t<ProgressIndicator selectedIndex={1} values={['Step 1', 'Step 2', 'Step 3']} />,\n\t<ProgressIndicator selectedIndex={2} values={['Start', 'In Progress', 'Complete']} />,\n];"],
+  examples: ["import { ProgressIndicator } from '@atlaskit/progress-indicator';\nconst Examples = (): React.JSX.Element => (\n\t<>\n\t\t<ProgressIndicator selectedIndex={1} values={['Step 1', 'Step 2', 'Step 3']} />\n\t\t<ProgressIndicator selectedIndex={2} values={['Start', 'In Progress', 'Complete']} />\n\t</>\n);\nexport default Examples;"],
   accessibilityGuidelines: ['Ensure progress is announced by screen readers', 'Use appropriate progress indicators', 'Provide clear progress context', 'Consider progress timing and updates'],
   usageGuidelines: ['Use for step-by-step processes', 'Provide clear progress indicators', 'Handle progress updates appropriately', 'Consider progress completion states'],
   contentGuidelines: ['Use clear, descriptive step labels', 'Provide meaningful progress descriptions', 'Use appropriate progress terminology', 'Keep progress information concise'],
@@ -3127,7 +3123,7 @@ export const components = [{
   category: 'feedback',
   description: 'A component for tracking progress through multi-step processes.',
   status: 'general-availability',
-  examples: ["import { ProgressTracker } from '@atlaskit/progress-tracker';\nexport default [\n\t<ProgressTracker\n\t\titems={[\n\t\t\t{ id: 'step1', label: 'Step 1', status: 'visited', percentageComplete: 100 },\n\t\t\t{ id: 'step2', label: 'Step 2', status: 'current', percentageComplete: 40 },\n\t\t\t{ id: 'step3', label: 'Step 3', status: 'disabled', percentageComplete: 0 },\n\t\t\t{ id: 'step4', label: 'Step 4', status: 'unvisited', percentageComplete: 0 },\n\t\t]}\n\t/>,\n];"],
+  examples: ["import { ProgressTracker } from '@atlaskit/progress-tracker';\nconst Example = (): React.JSX.Element => (\n\t<ProgressTracker\n\t\titems={[\n\t\t\t{ id: 'step1', label: 'Step 1', status: 'visited', percentageComplete: 100 },\n\t\t\t{ id: 'step2', label: 'Step 2', status: 'current', percentageComplete: 40 },\n\t\t\t{ id: 'step3', label: 'Step 3', status: 'disabled', percentageComplete: 0 },\n\t\t\t{ id: 'step4', label: 'Step 4', status: 'unvisited', percentageComplete: 0 },\n\t\t]}\n\t/>\n);\nexport default Example;"],
   accessibilityGuidelines: ['Ensure progress is announced by screen readers', 'Use appropriate progress indicators', 'Provide clear progress context', 'Consider progress timing and updates'],
   usageGuidelines: ['Use for multi-step workflows', 'Provide clear progress tracking', 'Handle progress updates appropriately', 'Consider progress completion states'],
   contentGuidelines: ['Use clear, descriptive step labels', 'Provide meaningful progress descriptions', 'Use appropriate progress terminology', 'Keep progress information concise'],
@@ -3155,7 +3151,7 @@ export const components = [{
   category: 'form',
   description: 'A radio button component for single selection from a set of mutually exclusive choices. Use for custom radio button presentations like options in tables or when you need fine control over individual radio buttons.',
   status: 'general-availability',
-  examples: ['import { Radio } from \'@atlaskit/radio\';\nexport default () => (\n\t<Radio value="option1" label="Option 1" name="choices" onChange={() => console.log(\'Changed!\')} />\n);'],
+  examples: ['import { Radio } from \'@atlaskit/radio\';\nexport default (): React.JSX.Element => (\n\t<Radio value="option1" label="Option 1" name="choices" onChange={() => console.log(\'Changed!\')} />\n);'],
   accessibilityGuidelines: ['Include error messages for required or invalid radio fields', 'Never preselect high-risk options for payment, privacy, or security', "Don't use disabled radio buttons if they need to remain in tab order", 'Use validation instead of disabled state for better accessibility'],
   usageGuidelines: ['Use for custom radio button presentations (e.g., options in tables)', 'Use when you need fine control over individual radio buttons', 'List options in logical order (most likely to least likely)', 'Make one option the default (safest, most secure option)', "Add 'None' option if unselected state is needed", "Add 'Other' option if not all options can be listed"],
   contentGuidelines: ['Use clear, descriptive labels that provide context', 'Keep labels concise but informative', 'Use sentence case for labels', 'Avoid alphabetical ordering (not localizable)', 'Avoid overlapping or skipping numeric choices'],
@@ -3203,7 +3199,7 @@ export const components = [{
   category: 'form',
   description: 'A radio group component that presents a list of options where only one choice can be selected. Use for most radio button scenarios where you want a simple list of mutually exclusive options.',
   status: 'general-availability',
-  examples: ["import { RadioGroup } from '@atlaskit/radio';\n// Radio group with options\nconst options = [\n\t{ name: 'color', value: 'red', label: 'Red' },\n\t{ name: 'color', value: 'blue', label: 'Blue' },\n];\nexport default () => {\n\tconst [value, setValue] = React.useState('red');\n\treturn (\n\t\t<RadioGroup options={options} value={value} onChange={(e) => setValue(e.currentTarget.value)} />\n\t);\n};"],
+  examples: ["import { RadioGroup } from '@atlaskit/radio';\n// Radio group with options\nconst options = [\n\t{ name: 'color', value: 'red', label: 'Red' },\n\t{ name: 'color', value: 'blue', label: 'Blue' },\n];\nexport default (): React.JSX.Element => {\n\tconst [value, setValue] = React.useState('red');\n\treturn (\n\t\t<RadioGroup options={options} value={value} onChange={(e) => setValue(e.currentTarget.value)} />\n\t);\n};"],
   accessibilityGuidelines: ['Include error messages for required or invalid radio fields', 'Never preselect high-risk options for payment, privacy, or security', "Don't use disabled radio buttons if they need to remain in tab order", 'Use validation instead of disabled state for better accessibility', 'Ensure proper keyboard navigation with arrow keys'],
   usageGuidelines: ['Use for most radio button scenarios with simple option lists', 'List options in logical order (most likely to least likely)', 'Make one option the default (safest, most secure option)', "Add 'None' option if unselected state is needed", "Add 'Other' option if not all options can be listed", 'Use select component for longer lists of options'],
   contentGuidelines: ['Use clear, descriptive labels that provide context', 'Keep labels concise but informative', 'Use sentence case for labels', 'Avoid alphabetical ordering (not localizable)', 'Avoid overlapping or skipping numeric choices'],
@@ -3259,7 +3255,7 @@ export const components = [{
   category: 'form',
   description: 'A component for selecting a value from a range of values.',
   status: 'general-availability',
-  examples: ["import Range from '@atlaskit/range';\nexport default [\n\t<Range\n\t\tvalue={25}\n\t\tmin={0}\n\t\tmax={50}\n\t\tstep={5}\n\t\tonChange={(value) => console.log('Stepped value:', value)}\n\t/>,\n];"],
+  examples: ["import Range from '@atlaskit/range';\nconst Example = (): React.JSX.Element => (\n\t<Range\n\t\tvalue={25}\n\t\tmin={0}\n\t\tmax={50}\n\t\tstep={5}\n\t\tonChange={(value) => console.log('Stepped value:', value)}\n\t/>\n);\nexport default Example;"],
   accessibilityGuidelines: ['Provide clear labels for range inputs', 'Use appropriate ARIA attributes', 'Ensure keyboard navigation support', 'Provide value announcements for screen readers'],
   usageGuidelines: ['Use for selecting numeric values within a range', 'Provide clear min/max boundaries', 'Use appropriate step increments', 'Consider showing current value'],
   contentGuidelines: ['Use clear range labels', 'Provide meaningful min/max labels', 'Show current value when helpful', 'Use consistent range terminology'],
@@ -3339,7 +3335,7 @@ export const components = [{
   category: 'form',
   description: 'A flexible select component for single and multi-selection.',
   status: 'general-availability',
-  examples: ["import { Label } from '@atlaskit/form';\nimport Select from '@atlaskit/select';\nexport default function SelectAppearanceDefault() {\n\treturn (\n\t\t<>\n\t\t\t<Label htmlFor=\"default-appearance-example\">Favorite fruit</Label>\n\t\t\t<Select\n\t\t\t\tinputId=\"default-appearance-example\"\n\t\t\t\tappearance=\"default\"\n\t\t\t\toptions={[\n\t\t\t\t\t{ label: 'Apple', value: 'a' },\n\t\t\t\t\t{ label: 'Banana', value: 'b' },\n\t\t\t\t]}\n\t\t\t/>\n\t\t</>\n\t);\n}"],
+  examples: ["import { Label } from '@atlaskit/form';\nimport Select from '@atlaskit/select';\nexport default function SelectAppearanceDefault(): React.JSX.Element {\n\treturn (\n\t\t<>\n\t\t\t<Label htmlFor=\"default-appearance-example\">Favorite fruit</Label>\n\t\t\t<Select\n\t\t\t\tinputId=\"default-appearance-example\"\n\t\t\t\tappearance=\"default\"\n\t\t\t\toptions={[\n\t\t\t\t\t{ label: 'Apple', value: 'a' },\n\t\t\t\t\t{ label: 'Banana', value: 'b' },\n\t\t\t\t]}\n\t\t\t/>\n\t\t</>\n\t);\n}"],
   accessibilityGuidelines: ['Provide clear labels for all selects', 'Use appropriate placeholder text', 'Ensure keyboard navigation with arrow keys', 'Provide clear option descriptions', 'Support screen reader announcements'],
   usageGuidelines: ['Use for choosing from a list of options', 'Use multi-select for multiple choice scenarios', 'Enable search for long option lists', 'Provide clear placeholder text', 'Consider loading states for async data'],
   contentGuidelines: ['Write clear, descriptive option labels', 'Use consistent terminology across options', 'Keep option text concise but meaningful', 'Group related options logically'],
@@ -3707,7 +3703,7 @@ export const components = [{
   category: 'navigation',
   description: 'Tabs are used to organize content by grouping similar information on the same page.',
   status: 'general-availability',
-  examples: ['import Tabs, { Tab, TabList, TabPanel } from \'@atlaskit/tabs\';\nexport default [\n\t<Tabs id="tabs">\n\t\t<TabList>\n\t\t\t<Tab>Tab 1</Tab>\n\t\t\t<Tab>Tab 2</Tab>\n\t\t</TabList>\n\t\t<TabPanel>Content for Tab 1</TabPanel>\n\t\t<TabPanel>Content for Tab 2</TabPanel>\n\t</Tabs>,\n];'],
+  examples: ['import Tabs, { Tab, TabList, TabPanel } from \'@atlaskit/tabs\';\nconst Example = (): React.JSX.Element => (\n\t<Tabs id="tabs">\n\t\t<TabList>\n\t\t\t<Tab>Tab 1</Tab>\n\t\t\t<Tab>Tab 2</Tab>\n\t\t</TabList>\n\t\t<TabPanel>Content for Tab 1</TabPanel>\n\t\t<TabPanel>Content for Tab 2</TabPanel>\n\t</Tabs>\n);\nexport default Example;'],
   accessibilityGuidelines: ['Ensure proper keyboard navigation between tabs', 'Use appropriate ARIA attributes for tab panels', 'Provide clear focus indicators', 'Announce tab changes to screen readers', 'Ensure tab content is accessible'],
   usageGuidelines: ['Use to organize related content on the same page', 'Keep tab labels concise and descriptive', 'Limit the number of tabs to avoid overcrowding', 'Use consistent tab ordering and grouping', 'Consider responsive behavior for many tabs'],
   contentGuidelines: ['Write clear, descriptive tab labels', 'Group related content logically', 'Use consistent naming conventions', 'Ensure tab content is relevant and complete'],
@@ -3743,7 +3739,7 @@ export const components = [{
   category: 'data-display',
   description: 'A tag is a compact element used to categorize, label, or organize content.',
   status: 'general-availability',
-  examples: ['import Tag from \'@atlaskit/tag\';\nexport default [\n\t<Tag text="Basic tag" />,\n\t<Tag text="Bug" color="red" />,\n\t<Tag text="Removable tag" removeButtonLabel="Remove" />,\n];'],
+  examples: ['import Tag from \'@atlaskit/tag\';\nconst Examples = (): React.JSX.Element => (\n\t<>\n\t\t<Tag text="Basic tag" />\n\t\t<Tag text="Bug" color="red" />\n\t\t<Tag text="Removable tag" removeButtonLabel="Remove" />\n\t</>\n);\nexport default Examples;'],
   accessibilityGuidelines: ['Provide appropriate labels for tags', 'Ensure sufficient color contrast for text readability', 'Use clear, descriptive tag text', 'Consider keyboard navigation for interactive tags', 'Provide alternative text for tag removal actions'],
   usageGuidelines: ['Use to categorize or label content', 'Keep tag text concise and meaningful', 'Use appropriate colors and appearances', 'Consider tag removal functionality', 'Group related tags logically'],
   contentGuidelines: ['Use clear, descriptive tag labels', 'Keep tag text concise', 'Use consistent terminology across tags', 'Consider tag hierarchy and grouping'],
@@ -3754,7 +3750,7 @@ export const components = [{
   }, {
     name: 'color',
     description: 'The color theme to apply. This sets both the background and text color.',
-    type: '"standard" | "green" | "lime" | "blue" | "red" | "purple" | "magenta" | "grey" | "teal" | "orange" | "yellow" | "limeLight" | "orangeLight" | "magentaLight" | "greenLight" | "blueLight" | ... 4 more ... | "yellowLight"'
+    type: '"standard" | "green" | "lime" | "blue" | "red" | "purple" | "magenta" | "grey" | "gray" | "teal" | "orange" | "yellow" | "limeLight" | "orangeLight" | "magentaLight" | "greenLight" | ... 5 more ... | "yellowLight"'
   }, {
     name: 'elemBefore',
     description: 'The component to be rendered before the tag.',
@@ -3795,7 +3791,7 @@ export const components = [{
   category: 'data-display',
   description: 'A component for managing multiple tags.',
   status: 'general-availability',
-  examples: ['import Tag from \'@atlaskit/tag\';\nimport TagGroup from \'@atlaskit/tag-group\';\nexport default [\n\t<TagGroup label="Tags for work item">\n\t\t<Tag text="Priority: High" color="red" />\n\t\t<Tag text="Status: Active" color="green" />\n\t\t<Tag text="Type: Bug" color="blue" />\n\t</TagGroup>,\n];'],
+  examples: ['import Tag from \'@atlaskit/tag\';\nimport TagGroup from \'@atlaskit/tag-group\';\nconst Example = (): React.JSX.Element => (\n\t<TagGroup label="Tags for work item">\n\t\t<Tag text="Priority: High" color="red" />\n\t\t<Tag text="Status: Active" color="green" />\n\t\t<Tag text="Type: Bug" color="blue" />\n\t</TagGroup>\n);\nexport default Example;'],
   accessibilityGuidelines: ['Provide clear tag labels', 'Ensure proper keyboard navigation', 'Use appropriate grouping semantics', 'Consider screen reader announcements'],
   usageGuidelines: ['Use for grouping related tags', 'Consider tag alignment and spacing', 'Use for categorizing content', 'Provide clear tag relationships'],
   contentGuidelines: ['Use consistent tag naming', 'Keep tag text concise', 'Use meaningful tag categories', 'Consider tag hierarchy'],
@@ -3823,7 +3819,7 @@ export const components = [{
   category: 'forms-and-input',
   description: 'A textarea is a multiline text input control for longer text content.',
   status: 'general-availability',
-  examples: ['import Textarea from \'@atlaskit/textarea\';\nexport default [\n\t<Textarea placeholder="Enter your text..." />,\n\t<Textarea placeholder="Required field" isRequired resize="auto" name="comments" />,\n];'],
+  examples: ['import Textarea from \'@atlaskit/textarea\';\nconst Examples = (): React.JSX.Element => (\n\t<>\n\t\t<Textarea placeholder="Enter your text..." />\n\t\t<Textarea placeholder="Required field" isRequired resize="auto" name="comments" />\n\t</>\n);\nexport default Examples;'],
   accessibilityGuidelines: ['Provide clear labels for all textareas', "Use appropriate placeholder text that doesn't replace labels", 'Provide keyboard navigation support', 'Indicate required fields clearly', 'Use appropriate error states and messaging'],
   usageGuidelines: ['Use for longer text input needs', 'Provide appropriate sizing for content type', 'Use clear, descriptive labels', 'Consider character limits and validation', 'Use appropriate placeholder text'],
   contentGuidelines: ['Write clear, descriptive labels', 'Use helpful placeholder text', 'Provide appropriate error messages', 'Consider content length and formatting'],
@@ -3911,7 +3907,7 @@ export const components = [{
   category: 'form',
   description: 'A single-line text input component.',
   status: 'general-availability',
-  examples: ['import TextField from \'@atlaskit/textfield\';\nexport default [\n\t<TextField label="Name" placeholder="Enter your name" />,\n\t<TextField label="Email" type="email" placeholder="Enter your email address" isRequired />,\n\t<TextField label="Password" type="password" placeholder="Enter your password" isRequired />,\n];'],
+  examples: ['import TextField from \'@atlaskit/textfield\';\nconst Examples = (): React.JSX.Element => (\n\t<>\n\t\t<TextField label="Name" placeholder="Enter your name" />\n\t\t<TextField label="Email" type="email" placeholder="Enter your email address" isRequired />\n\t\t<TextField label="Password" type="password" placeholder="Enter your password" isRequired />\n\t</>\n);\nexport default Examples;'],
   accessibilityGuidelines: ['Provide clear labels for all textfields', "Use appropriate placeholder text that doesn't replace labels", 'Provide keyboard navigation support', 'Indicate required fields clearly', 'Use appropriate error states and messaging'],
   usageGuidelines: ['Use for single-line text input needs', 'Provide appropriate sizing for content type', 'Use clear, descriptive labels', 'Consider character limits and validation', 'Use appropriate placeholder text'],
   contentGuidelines: ['Write clear, descriptive labels', 'Use helpful placeholder text', 'Provide appropriate error messages', 'Consider content length and formatting'],
@@ -3979,7 +3975,7 @@ export const components = [{
   category: 'forms-and-input',
   description: 'A toggle is used to view or switch between enabled or disabled states.',
   status: 'general-availability',
-  examples: ['import Toggle from \'@atlaskit/toggle\';\nexport default [<Toggle label="Basic toggle" />, <Toggle label="Checked toggle" isChecked />];'],
+  examples: ['import Toggle from \'@atlaskit/toggle\';\nconst Examples = (): React.JSX.Element => (\n\t<>\n\t\t<Toggle label="Basic toggle" />\n\t\t<Toggle label="Checked toggle" isChecked />\n\t</>\n);\nexport default Examples;'],
   accessibilityGuidelines: ['Provide clear labels for all toggles', 'Use appropriate ARIA attributes for toggle state', 'Ensure keyboard navigation support', 'Provide clear visual feedback for state changes', "Use descriptive labels that explain the toggle's purpose"],
   usageGuidelines: ['Use for binary on/off states', "Provide clear labels that describe the toggle's function", 'Use appropriate default states', 'Consider immediate vs. delayed state changes', 'Use consistent toggle behavior across the interface'],
   contentGuidelines: ['Write clear, descriptive labels', 'Use action-oriented language when appropriate', 'Ensure labels clearly indicate what the toggle controls', 'Use consistent terminology across toggles'],
@@ -4043,7 +4039,7 @@ export const components = [{
   category: 'overlays-and-layering',
   description: 'A tooltip is a floating, non-actionable label used to explain a user interface element or feature.',
   status: 'general-availability',
-  examples: ['import Button from \'@atlaskit/button/new\';\nimport Tooltip from \'@atlaskit/tooltip\';\nexport default function DefaultTooltipExample() {\n\treturn (\n\t\t<Tooltip content="This is a tooltip" testId="default-tooltip">\n\t\t\t{(tooltipProps) => <Button {...tooltipProps}>Hover over me</Button>}\n\t\t</Tooltip>\n\t);\n}'],
+  examples: ['import Button from \'@atlaskit/button/new\';\nimport Tooltip from \'@atlaskit/tooltip\';\nexport default function DefaultTooltipExample(): React.JSX.Element {\n\treturn (\n\t\t<Tooltip content="This is a tooltip" testId="default-tooltip">\n\t\t\t{(tooltipProps) => <Button {...tooltipProps}>Hover over me</Button>}\n\t\t</Tooltip>\n\t);\n}'],
   accessibilityGuidelines: ['Ensure tooltip content is announced by screen readers', 'Use appropriate hover/focus triggers', 'Provide keyboard access to tooltip content', 'Use clear, descriptive tooltip text', 'Consider tooltip timing and persistence'],
   usageGuidelines: ['Use to provide additional context or explanation', 'Keep tooltip content concise and helpful', 'Position tooltips appropriately to avoid obstruction', 'Use consistent tooltip behavior across the interface', 'Consider mobile touch interactions'],
   contentGuidelines: ['Write clear, concise explanatory text', 'Use helpful, actionable information', 'Avoid redundant information already visible', 'Use consistent tone and style'],
@@ -4119,7 +4115,7 @@ export const components = [{
   category: 'utility',
   description: 'A utility component for accessibility.',
   status: 'general-availability',
-  examples: ["import VisuallyHidden from '@atlaskit/visually-hidden';\nexport default () => {\n\treturn (\n\t\t<div  style={{ border: '1px solid black' }}>\n\t\t\tThere is text hidden between the brackets [<VisuallyHidden>Can't see me!</VisuallyHidden>]\n\t\t</div>\n\t);\n};"],
+  examples: ["import VisuallyHidden from '@atlaskit/visually-hidden';\nexport default (): React.JSX.Element => {\n\treturn (\n\t\t<div  style={{ border: '1px solid black' }}>\n\t\t\tThere is text hidden between the brackets [<VisuallyHidden>Can't see me!</VisuallyHidden>]\n\t\t</div>\n\t);\n};"],
   accessibilityGuidelines: ['Use for screen reader only content', 'Ensure content is meaningful for assistive technology', 'Use appropriate ARIA roles when needed', 'Consider content context and purpose'],
   usageGuidelines: ['Use for screen reader only content', 'Provide meaningful hidden content', 'Use for accessibility enhancements', 'Consider content context and purpose'],
   contentGuidelines: ['Use clear, descriptive hidden content', 'Ensure content adds value for screen readers', 'Use appropriate language and tone', 'Keep content concise but meaningful'],