@atlaskit/ads-mcp 0.17.1 → 0.17.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (88) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/README.md +88 -0
  3. package/dist/cjs/index.js +19 -40
  4. package/dist/cjs/tools/get-all-icons/icons.js +43 -0
  5. package/dist/cjs/tools/get-all-icons/index.js +4 -19
  6. package/dist/cjs/tools/get-all-tokens/index.js +3 -6
  7. package/dist/cjs/tools/get-all-tokens/tokens.js +18 -0
  8. package/dist/cjs/tools/get-components/components.codegen.js +8 -0
  9. package/dist/cjs/tools/get-components/components.js +423 -235
  10. package/dist/cjs/tools/get-components/index.js +2 -2
  11. package/dist/cjs/tools/get-components/load-all-components.js +16 -0
  12. package/dist/cjs/tools/get-guidelines/guidelines-structured-content.codegen.js +72 -6
  13. package/dist/cjs/tools/get-lint-rules/lint-rules-structured-content.codegen.js +111 -7
  14. package/dist/cjs/tools/search-components/index.js +13 -12
  15. package/dist/cjs/tools/search-icons/index.js +7 -24
  16. package/dist/es2019/index.js +13 -31
  17. package/dist/es2019/tools/get-all-icons/icons.js +25 -0
  18. package/dist/es2019/tools/get-all-icons/index.js +1 -10
  19. package/dist/es2019/tools/get-all-tokens/index.js +2 -5
  20. package/dist/es2019/tools/get-all-tokens/tokens.js +13 -0
  21. package/dist/es2019/tools/get-components/components.codegen.js +8 -0
  22. package/dist/es2019/tools/get-components/components.js +423 -235
  23. package/dist/es2019/tools/get-components/index.js +11 -9
  24. package/dist/es2019/tools/get-components/load-all-components.js +10 -0
  25. package/dist/es2019/tools/get-guidelines/guidelines-structured-content.codegen.js +72 -6
  26. package/dist/es2019/tools/get-lint-rules/lint-rules-structured-content.codegen.js +111 -7
  27. package/dist/es2019/tools/search-components/index.js +2 -1
  28. package/dist/es2019/tools/search-icons/index.js +1 -10
  29. package/dist/esm/index.js +19 -40
  30. package/dist/esm/tools/get-all-icons/icons.js +37 -0
  31. package/dist/esm/tools/get-all-icons/index.js +3 -18
  32. package/dist/esm/tools/get-all-tokens/index.js +2 -5
  33. package/dist/esm/tools/get-all-tokens/tokens.js +13 -0
  34. package/dist/esm/tools/get-components/components.codegen.js +8 -0
  35. package/dist/esm/tools/get-components/components.js +423 -235
  36. package/dist/esm/tools/get-components/index.js +2 -2
  37. package/dist/esm/tools/get-components/load-all-components.js +10 -0
  38. package/dist/esm/tools/get-guidelines/guidelines-structured-content.codegen.js +72 -6
  39. package/dist/esm/tools/get-lint-rules/lint-rules-structured-content.codegen.js +111 -7
  40. package/dist/esm/tools/search-components/index.js +9 -8
  41. package/dist/esm/tools/search-icons/index.js +3 -20
  42. package/dist/types/tools/get-all-icons/icons.d.ts +11 -0
  43. package/dist/types/tools/get-all-tokens/tokens.d.ts +7 -0
  44. package/dist/types/tools/get-components/components.codegen.d.ts +10 -0
  45. package/dist/types/tools/get-components/components.d.ts +1 -1
  46. package/dist/types/tools/get-components/load-all-components.d.ts +2 -0
  47. package/dist/types/tools/get-components/types.d.ts +20 -14
  48. package/dist/types/tools/get-guidelines/guidelines-structured-content.codegen.d.ts +1 -1
  49. package/dist/types/tools/get-lint-rules/lint-rules-structured-content.codegen.d.ts +1 -1
  50. package/dist/types-ts4.5/tools/get-all-icons/icons.d.ts +11 -0
  51. package/dist/types-ts4.5/tools/get-all-tokens/tokens.d.ts +7 -0
  52. package/dist/types-ts4.5/tools/get-components/components.codegen.d.ts +10 -0
  53. package/dist/types-ts4.5/tools/get-components/components.d.ts +1 -1
  54. package/dist/types-ts4.5/tools/get-components/load-all-components.d.ts +2 -0
  55. package/dist/types-ts4.5/tools/get-components/types.d.ts +20 -14
  56. package/dist/types-ts4.5/tools/get-guidelines/guidelines-structured-content.codegen.d.ts +1 -1
  57. package/dist/types-ts4.5/tools/get-lint-rules/lint-rules-structured-content.codegen.d.ts +1 -1
  58. package/package.json +5 -3
  59. package/dist/cjs/tools/get-icons/icon-mcp-structured-content.codegen.js +0 -8
  60. package/dist/cjs/tools/get-icons/icon-structured-content.codegen.js +0 -8
  61. package/dist/cjs/tools/get-icons/index.js +0 -135
  62. package/dist/cjs/tools/get-tokens/index.js +0 -125
  63. package/dist/cjs/tools/get-tokens/token-mcp-structured-content.codegen.js +0 -2356
  64. package/dist/cjs/tools/get-tokens/token-structured-content.codegen.js +0 -2356
  65. package/dist/es2019/tools/get-icons/icon-mcp-structured-content.codegen.js +0 -8
  66. package/dist/es2019/tools/get-icons/icon-structured-content.codegen.js +0 -8
  67. package/dist/es2019/tools/get-icons/index.js +0 -110
  68. package/dist/es2019/tools/get-tokens/index.js +0 -100
  69. package/dist/es2019/tools/get-tokens/token-mcp-structured-content.codegen.js +0 -2350
  70. package/dist/es2019/tools/get-tokens/token-structured-content.codegen.js +0 -2350
  71. package/dist/esm/tools/get-icons/icon-mcp-structured-content.codegen.js +0 -8
  72. package/dist/esm/tools/get-icons/icon-structured-content.codegen.js +0 -8
  73. package/dist/esm/tools/get-icons/index.js +0 -128
  74. package/dist/esm/tools/get-tokens/index.js +0 -118
  75. package/dist/esm/tools/get-tokens/token-mcp-structured-content.codegen.js +0 -2350
  76. package/dist/esm/tools/get-tokens/token-structured-content.codegen.js +0 -2350
  77. package/dist/types/tools/get-icons/icon-mcp-structured-content.codegen.d.ts +0 -13
  78. package/dist/types/tools/get-icons/icon-structured-content.codegen.d.ts +0 -13
  79. package/dist/types/tools/get-icons/index.d.ts +0 -35
  80. package/dist/types/tools/get-tokens/index.d.ts +0 -35
  81. package/dist/types/tools/get-tokens/token-mcp-structured-content.codegen.d.ts +0 -13
  82. package/dist/types/tools/get-tokens/token-structured-content.codegen.d.ts +0 -13
  83. package/dist/types-ts4.5/tools/get-icons/icon-mcp-structured-content.codegen.d.ts +0 -13
  84. package/dist/types-ts4.5/tools/get-icons/icon-structured-content.codegen.d.ts +0 -13
  85. package/dist/types-ts4.5/tools/get-icons/index.d.ts +0 -35
  86. package/dist/types-ts4.5/tools/get-tokens/index.d.ts +0 -35
  87. package/dist/types-ts4.5/tools/get-tokens/token-mcp-structured-content.codegen.d.ts +0 -13
  88. package/dist/types-ts4.5/tools/get-tokens/token-structured-content.codegen.d.ts +0 -13
@@ -9,9 +9,10 @@ exports.components = void 0;
9
9
  *
10
10
  * Generates TypeScript components data for AI tooling from offerings.json files
11
11
  *
12
- * @codegen <<SignedSource::1d781f4539138bf6cabcd8c01b207b06>>
12
+ * @codegen <<SignedSource::8e120a2eb2205e4c89f4bdddbf4e436f>>
13
13
  * @codegenCommand yarn workspace @af/ads-ai-tooling codegen:prototyping
14
14
  */
15
+ /* eslint-disable @repo/internal/react/boolean-prop-naming-convention -- not our types */
15
16
 
16
17
  var components = exports.components = [{
17
18
  name: 'Avatar',
@@ -27,6 +28,18 @@ var components = exports.components = [{
27
28
  name: 'appearance',
28
29
  description: "Indicates the shape of the avatar. Most avatars are circular, but square avatars\ncan be used for 'container' objects.",
29
30
  type: '"circle" | "square" | "hexagon"'
31
+ }, {
32
+ name: 'aria-controls',
33
+ description: 'Identifies the popup element that the avatar controls.\nUsed when Avatar is a trigger for a popup.',
34
+ type: 'string'
35
+ }, {
36
+ name: 'aria-expanded',
37
+ description: 'Announces to assistive technology whether the controlled popup is currently open or closed.',
38
+ type: 'boolean'
39
+ }, {
40
+ name: 'aria-haspopup',
41
+ description: 'Informs assistive technology that this element triggers a popup.\nWhen set, Avatar will render as a `<button>` element even without `onClick`.',
42
+ type: 'boolean | "dialog"'
30
43
  }, {
31
44
  name: 'as',
32
45
  description: 'Replace the wrapping element. This accepts the name of a html tag which will\nbe used to wrap the element.',
@@ -110,11 +123,13 @@ var components = exports.components = [{
110
123
  props: [{
111
124
  name: 'appearance',
112
125
  description: 'Indicates the layout of the avatar group.\nAvatars will either be overlapped in a stack, or\nlaid out in an even grid formation.\nDefaults to "stack".',
113
- type: '"grid" | "stack"'
126
+ type: '"grid" | "stack"',
127
+ defaultValue: '"stack"'
114
128
  }, {
115
129
  name: 'avatar',
116
130
  description: 'Component used to render each avatar.',
117
- type: 'React.ForwardRefExoticComponent<AvatarPropTypes & React.RefAttributes<HTMLElement>> | React.ElementType<AvatarProps>'
131
+ type: 'React.ForwardRefExoticComponent<AvatarPropTypes & React.RefAttributes<HTMLElement>> | React.ElementType<AvatarProps, keyof React.JSX.IntrinsicElements>',
132
+ defaultValue: 'Avatar'
118
133
  }, {
119
134
  name: 'borderColor',
120
135
  description: 'Typically the background color that the avatar is presented on.\nAccepts any color argument that the CSS border-color property accepts.',
@@ -126,7 +141,8 @@ var components = exports.components = [{
126
141
  }, {
127
142
  name: 'data',
128
143
  description: "An array of avatar prop data, that are spread onto each `avatar` component.\n\nFor further usage information on AvatarPropTypes, the supported props for `avatar`, refer to [Avatar's prop documentation](https://atlassian.design/components/avatar/code).",
129
- type: '(AvatarPropTypes & { name: string; key?: string | number; })[]'
144
+ type: '(AvatarPropTypes & { name: string; key?: string | number; })[]',
145
+ isRequired: true
130
146
  }, {
131
147
  name: 'isTooltipDisabled',
132
148
  description: 'Disables tooltips.',
@@ -134,7 +150,8 @@ var components = exports.components = [{
134
150
  }, {
135
151
  name: 'label',
136
152
  description: 'Text to be used as aria-label for the list of avatars.\nScreen reader announcement with default label, which is `avatar group`, is `list, avatar group, X items`.\n\nThe label should describe the `AvatarGroup`\'s entities, for instance:\n- `label="team members"`, screen reader announcement would be `list team members, X items`\n- `label="reviewers"` screen reader announcement would be `list reviewers, X items`\n\nWhen there are several AvatarGroups on the page you should use a unique label to let users distinguish different lists.',
137
- type: 'string'
153
+ type: 'string',
154
+ defaultValue: '"avatar group"'
138
155
  }, {
139
156
  name: 'maxCount',
140
157
  description: 'The maximum number of avatars allowed in the list.\nDefaults to 5 when displayed as a stack,\nand 11 when displayed as a grid.',
@@ -158,19 +175,23 @@ var components = exports.components = [{
158
175
  }, {
159
176
  name: 'shouldPopupRenderToParent',
160
177
  description: "Determines whether the 'show more' popup has `shouldRenderToParent` applied.",
161
- type: 'boolean'
178
+ type: 'boolean',
179
+ defaultValue: 'false'
162
180
  }, {
163
181
  name: 'showMoreButtonProps',
164
182
  description: 'Provide additional props to the MoreButton.\nExample use cases: altering tab order by providing tabIndex;\nadding onClick behaviour without losing the default dropdown',
165
- type: '{ defaultChecked?: boolean; defaultValue?: string | number | readonly string[]; suppressContentEditableWarning?: boolean; suppressHydrationWarning?: boolean; accessKey?: string; autoFocus?: boolean; ... 258 more ...; onTransitionEndCapture?: React.TransitionEventHandler<...>; }'
183
+ type: '{ defaultChecked?: boolean; defaultValue?: string | number | readonly string[]; suppressContentEditableWarning?: boolean; suppressHydrationWarning?: boolean; accessKey?: string; autoCapitalize?: (string & {}) | ... 5 more ... | "characters"; ... 257 more ...; onTransitionEndCapture?: React.TransitionEventHandler<......',
184
+ defaultValue: '{}'
166
185
  }, {
167
186
  name: 'size',
168
187
  description: 'Defines the size of the avatar.\nDefaults to "medium".\n\nNote: The "xsmall" size that exists on Avatar is not supported here because elements such as the more indicator cannot be displayed in an accessible manner at that size.',
169
- type: '"small" | "medium" | "large" | "xlarge" | "xxlarge"'
188
+ type: '"small" | "medium" | "large" | "xlarge" | "xxlarge"',
189
+ defaultValue: '"medium"'
170
190
  }, {
171
191
  name: 'tooltipPosition',
172
192
  description: 'Where the tooltip should appear relative to its target.\nDefaults to tooltip position "bottom".',
173
- type: '"top" | "bottom"'
193
+ type: '"top" | "bottom"',
194
+ defaultValue: '"bottom"'
174
195
  }]
175
196
  }, {
176
197
  name: 'Badge',
@@ -203,7 +224,7 @@ var components = exports.components = [{
203
224
  category: 'messaging',
204
225
  description: 'A banner displays a prominent message at the top of the screen to communicate important information to users.',
205
226
  status: 'general-availability',
206
- 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);'],
227
+ examples: ['import Banner from \'@atlaskit/banner\';\nimport WarningIcon from \'@atlaskit/icon/core/status-warning\';\nimport Box from \'@atlaskit/primitives/box\';\nexport default (): React.JSX.Element => (\n\t<Box>\n\t\t<Banner icon={<WarningIcon label="Warning" spacing="spacious" />} testId="basicTestId">\n\t\t\tYour license is about to expire. Please renew your license within the next week.\n\t\t</Banner>\n\t</Box>\n);'],
207
228
  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'],
208
229
  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'],
209
230
  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'],
@@ -318,7 +339,8 @@ var components = exports.components = [{
318
339
  }, {
319
340
  name: 'children',
320
341
  description: 'Text content to be rendered in the button.',
321
- type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
342
+ type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
343
+ isRequired: true
322
344
  }, {
323
345
  name: 'iconAfter',
324
346
  description: "Places an icon within the button, after the button's text.",
@@ -367,7 +389,7 @@ var components = exports.components = [{
367
389
  category: 'form',
368
390
  description: 'A button that displays only an icon with an optional tooltip. Perfect for toolbar actions, compact interfaces, and when space is limited.',
369
391
  status: 'general-availability',
370
- examples: ['import { IconButton } from \'@atlaskit/button/new\';\nimport AddIcon from \'@atlaskit/icon/core/add\';\nimport DeleteIcon from \'@atlaskit/icon/core/delete\';\nimport InfoIcon from \'@atlaskit/icon/core/status-information\';\nexport default [\n\t<IconButton icon={AddIcon} label="Add new item" appearance="primary" />,\n\t<IconButton icon={InfoIcon} label="Show information" appearance="subtle" spacing="compact" />,\n\t<IconButton icon={DeleteIcon} label="Delete permanently" appearance="discovery" shape="circle" />,\n];'],
392
+ examples: ['import { IconButton } from \'@atlaskit/button/new\';\nimport AddIcon from \'@atlaskit/icon/core/add\';\nimport DeleteIcon from \'@atlaskit/icon/core/delete\';\nimport InfoIcon from \'@atlaskit/icon/core/status-information\';\nconst _default_1: React.JSX.Element[] = [\n\t<IconButton icon={AddIcon} label="Add new item" appearance="primary" />,\n\t<IconButton icon={InfoIcon} label="Show information" appearance="subtle" spacing="compact" />,\n\t<IconButton icon={DeleteIcon} label="Delete permanently" appearance="discovery" shape="circle" />,\n];\nexport default _default_1;'],
371
393
  usageGuidelines: ['Use for toolbar actions and compact interfaces', 'Choose icons that clearly represent their function', 'Group related icon buttons together', 'Use sparingly to avoid visual clutter', 'Consider using tooltips for additional context', 'Always provide a meaningful label for accessibility', 'The icon should clearly represent the action it performs'],
372
394
  contentGuidelines: ['Use clear, concise, descriptive labels', 'Use action verbs (e.g., "Edit item", "Delete comment")', 'Choose icons that are universally understood', 'Avoid using icons without labels in critical actions'],
373
395
  props: [{
@@ -381,7 +403,8 @@ var components = exports.components = [{
381
403
  }, {
382
404
  name: 'icon',
383
405
  description: 'Places an icon within the button.',
384
- type: 'ComponentClass<Omit<IconProps, "size"> | Omit<NewIconProps, "spacing" | "size">, any> | FunctionComponent<Omit<IconProps, "size"> | Omit<...>>'
406
+ type: 'ComponentClass<Omit<IconProps, "size"> | Omit<NewIconProps, "spacing" | "size">, any> | FunctionComponent<Omit<IconProps, "size"> | Omit<...>>',
407
+ isRequired: true
385
408
  }, {
386
409
  name: 'isDisabled',
387
410
  description: 'Disable the button to prevent user interaction.',
@@ -401,7 +424,8 @@ var components = exports.components = [{
401
424
  }, {
402
425
  name: 'label',
403
426
  description: 'Provide an accessible label, often used by screen readers.',
404
- type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
427
+ type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
428
+ isRequired: true
405
429
  }, {
406
430
  name: 'onBlur',
407
431
  description: 'Handler called on blur.',
@@ -425,7 +449,7 @@ var components = exports.components = [{
425
449
  }, {
426
450
  name: 'tooltip',
427
451
  description: 'Props passed down to the Tooltip component.',
428
- type: '{ testId?: string; analyticsContext?: Record<string, any>; content?: ReactNode | (({ update }: { update?: () => void; }) => ReactNode); component?: ComponentType<TooltipPrimitiveProps> | ForwardRefExoticComponent<...>; ... 13 more ...; shortcut?: string[]; }'
452
+ type: '{ testId?: string; analyticsContext?: Record<string, any>; content?: ReactNode | (({ update }: { update?: () => void; }) => ReactNode); component?: ComponentType<TooltipPrimitiveProps> | ForwardRefExoticComponent<...>; ... 15 more ...; UNSAFE_shouldRenderToParent?: boolean; }'
429
453
  }]
430
454
  }, {
431
455
  name: 'SplitButton',
@@ -434,26 +458,30 @@ var components = exports.components = [{
434
458
  category: 'form',
435
459
  description: 'A button that splits into a primary action and a dropdown menu. The main button performs the primary action, while the dropdown arrow reveals additional related actions.',
436
460
  status: 'general-availability',
437
- examples: ["import Button, { IconButton, SplitButton } from '@atlaskit/button/new';\nimport DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';\nimport ChevronDownIcon from '@atlaskit/icon/core/chevron-down';\nexport default (\n\t<SplitButton spacing=\"compact\">\n\t\t<Button>Link work item</Button>\n\t\t<DropdownMenu\n\t\t\tshouldRenderToParent\n\t\t\ttrigger={({ triggerRef, ...triggerProps }) => (\n\t\t\t\t<IconButton\n\t\t\t\t\tref={triggerRef}\n\t\t\t\t\t{...triggerProps}\n\t\t\t\t\ticon={ChevronDownIcon}\n\t\t\t\t\tlabel=\"More link work item options\"\n\t\t\t\t/>\n\t\t\t)}\n\t\t>\n\t\t\t<DropdownItemGroup>\n\t\t\t\t<DropdownItem>Create new link</DropdownItem>\n\t\t\t\t<DropdownItem>Link existing item</DropdownItem>\n\t\t\t</DropdownItemGroup>\n\t\t</DropdownMenu>\n\t</SplitButton>\n);"],
461
+ examples: ["import Button, { IconButton, SplitButton } from '@atlaskit/button/new';\nimport DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';\nimport ChevronDownIcon from '@atlaskit/icon/core/chevron-down';\nconst _default_1: React.JSX.Element = (\n\t<SplitButton spacing=\"compact\">\n\t\t<Button>Link work item</Button>\n\t\t<DropdownMenu\n\t\t\tshouldRenderToParent\n\t\t\ttrigger={({ triggerRef, ...triggerProps }) => (\n\t\t\t\t<IconButton\n\t\t\t\t\tref={triggerRef}\n\t\t\t\t\t{...triggerProps}\n\t\t\t\t\ticon={ChevronDownIcon}\n\t\t\t\t\tlabel=\"More link work item options\"\n\t\t\t\t/>\n\t\t\t)}\n\t\t>\n\t\t\t<DropdownItemGroup>\n\t\t\t\t<DropdownItem>Create new link</DropdownItem>\n\t\t\t\t<DropdownItem>Link existing item</DropdownItem>\n\t\t\t</DropdownItemGroup>\n\t\t</DropdownMenu>\n\t</SplitButton>\n);\nexport default _default_1;"],
438
462
  accessibilityGuidelines: ['Provide descriptive labels for the IconButton trigger'],
439
463
  usageGuidelines: ['Always must have exactly two children: `Button` and `DropdownMenu` that are related to each other', 'Use `shouldRenderToParent` on `DropdownMenu` for proper positioning', 'Make the primary action the most common or important action', 'Limit dropdown items to avoid overwhelming users'],
440
464
  contentGuidelines: ['Use clear, action-oriented text for the primary button', 'Keep dropdown item labels concise and descriptive', 'Use consistent terminology across related actions'],
441
465
  props: [{
442
466
  name: 'appearance',
443
467
  description: 'The style variation for child buttons. Will override any appearance set on a child button.',
444
- type: '"default" | "primary"'
468
+ type: '"default" | "primary"',
469
+ defaultValue: '"default"'
445
470
  }, {
446
471
  name: 'children',
447
472
  description: 'Only two children are allowed.\nFirst child is the primary action, second child is the secondary action.\nThe assumption is that for both children trees there is a button reading the context.',
448
- type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | React.ReactPortal'
473
+ type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | React.ReactPortal',
474
+ isRequired: true
449
475
  }, {
450
476
  name: 'isDisabled',
451
477
  description: 'Whether all child buttons should be disabled.',
452
- type: 'boolean'
478
+ type: 'boolean',
479
+ defaultValue: 'false'
453
480
  }, {
454
481
  name: 'spacing',
455
482
  description: 'Controls the amount of padding in the child buttons.',
456
- type: '"default" | "compact"'
483
+ type: '"default" | "compact"',
484
+ defaultValue: '"default"'
457
485
  }]
458
486
  }, {
459
487
  name: 'LinkButton',
@@ -462,7 +490,7 @@ var components = exports.components = [{
462
490
  category: 'form',
463
491
  description: 'A button that renders as an anchor tag for navigation. Combines the visual appearance of a button with the semantic behavior of a link.',
464
492
  status: 'general-availability',
465
- examples: ['import { LinkButton } from \'@atlaskit/button/new\';\nexport default [\n\t<LinkButton href="https://atlassian.com" target="_blank" appearance="subtle">\n\t\tExternal Link\n\t</LinkButton>,\n\t// With a Router (requires `<AppProvider routerLinkComponent={Link} />` setup at the root)\n\t<LinkButton href={{ to: \'/about\', replace: true }}>About Page</LinkButton>,\n];'],
493
+ examples: ['import { LinkButton } from \'@atlaskit/button/new\';\nconst _default_1: React.JSX.Element[] = [\n\t<LinkButton href="https://atlassian.com" target="_blank" appearance="subtle">\n\t\tExternal Link\n\t</LinkButton>,\n\t// With a Router (requires `<AppProvider routerLinkComponent={Link} />` setup at the root)\n\t<LinkButton href={{ to: \'/about\', replace: true }}>About Page</LinkButton>,\n];\nexport default _default_1;'],
466
494
  usageGuidelines: ['Use for navigation actions that change the URL', 'Use for external links and internal navigation', "Consider using regular buttons for actions that don't navigate", 'Provide clear visual indication of link behavior', 'Use consistent styling with other buttons when appropriate', 'Use for navigation actions that should look like buttons but behave like links', 'Perfect for external links, internal navigation, or any action that changes the URL'],
467
495
  contentGuidelines: ['Use clear, descriptive text that indicates the destination', 'Be specific about where the link will take the user', 'Use action-oriented language when appropriate', "Avoid generic terms like 'Click here' or 'Learn more'"],
468
496
  props: [{
@@ -476,11 +504,13 @@ var components = exports.components = [{
476
504
  }, {
477
505
  name: 'children',
478
506
  description: 'Text content to be rendered in the button.',
479
- type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
507
+ type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
508
+ isRequired: true
480
509
  }, {
481
510
  name: 'href',
482
511
  description: 'Provides a URL for link buttons. When using an AppProvider with a configured router link component, a `RouterLinkConfig` object type can be provided for advanced usage. See the [Link Button routing example](/components/button/examples#routing) for more details.',
483
- type: 'string | RouterLinkConfig'
512
+ type: 'string | RouterLinkConfig',
513
+ isRequired: true
484
514
  }, {
485
515
  name: 'iconAfter',
486
516
  description: "Places an icon within the button, after the button's text.",
@@ -525,7 +555,7 @@ var components = exports.components = [{
525
555
  category: 'form',
526
556
  description: 'A component for grouping related buttons together with consistent spacing and alignment.',
527
557
  status: 'general-availability',
528
- examples: ['import { ButtonGroup } from \'@atlaskit/button\';\nimport Button from \'@atlaskit/button/new\';\nexport default [\n\t<ButtonGroup titleId="heading-options">\n\t\t<Button appearance="primary">Save</Button>\n\t\t<Button appearance="danger">Delete</Button>\n\t\t<Button appearance="subtle">Cancel</Button>\n\t</ButtonGroup>,\n];'],
558
+ examples: ['import { ButtonGroup } from \'@atlaskit/button\';\nimport Button from \'@atlaskit/button/new\';\nconst _default_1: React.JSX.Element[] = [\n\t<ButtonGroup titleId="heading-options">\n\t\t<Button appearance="primary">Save</Button>\n\t\t<Button appearance="danger">Delete</Button>\n\t\t<Button appearance="subtle">Cancel</Button>\n\t</ButtonGroup>,\n];\nexport default _default_1;'],
529
559
  usageGuidelines: ['Use for related actions that belong together', 'Group buttons that perform similar or complementary actions', 'Maintain consistent spacing and alignment', 'Consider the visual hierarchy within the group', "Don't group unrelated actions together", 'Use when you have multiple related actions that should be visually grouped', 'Provides consistent spacing and alignment between buttons'],
530
560
  contentGuidelines: ['Ensure button labels are consistent in tone and style', 'Use parallel structure for related actions', 'Keep labels concise but descriptive', 'Consider the order of actions within the group'],
531
561
  props: [{
@@ -555,7 +585,7 @@ var components = exports.components = [{
555
585
  props: [{
556
586
  name: 'appearance',
557
587
  description: 'The base styling to apply to the button.',
558
- type: '"link" | "default" | "danger" | "primary" | "subtle" | "subtle-link" | "warning"'
588
+ type: '"default" | "danger" | "link" | "primary" | "subtle" | "subtle-link" | "warning"'
559
589
  }, {
560
590
  name: 'autoFocus',
561
591
  description: 'Set the button to autofocus on mount.',
@@ -567,7 +597,7 @@ var components = exports.components = [{
567
597
  }, {
568
598
  name: 'component',
569
599
  description: '',
570
- type: 'ComponentType<AllHTMLAttributes<HTMLElement>> | ElementType<any>'
600
+ type: 'ComponentType<AllHTMLAttributes<HTMLElement>> | ElementType<any, keyof JSX.IntrinsicElements>'
571
601
  }, {
572
602
  name: 'href',
573
603
  description: "Provides a URL that's used when the button is a link styled as a button.",
@@ -800,7 +830,7 @@ var components = exports.components = [{
800
830
  category: 'data-display',
801
831
  description: 'A component for displaying code snippets.',
802
832
  status: 'general-availability',
803
- examples: ["import { Code } from '@atlaskit/code';\nexport default [<Code>{`<Code />`}</Code>];"],
833
+ examples: ["import { Code } from '@atlaskit/code';\nconst _default_1: React.JSX.Element[] = [<Code>{`<Code />`}</Code>];\nexport default _default_1;"],
804
834
  accessibilityGuidelines: ['Ensure code content is announced properly by screen readers', 'Use appropriate contrast for code readability', 'Consider code context and meaning'],
805
835
  usageGuidelines: ['Use for inline code snippets', 'Consider syntax highlighting needs', 'Use appropriate font styling', 'Consider code block vs inline code'],
806
836
  contentGuidelines: ['Use clear, readable code examples', 'Consider code formatting and indentation', 'Use meaningful variable names in examples', 'Keep code snippets concise'],
@@ -828,22 +858,25 @@ var components = exports.components = [{
828
858
  category: 'data-display',
829
859
  description: 'A component for displaying multi-line code blocks with syntax highlighting.',
830
860
  status: 'general-availability',
831
- examples: ['import { CodeBlock } from \'@atlaskit/code\';\nconst exampleCodeBlock = `export default ({ name }: { name: string }) => <div>Hello {name}</div>;`;\nexport default [<CodeBlock highlight="15" language="tsx" text={exampleCodeBlock} />];'],
861
+ examples: ['import { CodeBlock } from \'@atlaskit/code\';\nconst exampleCodeBlock = `export default ({ name }: { name: string }) => <div>Hello {name}</div>;`;\nconst _default_1: React.JSX.Element[] = [\n\t<CodeBlock highlight="15" language="tsx" text={exampleCodeBlock} />,\n];\nexport default _default_1;'],
832
862
  accessibilityGuidelines: ['Ensure code blocks are announced properly by screen readers', 'Use appropriate contrast for code readability', 'Consider code context and meaning', 'Provide proper language identification'],
833
863
  usageGuidelines: ['Use for multi-line code examples', 'Specify appropriate language for syntax highlighting', 'Consider code block sizing and scrolling', 'Use for code snippets that need formatting'],
834
864
  contentGuidelines: ['Use clear, readable code examples', 'Consider code formatting and indentation', 'Use meaningful variable names in examples', 'Keep code blocks focused and relevant'],
835
865
  props: [{
836
866
  name: 'codeBidiWarningLabel',
837
867
  description: 'Label for the bidi warning tooltip.',
838
- type: 'string'
868
+ type: 'string',
869
+ defaultValue: "'Bidirectional characters change the order that text is rendered. This could be used to obscure malicious code.'"
839
870
  }, {
840
871
  name: 'firstLineNumber',
841
872
  description: 'Sets the number of the first line, if showLineNumbers is set to true.',
842
- type: 'number'
873
+ type: 'number',
874
+ defaultValue: '1'
843
875
  }, {
844
876
  name: 'hasBidiWarnings',
845
877
  description: 'When set to `false`, disables code decorating with bidi warnings.',
846
- type: 'boolean'
878
+ type: 'boolean',
879
+ defaultValue: 'true'
847
880
  }, {
848
881
  name: 'highlight',
849
882
  description: 'Comma delimited lines to highlight.\n\nExample uses:\n- To highlight one line `highlight="3"`\n- To highlight a group of lines `highlight="1-5"`\n- To highlight multiple groups `highlight="1-5,7,10,15-20"`',
@@ -859,7 +892,8 @@ var components = exports.components = [{
859
892
  }, {
860
893
  name: 'isBidiWarningTooltipEnabled',
861
894
  description: 'Sets whether to render tooltip with the warning or not.\nIntended to be disabled when used in a mobile view, such as in the editor via mobile bridge,\nwhere the tooltip could end up being cut off or otherwise not work as expected.',
862
- type: 'boolean'
895
+ type: 'boolean',
896
+ defaultValue: 'true'
863
897
  }, {
864
898
  name: 'label',
865
899
  description: "Text used to describe that the content of the code block is scrollable.\nSet only if the code block is scrollable. Defaults to 'Scrollable content'.",
@@ -867,19 +901,23 @@ var components = exports.components = [{
867
901
  }, {
868
902
  name: 'language',
869
903
  description: 'Language reference designed to be populated from `SUPPORTED_LANGUAGES` in\n`design-system/code`. Run against language grammars from PrismJS (full list\navailable at [PrismJS documentation](https://prismjs.com/#supported-languages)).\n\nWhen set to "text" will not perform highlighting. If unsupported language\nprovided - code will be treated as "text" with no highlighting.',
870
- type: '"text" | "PHP" | "php" | "php3" | "php4" | "php5" | "Java" | "java" | "CSharp" | "csharp" | "c#" | "Python" | "python" | "py" | "JavaScript" | "javascript" | "js" | "Html" | "html" | ... 234 more ... | "markdown"'
904
+ type: '"PHP" | "php" | "php3" | "php4" | "php5" | "Java" | "java" | "CSharp" | "csharp" | "c#" | "Python" | "python" | "py" | "JavaScript" | "javascript" | "js" | "Html" | "html" | "xml" | ... 234 more ... | "markdown"',
905
+ defaultValue: "'text'"
871
906
  }, {
872
907
  name: 'shouldShowLineNumbers',
873
908
  description: 'Sets whether to display code line numbers or not.',
874
- type: 'boolean'
909
+ type: 'boolean',
910
+ defaultValue: 'true'
875
911
  }, {
876
912
  name: 'shouldWrapLongLines',
877
913
  description: 'Sets whether long lines will create a horizontally scrolling container.\nWhen set to `true`, these lines will visually wrap instead.',
878
- type: 'boolean'
914
+ type: 'boolean',
915
+ defaultValue: 'false'
879
916
  }, {
880
917
  name: 'text',
881
918
  description: 'The code to be formatted.',
882
- type: 'string'
919
+ type: 'string',
920
+ isRequired: true
883
921
  }]
884
922
  }, {
885
923
  name: 'Comment',
@@ -895,47 +933,53 @@ var components = exports.components = [{
895
933
  props: [{
896
934
  name: 'actions',
897
935
  description: 'A list of `CommentAction` items rendered as a row of buttons below the content.',
898
- type: 'ReactNode[]'
936
+ type: 'React.ReactNode[]',
937
+ defaultValue: '[]'
899
938
  }, {
900
939
  name: 'afterContent',
901
940
  description: "Content that is rendered after the comment's content.",
902
- type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
941
+ type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
903
942
  }, {
904
943
  name: 'author',
905
944
  description: 'A `CommentAuthor` element containing the name of the author.',
906
- type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
945
+ type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
907
946
  }, {
908
947
  name: 'avatar',
909
948
  description: "The element to display as the avatar. It's best to use `@atlaskit/avatar`.",
910
- type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
949
+ type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
950
+ isRequired: true
911
951
  }, {
912
952
  name: 'children',
913
953
  description: 'Provide nested comments as children.',
914
- type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
954
+ type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
915
955
  }, {
916
956
  name: 'content',
917
957
  description: 'The main content for the comment.',
918
- type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
958
+ type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
919
959
  }, {
920
960
  name: 'edited',
921
961
  description: 'A `CommentEdited` element which displays next to the time. Indicates whether the comment has been edited.',
922
- type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
962
+ type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
923
963
  }, {
924
964
  name: 'errorActions',
925
965
  description: 'A list of `CommentAction` items rendered with a warning icon instead of the actions.',
926
- type: 'ReactNode[]'
966
+ type: 'React.ReactNode[]',
967
+ defaultValue: '[]'
927
968
  }, {
928
969
  name: 'errorIconLabel',
929
970
  description: 'Text to show in the error icon label.',
930
- type: 'string'
971
+ type: 'string',
972
+ defaultValue: '""'
931
973
  }, {
932
974
  name: 'headingLevel',
933
975
  description: 'Use this to set the semantic heading level of the comment. The default comment heading has an `h3` tag. Make sure that headings are in the correct order and don’t skip levels.',
934
- type: '"1" | "2" | "3" | "4" | "5" | "6"'
976
+ type: '"3" | "1" | "2" | "4" | "5" | "6"',
977
+ defaultValue: '"3"'
935
978
  }, {
936
979
  name: 'highlighted',
937
980
  description: 'Sets whether this comment should be highlighted.',
938
- type: 'boolean'
981
+ type: 'boolean',
982
+ defaultValue: 'false'
939
983
  }, {
940
984
  name: 'id',
941
985
  description: 'An ID to be applied to the comment.',
@@ -943,19 +987,23 @@ var components = exports.components = [{
943
987
  }, {
944
988
  name: 'isError',
945
989
  description: 'Indicates whether the component is in an error state. Hides actions and time.',
946
- type: 'boolean'
990
+ type: 'boolean',
991
+ defaultValue: 'false'
947
992
  }, {
948
993
  name: 'isSaving',
949
994
  description: 'Enables "optimistic saving" mode which removes actions and displays text from the `savingText` prop.',
950
- type: 'boolean'
995
+ type: 'boolean',
996
+ defaultValue: 'false'
951
997
  }, {
952
998
  name: 'restrictedTo',
953
999
  description: 'Text for the "restricted to" label. This will display in the top items, before the main content.',
954
- type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
1000
+ type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
1001
+ defaultValue: '""'
955
1002
  }, {
956
1003
  name: 'savingText',
957
1004
  description: 'Text to show when in "optimistic saving" mode.',
958
- type: 'string'
1005
+ type: 'string',
1006
+ defaultValue: '"Sending..."'
959
1007
  }, {
960
1008
  name: 'shouldHeaderWrap',
961
1009
  description: 'Controls if the comment header should wrap.',
@@ -967,7 +1015,7 @@ var components = exports.components = [{
967
1015
  }, {
968
1016
  name: 'time',
969
1017
  description: 'A `CommentTime` element containing the time to display.',
970
- type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
1018
+ type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
971
1019
  }, {
972
1020
  name: 'type',
973
1021
  description: 'The type of comment. This will be rendered in a lozenge at the top of the comment, before the main content.',
@@ -980,7 +1028,7 @@ var components = exports.components = [{
980
1028
  category: 'form',
981
1029
  description: 'A component for selecting date values with calendar support.',
982
1030
  status: 'general-availability',
983
- 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;'],
1031
+ examples: ['import { DatePicker } from \'@atlaskit/datetime-picker\';\nimport __noop from \'@atlaskit/ds-lib/noop\';\nconst Example = (): React.JSX.Element => (\n\t<DatePicker\n\t\tclearControlLabel="Clear select date"\n\t\tonChange={__noop}\n\t\tshouldShowCalendarButton\n\t\topenCalendarLabel="open calendar"\n\t/>\n);\nexport default Example;'],
984
1032
  accessibilityGuidelines: ['Ensure proper keyboard navigation', 'Use appropriate date formats', 'Provide clear date labels', 'Consider screen reader announcements'],
985
1033
  usageGuidelines: ['Use for date selection only', 'Provide clear date formats', 'Handle date validation appropriately', 'Consider calendar button visibility'],
986
1034
  contentGuidelines: ['Use clear, descriptive labels', 'Provide helpful placeholder text', 'Use appropriate date formats', 'Keep labels concise but descriptive'],
@@ -1023,7 +1071,8 @@ var components = exports.components = [{
1023
1071
  }, {
1024
1072
  name: 'inputLabel',
1025
1073
  description: 'The name of the input, used when `shouldShowCalendarButton` is true. See `shouldShowCalendarButton` description for more details.',
1026
- type: 'string'
1074
+ type: 'string',
1075
+ defaultValue: "'Date picker'"
1027
1076
  }, {
1028
1077
  name: 'inputLabelId',
1029
1078
  description: 'The ID of the label for the input, used when `shouldShowCalendarButton` is\ntrue. See `shouldShowCalendarButton` description for more details.',
@@ -1087,7 +1136,8 @@ var components = exports.components = [{
1087
1136
  }, {
1088
1137
  name: 'openCalendarLabel',
1089
1138
  description: 'The label associated with the button to open the calendar, rendered via the\n`shouldShowCalendarButton` prop. If a `label` prop is provided, this\ncalendar button label will be prefixed by the value of `label`. If no\n`label` prop is provided, this prefix should be manually added. For\nexample,\n\n```tsx\n<label id="label" htmlFor="datepicker">Desired Appointment Date</label>\n<DatePicker\n\tid="datepicker"\n\tshouldShowCalendarButton\n\tinputLabel="Desired Appointment Date"\n\topenCalendarLabel="open calendar"\n/>\n```',
1090
- type: 'string'
1139
+ type: 'string',
1140
+ defaultValue: "'open calendar'"
1091
1141
  }, {
1092
1142
  name: 'parseInputValue',
1093
1143
  description: 'A function for parsing input characters and transforming them into a Date object.\nBy default parses the date string based off the locale. Note that this does\nnot affect how the resulting value is displayed in the input. Use the\n`dateFormat` or `formatDisplayLabel` prop to handle how the value is\ndisplayed.',
@@ -1103,11 +1153,12 @@ var components = exports.components = [{
1103
1153
  }, {
1104
1154
  name: 'selectProps',
1105
1155
  description: '',
1106
- type: 'Omit<SelectProps<OptionType, false>, "aria-describedby" | "placeholder" | "aria-label" | "inputId"> & { \'aria-describedby\'?: never; \'aria-label\'?: never; inputId?: never; placeholder?: never; }'
1156
+ type: 'Omit<SelectProps<OptionType, false>, "aria-label" | "aria-describedby" | "inputId" | "placeholder"> & { \'aria-describedby\'?: never; \'aria-label\'?: never; inputId?: never; placeholder?: never; } & { ...; }'
1107
1157
  }, {
1108
1158
  name: 'shouldShowCalendarButton',
1109
1159
  description: 'Provides a functional calendar button that opens the calendar picker that\nlives on the right side of the date picker.\n\nThe accessible name for this button is caculated using either the `label`,\n`inputLabel`, or `inputLabelId` props, along with the `openCalendarLabel`\nprop.',
1110
- type: 'boolean'
1160
+ type: 'boolean',
1161
+ defaultValue: 'false'
1111
1162
  }, {
1112
1163
  name: 'spacing',
1113
1164
  description: 'The spacing for the select control.\n\nCompact is `gridSize() * 4`, default is `gridSize * 5`.',
@@ -1128,7 +1179,7 @@ var components = exports.components = [{
1128
1179
  category: 'form',
1129
1180
  description: 'A component for selecting time values with clock interface.',
1130
1181
  status: 'general-availability',
1131
- 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;'],
1182
+ examples: ['import { TimePicker } from \'@atlaskit/datetime-picker\';\nimport __noop from \'@atlaskit/ds-lib/noop\';\nconst Example = (): React.JSX.Element => (\n\t<TimePicker\n\t\tclearControlLabel="Clear select time (editable)"\n\t\tdefaultValue="14:30"\n\t\tonChange={__noop}\n\t\ttimeFormat="HH:mm:ss A"\n\t\ttimeIsEditable\n\t\tselectProps={{\n\t\t\tclassNamePrefix: \'timepicker-select\',\n\t\t}}\n\t/>\n);\nexport default Example;'],
1132
1183
  accessibilityGuidelines: ['Ensure proper keyboard navigation', 'Use appropriate time formats', 'Provide clear time labels', 'Consider screen reader announcements'],
1133
1184
  usageGuidelines: ['Use for time selection only', 'Provide clear time formats', 'Handle time validation appropriately', 'Consider editable time input'],
1134
1185
  contentGuidelines: ['Use clear, descriptive labels', 'Provide helpful placeholder text', 'Use appropriate time formats', 'Keep labels concise but descriptive'],
@@ -1240,81 +1291,81 @@ var components = exports.components = [{
1240
1291
  category: 'form',
1241
1292
  description: 'A component for selecting both date and time values.',
1242
1293
  status: 'general-availability',
1243
- 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;"],
1294
+ examples: ["import { DateTimePicker } from '@atlaskit/datetime-picker';\nimport __noop from '@atlaskit/ds-lib/noop';\nconst Example = (): React.JSX.Element => (\n\t<DateTimePicker\n\t\tclearControlLabel=\"Clear date / time picker (editable times)\"\n\t\tdefaultValue=\"2018-01-02T14:30+10:00\"\n\t\tonChange={__noop}\n\t\ttimePickerProps={{\n\t\t\ttimeIsEditable: true,\n\t\t\tlabel: 'Time picker (editable)',\n\t\t}}\n\t\tdatePickerProps={{\n\t\t\tlabel: 'Date picker (editable times)',\n\t\t\tshouldShowCalendarButton: true,\n\t\t\topenCalendarLabel: 'open calendar',\n\t\t}}\n\t/>\n);\nexport default Example;"],
1244
1295
  accessibilityGuidelines: ['Ensure proper keyboard navigation', 'Use appropriate date/time formats', 'Provide clear date/time labels', 'Consider screen reader announcements'],
1245
1296
  usageGuidelines: ['Use for combined date and time selection', 'Provide clear date/time formats', 'Handle timezone considerations', 'Consider validation requirements'],
1246
1297
  contentGuidelines: ['Use clear, descriptive labels', 'Provide helpful placeholder text', 'Use appropriate date/time formats', 'Keep labels concise but descriptive'],
1247
1298
  props: [{
1248
1299
  name: 'aria-describedby',
1249
- description: 'Used to associate accessible descriptions to both the date and time\npicker. If you want to associate individual accessible descriptions, this\nshould be done through the `aria-describedby` props on the\n`datePickerProps` and `timePickerProps`.\nUsed to associate accessible descriptions to both the date and time\npicker. If you want to associate individual accessible descriptions, this\nshould be done through the `aria-describedby` props on the\n`datePickerProps` and `timePickerProps`.',
1300
+ description: 'Used to associate accessible descriptions to both the date and time\npicker. If you want to associate individual accessible descriptions, this\nshould be done through the `aria-describedby` props on the\n`datePickerProps` and `timePickerProps`.',
1250
1301
  type: 'string'
1251
1302
  }, {
1252
1303
  name: 'autoFocus',
1253
- description: 'Set the picker to autofocus on mount.\nSet the picker to autofocus on mount.',
1304
+ description: 'Set the picker to autofocus on mount.',
1254
1305
  type: 'boolean'
1255
1306
  }, {
1256
1307
  name: 'clearControlLabel',
1257
- description: 'Set the `aria-label` for the clear button.\nAdd the word "Clear" at the beginning of the clearControlLabel.\nFor instance, for a field to set an appointment, use "Clear appointment date and time".\nSet the `aria-label` for the clear button.\nAdd the word "Clear" at the beginning of the clearControlLabel.\nFor instance, for a field to set an appointment, use "Clear appointment date and time".',
1308
+ description: 'Set the `aria-label` for the clear button.\nAdd the word "Clear" at the beginning of the clearControlLabel.\nFor instance, for a field to set an appointment, use "Clear appointment date and time".',
1258
1309
  type: 'string'
1259
1310
  }, {
1260
1311
  name: 'datePickerProps',
1261
- description: 'Props applied to the `DatePicker`.\nProps applied to the `DatePicker`.',
1312
+ description: 'Props applied to the `DatePicker`.',
1262
1313
  type: 'DatePickerBaseProps'
1263
1314
  }, {
1264
1315
  name: 'defaultValue',
1265
- description: 'The default for `value`.\nThe default for `value`.',
1316
+ description: 'The default for `value`.',
1266
1317
  type: 'string'
1267
1318
  }, {
1268
1319
  name: 'id',
1269
- description: 'Set the id of the field.\nSet the id of the field.',
1320
+ description: 'Set the id of the field.',
1270
1321
  type: 'string'
1271
1322
  }, {
1272
1323
  name: 'isDisabled',
1273
- description: 'Set if the field is disabled.\nSet if the field is disabled.',
1324
+ description: 'Set if the field is disabled.',
1274
1325
  type: 'boolean'
1275
1326
  }, {
1276
1327
  name: 'isInvalid',
1277
- description: 'Set if the picker has an invalid value.\nSet if the picker has an invalid value.',
1328
+ description: 'Set if the picker has an invalid value.',
1278
1329
  type: 'boolean'
1279
1330
  }, {
1280
1331
  name: 'isRequired',
1281
- description: 'Set the field as required.\nSet the field as required.',
1332
+ description: 'Set the field as required.',
1282
1333
  type: 'boolean'
1283
1334
  }, {
1284
1335
  name: 'locale',
1285
- description: 'Locale used for formatting dates and times. See [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat).\nLocale used for formatting dates and times. See [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat).',
1336
+ description: 'Locale used for formatting dates and times. See [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat).',
1286
1337
  type: 'string'
1287
1338
  }, {
1288
1339
  name: 'name',
1289
- description: 'The name of the field.\nThe name of the field.',
1340
+ description: 'The name of the field.',
1290
1341
  type: 'string'
1291
1342
  }, {
1292
1343
  name: 'onBlur',
1293
- description: 'Called when the field is blurred.\nCalled when the field is blurred.',
1344
+ description: 'Called when the field is blurred.',
1294
1345
  type: '(event: FocusEvent<HTMLInputElement, Element>) => void'
1295
1346
  }, {
1296
1347
  name: 'onChange',
1297
- description: 'Called when the value changes and the date / time is a complete value, or empty. The only value is an ISO string or empty string.\nCalled when the value changes and the date / time is a complete value, or empty. The only value is an ISO string or empty string.',
1298
- type: '(value: string) => void'
1348
+ description: 'Called when the value changes and the date / time is a complete value, or empty. The only value is an ISO string or empty string.',
1349
+ type: '((value: string) => void) & ((value: string) => void)'
1299
1350
  }, {
1300
1351
  name: 'onFocus',
1301
- description: 'Called when the field is focused.\nCalled when the field is focused.',
1352
+ description: 'Called when the field is focused.',
1302
1353
  type: '(event: FocusEvent<HTMLInputElement, Element>) => void'
1303
1354
  }, {
1304
1355
  name: 'parseValue',
1305
- description: 'Function used to parse datetime values into their date, time and timezone sub-values. *\nFunction used to parse datetime values into their date, time and timezone sub-values. *',
1306
- type: '(dateTimeValue: string, date: string, time: string, timezone: string) => { dateValue: string; timeValue: string; zoneValue: string; }'
1356
+ description: 'Function used to parse datetime values into their date, time and timezone sub-values. *',
1357
+ type: '((dateTimeValue: string, date: string, time: string, timezone: string) => { dateValue: string; timeValue: string; zoneValue: string; }) & ((dateTimeValue: string, date: string, time: string, timezone: string) => { ...; })'
1307
1358
  }, {
1308
1359
  name: 'spacing',
1309
- description: 'The spacing for the select control.\n\nCompact is `gridSize() * 4`, default is `gridSize() * 5`.\nThe spacing for the select control.\n\nCompact is `gridSize() * 4`, default is `gridSize() * 5`.',
1360
+ description: 'The spacing for the select control.\n\nCompact is `gridSize() * 4`, default is `gridSize() * 5`.',
1310
1361
  type: '"default" | "compact"'
1311
1362
  }, {
1312
1363
  name: 'timePickerProps',
1313
- description: 'Props applied to the `TimePicker`.\nProps applied to the `TimePicker`.',
1364
+ description: 'Props applied to the `TimePicker`.',
1314
1365
  type: 'TimePickerBaseProps'
1315
1366
  }, {
1316
1367
  name: 'value',
1317
- description: 'The ISO time that should be used as the input value.\nThe ISO time that should be used as the input value.',
1368
+ description: 'The ISO time that should be used as the input value.',
1318
1369
  type: 'string'
1319
1370
  }]
1320
1371
  }, {
@@ -1331,7 +1382,8 @@ var components = exports.components = [{
1331
1382
  props: [{
1332
1383
  name: 'autoFocusFirstElem',
1333
1384
  description: 'Controls whether to focus the first tabbable element inside the focus lock. Set to `true` by default.',
1334
- type: 'boolean'
1385
+ type: 'boolean',
1386
+ defaultValue: 'true'
1335
1387
  }, {
1336
1388
  name: 'children',
1337
1389
  description: 'The content of the drawer.',
@@ -1343,11 +1395,13 @@ var components = exports.components = [{
1343
1395
  }, {
1344
1396
  name: 'isFocusLockEnabled',
1345
1397
  description: 'Enable this to keep focus inside the component until it’s closed. This is strongly recommended, as it prevents people who use assistive technology from accidentally navigating out of the drawer using the tab key.',
1346
- type: 'boolean'
1398
+ type: 'boolean',
1399
+ defaultValue: 'true'
1347
1400
  }, {
1348
1401
  name: 'isOpen',
1349
1402
  description: 'Controls if the drawer is open or closed.',
1350
- type: 'boolean'
1403
+ type: 'boolean',
1404
+ isRequired: true
1351
1405
  }, {
1352
1406
  name: 'label',
1353
1407
  description: 'This is an `aria-label` attribute. It sets an accessible name for the drawer wrapper, for people who use assistive technology.\nUsage of either this, or the `titleId` attribute is strongly recommended.',
@@ -1371,7 +1425,8 @@ var components = exports.components = [{
1371
1425
  }, {
1372
1426
  name: 'shouldReturnFocus',
1373
1427
  description: 'ReturnFocus controls what happens when the user exits focus lock mode.\nIf true, focus returns to the trigger element . If false, focus remains where it was when the FocusLock was deactivated.\nIf ref is passed, focus returns to that specific ref element.',
1374
- type: 'boolean | React.RefObject<HTMLElement>'
1428
+ type: 'boolean | React.RefObject<HTMLElement>',
1429
+ defaultValue: 'true'
1375
1430
  }, {
1376
1431
  name: 'titleId',
1377
1432
  description: "This is an ID referenced by the drawer wrapper's `aria-labelledby` attribute. This ID should be assigned to the drawer `title` element.\nUsage of either this, or the `label` attribute is strongly recommended.",
@@ -1379,11 +1434,13 @@ var components = exports.components = [{
1379
1434
  }, {
1380
1435
  name: 'width',
1381
1436
  description: 'Sets the width of the drawer.',
1382
- type: '"extended" | "full" | "medium" | "narrow" | "wide"'
1437
+ type: '"extended" | "full" | "medium" | "narrow" | "wide"',
1438
+ defaultValue: '"narrow"'
1383
1439
  }, {
1384
1440
  name: 'zIndex',
1385
1441
  description: 'Z-index that the popup should be displayed in.\nThis is passed to the portal component.\nDefaults to `unset`.',
1386
- type: 'number | "unset"'
1442
+ type: 'number | "unset"',
1443
+ defaultValue: '"unset"'
1387
1444
  }]
1388
1445
  }, {
1389
1446
  name: 'DrawerContent',
@@ -1406,7 +1463,7 @@ var components = exports.components = [{
1406
1463
  }, {
1407
1464
  name: 'xcss',
1408
1465
  description: '',
1409
- type: 'false | (XCSSValue<"backgroundColor" | "marginTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "padding", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
1466
+ type: 'false | (XCSSValue<"backgroundColor" | "marginBlockStart" | "marginTop" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "padding", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
1410
1467
  }]
1411
1468
  }, {
1412
1469
  name: 'DrawerSidebar',
@@ -1444,7 +1501,8 @@ var components = exports.components = [{
1444
1501
  }, {
1445
1502
  name: 'label',
1446
1503
  description: 'This is the accessible name for the close/back control of the drawer. The default is "Close drawer".',
1447
- type: 'string'
1504
+ type: 'string',
1505
+ defaultValue: '"Close drawer"'
1448
1506
  }]
1449
1507
  }, {
1450
1508
  name: 'DropdownMenu',
@@ -1464,7 +1522,8 @@ var components = exports.components = [{
1464
1522
  }, {
1465
1523
  name: 'autoFocus',
1466
1524
  description: 'Controls if the first menu item receives focus when menu is opened. Note that the menu has a focus lock\nwhich traps the focus within the menu. The first item gets focus automatically\nif the menu is triggered using the keyboard.',
1467
- type: 'boolean'
1525
+ type: 'boolean',
1526
+ defaultValue: 'false'
1468
1527
  }, {
1469
1528
  name: 'children',
1470
1529
  description: 'Content that will be rendered inside the layer element. Should typically be\n`DropdownItemGroup` or `DropdownItem`, or the checkbox and radio variants of those.',
@@ -1472,11 +1531,13 @@ var components = exports.components = [{
1472
1531
  }, {
1473
1532
  name: 'defaultOpen',
1474
1533
  description: 'Controls the initial open state of the dropdown. If provided, the component is considered to be controlled\nwhich means that the user is responsible for managing the open and close state of the menu.\nUsing `defaultOpen` may cause accessiblity issues because it will automatically shift focus to the first menu item; which can be disorienting.\nOnly use this if action on the menu is required to proceed.',
1475
- type: 'boolean'
1534
+ type: 'boolean',
1535
+ defaultValue: 'false'
1476
1536
  }, {
1477
1537
  name: 'isLoading',
1478
1538
  description: 'If true, a spinner is rendered instead of the items.',
1479
- type: 'boolean'
1539
+ type: 'boolean',
1540
+ defaultValue: 'false'
1480
1541
  }, {
1481
1542
  name: 'isOpen',
1482
1543
  description: 'Controls the open state of the dropdown.',
@@ -1492,11 +1553,13 @@ var components = exports.components = [{
1492
1553
  }, {
1493
1554
  name: 'onOpenChange',
1494
1555
  description: 'Called when the menu should be open/closed. Receives an object with `isOpen` state.\n\nIf the dropdown was closed programatically, the `event` parameter will be `null`.',
1495
- type: '(args: OnOpenChangeArgs) => void'
1556
+ type: '(args: OnOpenChangeArgs) => void',
1557
+ defaultValue: 'noop'
1496
1558
  }, {
1497
1559
  name: 'placement',
1498
1560
  description: 'Position of the menu.',
1499
- type: '"auto-start" | "auto" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left" | "left-start"'
1561
+ type: '"auto-start" | "auto" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left" | "left-start"',
1562
+ defaultValue: '"bottom-start"'
1500
1563
  }, {
1501
1564
  name: 'returnFocusRef',
1502
1565
  description: 'If ref is passed, focus returns to that specific ref element after dropdown dismissed.',
@@ -1504,15 +1567,23 @@ var components = exports.components = [{
1504
1567
  }, {
1505
1568
  name: 'shouldFitContainer',
1506
1569
  description: "This fits the dropdown menu width to its parent's width.\nWhen set to `true`, the trigger and dropdown menu elements will be wrapped in a `div` with `position: relative`.\nThe dropdown menu will be rendered as a sibling to the trigger element, and will be full width.\nThe default is `false`.\n\nThis fits the dropdown menu width to its parent's width.\nWhen set to `true`, the trigger and dropdown menu elements will be wrapped in a `div` with `position: relative`.\nThe dropdown menu will be rendered as a sibling to the trigger element, and will be full width.\nThe default is `false`.",
1507
- type: 'boolean'
1570
+ type: 'boolean',
1571
+ defaultValue: 'false'
1508
1572
  }, {
1509
1573
  name: 'shouldFlip',
1510
1574
  description: 'Allows the dropdown menu to be placed on the opposite side of its trigger if it does not\nfit in the viewport.',
1511
- type: 'boolean'
1575
+ type: 'boolean',
1576
+ defaultValue: 'true'
1577
+ }, {
1578
+ name: 'shouldPreventEscapePropagation',
1579
+ description: 'When set to true, will call stopPropagation on the ESCAPE key event.\nThis prevents the ESCAPE event from bubbling up to parent elements.',
1580
+ type: 'boolean',
1581
+ defaultValue: 'false'
1512
1582
  }, {
1513
1583
  name: 'shouldRenderToParent',
1514
1584
  description: 'Controls whether the popup is rendered inline within its parent component or in a portal at the document root.\n`true` renders the dropdown menu in the DOM node closest to the trigger; focus is not trapped inside the element.\n`false` renders the dropdown menu in React.Portal and focus is trapped inside the element.\nDefaults to `false`.\nControls whether the popup is rendered inline within its parent component or in a portal at the document root.\n`true` renders the dropdown menu in the DOM node closest to the trigger; focus is not trapped inside the element.\n`false` renders the dropdown menu in React.Portal and focus is trapped inside the element.\nDefaults to `false`.',
1515
- type: 'boolean'
1585
+ type: 'boolean',
1586
+ defaultValue: 'false'
1516
1587
  }, {
1517
1588
  name: 'spacing',
1518
1589
  description: 'Controls the spacing density of the menu.',
@@ -1532,7 +1603,8 @@ var components = exports.components = [{
1532
1603
  }, {
1533
1604
  name: 'zIndex',
1534
1605
  description: 'Z-index that the popup should be displayed in.\nThis is passed to the portal component.\nDefaults to `layers.modal()` from `@atlaskit/theme` which is 510.',
1535
- type: 'number'
1606
+ type: 'number',
1607
+ defaultValue: '510'
1536
1608
  }]
1537
1609
  }, {
1538
1610
  name: 'EmptyState',
@@ -1556,15 +1628,18 @@ var components = exports.components = [{
1556
1628
  }, {
1557
1629
  name: 'header',
1558
1630
  description: 'Title that briefly describes the page to the user.',
1559
- type: 'string'
1631
+ type: 'string',
1632
+ isRequired: true
1560
1633
  }, {
1561
1634
  name: 'headingLevel',
1562
1635
  description: 'The value used to set the heading level of the header element.\nMust be in the range of 1 to 6. Defaults to 4.',
1563
- type: 'number'
1636
+ type: 'number',
1637
+ defaultValue: '4'
1564
1638
  }, {
1565
1639
  name: 'headingSize',
1566
1640
  description: 'The keyword used to set the visual appearance of the header element.\nDefaults to "medium". "xsmall" can be used for empty states in smaller contexts such as popups.',
1567
- type: '"xsmall" | "medium"'
1641
+ type: '"xsmall" | "medium"',
1642
+ defaultValue: '"medium"'
1568
1643
  }, {
1569
1644
  name: 'imageHeight',
1570
1645
  description: 'Height of the image that is rendered in EmptyState component.\nUseful when you want image to be of exact height to stop it bouncing around when loading in.\nOnly set `height` if you want the image to resize down on smaller devices.',
@@ -1584,11 +1659,13 @@ var components = exports.components = [{
1584
1659
  }, {
1585
1660
  name: 'maxImageHeight',
1586
1661
  description: 'Maximum height (in pixels) of the image, default value is 160.',
1587
- type: 'number'
1662
+ type: 'number',
1663
+ defaultValue: '160'
1588
1664
  }, {
1589
1665
  name: 'maxImageWidth',
1590
1666
  description: 'Maximum width (in pixels) of the image, default value is 160.',
1591
- type: 'number'
1667
+ type: 'number',
1668
+ defaultValue: '160'
1592
1669
  }, {
1593
1670
  name: 'primaryAction',
1594
1671
  description: 'Primary action button for the page, usually it will be something like "Create" (or "Retry" for error pages).',
@@ -1640,7 +1717,7 @@ var components = exports.components = [{
1640
1717
  }, {
1641
1718
  name: 'description',
1642
1719
  description: 'The secondary content shown below the flag title.',
1643
- type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
1720
+ type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
1644
1721
  }, {
1645
1722
  name: 'headingLevel',
1646
1723
  description: 'Specifies the heading level in the document structure.\nIf not specified, the default is `2`.',
@@ -1648,19 +1725,20 @@ var components = exports.components = [{
1648
1725
  }, {
1649
1726
  name: 'icon',
1650
1727
  description: 'The icon displayed in the top-left of the flag. Should be an instance of `@atlaskit/icon`.\nYour icon will receive the appropriate default color, which you can override by setting\nthe `color` prop on the icon to your preferred icon color.\nIf no icon is provided, a default icon will be used based on the appearance prop.',
1651
- type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
1728
+ type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
1652
1729
  }, {
1653
1730
  name: 'id',
1654
1731
  description: 'A unique identifier used for rendering and onDismissed callbacks.',
1655
- type: 'string | number'
1732
+ type: 'string | number',
1733
+ isRequired: true
1656
1734
  }, {
1657
1735
  name: 'linkComponent',
1658
1736
  description: 'A link component that is passed down to the `@atlaskit/button` used by actions,\nto allow custom routers to be used. See the\n[button with router](https://atlaskit.atlassian.com/packages/design-system/button/example/ButtonWithRouter)\nexample of what this component should look like.',
1659
- type: 'ComponentClass<CustomThemeButtonProps, any> | FunctionComponent<CustomThemeButtonProps>'
1737
+ type: 'React.ComponentClass<CustomThemeButtonProps, any> | React.FunctionComponent<CustomThemeButtonProps>'
1660
1738
  }, {
1661
1739
  name: 'onBlur',
1662
1740
  description: 'Standard onBlur event, applied to Flag by AutoDismissFlag.',
1663
- type: '(e: FocusEvent<HTMLElement, Element>, analyticsEvent: UIAnalyticsEvent) => void'
1741
+ type: '(e: React.FocusEvent<HTMLElement, Element>, analyticsEvent: UIAnalyticsEvent) => void'
1664
1742
  }, {
1665
1743
  name: 'onDismissed',
1666
1744
  description: "Handler which will be called when a Flag's dismiss button is clicked.\nReceives the id of the dismissed Flag as a parameter.",
@@ -1668,19 +1746,20 @@ var components = exports.components = [{
1668
1746
  }, {
1669
1747
  name: 'onFocus',
1670
1748
  description: 'Standard onFocus event, applied to Flag by AutoDismissFlag.',
1671
- type: '(e: FocusEvent<HTMLElement, Element>, analyticsEvent: UIAnalyticsEvent) => void'
1749
+ type: '(e: React.FocusEvent<HTMLElement, Element>, analyticsEvent: UIAnalyticsEvent) => void'
1672
1750
  }, {
1673
1751
  name: 'onMouseOut',
1674
1752
  description: 'Standard onMouseOut event, applied to Flag by AutoDismissFlag.',
1675
- type: '(event: MouseEvent<Element, globalThis.MouseEvent>) => void'
1753
+ type: '(event: React.MouseEvent<Element, MouseEvent>) => void'
1676
1754
  }, {
1677
1755
  name: 'onMouseOver',
1678
1756
  description: 'Standard onMouseOver event, applied to Flag by AutoDismissFlag.',
1679
- type: '(event: MouseEvent<Element, globalThis.MouseEvent>) => void'
1757
+ type: '(event: React.MouseEvent<Element, MouseEvent>) => void'
1680
1758
  }, {
1681
1759
  name: 'title',
1682
1760
  description: 'The bold text shown at the top of the flag.',
1683
- type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
1761
+ type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
1762
+ isRequired: true
1684
1763
  }]
1685
1764
  }, {
1686
1765
  name: 'Form',
@@ -1700,7 +1779,8 @@ var components = exports.components = [{
1700
1779
  }, {
1701
1780
  name: 'children',
1702
1781
  description: 'The contents rendered inside of the form. This is a function where the props will be passed from the form. The function props you can access are `dirty`, `submitting` and `disabled`.\nYou can read more about these props in [react-final form documentation](https://final-form.org/docs/final-form/types/FormState).\n\nIf you are only spreading `formProps` onto the HTML `<form>` element and not using any of the other props (like `submitting`, etc.), `children` can be plain JSX. All of the children will be wrapped within an HTML `<form>` element that includes all necessary props, including those provided on the form component.',
1703
- type: '(() => void) | React.ReactNode | ((args: FormChildrenArgs<FormValues>) => React.ReactNode)'
1782
+ type: '(() => void) | React.ReactNode | ((args: FormChildrenArgs<FormValues>) => React.ReactNode)',
1783
+ isRequired: true
1704
1784
  }, {
1705
1785
  name: 'formProps',
1706
1786
  description: 'When `Form` renders JSX children directly and not using a function to\nspread `formProps` manually, the properties in this `formProps` prop will\nbe spread on an internally rendered HTML `form` element.',
@@ -1732,7 +1812,8 @@ var components = exports.components = [{
1732
1812
  }, {
1733
1813
  name: 'onSubmit',
1734
1814
  description: 'Event handler called when the form is submitted. Fields must be free of validation errors.',
1735
- type: '(values: FormValues, form: FormApi<FormValues>, callback?: (errors?: Record<string, string>) => void) => void | Object | Promise<...>'
1815
+ type: '(values: FormValues, form: FormApi<FormValues>, callback?: (errors?: Record<string, string>) => void) => void | Object | Promise<...>',
1816
+ isRequired: true
1736
1817
  }, {
1737
1818
  name: 'xcss',
1738
1819
  description: 'Apply a subset of permitted styles powered by Atlassian Design System design tokens.',
@@ -1745,30 +1826,32 @@ var components = exports.components = [{
1745
1826
  category: 'primitive',
1746
1827
  description: 'A component for creating accessible, consistently styled headings with proper hierarchy. Headings are sized to contrast with content, increase visual hierarchy, and help readers easily understand the structure of content.',
1747
1828
  status: 'general-availability',
1748
- examples: ['import Heading from \'@atlaskit/heading\';\nexport default [\n\t<Heading size="xxlarge">Page Title</Heading>,\n\t<Heading size="large" color="color.text.inverse">\n\t\tInverted section title\n\t</Heading>,\n];'],
1829
+ examples: ['import Heading from \'@atlaskit/heading\';\nconst _default_1: React.JSX.Element[] = [\n\t<Heading size="xxlarge">Page Title</Heading>,\n\t<Heading size="large" color="color.text.inverse">\n\t\tInverted section title\n\t</Heading>,\n];\nexport default _default_1;'],
1749
1830
  accessibilityGuidelines: ['Maintain proper heading hierarchy (h1 to h6)', 'Use only one h1 per page for main page titles', 'Ensure minimum 4.5:1 color contrast for text readability', 'Use clear, descriptive heading text that describes the content below'],
1750
1831
  usageGuidelines: ['Use the `HeadingContextProvider` offering to maintain heading levels in complex layouts', 'Maintain proper heading hierarchy', 'Keep headings concise and meaningful', 'Use sentence case for most headings', 'Use the `color` prop for inverse text on dark backgrounds', 'Do NOT use any inline styles, you must use the `size` (required) and `color` (optional) props available'],
1751
1832
  contentGuidelines: ['Use clear, descriptive heading text', 'Maintain proper heading hierarchy', 'Keep headings concise and meaningful', 'Use sentence case for most headings', 'Make headings descriptive of the content that follows'],
1752
1833
  props: [{
1753
1834
  name: 'as',
1754
- description: 'Allows the component to be rendered as the specified DOM element, overriding a default element set by `level` prop.',
1835
+ description: 'Allows the component to be rendered as the specified HTML element, overriding a default element set by the `size` prop.',
1755
1836
  type: '"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span"'
1756
1837
  }, {
1757
1838
  name: 'children',
1758
1839
  description: 'The text of the heading.',
1759
- type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
1840
+ type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
1841
+ isRequired: true
1760
1842
  }, {
1761
1843
  name: 'color',
1762
1844
  description: 'Token representing text color with a built-in fallback value.\nWill apply inverse text color automatically if placed within a Box with bold background color.\nDefaults to `color.text`.',
1763
1845
  type: '"color.text" | "color.text.inverse" | "color.text.warning.inverse"'
1764
1846
  }, {
1765
1847
  name: 'id',
1766
- description: 'Unique identifier for the heading DOM element.',
1848
+ description: 'Unique identifier for the heading HTML element.',
1767
1849
  type: 'string'
1768
1850
  }, {
1769
1851
  name: 'size',
1770
- description: 'Heading size. This value is detached from the specific heading level applied to allow for more flexibility.\nUse instead of the deprecated `level` prop.',
1771
- type: '"xxlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall" | "xxsmall"'
1852
+ description: 'Determines which text styles are applied. A corresponding HTML element is automatically applied from h1 to h6 based on the size.\nThis can be overriden using the `as` prop to allow for more flexibility.',
1853
+ type: '"xxlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall" | "xxsmall"',
1854
+ isRequired: true
1772
1855
  }]
1773
1856
  }, {
1774
1857
  name: 'HeadingContextProvider',
@@ -1777,13 +1860,14 @@ var components = exports.components = [{
1777
1860
  category: 'primitive',
1778
1861
  description: 'A context provider that allows you to configure the default HTML heading level for all headings within its subtree. Useful for maintaining proper heading hierarchy in complex layouts.',
1779
1862
  status: 'general-availability',
1780
- examples: ['import Heading, { HeadingContextProvider } from \'@atlaskit/heading\';\nexport default [\n\t<HeadingContextProvider>\n\t\t<Heading size="xxlarge">h1</Heading>\n\t\t<Heading size="medium">h2</Heading>\n\t\t<Heading size="large">h3</Heading>\n\t</HeadingContextProvider>,\n];'],
1863
+ examples: ['import Heading, { HeadingContextProvider } from \'@atlaskit/heading\';\nconst _default_1: React.JSX.Element[] = [\n\t<HeadingContextProvider>\n\t\t<Heading size="xxlarge">h1</Heading>\n\t\t<Heading size="medium">h2</Heading>\n\t\t<Heading size="large">h3</Heading>\n\t</HeadingContextProvider>,\n];\nexport default _default_1;'],
1781
1864
  usageGuidelines: ['Wrap sections that need different heading hierarchy', 'Use for complex layouts where heading levels need adjustment'],
1782
1865
  contentGuidelines: ['Ensure proper heading hierarchy is maintained', 'Use clear, descriptive heading text', 'Keep headings concise and meaningful'],
1783
1866
  props: [{
1784
1867
  name: 'children',
1785
1868
  description: 'Semantic hierarchy of content below the heading context.',
1786
- type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
1869
+ type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
1870
+ isRequired: true
1787
1871
  }, {
1788
1872
  name: 'value',
1789
1873
  description: 'Optional - only apply this value if the intent is to reset the heading context outside the normal content flow, for example inside a `section`.',
@@ -1796,7 +1880,7 @@ var components = exports.components = [{
1796
1880
  category: 'images-and-icons',
1797
1881
  description: 'An icon is a symbol representing a command, device, directory, or common action.',
1798
1882
  status: 'general-availability',
1799
- examples: ["import AddIcon from '@atlaskit/icon/core/add';\nimport DeleteIcon from '@atlaskit/icon/core/delete';\nimport StarIcon from '@atlaskit/icon/core/star-starred';\nimport { token } from '@atlaskit/tokens';\nexport default [\n\t<AddIcon label=\"Add\" />,\n\t<StarIcon label=\"Star\" color=\"currentColor\" />,\n\t<DeleteIcon label=\"Delete\" color={token('color.icon.danger')} />,\n];"],
1883
+ examples: ["import AddIcon from '@atlaskit/icon/core/add';\nimport DeleteIcon from '@atlaskit/icon/core/delete';\nimport StarIcon from '@atlaskit/icon/core/star-starred';\nimport { token } from '@atlaskit/tokens';\nconst _default_1: React.JSX.Element[] = [\n\t<AddIcon label=\"Add\" />,\n\t<StarIcon label=\"Star\" color=\"currentColor\" />,\n\t<DeleteIcon label=\"Delete\" color={token('color.icon.danger')} />,\n];\nexport default _default_1;"],
1800
1884
  accessibilityGuidelines: ['Provide appropriate alt text or labels for icons', 'Use meaningful icon choices that convey clear meaning', 'Ensure sufficient color contrast for icon visibility', 'Consider icon size for touch targets', 'Use consistent iconography across the interface'],
1801
1885
  usageGuidelines: ['Use icons to enhance visual communication', 'Choose icons that clearly represent their function', 'Maintain consistent icon style and size', 'Use appropriate icon sizes for different contexts', 'Consider cultural and contextual icon meanings'],
1802
1886
  contentGuidelines: ['Use clear, recognizable icon symbols', 'Ensure icons are culturally appropriate', 'Maintain visual consistency across icon sets', 'Use appropriate icon labels and descriptions'],
@@ -1815,7 +1899,8 @@ var components = exports.components = [{
1815
1899
  }, {
1816
1900
  name: 'label',
1817
1901
  description: 'Text used to describe what the icon is in context.',
1818
- type: 'string'
1902
+ type: 'string',
1903
+ isRequired: true
1819
1904
  }, {
1820
1905
  name: 'primaryColor',
1821
1906
  description: 'Primary color for the icon.\nInherits the current font color by default.',
@@ -1836,22 +1921,25 @@ var components = exports.components = [{
1836
1921
  category: 'images-and-icons',
1837
1922
  description: 'A tile component that displays an icon with customizable background, shape, and appearance.',
1838
1923
  status: 'release-candidate',
1839
- examples: ['import { IconTile } from \'@atlaskit/icon\';\nimport AddIcon from \'@atlaskit/icon/core/add\';\nexport default [\n\t<IconTile icon={AddIcon} label="Add" appearance="redBold" />,\n\t<IconTile icon={AddIcon} label="Add" shape="circle" appearance="blue" />,\n];'],
1924
+ examples: ['import { IconTile } from \'@atlaskit/icon\';\nimport AddIcon from \'@atlaskit/icon/core/add\';\nconst _default_1: React.JSX.Element[] = [\n\t<IconTile icon={AddIcon} label="Add" appearance="redBold" />,\n\t<IconTile icon={AddIcon} label="Add" shape="circle" appearance="blue" />,\n];\nexport default _default_1;'],
1840
1925
  accessibilityGuidelines: ['Provide appropriate labels for icon tiles', 'Ensure sufficient color contrast', 'Use meaningful icon choices', 'Consider touch target sizes'],
1841
1926
  usageGuidelines: ['Use for icon presentation with background styling', 'Choose appropriate shapes and appearances', 'Maintain consistent sizing across tiles', 'Use for visual emphasis or categorization'],
1842
1927
  contentGuidelines: ['Use clear, recognizable icons', 'Choose appropriate colors and shapes', 'Ensure visual consistency across tiles'],
1843
1928
  props: [{
1844
1929
  name: 'appearance',
1845
1930
  description: 'The appearance of the tile',
1846
- type: '"gray" | "blue" | "teal" | "green" | "lime" | "yellow" | "orange" | "red" | "magenta" | "purple" | "grayBold" | "blueBold" | "tealBold" | "greenBold" | "limeBold" | "yellowBold" | "orangeBold" | "redBold" | "magentaBold" | "purpleBold"'
1931
+ type: '"gray" | "blue" | "teal" | "green" | "lime" | "yellow" | "orange" | "red" | "magenta" | "purple" | "grayBold" | "blueBold" | "tealBold" | "greenBold" | "limeBold" | "yellowBold" | "orangeBold" | "redBold" | "magentaBold" | "purpleBold"',
1932
+ isRequired: true
1847
1933
  }, {
1848
1934
  name: 'icon',
1849
1935
  description: 'The icon to display',
1850
- type: 'React.ComponentClass<NewCoreIconProps, any> | React.FunctionComponent<NewCoreIconProps>'
1936
+ type: 'React.ComponentClass<NewCoreIconProps, any> | React.FunctionComponent<NewCoreIconProps>',
1937
+ isRequired: true
1851
1938
  }, {
1852
1939
  name: 'label',
1853
1940
  description: 'The label for the icon',
1854
- type: 'string'
1941
+ type: 'string',
1942
+ isRequired: true
1855
1943
  }, {
1856
1944
  name: 'size',
1857
1945
  description: 'Size of the tile, in pixels. Defaults to `24`.\n\nNow supports both semantic t-shirt size names and pixel number values. Pixel number values are deprecated and will be removed in a future release, however they will both be available and backwards-compatible during a transition period.\n\nSize `16` will not have a replacement after deprecation, and should be replaced with direct icons without a tile or enlarging to the next available size `xsmall`.\n\nAll available sizes:\n- `16` (deprecated)\n- `xsmall` (new)\n- `small` or `24`\n- `medium` or `32`\n- `large` or `40`\n- `xlarge` or `48`',
@@ -1891,11 +1979,13 @@ var components = exports.components = [{
1891
1979
  props: [{
1892
1980
  name: 'children',
1893
1981
  description: 'The elements that the InlineDialog will be positioned relative to.',
1894
- type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
1982
+ type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
1983
+ isRequired: true
1895
1984
  }, {
1896
1985
  name: 'content',
1897
1986
  description: 'The elements to be displayed within the InlineDialog.',
1898
- type: 'ReactNode | (() => ReactNode)'
1987
+ type: 'ReactNode | (() => ReactNode)',
1988
+ isRequired: true
1899
1989
  }, {
1900
1990
  name: 'fallbackPlacements',
1901
1991
  description: "This is a list of backup placements to try.\nWhen the preferred placement doesn't have enough space,\nthe modifier will test the ones provided in the list, and use the first suitable one.\nIf no fallback placements are suitable, it reverts back to the original placement.",
@@ -1951,7 +2041,8 @@ var components = exports.components = [{
1951
2041
  }, {
1952
2042
  name: 'defaultValue',
1953
2043
  description: 'The user input entered into the field during `editView`. This value is updated and saved by `onConfirm`.',
1954
- type: 'any'
2044
+ type: 'any',
2045
+ isRequired: true
1955
2046
  }, {
1956
2047
  name: 'editButtonLabel',
1957
2048
  description: 'Accessibility label for button, which is used to enter `editView` from keyboard.',
@@ -1963,7 +2054,8 @@ var components = exports.components = [{
1963
2054
  }, {
1964
2055
  name: 'editView',
1965
2056
  description: 'The component shown when user is editing (when the inline edit is not in `readView`).',
1966
- type: '(fieldProps: ExtendedFieldProps<FieldValue>, ref: React.RefObject<any>) => React.ReactNode'
2057
+ type: '(fieldProps: ExtendedFieldProps<FieldValue>, ref: React.RefObject<any>) => React.ReactNode',
2058
+ isRequired: true
1967
2059
  }, {
1968
2060
  name: 'hideActionButtons',
1969
2061
  description: 'Sets whether the confirm and cancel action buttons are displayed in the bottom right of the field.',
@@ -1991,7 +2083,8 @@ var components = exports.components = [{
1991
2083
  }, {
1992
2084
  name: 'onConfirm',
1993
2085
  description: 'Saves and confirms the value entered into the field. It exits `editView` and returns to `readView`.',
1994
- type: '(value: any, analyticsEvent: UIAnalyticsEvent) => void'
2086
+ type: '(value: any, analyticsEvent: UIAnalyticsEvent) => void',
2087
+ isRequired: true
1995
2088
  }, {
1996
2089
  name: 'onEdit',
1997
2090
  description: 'Handler called when readView is clicked.',
@@ -1999,7 +2092,8 @@ var components = exports.components = [{
1999
2092
  }, {
2000
2093
  name: 'readView',
2001
2094
  description: 'The component shown when not in `editView`. This is when the inline edit is read-only and not being edited.',
2002
- type: '() => React.ReactNode'
2095
+ type: '() => React.ReactNode',
2096
+ isRequired: true
2003
2097
  }, {
2004
2098
  name: 'readViewFitContainerWidth',
2005
2099
  description: 'Determines whether the `readView` has 100% width within its container, or whether it fits the content.',
@@ -2027,15 +2121,16 @@ var components = exports.components = [{
2027
2121
  props: [{
2028
2122
  name: 'appearance',
2029
2123
  description: 'Set the icon to be used before the title. Options are: connectivity,\nconfirmation, info, warning, and error.',
2030
- type: '"connectivity" | "confirmation" | "info" | "warning" | "error"'
2124
+ type: '"connectivity" | "confirmation" | "info" | "warning" | "error"',
2125
+ defaultValue: '"connectivity"'
2031
2126
  }, {
2032
2127
  name: 'children',
2033
2128
  description: 'The elements to be displayed by the popup.',
2034
- type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
2129
+ type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | React.ReactPortal'
2035
2130
  }, {
2036
2131
  name: 'fallbackPlacements',
2037
2132
  description: "This is a list of backup placements for the popup to try.\nWhen the preferred placement doesn't have enough space,\nthe modifier will test the ones provided in the list, and use the first suitable one.\nIf no fallback placements are suitable, it reverts back to the original placement.",
2038
- type: 'Placement[]'
2133
+ type: 'PopupPlacement[]'
2039
2134
  }, {
2040
2135
  name: 'iconLabel',
2041
2136
  description: 'Text to be used as the label for the button icon. You must use this to provide information for people who use assistive technology when there is no title and/or secondaryText.',
@@ -2043,19 +2138,23 @@ var components = exports.components = [{
2043
2138
  }, {
2044
2139
  name: 'placement',
2045
2140
  description: 'The placement to be passed to the popup. Determines where around\nthe text the dialog is displayed.',
2046
- type: 'AutoPlacement | BasePlacement | VariationPlacement'
2141
+ type: 'AutoPlacement | BasePlacement | VariationPlacement',
2142
+ defaultValue: '"bottom-start"'
2047
2143
  }, {
2048
2144
  name: 'secondaryText',
2049
2145
  description: 'Text to display second.',
2050
- type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
2146
+ type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | React.ReactPortal',
2147
+ defaultValue: '""'
2051
2148
  }, {
2052
2149
  name: 'spacing',
2053
2150
  description: 'The spacing of the underlying icon button. Options are: spacious and compact.',
2054
- type: '"spacious" | "compact"'
2151
+ type: '"spacious" | "compact"',
2152
+ defaultValue: '"spacious"'
2055
2153
  }, {
2056
2154
  name: 'title',
2057
2155
  description: 'Text to display first, bolded for emphasis.',
2058
- type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
2156
+ type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | React.ReactPortal',
2157
+ defaultValue: '""'
2059
2158
  }]
2060
2159
  }, {
2061
2160
  name: 'Link',
@@ -2064,7 +2163,7 @@ var components = exports.components = [{
2064
2163
  category: 'navigation',
2065
2164
  description: 'A component for navigation links.',
2066
2165
  status: 'general-availability',
2067
- examples: ['import Link from \'@atlaskit/link\';\nexport default [\n\t<Link href="/dashboard">Go to Dashboard</Link>,\n\t<Link href="https://atlassian.design" target="_blank">\n\t\tAtlassian Design System\n\t</Link>,\n];'],
2166
+ examples: ['import Link from \'@atlaskit/link\';\nconst _default_1: React.JSX.Element[] = [\n\t<Link href="/dashboard">Go to Dashboard</Link>,\n\t<Link href="https://atlassian.design" target="_blank">\n\t\tAtlassian Design System\n\t</Link>,\n];\nexport default _default_1;'],
2068
2167
  accessibilityGuidelines: ['Provide clear link text that describes the destination', 'Use appropriate ARIA attributes for links', 'Ensure keyboard navigation support', 'Provide clear visual indicators for link state'],
2069
2168
  usageGuidelines: ['Use for navigation to other pages or sections', 'Provide clear link text', 'Consider link behavior and target attributes', 'Use appropriate link styling'],
2070
2169
  contentGuidelines: ['Use clear, descriptive link text', 'Maintain consistent link styling', 'Consider link context and destination', "Avoid generic text like 'click here'"],
@@ -2079,7 +2178,8 @@ var components = exports.components = [{
2079
2178
  }, {
2080
2179
  name: 'href',
2081
2180
  description: 'Standard links can be provided as a string, which should be mapped to the\nunderlying router link component.\n\nAlternatively, you can provide an object for advanced link configurations\nby supplying the expected object type to the generic.\n\n@example\n```\nconst MyRouterLink = forwardRef(\n(\n {\n href,\n children,\n ...rest\n }: RouterLinkComponentProps<{\n href: string;\n replace: boolean;\n }>,\n ref: Ref<HTMLAnchorElement>,\n) => { ...\n```',
2082
- type: 'string | RouterLinkConfig'
2181
+ type: 'string | RouterLinkConfig',
2182
+ isRequired: true
2083
2183
  }, {
2084
2184
  name: 'newWindowLabel',
2085
2185
  description: 'Override the default text to signify that a link opens in a new window.\nThis is appended to the `aria-label` attribute when the `target` prop is set to `_blank`.',
@@ -2096,7 +2196,7 @@ var components = exports.components = [{
2096
2196
  category: 'brand',
2097
2197
  description: 'A component for displaying the Atlassian icon.',
2098
2198
  status: 'general-availability',
2099
- examples: ['import { AtlassianIcon } from \'@atlaskit/logo\';\nexport default [\n\t<AtlassianIcon appearance="brand" shouldUseNewLogoDesign />,\n\t<AtlassianIcon appearance="neutral" shouldUseNewLogoDesign />,\n];'],
2199
+ examples: ['import { AtlassianIcon } from \'@atlaskit/logo\';\nconst _default_1: React.JSX.Element[] = [\n\t<AtlassianIcon appearance="brand" shouldUseNewLogoDesign />,\n\t<AtlassianIcon appearance="neutral" shouldUseNewLogoDesign />,\n];\nexport default _default_1;'],
2100
2200
  accessibilityGuidelines: ['Provide appropriate alt text for the icon', 'Ensure icon visibility and contrast', 'Consider icon sizing and placement', 'Use appropriate icon variants'],
2101
2201
  usageGuidelines: ['Use for Atlassian brand representation', 'Choose appropriate icon variants', 'Consider icon sizing and placement', 'Maintain brand consistency'],
2102
2202
  props: [{
@@ -2106,7 +2206,8 @@ var components = exports.components = [{
2106
2206
  }, {
2107
2207
  name: 'label',
2108
2208
  description: "Accessible text to be used for screen readers (it's optional since the default props provide a label that matches the logo).",
2109
- type: 'string'
2209
+ type: 'string',
2210
+ defaultValue: '"Atlassian"'
2110
2211
  }, {
2111
2212
  name: 'shouldUseNewLogoDesign',
2112
2213
  description: 'For logos that support it, enables the new logo design ahead of an upcoming feature flag roll-out.',
@@ -2114,7 +2215,8 @@ var components = exports.components = [{
2114
2215
  }, {
2115
2216
  name: 'size',
2116
2217
  description: 'The size of the icon.',
2117
- type: '"xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge"'
2218
+ type: '"xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge"',
2219
+ defaultValue: 'defaultLogoParams.size'
2118
2220
  }]
2119
2221
  }, {
2120
2222
  name: 'Lozenge',
@@ -2129,8 +2231,8 @@ var components = exports.components = [{
2129
2231
  contentGuidelines: ['Use clear, concise text', 'Ensure text is meaningful and descriptive', 'Use consistent terminology across lozenges', 'Consider text length and readability'],
2130
2232
  props: [{
2131
2233
  name: 'appearance',
2132
- 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.',
2133
- type: 'ThemeAppearance | "warning" | "danger" | "information" | "neutral" | "discovery" | "accent-red" | "accent-orange" | "accent-yellow" | "accent-lime" | "accent-green" | ... 4 more ... | "accent-gray"'
2234
+ description: 'The appearance type.\nThe appearance of the lozenge. Supports legacy semantic appearances and new semantic colors.\nAccent appearance values.',
2235
+ type: 'ThemeAppearance | "warning" | "danger" | "information" | "neutral" | "discovery" | AccentColor'
2134
2236
  }, {
2135
2237
  name: 'children',
2136
2238
  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.',
@@ -2154,7 +2256,8 @@ var components = exports.components = [{
2154
2256
  props: [{
2155
2257
  name: 'children',
2156
2258
  description: 'Children of the menu group.\nThis should generally be `Section` components.',
2157
- type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
2259
+ type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
2260
+ isRequired: true
2158
2261
  }, {
2159
2262
  name: 'isLoading',
2160
2263
  description: 'Used this to tell assistive technologies that the menu group is loading.',
@@ -2190,7 +2293,8 @@ var components = exports.components = [{
2190
2293
  }, {
2191
2294
  name: 'spacing',
2192
2295
  description: 'Configure the density of the menu group content.',
2193
- type: '"compact" | "cozy"'
2296
+ type: '"cozy" | "compact"',
2297
+ defaultValue: '"cozy"'
2194
2298
  }]
2195
2299
  }, {
2196
2300
  name: 'Modal',
@@ -2294,7 +2398,8 @@ var components = exports.components = [{
2294
2398
  }, {
2295
2399
  name: 'disableTitleStyles',
2296
2400
  description: 'Content of the page title. The text wraps by default.',
2297
- type: 'boolean'
2401
+ type: 'boolean',
2402
+ defaultValue: 'false'
2298
2403
  }, {
2299
2404
  name: 'id',
2300
2405
  description: 'Used as the ID of the inner h1 tag. This is exposed so the header text can be used as label of other elements by aria-labelledby.',
@@ -2306,7 +2411,8 @@ var components = exports.components = [{
2306
2411
  }, {
2307
2412
  name: 'truncateTitle',
2308
2413
  description: 'Prevent the title from wrapping across lines. Avoid using this wherever possible, as truncation can make page headings inaccessible.',
2309
- type: 'boolean'
2414
+ type: 'boolean',
2415
+ defaultValue: 'false'
2310
2416
  }]
2311
2417
  }, {
2312
2418
  name: 'Pagination',
@@ -2322,7 +2428,7 @@ var components = exports.components = [{
2322
2428
  props: [{
2323
2429
  name: 'components',
2324
2430
  description: 'Replace the built-in page, previous, next and/ or ellipsis component',
2325
- type: '{ Page?: React.ElementType<any>; Previous?: React.ElementType<any>; Next?: React.ElementType<any>; }'
2431
+ type: '{ Page?: React.ElementType<any, keyof React.JSX.IntrinsicElements>; Previous?: React.ElementType<any, keyof React.JSX.IntrinsicElements>; Next?: React.ElementType<...>; }'
2326
2432
  }, {
2327
2433
  name: 'defaultSelectedIndex',
2328
2434
  description: 'Index of the page to be selected by default.',
@@ -2358,7 +2464,8 @@ var components = exports.components = [{
2358
2464
  }, {
2359
2465
  name: 'pages',
2360
2466
  description: 'Array of the pages to display.',
2361
- type: 'T[]'
2467
+ type: 'T[]',
2468
+ isRequired: true
2362
2469
  }, {
2363
2470
  name: 'previousLabel',
2364
2471
  description: 'The aria-label for the previous button.\nThe default value is "previous".',
@@ -2386,7 +2493,8 @@ var components = exports.components = [{
2386
2493
  props: [{
2387
2494
  name: 'children',
2388
2495
  description: 'Returns the element to be positioned.',
2389
- type: '(childrenProps: PopperChildrenProps) => React.ReactNode'
2496
+ type: '(childrenProps: PopperChildrenProps) => React.ReactNode',
2497
+ defaultValue: 'defaultChildrenFn'
2390
2498
  }, {
2391
2499
  name: 'modifiers',
2392
2500
  description: 'Additional modifiers and modifier overwrites.',
@@ -2394,23 +2502,28 @@ var components = exports.components = [{
2394
2502
  }, {
2395
2503
  name: 'offset',
2396
2504
  description: 'Distance the popup should be offset from the reference in the format of [along, away] (units in px).\nDefaults to [0, 8] - which means the popup will be 8px away from the edge of the reference specified\nby the `placement` prop.',
2397
- type: '[number, number]'
2505
+ type: '[number, number]',
2506
+ defaultValue: 'defaultOffset'
2398
2507
  }, {
2399
2508
  name: 'placement',
2400
2509
  description: 'Which side of the Reference to show on.',
2401
- type: 'AutoPlacement | BasePlacement | VariationPlacement'
2510
+ type: 'AutoPlacement | BasePlacement | VariationPlacement',
2511
+ defaultValue: '"bottom-start"'
2402
2512
  }, {
2403
2513
  name: 'referenceElement',
2404
2514
  description: 'Replacement reference element to position popper relative to.',
2405
- type: 'HTMLElement | VirtualElement'
2515
+ type: 'HTMLElement | VirtualElement',
2516
+ defaultValue: 'undefined'
2406
2517
  }, {
2407
2518
  name: 'shouldFitViewport',
2408
2519
  description: 'Determines if the popper will have a `max-width` and `max-height` set to\nconstrain it to the viewport.',
2409
- type: 'boolean'
2520
+ type: 'boolean',
2521
+ defaultValue: 'false'
2410
2522
  }, {
2411
2523
  name: 'strategy',
2412
2524
  description: "Placement strategy used. Can be 'fixed' or 'absolute'",
2413
- type: '"fixed" | "absolute"'
2525
+ type: '"fixed" | "absolute"',
2526
+ defaultValue: '"fixed"'
2414
2527
  }]
2415
2528
  }, {
2416
2529
  name: 'Popup',
@@ -2438,7 +2551,8 @@ var components = exports.components = [{
2438
2551
  }, {
2439
2552
  name: 'content',
2440
2553
  description: 'Render props for content that is displayed inside the popup.',
2441
- type: '(props: ContentProps) => ReactNode'
2554
+ type: '(props: ContentProps) => ReactNode',
2555
+ isRequired: true
2442
2556
  }, {
2443
2557
  name: 'fallbackPlacements',
2444
2558
  description: "This is a list of backup placements for the popup to try.\nWhen the preferred placement doesn't have enough space,\nthe modifier will test the ones provided in the list, and use the first suitable one.\nIf no fallback placements are suitable, it reverts back to the original placement.",
@@ -2450,7 +2564,8 @@ var components = exports.components = [{
2450
2564
  }, {
2451
2565
  name: 'isOpen',
2452
2566
  description: 'Use this to either show or hide the popup.\nWhen set to `false` the popup will not render anything to the DOM.',
2453
- type: 'boolean'
2567
+ type: 'boolean',
2568
+ isRequired: true
2454
2569
  }, {
2455
2570
  name: 'label',
2456
2571
  description: 'Refers to an `aria-label` attribute. Sets an accessible name for the popup to announce it to users of assistive technology.\nUsage of either this, or the `titleId` attribute is strongly recommended.',
@@ -2522,7 +2637,8 @@ var components = exports.components = [{
2522
2637
  }, {
2523
2638
  name: 'trigger',
2524
2639
  description: 'Render props used to anchor the popup to your content.\nMake this an interactive element,\nsuch as an `@atlaskit/button` component.',
2525
- type: '(props: TriggerProps) => ReactNode'
2640
+ type: '(props: TriggerProps) => ReactNode',
2641
+ isRequired: true
2526
2642
  }, {
2527
2643
  name: 'xcss',
2528
2644
  description: 'Bounded style overrides.',
@@ -2546,15 +2662,18 @@ var components = exports.components = [{
2546
2662
  props: [{
2547
2663
  name: 'children',
2548
2664
  description: '',
2549
- type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
2665
+ type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
2666
+ isRequired: true
2550
2667
  }, {
2551
2668
  name: 'mountStrategy',
2552
2669
  description: 'Specify the mount strategy: useEffect or useLayoutEffect.\nNote: UseLayoutEffect can lead to performance issues and is discouraged.',
2553
- type: '"effect" | "layoutEffect"'
2670
+ type: '"effect" | "layoutEffect"',
2671
+ defaultValue: '"effect"'
2554
2672
  }, {
2555
2673
  name: 'zIndex',
2556
2674
  description: '',
2557
- type: 'string | number'
2675
+ type: 'string | number',
2676
+ defaultValue: '0'
2558
2677
  }]
2559
2678
  }, {
2560
2679
  name: 'Anchor',
@@ -2563,7 +2682,7 @@ var components = exports.components = [{
2563
2682
  category: 'primitive',
2564
2683
  description: 'A primitive Anchor component for navigation links with compiled styling support.',
2565
2684
  status: 'general-availability',
2566
- examples: ['import { Anchor } from \'@atlaskit/primitives/compiled\';\nexport default [\n\t<Anchor href="https://atlassian.design">Atlassian Design System</Anchor>,\n\t<Anchor href="/docs" target="_blank">\n\t\tOpen docs\n\t</Anchor>,\n];'],
2685
+ examples: ['import { Anchor } from \'@atlaskit/primitives/compiled\';\nconst _default_1: React.JSX.Element[] = [\n\t<Anchor href="https://atlassian.design">Atlassian Design System</Anchor>,\n\t<Anchor href="/docs" target="_blank">\n\t\tOpen docs\n\t</Anchor>,\n];\nexport default _default_1;'],
2567
2686
  accessibilityGuidelines: ['Provide clear link text that describes the destination', 'Use appropriate ARIA attributes for links', 'Ensure keyboard navigation support', 'Provide clear visual indicators for link state', 'Use descriptive link text for screen readers'],
2568
2687
  usageGuidelines: ['Use for navigation links to other pages or sections', 'Leverage compiled styling for performance', 'Use appropriate link styling and states', 'Consider link behavior and target attributes'],
2569
2688
  contentGuidelines: ['Use clear, descriptive link text', 'Maintain consistent link styling', 'Consider link context and destination'],
@@ -2574,7 +2693,8 @@ var components = exports.components = [{
2574
2693
  }, {
2575
2694
  name: 'href',
2576
2695
  description: 'Standard links can be provided as a string, which should be mapped to the\nunderlying router link component.\n\nAlternatively, you can provide an object for advanced link configurations\nby supplying the expected object type to the generic.\n\n@example\n```\nconst MyRouterLink = forwardRef(\n(\n {\n href,\n children,\n ...rest\n }: RouterLinkComponentProps<{\n href: string;\n replace: boolean;\n }>,\n ref: Ref<HTMLAnchorElement>,\n) => { ...\n```',
2577
- type: 'string | RouterLinkConfig'
2696
+ type: 'string | RouterLinkConfig',
2697
+ isRequired: true
2578
2698
  }, {
2579
2699
  name: 'newWindowLabel',
2580
2700
  description: 'Override the default text to signify that a link opens in a new window.\nThis is appended to the `aria-label` attribute when the `target` prop is set to `_blank`.',
@@ -2595,7 +2715,7 @@ var components = exports.components = [{
2595
2715
  category: 'primitive',
2596
2716
  description: 'A primitive Bleed component for extending content beyond container boundaries with compiled styling support.',
2597
2717
  status: 'general-availability',
2598
- examples: ['import { Bleed, Box } from \'@atlaskit/primitives/compiled\';\nexport default [\n\t<Box padding="space.200" backgroundColor="color.background.neutral.subtle">\n\t\t<Bleed inline="space.100">\n\t\t\t<Box backgroundColor="color.background.brand.bold" padding="space.100">\n\t\t\t\tBleed content\n\t\t\t</Box>\n\t\t</Bleed>\n\t</Box>,\n];'],
2718
+ examples: ['import { Bleed, Box } from \'@atlaskit/primitives/compiled\';\nconst _default_1: React.JSX.Element[] = [\n\t<Box padding="space.200" backgroundColor="color.background.neutral.subtle">\n\t\t<Bleed inline="space.100">\n\t\t\t<Box backgroundColor="color.background.brand.bold" padding="space.100">\n\t\t\t\tBleed content\n\t\t\t</Box>\n\t\t</Bleed>\n\t</Box>,\n];\nexport default _default_1;'],
2599
2719
  usageGuidelines: ['Use for extending content beyond container margins', 'Leverage compiled styling for performance', 'Use appropriate bleed directions and amounts', 'Consider responsive behavior and container constraints'],
2600
2720
  contentGuidelines: ['Use for appropriate layout bleeding', 'Maintain consistent bleeding patterns', 'Consider content hierarchy and visual flow'],
2601
2721
  props: [{
@@ -2609,7 +2729,8 @@ var components = exports.components = [{
2609
2729
  }, {
2610
2730
  name: 'children',
2611
2731
  description: 'Elements to be rendered inside the Flex.',
2612
- type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
2732
+ type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
2733
+ isRequired: true
2613
2734
  }, {
2614
2735
  name: 'inline',
2615
2736
  description: 'Bleed along the inline axis.',
@@ -2630,13 +2751,14 @@ var components = exports.components = [{
2630
2751
  category: 'primitive',
2631
2752
  description: 'A primitive Box component for layout and container purposes with compiled styling support.',
2632
2753
  status: 'general-availability',
2633
- examples: ["/**\n * @jsxRuntime classic\n * @jsx jsx\n */\nimport { cssMap, jsx } from '@atlaskit/css';\nimport { Box } from '@atlaskit/primitives/compiled';\nimport { token } from '@atlaskit/tokens';\nconst styles = cssMap({\n\tbox: {\n\t\tpaddingTop: token('space.200'),\n\t\tpaddingRight: token('space.200'),\n\t\tpaddingBottom: token('space.200'),\n\t\tpaddingLeft: token('space.200'),\n\t\tbackgroundColor: token('color.background.neutral.subtle'),\n\t},\n});\nexport default [\n\t<Box padding=\"space.200\" backgroundColor=\"color.background.neutral.subtle\">\n\t\tBasic box\n\t</Box>,\n\t<Box xcss={styles.box}>Styled box</Box>,\n];"],
2754
+ examples: ["/**\n * @jsxRuntime classic\n * @jsx jsx\n */\nimport { cssMap, jsx } from '@atlaskit/css';\nimport { Box } from '@atlaskit/primitives/compiled';\nimport { token } from '@atlaskit/tokens';\nconst styles = cssMap({\n\tbox: {\n\t\tpaddingTop: token('space.200'),\n\t\tpaddingRight: token('space.200'),\n\t\tpaddingBottom: token('space.200'),\n\t\tpaddingLeft: token('space.200'),\n\t\tbackgroundColor: token('color.background.neutral.subtle'),\n\t},\n});\nconst _default_1: JSX.Element[] = [\n\t<Box padding=\"space.200\" backgroundColor=\"color.background.neutral.subtle\">\n\t\tBasic box\n\t</Box>,\n\t<Box xcss={styles.box}>Styled box</Box>,\n];\nexport default _default_1;"],
2634
2755
  usageGuidelines: ['Use for basic layout and container needs', 'Leverage compiled styling for performance', 'Use appropriate spacing and layout props', 'Consider semantic HTML when possible'],
2635
2756
  contentGuidelines: ['Use for appropriate layout purposes', 'Maintain consistent spacing and layout patterns', 'Consider accessibility and semantic structure'],
2636
2757
  props: [{
2637
2758
  name: 'as',
2638
2759
  description: "The DOM element to render as the Box.\n- This cannot be any SVG-related element such as `'svg'`, `'animate', `'circle'`, and many more\n- This cannot be a `'a'` (use the `Anchor` primitive instead)\n- This cannot be a `'button'` (use the `Anchor` primitive instead)",
2639
- type: '"object" | "style" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "canvas" | "caption" | "center" | ... 97 more ... | "webview"'
2760
+ type: '"object" | "style" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "canvas" | "caption" | "center" | ... 98 more ... | "set"',
2761
+ defaultValue: "'div'"
2640
2762
  }, {
2641
2763
  name: 'backgroundColor',
2642
2764
  description: 'Token representing background color with a built-in fallback value.',
@@ -2644,7 +2766,7 @@ var components = exports.components = [{
2644
2766
  }, {
2645
2767
  name: 'xcss',
2646
2768
  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.",
2647
- type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "height" | "width" | "translate" | "content" | "color" | "border" | "grid" | "page" | "all" | "backgroundColor" | "accentColor" | ... 485 more ... | "glyphOrientationVertical", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
2769
+ type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "height" | "width" | "translate" | "content" | "color" | "border" | "alignmentBaseline" | "baselineShift" | "clip" | ... 487 more ... | "viewTimeline", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
2648
2770
  }]
2649
2771
  }, {
2650
2772
  name: 'Flex',
@@ -2653,7 +2775,7 @@ var components = exports.components = [{
2653
2775
  category: 'primitive',
2654
2776
  description: 'A primitive Flex component for flexbox layout with compiled styling support.',
2655
2777
  status: 'general-availability',
2656
- examples: ['import { Box, Flex } from \'@atlaskit/primitives/compiled\';\nexport default [\n\t<Flex gap="space.100" alignItems="center">\n\t\t<Box backgroundColor="color.background.accent.blue.subtle" padding="space.100">\n\t\t\tItem 1\n\t\t</Box>\n\t\t<Box backgroundColor="color.background.accent.green.subtle" padding="space.100">\n\t\t\tItem 2\n\t\t</Box>\n\t</Flex>,\n];'],
2778
+ examples: ['import { Box, Flex } from \'@atlaskit/primitives/compiled\';\nconst _default_1: React.JSX.Element[] = [\n\t<Flex gap="space.100" alignItems="center">\n\t\t<Box backgroundColor="color.background.accent.blue.subtle" padding="space.100">\n\t\t\tItem 1\n\t\t</Box>\n\t\t<Box backgroundColor="color.background.accent.green.subtle" padding="space.100">\n\t\t\tItem 2\n\t\t</Box>\n\t</Flex>,\n];\nexport default _default_1;'],
2657
2779
  usageGuidelines: ['Use for flexbox layout needs', 'Leverage compiled styling for performance', 'Use appropriate flex properties and alignment', 'Consider responsive behavior'],
2658
2780
  contentGuidelines: ['Use for appropriate flex layout', 'Maintain consistent flex patterns', 'Consider content alignment and distribution'],
2659
2781
  props: [{
@@ -2667,7 +2789,8 @@ var components = exports.components = [{
2667
2789
  }, {
2668
2790
  name: 'children',
2669
2791
  description: 'Elements to be rendered inside the Flex.',
2670
- type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
2792
+ type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
2793
+ isRequired: true
2671
2794
  }, {
2672
2795
  name: 'columnGap',
2673
2796
  description: 'Represents the space between each child.',
@@ -2699,7 +2822,7 @@ var components = exports.components = [{
2699
2822
  }, {
2700
2823
  name: 'xcss',
2701
2824
  description: 'Apply a subset of permitted styles powered by Atlassian Design System design tokens.',
2702
- type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "alignItems" | "justifyContent" | "gap" | "columnGap" | "rowGap" | "direction" | "flex" | "grid" | "fill" | "stroke" | ... 487 more ... | "glyphOrientationVertical", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
2825
+ type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "justifyContent" | "alignItems" | "columnGap" | "gap" | "rowGap" | "direction" | "flex" | "grid" | "fill" | "stroke" | ... 487 more ... | "glyphOrientationVertical", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
2703
2826
  }]
2704
2827
  }, {
2705
2828
  name: 'Focusable',
@@ -2708,14 +2831,15 @@ var components = exports.components = [{
2708
2831
  category: 'primitive',
2709
2832
  description: 'A primitive Focusable component for keyboard navigation and focus management with compiled styling support.',
2710
2833
  status: 'general-availability',
2711
- examples: ['import { Box, Focusable } from \'@atlaskit/primitives/compiled\';\nexport default [\n\t<Focusable>\n\t\t<Box padding="space.200" backgroundColor="color.background.neutral.subtle">\n\t\t\tFocusable content\n\t\t</Box>\n\t</Focusable>,\n];'],
2834
+ examples: ['import { Box, Focusable } from \'@atlaskit/primitives/compiled\';\nconst _default_1: React.JSX.Element[] = [\n\t<Focusable>\n\t\t<Box padding="space.200" backgroundColor="color.background.neutral.subtle">\n\t\t\tFocusable content\n\t\t</Box>\n\t</Focusable>,\n];\nexport default _default_1;'],
2712
2835
  accessibilityGuidelines: ['Provide clear focus indicators', 'Use appropriate tab order and navigation', 'Ensure keyboard accessibility', 'Provide clear visual feedback for focus state', 'Use appropriate ARIA attributes'],
2713
2836
  usageGuidelines: ['Use for elements that need keyboard focus', 'Leverage compiled styling for performance', 'Use appropriate focus management', 'Consider keyboard navigation patterns'],
2714
2837
  contentGuidelines: ['Use for appropriate focusable content', 'Maintain consistent focus patterns', 'Consider keyboard navigation flow'],
2715
2838
  props: [{
2716
2839
  name: 'as',
2717
2840
  description: 'The DOM element to render as the Focusable element.',
2718
- type: '"symbol" | "object" | "style" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "canvas" | "caption" | ... 155 more ... | "view"'
2841
+ type: '"symbol" | "object" | "style" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "canvas" | "caption" | ... 156 more ... | "view"',
2842
+ defaultValue: "'button'"
2719
2843
  }, {
2720
2844
  name: 'children',
2721
2845
  description: '',
@@ -2736,7 +2860,7 @@ var components = exports.components = [{
2736
2860
  category: 'primitive',
2737
2861
  description: 'A primitive Grid component for CSS Grid layout with compiled styling support.',
2738
2862
  status: 'general-availability',
2739
- examples: ['import { cssMap } from \'@atlaskit/css\';\nimport { Box, Grid } from \'@atlaskit/primitives/compiled\';\nconst styles = cssMap({\n\tgrid: {\n\t\tgridTemplateColumns: \'1fr 1fr\',\n\t},\n});\nexport default [\n\t<Grid gap="space.200" xcss={styles.grid}>\n\t\t<Box backgroundColor="color.background.accent.blue.subtle" padding="space.200">\n\t\t\tGrid item 1\n\t\t</Box>\n\t\t<Box backgroundColor="color.background.accent.green.subtle" padding="space.200">\n\t\t\tGrid item 2\n\t\t</Box>\n\t</Grid>,\n];'],
2863
+ examples: ['import { cssMap } from \'@atlaskit/css\';\nimport { Box, Grid } from \'@atlaskit/primitives/compiled\';\nconst styles = cssMap({\n\tgrid: {\n\t\tgridTemplateColumns: \'1fr 1fr\',\n\t},\n});\nconst _default_1: React.JSX.Element[] = [\n\t<Grid gap="space.200" xcss={styles.grid}>\n\t\t<Box backgroundColor="color.background.accent.blue.subtle" padding="space.200">\n\t\t\tGrid item 1\n\t\t</Box>\n\t\t<Box backgroundColor="color.background.accent.green.subtle" padding="space.200">\n\t\t\tGrid item 2\n\t\t</Box>\n\t</Grid>,\n];\nexport default _default_1;'],
2740
2864
  usageGuidelines: ['Use for CSS Grid layout needs', 'Leverage compiled styling for performance', 'Use appropriate grid properties and alignment', 'Consider responsive behavior'],
2741
2865
  contentGuidelines: ['Use for appropriate grid layout', 'Maintain consistent grid patterns', 'Consider content alignment and distribution'],
2742
2866
  props: [{
@@ -2758,7 +2882,8 @@ var components = exports.components = [{
2758
2882
  }, {
2759
2883
  name: 'children',
2760
2884
  description: 'Elements to be rendered inside the grid. Required as a grid without children should not be a grid.',
2761
- type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
2885
+ type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
2886
+ isRequired: true
2762
2887
  }, {
2763
2888
  name: 'columnGap',
2764
2889
  description: 'Represents the space between each column.',
@@ -2786,7 +2911,7 @@ var components = exports.components = [{
2786
2911
  }, {
2787
2912
  name: 'xcss',
2788
2913
  description: 'Apply a subset of permitted styles powered by Atlassian Design System design tokens.',
2789
- type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "alignItems" | "alignContent" | "justifyContent" | "gap" | "columnGap" | "rowGap" | "flex" | "grid" | "fill" | "stroke" | ... 487 more ... | "glyphOrientationVertical", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
2914
+ type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "justifyContent" | "justifyItems" | "alignItems" | "alignContent" | "columnGap" | "gap" | "rowGap" | "flex" | "grid" | ... 488 more ... | "glyphOrientationVertical", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
2790
2915
  }]
2791
2916
  }, {
2792
2917
  name: 'Inline',
@@ -2795,7 +2920,7 @@ var components = exports.components = [{
2795
2920
  category: 'primitive',
2796
2921
  description: 'A primitive Inline component for horizontal layout with consistent spacing.',
2797
2922
  status: 'general-availability',
2798
- examples: ['import AddIcon from \'@atlaskit/icon/core/add\';\nimport { Inline, Text } from \'@atlaskit/primitives/compiled\';\nexport default [\n\t<Inline space="space.100">\n\t\t<AddIcon label="Add item" />\n\t\t<Text>Add item</Text>\n\t</Inline>,\n];'],
2923
+ examples: ['import AddIcon from \'@atlaskit/icon/core/add\';\nimport { Inline, Text } from \'@atlaskit/primitives/compiled\';\nconst _default_1: React.JSX.Element[] = [\n\t<Inline space="space.100">\n\t\t<AddIcon label="Add item" />\n\t\t<Text>Add item</Text>\n\t</Inline>,\n];\nexport default _default_1;'],
2799
2924
  usageGuidelines: ['Use for horizontal layout needs', 'Leverage compiled styling for performance', 'Use appropriate spacing and alignment props', 'Consider wrapping behavior'],
2800
2925
  contentGuidelines: ['Use for appropriate horizontal grouping', 'Maintain consistent spacing patterns', 'Consider content flow and readability'],
2801
2926
  props: [{
@@ -2813,7 +2938,8 @@ var components = exports.components = [{
2813
2938
  }, {
2814
2939
  name: 'children',
2815
2940
  description: 'Elements to be rendered inside the Inline.',
2816
- type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
2941
+ type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
2942
+ isRequired: true
2817
2943
  }, {
2818
2944
  name: 'grow',
2819
2945
  description: 'Used to set whether the container should grow to fill the available space.',
@@ -2854,7 +2980,7 @@ var components = exports.components = [{
2854
2980
  category: 'primitive',
2855
2981
  description: 'A primitive Text component for typography with compiled styling support.',
2856
2982
  status: 'general-availability',
2857
- examples: ['import { MetricText } from \'@atlaskit/primitives/compiled\';\nexport default [\n\t<MetricText size="small">42</MetricText>,\n\t<MetricText size="large">1,234</MetricText>,\n];'],
2983
+ examples: ['import { MetricText } from \'@atlaskit/primitives/compiled\';\nconst _default_1: React.JSX.Element[] = [\n\t<MetricText size="small">42</MetricText>,\n\t<MetricText size="large">1,234</MetricText>,\n];\nexport default _default_1;'],
2858
2984
  usageGuidelines: ['Use for text content with consistent typography', 'Leverage compiled styling for performance', 'Use appropriate font size and weight props', 'Consider semantic HTML elements'],
2859
2985
  contentGuidelines: ['Use for appropriate text content', 'Maintain consistent typography patterns', 'Consider readability and hierarchy'],
2860
2986
  props: [{
@@ -2868,7 +2994,8 @@ var components = exports.components = [{
2868
2994
  }, {
2869
2995
  name: 'children',
2870
2996
  description: 'Elements rendered within the Text element.',
2871
- type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
2997
+ type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
2998
+ isRequired: true
2872
2999
  }, {
2873
3000
  name: 'id',
2874
3001
  description: 'The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).',
@@ -2880,7 +3007,8 @@ var components = exports.components = [{
2880
3007
  }, {
2881
3008
  name: 'size',
2882
3009
  description: 'Text size.',
2883
- type: '"small" | "medium" | "large"'
3010
+ type: '"small" | "medium" | "large"',
3011
+ isRequired: true
2884
3012
  }]
2885
3013
  }, {
2886
3014
  name: 'Pressable',
@@ -2889,7 +3017,7 @@ var components = exports.components = [{
2889
3017
  category: 'primitive',
2890
3018
  description: 'A primitive Pressable component for handling touch and click interactions with compiled styling support.',
2891
3019
  status: 'general-availability',
2892
- examples: ["import { Pressable } from '@atlaskit/primitives/compiled';\nexport default [<Pressable onClick={() => alert('Pressed!')}>Custom button</Pressable>];"],
3020
+ examples: ["import { Pressable } from '@atlaskit/primitives/compiled';\nconst _default_1: React.JSX.Element[] = [\n\t<Pressable onClick={() => alert('Pressed!')}>Custom button</Pressable>,\n];\nexport default _default_1;"],
2893
3021
  accessibilityGuidelines: ['Provide clear visual feedback for press states', 'Ensure appropriate touch target sizes', 'Use appropriate ARIA attributes for interactive elements', 'Provide keyboard navigation support'],
2894
3022
  usageGuidelines: ['Use for interactive elements that need press feedback', 'Leverage compiled styling for performance', 'Use appropriate press states and feedback', 'Consider touch target accessibility'],
2895
3023
  contentGuidelines: ['Use for appropriate interactive content', 'Maintain consistent press patterns', 'Consider user interaction expectations'],
@@ -2913,7 +3041,7 @@ var components = exports.components = [{
2913
3041
  category: 'primitive',
2914
3042
  description: 'A primitive Stack component for vertical and horizontal layout with consistent spacing.',
2915
3043
  status: 'general-availability',
2916
- examples: ['import Heading from \'@atlaskit/heading\';\nimport { Stack, Text } from \'@atlaskit/primitives/compiled\';\nexport default [\n\t<Stack space="space.100">\n\t\t<Heading size="medium">User name</Heading>\n\t\t<Text>Description</Text>\n\t</Stack>,\n];'],
3044
+ examples: ['import Heading from \'@atlaskit/heading\';\nimport { Stack, Text } from \'@atlaskit/primitives/compiled\';\nconst _default_1: React.JSX.Element[] = [\n\t<Stack space="space.100">\n\t\t<Heading size="medium">User name</Heading>\n\t\t<Text>Description</Text>\n\t</Stack>,\n];\nexport default _default_1;'],
2917
3045
  usageGuidelines: ['Use for consistent vertical or horizontal layouts', 'Leverage compiled styling for performance', 'Use appropriate spacing and alignment props', 'Consider responsive behavior'],
2918
3046
  contentGuidelines: ['Use for appropriate layout grouping', 'Maintain consistent spacing patterns', 'Consider content hierarchy and flow'],
2919
3047
  props: [{
@@ -2931,7 +3059,8 @@ var components = exports.components = [{
2931
3059
  }, {
2932
3060
  name: 'children',
2933
3061
  description: 'Elements to be rendered inside the Stack.',
2934
- type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
3062
+ type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
3063
+ isRequired: true
2935
3064
  }, {
2936
3065
  name: 'grow',
2937
3066
  description: 'Used to set whether the container should grow to fill the available space.',
@@ -2960,7 +3089,7 @@ var components = exports.components = [{
2960
3089
  category: 'primitive',
2961
3090
  description: 'A primitive Text component for typography with compiled styling support.',
2962
3091
  status: 'general-availability',
2963
- examples: ['import { Text } from \'@atlaskit/primitives/compiled\';\nexport default [\n\t<Text>Default text</Text>,\n\t<Text size="large" weight="bold">\n\t\tLarge bold text\n\t</Text>,\n];'],
3092
+ examples: ['import { Text } from \'@atlaskit/primitives/compiled\';\nconst _default_1: React.JSX.Element[] = [\n\t<Text>Default text</Text>,\n\t<Text size="large" weight="bold">\n\t\tLarge bold text\n\t</Text>,\n];\nexport default _default_1;'],
2964
3093
  usageGuidelines: ['Use for text content with consistent typography', 'Leverage compiled styling for performance', 'Use appropriate font size and weight props', 'Consider semantic HTML elements'],
2965
3094
  contentGuidelines: ['Use for appropriate text content', 'Maintain consistent typography patterns', 'Consider readability and hierarchy'],
2966
3095
  props: [{
@@ -2974,7 +3103,8 @@ var components = exports.components = [{
2974
3103
  }, {
2975
3104
  name: 'children',
2976
3105
  description: 'Elements rendered within the Text element.',
2977
- type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
3106
+ type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
3107
+ isRequired: true
2978
3108
  }, {
2979
3109
  name: 'color',
2980
3110
  description: 'Token representing text color with a built-in fallback value.\nWill apply inverse text color automatically if placed within a Box with bold background color.\nDefaults to `color.text` if not nested in other Text components.',
@@ -3018,7 +3148,8 @@ var components = exports.components = [{
3018
3148
  props: [{
3019
3149
  name: 'appearance',
3020
3150
  description: 'The visual style of the progress bar.',
3021
- type: '"default" | "success" | "inverse"'
3151
+ type: '"default" | "success" | "inverse"',
3152
+ defaultValue: '"default"'
3022
3153
  }, {
3023
3154
  name: 'ariaLabel',
3024
3155
  description: "This is the descriptive label that's associated with the progress bar.\nAlways include useful information on the current state of the progress bar so that people who use assistive technology can understand what the current state of the progress bar is.",
@@ -3026,11 +3157,13 @@ var components = exports.components = [{
3026
3157
  }, {
3027
3158
  name: 'isIndeterminate',
3028
3159
  description: 'Shows the progress bar in an indeterminate state when `true`.',
3029
- type: 'boolean'
3160
+ type: 'boolean',
3161
+ defaultValue: 'false'
3030
3162
  }, {
3031
3163
  name: 'value',
3032
3164
  description: 'Sets the value of the progress bar, between `0` and `1` inclusive.',
3033
- type: 'number'
3165
+ type: 'number',
3166
+ defaultValue: '0'
3034
3167
  }]
3035
3168
  }, {
3036
3169
  name: 'SuccessProgressBar',
@@ -3049,11 +3182,13 @@ var components = exports.components = [{
3049
3182
  }, {
3050
3183
  name: 'isIndeterminate',
3051
3184
  description: 'Shows the progress bar in an indeterminate state when `true`.',
3052
- type: 'boolean'
3185
+ type: 'boolean',
3186
+ defaultValue: 'false'
3053
3187
  }, {
3054
3188
  name: 'value',
3055
3189
  description: 'Sets the value of the progress bar, between `0` and `1` inclusive.',
3056
- type: 'number'
3190
+ type: 'number',
3191
+ defaultValue: '0'
3057
3192
  }]
3058
3193
  }, {
3059
3194
  name: 'TransparentProgressBar',
@@ -3072,11 +3207,13 @@ var components = exports.components = [{
3072
3207
  }, {
3073
3208
  name: 'isIndeterminate',
3074
3209
  description: 'Shows the progress bar in an indeterminate state when `true`.',
3075
- type: 'boolean'
3210
+ type: 'boolean',
3211
+ defaultValue: 'false'
3076
3212
  }, {
3077
3213
  name: 'value',
3078
3214
  description: 'Sets the value of the progress bar, between `0` and `1` inclusive.',
3079
- type: 'number'
3215
+ type: 'number',
3216
+ defaultValue: '0'
3080
3217
  }]
3081
3218
  }, {
3082
3219
  name: 'ProgressIndicator',
@@ -3092,27 +3229,32 @@ var components = exports.components = [{
3092
3229
  props: [{
3093
3230
  name: 'appearance',
3094
3231
  description: 'Sets the color of the indicators.',
3095
- type: '"default" | "help" | "inverted" | "primary"'
3232
+ type: '"default" | "help" | "inverted" | "primary"',
3233
+ defaultValue: '"default"'
3096
3234
  }, {
3097
3235
  name: 'ariaControls',
3098
3236
  description: 'If interaction is enabled, use `ariaControls` to tell assistive technology what elements are controlled by the progress indicator.',
3099
- type: 'string'
3237
+ type: 'string',
3238
+ defaultValue: '"panel"'
3100
3239
  }, {
3101
3240
  name: 'ariaLabel',
3102
3241
  description: 'Describes what the indicator represents to assistive technology. The selected index number will be appended to the label.',
3103
- type: 'string'
3242
+ type: 'string',
3243
+ defaultValue: '"tab"'
3104
3244
  }, {
3105
3245
  name: 'onSelect',
3106
3246
  description: 'Function called when an indicator is selected.',
3107
- type: '(eventData: { event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>; index: number; }, analyticsEvent: UIAnalyticsEvent) => void'
3247
+ type: '(eventData: { event: React.MouseEvent<HTMLButtonElement, MouseEvent>; index: number; }, analyticsEvent: UIAnalyticsEvent) => void'
3108
3248
  }, {
3109
3249
  name: 'selectedIndex',
3110
3250
  description: 'Which indicator is currently selected.',
3111
- type: 'number'
3251
+ type: 'number',
3252
+ isRequired: true
3112
3253
  }, {
3113
3254
  name: 'size',
3114
3255
  description: 'Sets the width and height of each indicator.',
3115
- type: '"default" | "large"'
3256
+ type: '"default" | "large"',
3257
+ defaultValue: '"default"'
3116
3258
  }, {
3117
3259
  name: 'spacing',
3118
3260
  description: 'Specifies how much of a gutter there is between indicators.',
@@ -3120,7 +3262,8 @@ var components = exports.components = [{
3120
3262
  }, {
3121
3263
  name: 'values',
3122
3264
  description: 'An array of values mapped over to create the indicators.',
3123
- type: 'any[]'
3265
+ type: 'any[]',
3266
+ isRequired: true
3124
3267
  }]
3125
3268
  }, {
3126
3269
  name: 'ProgressTracker',
@@ -3136,19 +3279,24 @@ var components = exports.components = [{
3136
3279
  props: [{
3137
3280
  name: 'animated',
3138
3281
  description: 'Turns off transition animations if set to false.',
3139
- type: 'boolean'
3282
+ type: 'boolean',
3283
+ defaultValue: 'true'
3140
3284
  }, {
3141
3285
  name: 'items',
3142
3286
  description: 'Ordered list of stage data.',
3143
- type: 'Stage[]'
3287
+ type: 'Stage[]',
3288
+ isRequired: true,
3289
+ defaultValue: '[]'
3144
3290
  }, {
3145
3291
  name: 'label',
3146
3292
  description: 'Use this to provide an aria-label for the overall progress tracker, so that people who use assistive technology get an overview of the tracker\'s purpose. For example, "Sign up progress".',
3147
- type: 'string'
3293
+ type: 'string',
3294
+ defaultValue: '"Progress"'
3148
3295
  }, {
3149
3296
  name: 'spacing',
3150
3297
  description: 'Sets the amount of spacing between the steps.',
3151
- type: '"comfortable" | "cozy" | "compact"'
3298
+ type: '"cozy" | "comfortable" | "compact"',
3299
+ defaultValue: '"cozy"'
3152
3300
  }]
3153
3301
  }, {
3154
3302
  name: 'Radio',
@@ -3248,7 +3396,8 @@ var components = exports.components = [{
3248
3396
  }, {
3249
3397
  name: 'options',
3250
3398
  description: 'An array of objects, each object is mapped onto a `Radio` element within the group. Name must be unique to the group.',
3251
- type: 'OptionPropType[]'
3399
+ type: 'OptionPropType[]',
3400
+ isRequired: true
3252
3401
  }, {
3253
3402
  name: 'value',
3254
3403
  description: 'Once set, controls the selected value on the `RadioGroup`.',
@@ -3316,11 +3465,12 @@ var components = exports.components = [{
3316
3465
  }, {
3317
3466
  name: 'children',
3318
3467
  description: 'The main content of the section message. This accepts a react node, although\nwe recommend that this should be a paragraph.',
3319
- type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
3468
+ type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
3469
+ isRequired: true
3320
3470
  }, {
3321
3471
  name: 'icon',
3322
3472
  description: 'An Icon component to be rendered instead of the default icon for the component.\nThis should only be an `@atlaskit/icon` icon. You can check out [this example](/packages/design-system/section-message/example/custom-icon)\nto see how to provide this icon.',
3323
- type: '"symbol" | "object" | "title" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | ... 158 more ... | ComponentType<...>'
3473
+ type: '"symbol" | "object" | "title" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | ... 159 more ... | ComponentType<...>'
3324
3474
  }, {
3325
3475
  name: 'isDismissible',
3326
3476
  description: 'Displays a dismiss button, that allows the user to dismiss the message.\nIt will be removed from the DOM immediately and will not be re-rendered.\nIt does not handle persistence of the dismissed state across page reloads or remounts.',
@@ -3641,14 +3791,15 @@ var components = exports.components = [{
3641
3791
  category: 'loading',
3642
3792
  description: 'A skeleton acts as a placeholder for content, usually while the content loads.',
3643
3793
  status: 'early-access',
3644
- examples: ['import Skeleton from \'@atlaskit/skeleton\';\nexport default [<Skeleton width="200px" height="100px" isShimmering />];'],
3794
+ examples: ['import Skeleton from \'@atlaskit/skeleton\';\nconst _default_1: React.JSX.Element[] = [<Skeleton width="200px" height="100px" isShimmering />];\nexport default _default_1;'],
3645
3795
  accessibilityGuidelines: ['Provide appropriate loading announcements', 'Use skeleton patterns that match actual content structure', 'Ensure skeleton content is not announced as actual content', 'Consider screen reader experience during loading states'],
3646
3796
  usageGuidelines: ['Use to indicate content is loading', 'Match skeleton structure to actual content layout', 'Use appropriate animation and timing', 'Replace with actual content when ready', 'Consider different skeleton patterns for different content types'],
3647
3797
  contentGuidelines: ['Use skeleton patterns that represent actual content structure', 'Maintain consistent skeleton styling', 'Consider content hierarchy in skeleton design', 'Use appropriate animation timing'],
3648
3798
  props: [{
3649
3799
  name: 'borderRadius',
3650
3800
  description: "Controls the border radius, or rounding of the skeleton's corners.",
3651
- type: 'string | number'
3801
+ type: 'string | number',
3802
+ defaultValue: '"var(--ds-radius-small)"'
3652
3803
  }, {
3653
3804
  name: 'color',
3654
3805
  description: 'Overrides the default color of skeleton, and overrides the default shimmering start color if ShimmeringEndColor also provided.',
@@ -3660,11 +3811,13 @@ var components = exports.components = [{
3660
3811
  }, {
3661
3812
  name: 'height',
3662
3813
  description: '',
3663
- type: 'string | number'
3814
+ type: 'string | number',
3815
+ isRequired: true
3664
3816
  }, {
3665
3817
  name: 'isShimmering',
3666
3818
  description: 'Enables the shimmering animation.',
3667
- type: 'boolean'
3819
+ type: 'boolean',
3820
+ defaultValue: 'false'
3668
3821
  }, {
3669
3822
  name: 'ShimmeringEndColor',
3670
3823
  description: 'Overrides the default shimmering ending color of skeleton.',
@@ -3672,7 +3825,8 @@ var components = exports.components = [{
3672
3825
  }, {
3673
3826
  name: 'width',
3674
3827
  description: '',
3675
- type: 'string | number'
3828
+ type: 'string | number',
3829
+ isRequired: true
3676
3830
  }]
3677
3831
  }, {
3678
3832
  name: 'Spinner',
@@ -3681,7 +3835,7 @@ var components = exports.components = [{
3681
3835
  category: 'feedback',
3682
3836
  description: 'A loading spinner component.',
3683
3837
  status: 'general-availability',
3684
- examples: ['import Spinner from \'@atlaskit/spinner\';\nexport default [<Spinner size="small" />, <Spinner size="medium" />, <Spinner size="large" />];'],
3838
+ examples: ['import Spinner from \'@atlaskit/spinner\';\nconst _default_1: React.JSX.Element[] = [\n\t<Spinner size="small" />,\n\t<Spinner size="medium" />,\n\t<Spinner size="large" />,\n];\nexport default _default_1;'],
3685
3839
  accessibilityGuidelines: ['Provide appropriate loading announcements', 'Use appropriate timing for spinner display', 'Ensure spinner is announced to screen readers', 'Consider alternative loading indicators'],
3686
3840
  usageGuidelines: ['Use for loading states of unknown duration', 'Consider delay before showing spinner', 'Use appropriate size for context', 'Provide loading context when possible'],
3687
3841
  contentGuidelines: ['Use consistent spinner sizing', 'Consider spinner placement and context', 'Provide loading feedback when appropriate'],
@@ -3716,7 +3870,8 @@ var components = exports.components = [{
3716
3870
  props: [{
3717
3871
  name: 'children',
3718
3872
  description: "The children of Tabs. The first child should be a `TabList` filled with `Tab`'s.\nSubsequent children should be `TabPanel`'s. There should be a `Tab` for each `TabPanel`.\nIf you want to customize `Tab` or `TabPanel`, refer to the examples in the documentation.",
3719
- type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | React.ReactPortal'
3873
+ type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | React.ReactPortal',
3874
+ isRequired: true
3720
3875
  }, {
3721
3876
  name: 'defaultSelected',
3722
3877
  description: 'The index of the tab that will be selected by default when the component mounts.\nIf not set the first tab will be displayed by default.',
@@ -3724,7 +3879,8 @@ var components = exports.components = [{
3724
3879
  }, {
3725
3880
  name: 'id',
3726
3881
  description: 'A unique ID that will be used to generate IDs for tabs and tab panels.\nThis is required for accessibility purposes.',
3727
- type: 'string'
3882
+ type: 'string',
3883
+ isRequired: true
3728
3884
  }, {
3729
3885
  name: 'onChange',
3730
3886
  description: 'A callback function which will be fired when a changed. It will be passed\nthe index of the selected tab and a `UIAnalyticsEvent`.',
@@ -3773,6 +3929,14 @@ var components = exports.components = [{
3773
3929
  name: 'linkComponent',
3774
3930
  description: '',
3775
3931
  type: 'ComponentClass<any, any> | FunctionComponent<any>'
3932
+ }, {
3933
+ name: 'maxWidth',
3934
+ description: "Maximum width of the tag text. When exceeded, text will be truncated with ellipsis.\nAccepts any valid CSS max-width value (e.g., '200px', '15rem', '100%').",
3935
+ type: 'string | number'
3936
+ }, {
3937
+ name: 'migration_fallback',
3938
+ description: "@internal\n**Temporary / Internal only for migration.**\n\nWhen set to `'lozenge'` and the feature flag `platform-dst-lozenge-tag-badge-visual-uplifts`\nis OFF, renders as a Lozenge component instead of Tag. This enables safe, staged migration\nfrom Lozenge to Tag for large consumers.\n\nThis prop will be removed via codemod after migration is complete.",
3939
+ type: 'string'
3776
3940
  }, {
3777
3941
  name: 'onAfterRemoveAction',
3778
3942
  description: "Handler to be called after tag is removed. Called with the string 'Post\nRemoval Hook'.",
@@ -3788,7 +3952,8 @@ var components = exports.components = [{
3788
3952
  }, {
3789
3953
  name: 'text',
3790
3954
  description: 'Text to be displayed in the tag.',
3791
- type: 'string'
3955
+ type: 'string',
3956
+ isRequired: true
3792
3957
  }]
3793
3958
  }, {
3794
3959
  name: 'TagGroup',
@@ -3808,7 +3973,8 @@ var components = exports.components = [{
3808
3973
  }, {
3809
3974
  name: 'children',
3810
3975
  description: 'Tags to render within the tag group.',
3811
- type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
3976
+ type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
3977
+ isRequired: true
3812
3978
  }, {
3813
3979
  name: 'label',
3814
3980
  description: 'Refers to an `aria-label` attribute. Sets an accessible name for the tags group wrapper to announce it to users of assistive technology.\nUsage of either this, or the `titleId` attribute is strongly recommended.',
@@ -4056,7 +4222,8 @@ var components = exports.components = [{
4056
4222
  }, {
4057
4223
  name: 'children',
4058
4224
  description: 'Elements to be wrapped by the tooltip.\nIt can be either a:\n1. `ReactNode`\n2. Function which returns a `ReactNode`',
4059
- type: 'React.ReactNode | ((props: TriggerProps) => React.ReactNode)'
4225
+ type: 'React.ReactNode | ((props: TriggerProps) => React.ReactNode)',
4226
+ isRequired: true
4060
4227
  }, {
4061
4228
  name: 'component',
4062
4229
  description: 'Extend `TooltipPrimitive` to create your own tooltip and pass it as component.',
@@ -4064,43 +4231,53 @@ var components = exports.components = [{
4064
4231
  }, {
4065
4232
  name: 'content',
4066
4233
  description: 'The content of the tooltip. It can be either a:\n1. `ReactNode`\n2. Function which returns a `ReactNode`\nThe benefit of the second approach is that it allows you to consume the `update` render prop.\nThis `update` function can be called to manually recalculate the position of the tooltip.\n\nThis content will be rendered into two places:\n1. Into the tooltip\n2. Into a hidden element for screen readers (unless `isScreenReaderAnnouncementDisabled` is set to `true`)',
4067
- type: 'React.ReactNode | (({ update }: { update?: () => void; }) => React.ReactNode)'
4234
+ type: 'React.ReactNode | (({ update }: { update?: () => void; }) => React.ReactNode)',
4235
+ isRequired: true
4068
4236
  }, {
4069
4237
  name: 'delay',
4070
4238
  description: 'Time in milliseconds to wait before showing and hiding the tooltip. Defaults to 300.',
4071
- type: 'number'
4239
+ type: 'number',
4240
+ defaultValue: '300'
4072
4241
  }, {
4073
4242
  name: 'hideTooltipOnClick',
4074
4243
  description: 'Hide the tooltip when the click event is triggered. Use this when the tooltip should be hidden if `onClick` react synthetic event\nis triggered, which happens after `onMouseDown` event.',
4075
- type: 'boolean'
4244
+ type: 'boolean',
4245
+ defaultValue: 'false'
4076
4246
  }, {
4077
4247
  name: 'hideTooltipOnMouseDown',
4078
4248
  description: 'Hide the tooltip when the mousedown event is triggered. This should be\nused when tooltip should be hidden if `onMouseDown` react synthetic event\nis triggered, which happens before `onClick` event.',
4079
- type: 'boolean'
4249
+ type: 'boolean',
4250
+ defaultValue: 'false'
4080
4251
  }, {
4081
4252
  name: 'ignoreTooltipPointerEvents',
4082
4253
  description: 'Adds `pointer-events: none` to the tooltip itself. Setting this to true will also prevent the tooltip from persisting when hovered.',
4083
- type: 'boolean'
4254
+ type: 'boolean',
4255
+ defaultValue: 'false'
4084
4256
  }, {
4085
4257
  name: 'isScreenReaderAnnouncementDisabled',
4086
4258
  description: 'By default tooltip content will be duplicated into a hidden element so\nit can be read out by a screen reader. Sometimes this is not ideal as\nit can result in the same content be announced twice. For those situations,\nyou can leverage this prop to disable the duplicate hidden text.',
4087
- type: 'boolean'
4259
+ type: 'boolean',
4260
+ defaultValue: 'false'
4088
4261
  }, {
4089
4262
  name: 'mousePosition',
4090
- description: 'Where the tooltip should appear relative to the mouse pointer.\nOnly use this when the `position` prop is set to `"mouse"`.\nWhen interacting with the target element using a keyboard, it will use this position against the target element instead.',
4091
- type: 'AutoPlacement | BasePlacement | VariationPlacement'
4263
+ description: 'Where the tooltip should appear relative to the mouse pointer.\nOnly use this when the `position` prop is set to `"mouse"`, `"mouse-y"`, or `"mouse-x"`.\nWhen interacting with the target element using a keyboard, it will use this position against the target element instead.',
4264
+ type: 'AutoPlacement | BasePlacement | VariationPlacement',
4265
+ defaultValue: '"bottom"'
4092
4266
  }, {
4093
4267
  name: 'onHide',
4094
4268
  description: "Function to be called when the tooltip will be hidden. It's called after the\ndelay, when the tooltip begins to animate out.",
4095
- type: '(analyticsEvent: UIAnalyticsEvent) => void'
4269
+ type: '(analyticsEvent: UIAnalyticsEvent) => void',
4270
+ defaultValue: 'noop'
4096
4271
  }, {
4097
4272
  name: 'onShow',
4098
4273
  description: "Function to be called when the tooltip will be shown. It's called when the\ntooltip begins to animate in.",
4099
- type: '(analyticsEvent: UIAnalyticsEvent) => void'
4274
+ type: '(analyticsEvent: UIAnalyticsEvent) => void',
4275
+ defaultValue: 'noop'
4100
4276
  }, {
4101
4277
  name: 'position',
4102
- description: 'Where the tooltip should appear relative to its target.\nIf set to `"mouse"`, the tooltip will display next to the mouse pointer instead.\nMake sure to utilize the `mousePosition` if you want to customize where the tooltip will show in relation to the mouse.',
4103
- type: 'Placement | "mouse"'
4278
+ description: 'Where the tooltip should appear relative to its target.\nIf set to `"mouse"`, the tooltip will display next to the mouse pointer instead.\nIf set to `"mouse-y"`, the tooltip will use the mouse Y coordinate but the target X coordinate.\nIf set to `"mouse-x"`, the tooltip will use the mouse X coordinate but the target Y coordinate.\nMake sure to utilize the `mousePosition` if you want to customize where the tooltip will show in relation to the mouse.',
4279
+ type: 'Placement | "mouse" | "mouse-y" | "mouse-x"',
4280
+ defaultValue: '"bottom"'
4104
4281
  }, {
4105
4282
  name: 'shortcut',
4106
4283
  description: 'Display a keyboard shortcut in the tooltip.\n\nKeys will be displayed as individual keyboard key segments after the tooltip content.',
@@ -4108,11 +4285,21 @@ var components = exports.components = [{
4108
4285
  }, {
4109
4286
  name: 'strategy',
4110
4287
  description: 'Use this to define the strategy of popper.',
4111
- type: '"fixed" | "absolute"'
4288
+ type: '"fixed" | "absolute"',
4289
+ defaultValue: '"fixed"'
4112
4290
  }, {
4113
4291
  name: 'tag',
4114
4292
  description: 'Replace the wrapping element. This accepts the name of a html tag which will\nbe used to wrap the element.\nIf you provide a component, it needs to support a ref prop which is used by popper for positioning.',
4115
4293
  type: 'keyof JSX.IntrinsicElements | React.ComponentType<React.AllHTMLAttributes<HTMLElement> & { ref: React.Ref<HTMLElement>; }> | React.ForwardRefExoticComponent<...>'
4294
+ }, {
4295
+ name: 'UNSAFE_shouldAlwaysFadeIn',
4296
+ description: 'When set to true, the tooltip will always use the fade-in animation\nand never use the show-immediate behavior, even when another tooltip\nis already visible.',
4297
+ type: 'boolean'
4298
+ }, {
4299
+ name: 'UNSAFE_shouldRenderToParent',
4300
+ description: 'When enabled, the tooltip will be rendered as a sibling to the trigger element instead of being portaled to the document body.\n\nThis is an experimental prop and may be removed at any time. It is not yet intended for public use.',
4301
+ type: 'boolean',
4302
+ defaultValue: 'false'
4116
4303
  }]
4117
4304
  }, {
4118
4305
  name: 'VisuallyHidden',
@@ -4128,7 +4315,8 @@ var components = exports.components = [{
4128
4315
  props: [{
4129
4316
  name: 'children',
4130
4317
  description: 'The element or elements that should be hidden.',
4131
- type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
4318
+ type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
4319
+ isRequired: true
4132
4320
  }, {
4133
4321
  name: 'id',
4134
4322
  description: 'An id may be appropriate for this component if used in conjunction with `aria-describedby`\non a paired element.',