@atlaskit/ads-mcp 1.11.0 → 1.11.2

package/dist/esm/tools/get-guidelines/guidelines-structured-content.codegen.js

@@ -1,9 +1,9 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  *
- * Structured content for content guidelines from design-system-docs foundations content.
+ * Structured content for authored agent guidelines and design-system-docs foundations content.
  *
- * @codegen <<SignedSource::1b96ec67cc0ed9ff8b2fe3bd5f02fc67>>
+ * @codegen <<SignedSource::425b1c773867acafd317f203d71685ac>>
  * @codegenCommand yarn build structured-docs
  */
 
@@ -14,11 +14,13 @@ export var guidelinesStructuredContent = [{
   content: '## About border tokens\n\nBorders define boundaries and add emphasis using a combination of width and color tokens. Width\ntokens control a border\'s prominence, while color tokens provide its meaning. Pair these tokens to\ncommunicate an element’s purpose, such as a simple divider, or a visible interactive state.\n\n## Border width tokens and usage guidelines\n\nUse border width tokens to provide a clear and intentional way to apply width across different\nstates and use cases.\n\n<Stack space="space.200">\n\t<BorderTable />\n\t<Text>* Token values are subject to change and should be used as an indication only.</Text>\n</Stack>\n\n### Default border width\n\nThe `border.width` token is the default value for all standard borders and dividers. It establishes\nthe baseline thickness for components that require a subtle, defining outline, ensuring they are\nvisually distinct.\n\n![](./_assets/border-width.png)\n\n### Selected states\n\nUse the `border.width.selected` token to show users which option they’ve selected from a group.\nApply this token to highlight a user\'s choice, such as an active tab or a chosen item in a list.\n\n![](./_assets/border-width-selected.png)\n\n### Focus ring\n\nUse the `border.width.focused` token to define the thickness of the focus ring. Apply this token to\nshow keyboard users where they are on the page. When users press Tab to move through an interface,\nthe token highlights the active element they can interact with. This helps make your interface\naccessible to everyone.\n\n![](./_assets/border-width-focused.png)\n\n## Border color and width pairing\n\nCreate borders by pairing width and color tokens. Choose:\n\n- width tokens to control how thick and visible your border appears\n- color tokens to show what the border means, like its state or importance\n\nAlways pair the right width token with the right color token to keep your interface consistent and\nclear for users.\n\n![](./_assets/border-width-color.png)\n\n### Visual indicator for selected state\n\nAlways pair the `border.width.selected` token with the `color.border.selected` token, to show users\nwhich items they’ve selected. Use this combination to consistently highlight selected elements, like\nan active tab or a chosen list item, throughout the interface.\n\n![](./_assets/border-width-selected-color.png)\n\n### Required pairing for focus state\n\nAlways pair the `border.width.focused` token with the `color.border.focused` token to define the\nthickness of the focus ring.\n\nUse this combination to consistently highlight elements that receive keyboard focus, so users always\nknow which element is active and ready for interaction.\n\nTo ensure consistency and accessibility when adding a focused state to your components, follow these\nstandards:\n\n- **Code:** Use the\n  [Focusable component](https://atlassian.design/components/primitives/focusable/examples) to wrap\n  all interactive elements requiring focus.\n- **Design:** Use the\n  [Focus Ring component (Atlassians only)](https://go.atlassian.com/focus-ring-component) from the\n  Atlassian Design System Figma library.\n\n![](./_assets/border-width-focused-color.png)\n\nIt’s important to consider contrast when using different accent colors in your UI. For subtle\nbackgrounds, pair them with an accent border to meet the 3:1 contrast requirement for accessibility.\n\n[More about accent colors](https://atlassian.design/foundations/color/accents#use-borders-for-more-contrast-around-subtle-backgrounds)\n\n![](./_assets/border-width-accent-color.png)',
   keywords: ['border', 'stroke', 'outline', 'design tokens', 'visual hierarchy']
 }, {
-  content: '## Color anatomy\n\n### Saturated colors\n\nSaturated colors can infuse meaning to an experience, highlight UI, or create associations with\nsimilar colored UI.\n\n<img\n\tsrc={colorSaturatedPaletteLight}\n\talt="Color ramps for all saturated colors, which are blue, teal, green, lime, yellow, orange, red, magenta, and purple."\n/>\n\n### Neutral colors\n\nNeutral colors apply to most backgrounds, text, and shapes in our experiences. They don’t typically\nhave a meaning associated with them, though they can imply things like disabled states.\n\n<img\n\tsrc={colorNeutralPaletteLight}\n\talt="There are dedicated neutrals for both light and dark mode."\n/>\n\nColor ramp for light neutrals, and a separate color ramp for dark neutrals.\n\n### Alpha colors\n\nAlpha colors have varying levels of transparency or opacity. Transparency helps UI adapt to\ndifferent background colors and elevations.\n\n<img\n\tsrc={colorAlphaPaletteLight}\n\talt="Light and dark alpha neutral ramps with a circle appearing behind part of the ramps, which demonstrate the transparent quality of the colors."\n/>\n\nIf you aren\'t using design tokens, see our\n[color palette page](https://atlassian.design/foundations/color/color-palette) for hex codes and\nRGBa values.\n\n## Applying color with design tokens\n\nFor most Atlassian app experiences, colors are applied using\n[design tokens](https://atlassian.design/tokens/design-tokens). This means rather than choosing a\ncertain shade or value, you’ll choose a design token to apply colors.\n\nFor the full list of color design tokens and their values, see our\n[design token reference list](https://atlassian.design/components/tokens/all-tokens). Every token\ncomes with a description to help you ensure you’re using the correct one.\n\n<img\n\tsrc={colorTokensInScreenLight}\n\talt="Screenshot of a Jira board mapped to different token examples. The board title uses “color.text”, task icon uses “color.icon.accent.green”, and the button background uses “color.background.brand.bold."\n/>\n\nAll color design tokens start with the word “color”, followed by the property that it\'s applied to,\nsuch as a background, border, or icon.\n\n<img\n\tsrc={colorApplyingColor2Light}\n\talt="The design token name, “color.background.danger.bold.hovered”, broken down into parts. The property is “background”, and the modifier is “danger.bold.hovered."\n/>\n\nAfter the property name, the token may have one or more modifiers that represent the different parts\nof our color system: color role, emphasis level, and interaction state.\n\n## Color roles\n\nColor roles describe the intention behind the color. For example, color roles are applied to buttons\nto differentiate between primary, secondary, warning, or dangerous actions.\n\n<img\n\tsrc={colorRolesLight}\n\talt="Examples of color roles applied to button backgrounds. Primary button uses the brand color role, default button uses the neutral color role, warning button uses the warning color role, and danger uses the danger color role."\n/>\n\n<ColorRolesTable />\n\n<DoDontGrid>\n\t<DoDont type="do" image={{ url: colorRoleDoLight, alt: \'\' }}>\n\t\tUse the right color role for your situation.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: colorRoleDontLight, alt: \'\' }}>\n\t\tDon’t use an accent when the color has semantic meaning.\n\t</DoDont>\n</DoDontGrid>\n\n## Emphasis levels\n\nEmphasis determines the amount of contrast a color has against the default surface. Emphasis can\nrange from subtlest to boldest. Bolder colors have more contrast against the default surface, which\nadds more attention than subtle colors.\n\n<img\n\tsrc={colorEmphasisLevelStatusLight}\n\talt="Comparing differences between bold and default lozenges. Bold lozenges have much more contrast than the default lozenges.Comparing differences between default, subtle, and subtlest text. Default text has the highest contrast, subtlest has the least."\n/>\n<img\n\tsrc={colorEmphasisLevelsTextLight}\n\talt="Comparing differences between default, subtle, and subtlest text. Default text has the highest contrast, subtlest has the least."\n/>\n\n### Use inverse tokens on bold backgrounds\n\nInverse tokens are designed to show on bold backgrounds. There are inverse tokens for text, borders,\nand icons on bold backgrounds.\n\nFor bold warning backgrounds, which are yellow, there are special `warning.inverse` tokens designed\nto pass WCAG AA contrast requirements.\n\n<img\n\tsrc={colorEmphasisLevelInverseLight}\n\talt="A danger banner and warning banner with text. The danger banner text is using “color.text.inverse”, and the warning banner text is using “color.text.warning.inverse."\n/>\n\n## Interaction states\n\nStates communicate the status of an interactive element.\n\n<img\n\tsrc={colorInteractionStatesLight}\n\talt="Button interaction states, which include default, hovered, and pressed states."\n/>\nUse hovered, pressed, selected, focused, or disabled tokens to create visual changes related to\ninteraction states.\n\n### Keep selected and focused states distinct\n\nA selected state persists after an interaction to show someone’s current choice. A focused state\nshows where keyboard or input focus is currently located.\n\n- Use `color.background.selected`, `color.text.selected`, `color.icon.selected`, or\n  `color.border.selected` to communicate selection.\n- Use `color.border.focused` only for focus indicators.\n- Don’t use link, brand, or focused tokens to communicate selection.\n- When an element is both selected and focused, preserve the selected treatment and add the focus\n  indicator.\n\nPair selected colors with another visual cue, such as a checkmark, underline, border, or change in\nshape. This helps people identify selection without relying on color alone.\n\n### Layer hovered and pressed states onto the current state\n\nHovered and pressed states are temporary. Use the matching `hovered` or `pressed` token for the\nelement’s current state, and keep a selected item recognizable during interaction.\n\n### Hovered and pressed for icons\n\nThere are no dedicated hovered and pressed tokens for icons. Instead, we recommend using a subtle\nneutral background to indicate state changes.\n\n<img\n\tsrc={colorInteractionStatesIconsLight}\n\talt="Icon interaction states. The default icon background uses “color.background.neutral.subtle”, the hovered icon background uses “color.background.neutral.subtle.hovered”, and the pressed icon background uses “color.background.neutral.subtle.pressed."\n/>\n\n## Accessibility in color\n\nWe comply with WCAG AA standard contrast ratios:\n\n- **Must pass 3:1 contrast:** Any UI essential to understanding the experience and text 24px or\n  larger ([WCAG 1.4.11](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html))\n- **Must pass 4.5:1:** Text smaller than 24px\n  ([WCAG 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html))\n\nSee our [color accessibility](https://atlassian.design/foundations/accessibility#colors) guidance\nfor more information.\n\n## Designing in dark mode\n\nDesign tokens currently support two color themes: light and dark. Each color design token maps to a\ndifferent value for each theme so their appearance differs depending on which theme is being used.\n\n- To learn the basics of tokens and themes, go to\n  [design tokens](https://atlassian.design/tokens/design-tokens).\n- For detailed mappings from light to dark colors, see\n  [picking colors for dark mode](https://atlassian.design/foundations/color/color-palette#picking-colors-for-dark-mode).\n  Note that if you are using design tokens, you shouldn’t have to map your own values.\n\n## Related\n\n- Learn about the basics of [design tokens](https://atlassian.design/tokens/design-tokens).\n- If you need hex codes, RGBA values, or dark mode mappings, see our\n  [color palettes](https://atlassian.design/foundations/color/color-palette).\n- For guidance on color usage in charts, read our\n  [data visualization color guideline](https://atlassian.design/foundations/color/data-visualization-color).\n- See the list of [all design tokens](https://atlassian.design/components/tokens/all-tokens) for\n  full descriptions and values for all tokens.',
-  keywords: ['color', 'selected state colors', 'focus indicator colors', 'hovered and pressed states', 'contrast', 'palette', 'brand', 'design tokens', 'themes']
+  content: "# Color\n\nUse color tokens to communicate intent, hierarchy, and interaction in Atlassian UI. Start with the\nexisting ADS component treatment; use these choices when styling custom UI or reviewing a token\nchoice.\n\n## Choose the token family\n\n1. Identify what the color communicates. Use a semantic role for status, validation, actions, or\n   discovery. Use an accent when the hue identifies a category and could change without changing its\n   meaning. See the Color accents guidance for hue and pairing choices.\n2. Choose the background emphasis that fits the intended hierarchy.\n3. Pair it with the text, icon, and border tokens for that role and emphasis.\n4. For interactive UI, apply the state to the element that owns the interaction. Preserve separate\n   cues for persistent selection and keyboard focus.\n\nApply tokens with `token('color...')` from `@atlaskit/tokens`. Tokens resolve for light and dark\nthemes, so use their semantic names instead of copying palette values or hardcoded colors.\n\n## Read token names\n\nMost tokens follow `color.[property].[role].[emphasis].[state]`:\n\n- **Property** describes where the color is applied: `background`, `text`, `icon`, or `border`.\n- **Role** describes its intent: `brand`, `danger`, `warning`, `success`, `information`,\n  `discovery`, `neutral`, `selected`, `focused`, `input`, or `accent.[hue]`.\n- **Emphasis** describes contrast against the default surface: `bold`, `bolder`, `boldest`,\n  `subtle`, `subtler`, or `subtlest`.\n- **State** describes an interaction state such as `hovered` or `pressed`.\n\nAccent tokens place the hue after the role, for example `color.background.accent.blue.subtlest`.\nLook up exceptions such as `color.link`, `color.blanket`, `color.skeleton`, and `color.chart.*` in\nthe token catalog rather than extending the pattern.\n\n## Choose a semantic role\n\n| Role           | Choose it for                                     | Example use                         |\n| :------------- | :------------------------------------------------ | :---------------------------------- |\n| `danger`       | Destructive actions, errors, or critical failures | Error message or destructive action |\n| `warning`      | Caution, risk, or something that needs attention  | Risk notice                         |\n| `success`      | A successful, completed, or valid state           | Completion message                  |\n| `information`  | A passive informational message                   | Informational notice                |\n| `brand`        | Primary actions or product identity               | Primary action                      |\n| `discovery`    | Discovery, AI, or a new feature                   | New feature callout                 |\n| `neutral`      | Base surfaces and neutral layout                  | Page or control surface             |\n| `input`        | Form field backgrounds and boundaries             | Text field                          |\n| `selected`     | A persistent current choice                       | Selected row or option              |\n| `focused`      | Keyboard focus indicator; border only             | Focus ring                          |\n| `accent.[hue]` | Categories and labels whose hue is optional       | User-chosen tag                     |\n\nKeep fixed meaning in the semantic role. For example, an error uses `danger` and a successful state\nuses `success`; an accent red or green is for a category whose color does not carry that meaning.\n\n## Pair semantic backgrounds and foregrounds\n\n| Background                                              | Text and icon                                                 |\n| :------------------------------------------------------ | :------------------------------------------------------------ |\n| Semantic `*.bold` or `*.bolder`                         | `color.text.inverse` and `color.icon.inverse`                 |\n| `color.background.warning.bold`                         | `color.text.warning.inverse` and `color.icon.warning.inverse` |\n| Subtle, subtler, subtlest, or default semantic surfaces | Matching role text and icon, such as `color.text.danger`      |\n\nUse the warning-specific inverse pair shown above on a bold warning background. Accent foreground\npairings are in the Color accents guidance.\n\n```tsx\n// Error banner\nbackgroundColor: token('color.background.danger.bold'),\ncolor: token('color.text.inverse'),\n\n// Category label whose hue carries no status meaning\nbackgroundColor: token('color.background.accent.red.bolder'),\ncolor: token('color.text.inverse'),\n```\n\n## Apply state to the interactive element\n\n### Form fields\n\nUse `color.background.input` for the field background, with `color.background.input.hovered` and\n`color.background.input.pressed` for those states. Use `color.border.input` for the field boundary.\nStart with the ADS form component’s treatment when one owns the control.\n\n### Selection and focus\n\nUse `color.background.selected`, `color.text.selected`, `color.icon.selected`, or\n`color.border.selected` for a persistent choice. Use `color.border.focused` for keyboard focus. When\nan element is both selected and focused, keep the selected treatment and add the focus indicator.\nDon’t use link, brand, or focused tokens to communicate selection. Pair selection color with another\ncue, such as a checkmark, underline, border, or shape change, so selection remains clear without\ncolor alone.\n\nApply `hovered` and `pressed` variants to the currently interactive element. Keep a selected item\nrecognizable during those temporary states. Icons do not have dedicated hovered or pressed color\ntokens; use a subtle neutral background such as `color.background.neutral.subtle.hovered` or\n`color.background.neutral.subtle.pressed` when the icon’s control needs a surface response.\n\n## Check the rendered result\n\nInspect the foreground, meaningful borders, and state changes against the final visible background\nin the themes the experience supports. For translucent colors, include the underlying surface when\nchecking contrast. Use `color.chart.*` for chart marks and product UI tokens for axes, labels, and\ngridlines.\n\n## Look up exact tokens\n\nSearch the ADS token registry when an identifier or pairing is uncertain:\n\n```bash\natlas ads search \"danger background\" --type token\natlas ads token color.background.danger.bold --json\n```\n\nIf the Atlas plugin is unavailable, use\n`npx @atlaskit/ads-cli search \"danger background\" --type token`.",
+  name: 'Color',
+  keywords: ['color', 'selected state colors', 'focus indicator colors', 'hovered and pressed states', 'contrast', 'palette', 'brand', 'design tokens', 'themes', 'input backgrounds', 'semantic statuses']
 }, {
-  content: 'Accents don\'t communicate any specific meaning to users, unlike success, warning, or other\n[color roles](https://atlassian.design/foundations/color#color-roles).\n\nUse accent colors where users choose a color for their content (in\n[color pickers](https://atlassian.design/foundations/color/color-picker-swatches)), or in\nexperiences where color helps categorize content.\n\n<img\n\tsrc={accentsWhiteboardLight}\n\talt="Color ramps for all saturated colors, which are blue, teal, green, lime, yellow, orange, red, magenta, and purple."\n/>\n\n## Color options\n\nThere are 10 accent colors available: blue, teal, green, lime, yellow, purple, magenta, red, orange,\nand gray.\n\n<img src={accentsColorsLight} alt="Tags shown in the 10 accent colors." />\n\n## Applying accent colors\n\nEach accent color has dedicated [design tokens](https://atlassian.design/tokens/design-tokens) that\ncan be applied to backgrounds, text, borders and icons. The full list of tokens is available in\n[design token reference list](https://atlassian.design/components/tokens/all-tokens).\n\nIf you aren\'t sure whether to use an accent token, consider whether the color could be swapped for\nanother without changing the experience or meaning behind it.\n\n<DoDontGrid>\n\t<DoDont type="do" image={{ url: accentsRoleDo, alt: \'\' }}>\n\t\tUse accent tokens for any experience where the color is just one of many colors, and changing it\n\t\twould have no impact on the experience.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: accentsRoleDont, alt: \'\' }}>\n\t\tDon\'t use accent tokens when the color has a specific meaning in our system, such as\n\t\tinformation, warning, or success.\n\t</DoDont>\n</DoDontGrid>\n\n## Emphasis levels\n\nAccent tokens come in multiple shades, which can either provide different emphasis levels for visual\nhierarchy or be used to provide more color options for user-generated content.\n\n### Background accent tokens\n\nBackground accent tokens have four emphasis levels ranging from subtlest to bolder.\n\n<img\n\tsrc={accentsBackgroundAccentTokensLight}\n\talt="A color picker with four shades per color. There is a label pointing to each shade of purple. From most subtle to boldest, the labels say color.background.accent.purple.subtlest, color.background.accent.purple.subtler, color.background.accent.purple.subtle, and color.background.accent.purple.bold."\n/>\n\n### Text accent tokens\n\nText accent tokens have two emphasis levels – default and bolder.\n\n<img\n\tsrc={accentsTextAccentTokensLight}\n\talt="Examples of text in different colors. A label points to text in a lighter magenta that says color.text.accent.magenta.default. Another label points to text with a darker shade that says color.text.accent.magenta.bolder."\n/>\n\n### Icon accent tokens\n\nIcon accent tokens have two emphasis levels – default and bolder.\n\n<img\n\tsrc={accentsIconsLight}\n\talt="Examples of icons in different colors. A label points to an icon in a lighter magenta that says color.icon.accent.magenta.default. Another label points to an icon with a darker shade that says color.icon.accent.magenta.bolder."\n/>\n\n## Accent color accessibility\n\nWhen pairing accent text or icon colors against backgrounds, make sure they meet\n[minimum contrast requirements](https://atlassian.design/foundations/color#accessibility-in-color).\n\n- Pair default or bolder accent text or icons with subtlest and subtler accent backgrounds\n- Pair bolder accent text or icons with subtle accent backgrounds\n- Pair inverse text or icons with bolder accent backgrounds\n\nIf you\'re pairing text or icon tokens outside of these recommendations, ensure they meet the minimum\ncontrast requirements against the background.\n\n<img\n\tsrc={accentsColorAccessibility2Light}\n\talt="Visualization of how various teal text and background pairings can look. Default and bolder text appears on a subtlest background, default and bolder text appears on a subtler background, bolder text appears on a subtle background, and inverse text appears on a bolder background.Visualization of how various teal icon and background pairings can look. Default accent icons or icons using accent text appear on a subtlest background, an icon using accent text appears on a subtler or subtle background, and an inverse icon appears on a bolder background.\n"\n/>\n<img\n\tsrc={accentsColorAccessibilityLight}\n\talt="Visualization of how various teal text and background pairings can look. Default and bolder text appears on a subtlest background, default and bolder text appears on a subtler background, bolder text appears on a subtle background, and inverse text appears on a bolder background.Visualization of how various teal icon and background pairings can look. Default accent icons or icons using accent text appear on a subtlest background, an icon using accent text appears on a subtler or subtle background, and an inverse icon appears on a bolder background.\n"\n/>\n\n## Best practices\n\n### Avoid yellow\n\nYellow presents a unique challenge for accessibility and can appear more like brown. Consider using\na different accent color in its place, such as orange.\n\n<DoDontGrid>\n\t<DoDont type="do" image={{ url: accentsAvoidYellowDoLight, alt: \'\' }}>\n\t\tConsider using accent tokens other than yellow, such as orange.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: accentsAvoidYellowDontLight, alt: \'\' }}>\n\t\tAvoid using yellow accent tokens, as these become brown to meet contrast requirements.\n\t</DoDont>\n</DoDontGrid>\n\n### Use borders for more contrast around subtle backgrounds\n\nPair subtler accent backgrounds with accent borders if your\n[experience needs to pass 3:1 contrast](https://atlassian.design/foundations/color#accessibility-in-color).\n\nBolder accent backgrounds meet these requirements on their own. For data visualization, use our\n[chart tokens](https://atlassian.design/foundations/color/data-visualization-color#custom-charts)\ninstead.\n\n<img\n\tsrc={accentsBorderTokenLight}\n\talt="View of a calendar event with a label pointing to the border color that says color.border.accent.magenta. Another label points to the background color that says color.background.accent.magenta.subtler."\n/>\n\n### Avoid mixing different accent colors\n\nMaintain visual harmony by combining foreground and background elements with colors from the same\nfamily.\n\n<DoDontGrid>\n\t<DoDont type="do" image={{ url: accentsMixingColorsDoLight, alt: \'\' }}>\n\t\tPair accent background and foreground elements (text, icons, or borders) from the same color to\n\t\tcreate harmonious experiences.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: accentsMixingColorsDontLight, alt: \'\' }}>\n\t\tDon\'t mix accent backgrounds with different colored foreground elements (text, icons, or\n\t\tborders).\n\t</DoDont>\n</DoDontGrid>',
-  keywords: ['accent colors', 'status colors', 'semantic colors', 'success', 'warning', 'error']
+  content: "# Color accents\n\nUse accents for categories, projects, and labels when their hue can change without changing their\nmeaning. Choose a semantic color role for status, alerts, validation, primary actions, and discovery\ninstead; see the Color guidance.\n\nStart with the existing ADS component treatment for tags and labels. For custom UI, keep the\nbackground, text, and icon in the same accent hue family.\n\n**Available hues:** `blue`, `teal`, `green`, `lime`, `yellow`, `orange`, `red`, `magenta`, `purple`,\nand `gray`.\n\nPrefer another accent hue, such as orange, to yellow. Yellow accents can appear brown as their\nvalues adjust to meet contrast requirements.\n\n## Pair hue and emphasis\n\n| Background emphasis     | Text and icon                                 |\n| :---------------------- | :-------------------------------------------- |\n| `subtlest` or `subtler` | Matching accent `default` or `bolder`         |\n| `subtle`                | Matching accent `bolder`                      |\n| `bolder`                | `color.text.inverse` and `color.icon.inverse` |\n\n```tsx\n// A category tag: the blue hue identifies a category, not a status\nbackgroundColor: token('color.background.accent.blue.subtlest'),\ncolor: token('color.text.accent.blue'),\n```\n\nUse `color.chart.*` for chart marks. For other pairings, check the rendered foreground and\nbackground: text needs 4.5:1 contrast and meaningful UI boundaries need 3:1.\n\n## Choose borders by their purpose\n\nUse `color.border.accent.[hue]` for a meaningful accent border on a non-bold accent background when\nthe boundary needs to meet 3:1 contrast. Verify the rendered pair when the boundary communicates a\ncontrol or state. The `.subtle` accent border variant is decorative; use it for visual decoration\nthat does not need to identify a boundary or state, not for a required control boundary. A required\nboundary must remain distinguishable without relying on a low-contrast decorative border.\n\n## Verify themes and states\n\nCheck the tag or label in its actual component, theme, and interaction states. Confirm that its hue\nstill means only the category, its text remains legible, and any required boundary stays visible.",
+  name: 'Color accents',
+  keywords: ['accent colors', 'non-status color', 'categories', 'tags', 'color pairing', 'accent tags', 'decorative borders', 'required borders', 'status colors', 'semantic colors', 'success', 'warning', 'error']
 }, {
   content: '## The palette\n\n<ColorPaletteRamps />\n\n## Picking colors for dark mode\n\nNeutral colors are set up in a way that makes it easy to convert a light theme to a dark theme. If\nyou use our [design tokens](https://atlassian.design/tokens/design-tokens) to apply colors, this\nmapping is done for you.\n\nThere is a light neutral ramp and an equivalent dark neutral ramp. Neutral100 in the light neutral\nramp should equate to DarkNeutral100 in the dark neutral ramp.\n\n<img\n\tsrc={paletteNeutralMapping}\n\talt="How light neutral ramp maps to dark neutral ramp in light and dark mode respectively."\n/>\n\nSaturated colors are also easy to convert from a light theme to a dark theme using symmetry. We\ncurrently have 10 swatches set up in each palette. If the swatches are divided in half, each half\nbecomes a mirror.\n\n<img\n\tsrc={paletteSaturatedMapping}\n\talt="How colors in the blue ramp maps across light and dark mode."\n/>\n\nFor instance, if a button color is 700 in light theme, it will be 400 in dark theme. If a section\nmessage background is 100 in light theme, it will be 1000 in dark theme. Design tokens will handle\nthese conversions for you.\n\n<img\n\tsrc={paletteJiraBoard}\n\talt="Screenshot of a Confluence page, which is shown half in light mode and half in dark mode. The button background uses B700 in light mode and B400 in dark mode. The section message background uses B100 in light mode and B1000 in dark mode."\n/>\n\nUsing symmetry is a great place to start and will cover most use cases. However, it may not work for\nall use cases and color mapping can be adjusted accordingly.\n\n## Dedicated to\n\nThese colors have been dedicated to honor the memory of Rosie and Alexandria, and will be woven into\nAtlassian apps and design for years to come.\n\n<ColorPaletteDedication />',
   keywords: ['color palette', 'color system', 'brand colors', 'primary', 'secondary']

package/dist/esm/tools/get-lint-rules/lint-rules-structured-content.codegen.js

@@ -3,7 +3,7 @@
  *
  * Structured content for MCP (JSON) for ESLint rule docs from constellation.
  *
- * @codegen <<SignedSource::8f3c18de23b372ad464e27e04a839f06>>
+ * @codegen <<SignedSource::519a4af34d9d3f477d07bad55b5fde80>>
  * @codegenCommand yarn build structured-docs
  */
 /* eslint-disable no-template-curly-in-string */
@@ -37,7 +37,7 @@ export var lintRulesMcpStructuredContent = [{
   ruleName: 'ensure-icon-color',
   description: 'In an upcoming release of `@atlaskit/icon`, new icon components in `@atlaskit/icon/core`,'
 }, {
-  content: "{\"ruleName\":\"ensure-proper-xcss-usage\",\"description\":\"This ESLint rule enforces proper usage of the `xcss` prop with compiled Primitives from\",\"content\":\"# ensure-proper-xcss-usage\\n\\nThis ESLint rule enforces proper usage of the `xcss` prop with compiled Primitives from\\n`@atlaskit/primitives/compiled`.\\n\\n### Incorrect\\n\\n```tsx\\nimport { Box } from '@atlaskit/primitives/compiled';\\nimport { xcss } from '@atlaskit/primitives';\\nimport { cssMap } from '@atlaskit/css';\\n\\nconst oldStyles = xcss({\\n  color: 'red',\\n});\\n\\nconst styles = cssMap({\\n  root: { width: '100%' }\\n});\\n\\n// ❌ xcss variable with compiled component\\n<Box xcss={oldStyles} />\\n\\n// ❌ cssMap without key\\n<Box xcss={styles} />\\n```\\n\\n### Correct\\n\\n```tsx\\nimport { Box } from '@atlaskit/primitives/compiled';\\nimport { cssMap } from '@atlaskit/css';\\n\\nconst styles = cssMap({\\n\\troot: { color: token('color.text.subtle') },\\n\\tsecondary: { color: token('color.text.subtle') },\\n});\\n\\n<Box xcss={styles.root} />;\\n```\\n\\n### Alternative Correct Usage\\n\\n```tsx\\n// ✅ Using inline styles (when cssMap is not needed)\\nimport { Box } from '@atlaskit/primitives/compiled';\\n\\n<Box xcss={{ color: 'red' }} />;\\n\\n// ✅ Or continue using old primitives (but migration is recommended)\\nimport { Box, xcss } from '@atlaskit/primitives';\\n\\nconst oldStyles = xcss({ color: 'red' });\\n\\n<Box xcss={oldStyles} />;\\n```\\n\"}",
+  content: "{\"ruleName\":\"ensure-proper-xcss-usage\",\"description\":\"This ESLint rule enforces proper usage of the `xcss` prop with compiled Primitives from\",\"content\":\"# ensure-proper-xcss-usage\\n\\nThis ESLint rule enforces proper usage of the `xcss` prop with compiled Primitives from\\n`@atlaskit/primitives/compiled`.\\n\\n### Incorrect\\n\\n```tsx\\nimport { Box } from '@atlaskit/primitives/compiled/box';\\nimport { xcss } from '@atlaskit/primitives';\\nimport { cssMap } from '@atlaskit/css';\\n\\nconst oldStyles = xcss({\\n  color: 'red',\\n});\\n\\nconst styles = cssMap({\\n  root: { width: '100%' }\\n});\\n\\n// ❌ xcss variable with compiled component\\n<Box xcss={oldStyles} />\\n\\n// ❌ cssMap without key\\n<Box xcss={styles} />\\n```\\n\\n### Correct\\n\\n```tsx\\nimport { Box } from '@atlaskit/primitives/compiled/box';\\nimport { cssMap } from '@atlaskit/css';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst styles = cssMap({\\n\\troot: { color: token('color.text.subtle') },\\n\\tsecondary: { color: token('color.text.subtle') },\\n});\\n\\n<Box xcss={styles.root} />;\\n```\\n\\n### Alternative Correct Usage\\n\\nUse the component's built-in styling props when no style override is needed.\\n\\n```tsx\\nimport { Box } from '@atlaskit/primitives/compiled/box';\\n\\n<Box padding=\\\"space.100\\\" backgroundColor=\\\"color.background.neutral\\\" />;\\n```\\n\"}",
   ruleName: 'ensure-proper-xcss-usage',
   description: 'This ESLint rule enforces proper usage of the `xcss` prop with compiled Primitives from'
 }, {
@@ -49,7 +49,7 @@ export var lintRulesMcpStructuredContent = [{
   ruleName: 'icon-label',
   description: 'Icon labels are used to describe what the icon is so the visually impaired can be described what the'
 }, {
-  content: '{"ruleName":"index","description":"---","content":"---\\norder: 0\\n---\\n\\nThis plugin contains rules that should be used when working with the\\n[Atlassian Design System](https://atlassian.design).\\n\\n## Rules\\n\\n<!-- START_RULE_TABLE_CODEGEN -->\\n<!-- @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen -->\\n\\n| Rule                                                                                                                                                  | Description                                                                                                                                                                                                                                                                                                         | Recommended | Fixable | Suggestions |\\n| ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------- | ----------- |\\n| <a href=\\"/components/eslint-plugin-design-system/consistent-css-prop-usage/usage\\">consistent-css-prop-usage</a>                                       | Ensures consistency with `css` and `xcss` prop usages                                                                                                                                                                                                                                                               | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/enforce-inline-styles-in-select/usage\\">enforce-inline-styles-in-select</a>                           | Disallow unsupported CSS selectors in styles prop for @atlaskit/select and require inline styles only                                                                                                                                                                                                               |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-avatar-tag-avatar-props/usage\\">ensure-avatar-tag-avatar-props</a>                             | Ensures AvatarTag avatar prop does not include controlled props (size, borderColor, appearance) which are managed internally.                                                                                                                                                                                       | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-design-token-usage/usage\\">ensure-design-token-usage</a>                                       | Enforces usage of design tokens rather than hard-coded values.                                                                                                                                                                                                                                                      | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-design-token-usage-preview/usage\\">ensure-design-token-usage/preview</a>                       | Enforces usage of pre-release design tokens rather than hard-coded values.                                                                                                                                                                                                                                          |             | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-icon-color/usage\\">ensure-icon-color</a>                                                       | Enforces that upcoming icon components have a color prop set, to enable a migration of the default value.                                                                                                                                                                                                           |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-proper-xcss-usage/usage\\">ensure-proper-xcss-usage</a>                                         | Enforces proper xcss usage: migrate from xcss() to cssMap() and use cssMap objects with specific keys.                                                                                                                                                                                                              |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/expand-motion-shorthand/usage\\">expand-motion-shorthand</a>                                           | Expands `transition` and `animation` CSS shorthand properties into their individual sub-properties, so individual values can be replaced with motion tokens.                                                                                                                                                        |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/icon-label/usage\\">icon-label</a>                                                                     | Enforces accessible usage of icon labels when composed with Atlassian Design System components.                                                                                                                                                                                                                     | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/lozenge-badge-tag-labelling-system-migration/usage\\">lozenge-badge-tag-labelling-system-migration</a> | Helps migrate Lozenge isBold prop, Badge appearance values, and SimpleTag/RemovableTag components as part of the Labelling System Phase 1 migration.                                                                                                                                                                |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-banned-imports/usage\\">no-banned-imports</a>                                                       | Disallow importing banned modules.                                                                                                                                                                                                                                                                                  | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-css-map-scoped/usage\\">no-css-map-scoped</a>                                                       | Disallows usage of the experimental `cssMapScoped` API from `@compiled/react`. This API is internal and is not part of the public Compiled CSS-in-JS interface.                                                                                                                                                     | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-css-tagged-template-expression/usage\\">no-css-tagged-template-expression</a>                       | Disallows any `css` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                          |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-dark-theme-vr-tests/usage\\">no-dark-theme-vr-tests</a>                                             | Disallow using dark colorScheme in VR tests.                                                                                                                                                                                                                                                                        |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-deprecated-apis/usage\\">no-deprecated-apis</a>                                                     | Disallow using deprecated APIs.                                                                                                                                                                                                                                                                                     | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-deprecated-design-token-usage/usage\\">no-deprecated-design-token-usage</a>                         | Disallow using deprecated design tokens.                                                                                                                                                                                                                                                                            | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-deprecated-imports/usage\\">no-deprecated-imports</a>                                               | Disallow importing deprecated modules.                                                                                                                                                                                                                                                                              | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-direct-use-of-web-platform-drag-and-drop/usage\\">no-direct-use-of-web-platform-drag-and-drop</a>   | Disallow using direct use of native drag and drop (please use Pragmatic drag and drop)                                                                                                                                                                                                                              | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-emotion-primitives/usage\\">no-emotion-primitives</a>                                               | Ensures usage of Compiled Primitives import instead of Emotion entrypoint.                                                                                                                                                                                                                                          |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-empty-styled-expression/usage\\">no-empty-styled-expression</a>                                     | Forbids any styled expression to be used when passing empty arguments to styled.div() (or other JSX elements).                                                                                                                                                                                                      |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-exported-css/usage\\">no-exported-css</a>                                                           | Forbid exporting `css` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable.                                                                                                                                                              |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-exported-keyframes/usage\\">no-exported-keyframes</a>                                               | Forbid exporting `keyframes` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable.                                                                                                                                                        |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-anchor/usage\\">no-html-anchor</a>                                                             | Discourage direct usage of HTML anchor elements in favor of Atlassian Design System link components.                                                                                                                                                                                                                | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-button/usage\\">no-html-button</a>                                                             | Discourage direct usage of HTML button elements in favor of Atlassian Design System button components.                                                                                                                                                                                                              | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-checkbox/usage\\">no-html-checkbox</a>                                                         | Discourage direct usage of HTML checkbox elements in favor of the Atlassian Design System checkbox component.                                                                                                                                                                                                       | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-code/usage\\">no-html-code</a>                                                                 | Discourage direct usage of HTML code elements in favor of the Atlassian Design System code component.                                                                                                                                                                                                               | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-heading/usage\\">no-html-heading</a>                                                           | Discourage direct usage of HTML heading elements in favor of Atlassian Design System heading components.                                                                                                                                                                                                            | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-image/usage\\">no-html-image</a>                                                               | Discourage direct usage of HTML image elements in favor of the Atlassian Design System image component.                                                                                                                                                                                                             | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-radio/usage\\">no-html-radio</a>                                                               | Discourage direct usage of HTML radio elements in favor of the Atlassian Design System radio component.                                                                                                                                                                                                             | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-range/usage\\">no-html-range</a>                                                               | Discourage direct usage of HTML range elements in favor of the Atlassian Design System range component.                                                                                                                                                                                                             | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-select/usage\\">no-html-select</a>                                                             | Discourage direct usage of HTML select elements in favor of the Atlassian Design System select component.                                                                                                                                                                                                           | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-text-input/usage\\">no-html-text-input</a>                                                     | Discourage direct usage of HTML text input elements in favor of the Atlassian Design System textfield component.                                                                                                                                                                                                    | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-textarea/usage\\">no-html-textarea</a>                                                         | Discourage direct usage of HTML textarea elements in favor of the Atlassian Design System textarea component.                                                                                                                                                                                                       | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-icon-spacing-prop/usage\\">no-icon-spacing-prop</a>                                                 | Disallows usage of the deprecated spacing prop on new icons. Use Flex with cssMap for spacing instead.                                                                                                                                                                                                              | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-invalid-css-map/usage\\">no-invalid-css-map</a>                                                     | Checks the validity of a CSS map created through cssMap. This is intended to be used alongside TypeScript\'s type-checking.                                                                                                                                                                                          | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-keyframes-tagged-template-expression/usage\\">no-keyframes-tagged-template-expression</a>           | Disallows any `keyframe` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                     |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-margin/usage\\">no-margin</a>                                                                       | Disallow using the margin CSS property.                                                                                                                                                                                                                                                                             |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-modal-label/usage\\">no-modal-label</a>                                                             | Disallows usage of the `label` prop on Atlassian Design System modal dialog and modal entry-point triggers.                                                                                                                                                                                                         | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-nested-styles/usage\\">no-nested-styles</a>                                                         | Disallows use of nested styles in `css` functions.                                                                                                                                                                                                                                                                  | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-physical-properties/usage\\">no-physical-properties</a>                                             | Disallow physical properties and values in `css` and `cssMap` function calls.                                                                                                                                                                                                                                       |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-placeholder/usage\\">no-placeholder</a>                                                             | Placeholders should not be used. If information should be given to the user about the proper type or formatting of a value, this should be included using a helper message that is associated to the input instead.                                                                                                 | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-readonly-or-disabled-inputs/usage\\">no-readonly-or-disabled-inputs</a>                             | Inputs should almost always be interactive. Disabled and read-only inputs can usually be replaced by a more user-friendly design pattern.                                                                                                                                                                           | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-separator-with-list-elements/usage\\">no-separator-with-list-elements</a>                           | Warn when the `separator` prop is used with `as=\\"li\\"`, `as=\\"ol\\"`, or `as=\\"dl\\"` in the Inline component.                                                                                                                                                                                                             | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-styled-tagged-template-expression/usage\\">no-styled-tagged-template-expression</a>                 | Disallows any `styled` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                       |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-to-match-snapshot/usage\\">no-to-match-snapshot</a>                                                 | Disallow using toMatchSnapshot() and toMatchInlineSnapshot() in unit tests. Snapshot assertions should be replaced with explicit assertions.                                                                                                                                                                        |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unsafe-design-token-usage/usage\\">no-unsafe-design-token-usage</a>                                 | Enforces design token usage is statically and locally analyzable.                                                                                                                                                                                                                                                   | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unsafe-inline-snapshot/usage\\">no-unsafe-inline-snapshot</a>                                       | Enforce guardrails on toMatchInlineSnapshot usage: snapshots must not exceed 100 lines and must not contain internal implementation details like className or style attributes.                                                                                                                                     |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unsafe-style-overrides/usage\\">no-unsafe-style-overrides</a>                                       | Discourage usage of unsafe style overrides used against the Atlassian Design System.                                                                                                                                                                                                                                | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unsupported-drag-and-drop-libraries/usage\\">no-unsupported-drag-and-drop-libraries</a>             | Disallow importing unsupported drag and drop modules.                                                                                                                                                                                                                                                               | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unused-css-map/usage\\">no-unused-css-map</a>                                                       | Detects unused styles in cssMap objects to help keep code clean.                                                                                                                                                                                                                                                    | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/prefer-primitives/usage\\">prefer-primitives</a>                                                       | Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability.                                                                                                                                                                                                |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-button-group-label/usage\\">use-button-group-label</a>                                             | Ensures button groups are described to assistive technology by a direct label or by another element.                                                                                                                                                                                                                | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-character-counter-field/usage\\">use-character-counter-field</a>                                   | Suggests using CharacterCounterField or CharacterCounter when Textfield or Textarea components have maxLength or minLength props.                                                                                                                                                                                   | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-correct-field/usage\\">use-correct-field</a>                                                       | Ensure makers use appropriate field component for their respective form elements.                                                                                                                                                                                                                                   | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-cx-function-in-xcss/usage\\">use-cx-function-in-xcss</a>                                           | Enforces cx function use to combine styles in xcss.                                                                                                                                                                                                                                                                 | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-datetime-picker-calendar-button/usage\\">use-datetime-picker-calendar-button</a>                   | Encourages makers to use calendar button in Atlassian Design System\'s date picker and datetime picker components.                                                                                                                                                                                                   | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-drawer-label/usage\\">use-drawer-label</a>                                                         | Encourages to provide accessible name for Atlassian Design System Drawer component.                                                                                                                                                                                                                                 | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-field-message-wrapper/usage\\">use-field-message-wrapper</a>                                       | Encourage use of message wrapper component when using form message components.                                                                                                                                                                                                                                      | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-heading/usage\\">use-heading</a>                                                                   | Encourage the usage of heading components.                                                                                                                                                                                                                                                                          | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-heading-level-in-section-message/usage\\">use-heading-level-in-section-message</a>                 | The `SectionMessage` component in `@atlaskit/section-message` needs to be the correct level within the document flow. This is not something that can be automated and requires contextual knowledge of what is present in the experience.                                                                           | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-heading-level-in-spotlight-card/usage\\">use-heading-level-in-spotlight-card</a>                   | Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context.                                                                                                                              | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-href-in-link-item/usage\\">use-href-in-link-item</a>                                               | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-latest-xcss-syntax/usage\\">use-latest-xcss-syntax</a>                                             | Enforces usage of space design tokens rather than hard-coded values in xcss.                                                                                                                                                                                                                                        | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-latest-xcss-syntax-typography/usage\\">use-latest-xcss-syntax-typography</a>                       | Prohibits use of unsafe styling properties in xcss. Please use Text/Heading primitives instead.                                                                                                                                                                                                                     | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-menu-section-title/usage\\">use-menu-section-title</a>                                             | Encourages makers to provide accessible title for Atlassian Design System Menu Section component.                                                                                                                                                                                                                   | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-modal-dialog-close-button/usage\\">use-modal-dialog-close-button</a>                               | Encourages makers to use close button in Atlassian Design System\'s modal dialog component.                                                                                                                                                                                                                          | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-modal-title/usage\\">use-modal-title</a>                                                           | Encourages makers to include `ModalTitle` within `ModalHeader` when using Atlassian Design System modal dialog.                                                                                                                                                                                                     | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-onboarding-spotlight-label/usage\\">use-onboarding-spotlight-label</a>                             | Ensures onboarding spotlight dialogs are described to assistive technology by a direct label or by another element.                                                                                                                                                                                                 | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-popup-label/usage\\">use-popup-label</a>                                                           | Encourages to provide accessible name for Atlassian Design System Popup component.                                                                                                                                                                                                                                  | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-pressable-motion/usage\\">use-pressable-motion</a>                                                 | Suggests semantic motion tokens when Pressable or native buttons change interactive colours through local static styles.                                                                                                                                                                                            |             |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-primitives-text/usage\\">use-primitives-text</a>                                                   | Encourage the usage of text components.                                                                                                                                                                                                                                                                             | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-should-render-to-parent/usage\\">use-should-render-to-parent</a>                                   | Encourages makers to use the `shouldRenderToParent` where possible in Atlassian Design System `Popup` and `DropdownMenu` components.                                                                                                                                                                                | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-simple-field/usage\\">use-simple-field</a>                                                         | Encourage use of simple field for better developer experience and accessibility.                                                                                                                                                                                                                                    | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-simple-form/usage\\">use-simple-form</a>                                                           | Encourage use of simple form for better developer experience and accessibility.                                                                                                                                                                                                                                     | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-spotlight-package/usage\\">use-spotlight-package</a>                                               | Discourage the use of @atlaskit/onboarding in favor of @atlaskit/spotlight.                                                                                                                                                                                                                                         |             | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tag-group-label/usage\\">use-tag-group-label</a>                                                   | Ensures tag groups are described to assistive technology by a direct label or by another element.                                                                                                                                                                                                                   | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-textfield-autocomplete/usage\\">use-textfield-autocomplete</a>                                     | Enforce that Textfield components with type=\\"email\\", \\"tel\\", or \\"url\\" have an appropriate autocomplete value for WCAG 2.2 SC 1.3.5 compliance (Identify Input Purpose).                                                                                                                                              | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tokens-motion/usage\\">use-tokens-motion</a>                                                       | Enforces usage of motion design tokens rather than hard-coded duration and easing values.                                                                                                                                                                                                                           |             |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tokens-shape/usage\\">use-tokens-shape</a>                                                         | Enforces usage of shape design tokens rather than hard-coded values.                                                                                                                                                                                                                                                |             | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tokens-space/usage\\">use-tokens-space</a>                                                         | Enforces usage of space design tokens rather than hard-coded values.                                                                                                                                                                                                                                                |             | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tokens-typography/usage\\">use-tokens-typography</a>                                               | Enforces usage of design tokens for typography properties rather than hard-coded values.                                                                                                                                                                                                                            | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-visually-hidden/usage\\">use-visually-hidden</a>                                                   | Enforce usage of the visually hidden component.                                                                                                                                                                                                                                                                     | Yes         | Yes     |             |\\n\\n<!-- END_RULE_TABLE_CODEGEN -->\\n\\n\\n## Props\\n\\nUse the recommended config to get reasonable defaults recommended by the Atlassian Design System:\\n\\n```diff\\nmodule.exports = {\\n  extends: [\\n+    \'plugin:@atlaskit/design-system/recommended\',\\n  ],\\n};\\n```\\n\\nWe don\'t recommended maintaining your own configuration. If you do not use our config you will need\\nto specify individual rules and configuration. Add the plugin to your `eslint.config.cjs` file.\\n\\n```diff\\nmodule.exports = {\\n  plugins: [\\n+    \'@atlaskit/design-system\',\\n  ],\\n};\\n```\\n\\nEnable the rules that you would like to use.\\n\\n```diff\\nmodule.exports = {\\n  rules: [\\n+    \'@atlaskit/design-system/no-deprecated-apis\': \'error\',\\n  ],\\n};\\n```\\n"}',
+  content: '{"ruleName":"index","description":"---","content":"---\\norder: 0\\n---\\n\\nThis plugin contains rules that should be used when working with the\\n[Atlassian Design System](https://atlassian.design).\\n\\n## Rules\\n\\n<!-- START_RULE_TABLE_CODEGEN -->\\n<!-- @codegenCommand afm workspace @atlaskit/eslint-plugin-design-system codegen -->\\n\\n| Rule                                                                                                                                                  | Description                                                                                                                                                                                                                                                                                                         | Recommended | Fixable | Suggestions |\\n| ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------- | ----------- |\\n| <a href=\\"/components/eslint-plugin-design-system/consistent-css-prop-usage/usage\\">consistent-css-prop-usage</a>                                       | Ensures consistency with `css` and `xcss` prop usages                                                                                                                                                                                                                                                               | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/enforce-inline-styles-in-select/usage\\">enforce-inline-styles-in-select</a>                           | Disallow unsupported CSS selectors in styles prop for @atlaskit/select and require inline styles only                                                                                                                                                                                                               |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-avatar-tag-avatar-props/usage\\">ensure-avatar-tag-avatar-props</a>                             | Ensures AvatarTag avatar prop does not include controlled props (size, borderColor, appearance) which are managed internally.                                                                                                                                                                                       | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-design-token-usage/usage\\">ensure-design-token-usage</a>                                       | Enforces usage of design tokens rather than hard-coded values.                                                                                                                                                                                                                                                      | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-design-token-usage-preview/usage\\">ensure-design-token-usage/preview</a>                       | Enforces usage of pre-release design tokens rather than hard-coded values.                                                                                                                                                                                                                                          |             | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-icon-color/usage\\">ensure-icon-color</a>                                                       | Enforces that upcoming icon components have a color prop set, to enable a migration of the default value.                                                                                                                                                                                                           |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-proper-xcss-usage/usage\\">ensure-proper-xcss-usage</a>                                         | Enforces proper xcss usage: migrate from xcss() to cssMap() and use cssMap objects with specific keys.                                                                                                                                                                                                              |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/expand-motion-shorthand/usage\\">expand-motion-shorthand</a>                                           | Expands `transition` and `animation` CSS shorthand properties into their individual sub-properties, so individual values can be replaced with motion tokens.                                                                                                                                                        |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/icon-label/usage\\">icon-label</a>                                                                     | Enforces accessible usage of icon labels when composed with Atlassian Design System components.                                                                                                                                                                                                                     | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/lozenge-badge-tag-labelling-system-migration/usage\\">lozenge-badge-tag-labelling-system-migration</a> | Helps migrate Lozenge isBold prop, Badge appearance values, and SimpleTag/RemovableTag components as part of the Labelling System Phase 1 migration.                                                                                                                                                                |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-banned-imports/usage\\">no-banned-imports</a>                                                       | Disallow importing banned modules.                                                                                                                                                                                                                                                                                  | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-css-map-scoped/usage\\">no-css-map-scoped</a>                                                       | Disallows usage of the experimental `cssMapScoped` API from `@compiled/react`. This API is internal and is not part of the public Compiled CSS-in-JS interface.                                                                                                                                                     | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-css-tagged-template-expression/usage\\">no-css-tagged-template-expression</a>                       | Disallows any `css` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                          |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-dark-theme-vr-tests/usage\\">no-dark-theme-vr-tests</a>                                             | Disallow using dark colorScheme in VR tests.                                                                                                                                                                                                                                                                        |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-deprecated-apis/usage\\">no-deprecated-apis</a>                                                     | Disallow using deprecated APIs.                                                                                                                                                                                                                                                                                     | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-deprecated-design-token-usage/usage\\">no-deprecated-design-token-usage</a>                         | Disallow using deprecated design tokens.                                                                                                                                                                                                                                                                            | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-deprecated-imports/usage\\">no-deprecated-imports</a>                                               | Disallow importing deprecated modules.                                                                                                                                                                                                                                                                              | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-direct-use-of-web-platform-drag-and-drop/usage\\">no-direct-use-of-web-platform-drag-and-drop</a>   | Disallow using direct use of native drag and drop (please use Pragmatic drag and drop)                                                                                                                                                                                                                              | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-emotion-primitives/usage\\">no-emotion-primitives</a>                                               | Ensures usage of Compiled Primitives import instead of Emotion entrypoint.                                                                                                                                                                                                                                          |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-empty-icon-button-label/usage\\">no-empty-icon-button-label</a>                                     | Ensures icon-only Atlassian Design System buttons do not have an empty accessible name.                                                                                                                                                                                                                             | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-empty-styled-expression/usage\\">no-empty-styled-expression</a>                                     | Forbids any styled expression to be used when passing empty arguments to styled.div() (or other JSX elements).                                                                                                                                                                                                      |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-exported-css/usage\\">no-exported-css</a>                                                           | Forbid exporting `css` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable.                                                                                                                                                              |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-exported-keyframes/usage\\">no-exported-keyframes</a>                                               | Forbid exporting `keyframes` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable.                                                                                                                                                        |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-anchor/usage\\">no-html-anchor</a>                                                             | Discourage direct usage of HTML anchor elements in favor of Atlassian Design System link components.                                                                                                                                                                                                                | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-button/usage\\">no-html-button</a>                                                             | Discourage direct usage of HTML button elements in favor of Atlassian Design System button components.                                                                                                                                                                                                              | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-checkbox/usage\\">no-html-checkbox</a>                                                         | Discourage direct usage of HTML checkbox elements in favor of the Atlassian Design System checkbox component.                                                                                                                                                                                                       | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-code/usage\\">no-html-code</a>                                                                 | Discourage direct usage of HTML code elements in favor of the Atlassian Design System code component.                                                                                                                                                                                                               | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-heading/usage\\">no-html-heading</a>                                                           | Discourage direct usage of HTML heading elements in favor of Atlassian Design System heading components.                                                                                                                                                                                                            | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-image/usage\\">no-html-image</a>                                                               | Discourage direct usage of HTML image elements in favor of the Atlassian Design System image component.                                                                                                                                                                                                             | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-radio/usage\\">no-html-radio</a>                                                               | Discourage direct usage of HTML radio elements in favor of the Atlassian Design System radio component.                                                                                                                                                                                                             | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-range/usage\\">no-html-range</a>                                                               | Discourage direct usage of HTML range elements in favor of the Atlassian Design System range component.                                                                                                                                                                                                             | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-select/usage\\">no-html-select</a>                                                             | Discourage direct usage of HTML select elements in favor of the Atlassian Design System select component.                                                                                                                                                                                                           | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-text-input/usage\\">no-html-text-input</a>                                                     | Discourage direct usage of HTML text input elements in favor of the Atlassian Design System textfield component.                                                                                                                                                                                                    | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-textarea/usage\\">no-html-textarea</a>                                                         | Discourage direct usage of HTML textarea elements in favor of the Atlassian Design System textarea component.                                                                                                                                                                                                       | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-icon-spacing-prop/usage\\">no-icon-spacing-prop</a>                                                 | Disallows usage of the deprecated spacing prop on new icons. Use Flex with cssMap for spacing instead.                                                                                                                                                                                                              | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-invalid-css-map/usage\\">no-invalid-css-map</a>                                                     | Checks the validity of a CSS map created through cssMap. This is intended to be used alongside TypeScript\'s type-checking.                                                                                                                                                                                          | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-keyframes-tagged-template-expression/usage\\">no-keyframes-tagged-template-expression</a>           | Disallows any `keyframe` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                     |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-margin/usage\\">no-margin</a>                                                                       | Disallow using the margin CSS property.                                                                                                                                                                                                                                                                             |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-modal-label/usage\\">no-modal-label</a>                                                             | Disallows usage of the `label` prop on Atlassian Design System modal dialog and modal entry-point triggers.                                                                                                                                                                                                         | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-nested-styles/usage\\">no-nested-styles</a>                                                         | Disallows use of nested styles in `css` functions.                                                                                                                                                                                                                                                                  | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-physical-properties/usage\\">no-physical-properties</a>                                             | Disallow physical properties and values in `css` and `cssMap` function calls.                                                                                                                                                                                                                                       |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-placeholder/usage\\">no-placeholder</a>                                                             | Placeholders should not be used. If information should be given to the user about the proper type or formatting of a value, this should be included using a helper message that is associated to the input instead.                                                                                                 | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-readonly-or-disabled-inputs/usage\\">no-readonly-or-disabled-inputs</a>                             | Inputs should almost always be interactive. Disabled and read-only inputs can usually be replaced by a more user-friendly design pattern.                                                                                                                                                                           | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-separator-with-list-elements/usage\\">no-separator-with-list-elements</a>                           | Warn when the `separator` prop is used with `as=\\"li\\"`, `as=\\"ol\\"`, or `as=\\"dl\\"` in the Inline component.                                                                                                                                                                                                             | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-styled-tagged-template-expression/usage\\">no-styled-tagged-template-expression</a>                 | Disallows any `styled` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                       |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-to-match-snapshot/usage\\">no-to-match-snapshot</a>                                                 | Disallow using toMatchSnapshot() and toMatchInlineSnapshot() in unit tests. Snapshot assertions should be replaced with explicit assertions.                                                                                                                                                                        |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unsafe-design-token-usage/usage\\">no-unsafe-design-token-usage</a>                                 | Enforces design token usage is statically and locally analyzable.                                                                                                                                                                                                                                                   | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unsafe-inline-snapshot/usage\\">no-unsafe-inline-snapshot</a>                                       | Enforce guardrails on toMatchInlineSnapshot usage: snapshots must not exceed 100 lines and must not contain internal implementation details like className or style attributes.                                                                                                                                     |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unsafe-style-overrides/usage\\">no-unsafe-style-overrides</a>                                       | Discourage usage of unsafe style overrides used against the Atlassian Design System.                                                                                                                                                                                                                                | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unsupported-drag-and-drop-libraries/usage\\">no-unsupported-drag-and-drop-libraries</a>             | Disallow importing unsupported drag and drop modules.                                                                                                                                                                                                                                                               | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unused-css-map/usage\\">no-unused-css-map</a>                                                       | Detects unused styles in cssMap objects to help keep code clean.                                                                                                                                                                                                                                                    | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/prefer-primitives/usage\\">prefer-primitives</a>                                                       | Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability.                                                                                                                                                                                                |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-button-group-label/usage\\">use-button-group-label</a>                                             | Ensures button groups are described to assistive technology by a direct label or by another element.                                                                                                                                                                                                                | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-character-counter-field/usage\\">use-character-counter-field</a>                                   | Suggests using CharacterCounterField or CharacterCounter when Textfield or Textarea components have maxLength or minLength props.                                                                                                                                                                                   | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-correct-field/usage\\">use-correct-field</a>                                                       | Ensure makers use appropriate field component for their respective form elements.                                                                                                                                                                                                                                   | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-cx-function-in-xcss/usage\\">use-cx-function-in-xcss</a>                                           | Enforces cx function use to combine styles in xcss.                                                                                                                                                                                                                                                                 | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-datetime-picker-calendar-button/usage\\">use-datetime-picker-calendar-button</a>                   | Encourages makers to use calendar button in Atlassian Design System\'s date picker and datetime picker components.                                                                                                                                                                                                   | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-drawer-label/usage\\">use-drawer-label</a>                                                         | Encourages to provide accessible name for Atlassian Design System Drawer component.                                                                                                                                                                                                                                 | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-field-message-wrapper/usage\\">use-field-message-wrapper</a>                                       | Encourage use of message wrapper component when using form message components.                                                                                                                                                                                                                                      | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-heading/usage\\">use-heading</a>                                                                   | Encourage the usage of heading components.                                                                                                                                                                                                                                                                          | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-heading-level-in-section-message/usage\\">use-heading-level-in-section-message</a>                 | The `SectionMessage` component in `@atlaskit/section-message` needs to be the correct level within the document flow. This is not something that can be automated and requires contextual knowledge of what is present in the experience.                                                                           | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-heading-level-in-spotlight-card/usage\\">use-heading-level-in-spotlight-card</a>                   | Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context.                                                                                                                              | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-href-in-link-item/usage\\">use-href-in-link-item</a>                                               | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-latest-xcss-syntax/usage\\">use-latest-xcss-syntax</a>                                             | Enforces usage of space design tokens rather than hard-coded values in xcss.                                                                                                                                                                                                                                        | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-latest-xcss-syntax-typography/usage\\">use-latest-xcss-syntax-typography</a>                       | Prohibits use of unsafe styling properties in xcss. Please use Text/Heading primitives instead.                                                                                                                                                                                                                     | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-menu-section-title/usage\\">use-menu-section-title</a>                                             | Encourages makers to provide accessible title for Atlassian Design System Menu Section component.                                                                                                                                                                                                                   | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-modal-dialog-close-button/usage\\">use-modal-dialog-close-button</a>                               | Encourages makers to use close button in Atlassian Design System\'s modal dialog component.                                                                                                                                                                                                                          | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-modal-title/usage\\">use-modal-title</a>                                                           | Encourages makers to include `ModalTitle` within `ModalHeader` when using Atlassian Design System modal dialog.                                                                                                                                                                                                     | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-onboarding-spotlight-label/usage\\">use-onboarding-spotlight-label</a>                             | Ensures onboarding spotlight dialogs are described to assistive technology by a direct label or by another element.                                                                                                                                                                                                 | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-popup-label/usage\\">use-popup-label</a>                                                           | Encourages to provide accessible name for Atlassian Design System Popup component.                                                                                                                                                                                                                                  | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-pressable-motion/usage\\">use-pressable-motion</a>                                                 | Suggests semantic motion tokens when Pressable or native buttons change interactive colours through local static styles.                                                                                                                                                                                            |             |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-primitives-text/usage\\">use-primitives-text</a>                                                   | Encourage the usage of text components.                                                                                                                                                                                                                                                                             | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-should-render-to-parent/usage\\">use-should-render-to-parent</a>                                   | Encourages makers to use the `shouldRenderToParent` where possible in Atlassian Design System `Popup` and `DropdownMenu` components.                                                                                                                                                                                | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-simple-field/usage\\">use-simple-field</a>                                                         | Encourage use of simple field for better developer experience and accessibility.                                                                                                                                                                                                                                    | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-simple-form/usage\\">use-simple-form</a>                                                           | Encourage use of simple form for better developer experience and accessibility.                                                                                                                                                                                                                                     | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-spotlight-package/usage\\">use-spotlight-package</a>                                               | Discourage the use of @atlaskit/onboarding in favor of @atlaskit/spotlight.                                                                                                                                                                                                                                         |             | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tag-group-label/usage\\">use-tag-group-label</a>                                                   | Ensures tag groups are described to assistive technology by a direct label or by another element.                                                                                                                                                                                                                   | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-textfield-autocomplete/usage\\">use-textfield-autocomplete</a>                                     | Enforce that Textfield components with type=\\"email\\", \\"tel\\", or \\"url\\" have an appropriate autocomplete value for WCAG 2.2 SC 1.3.5 compliance (Identify Input Purpose).                                                                                                                                              | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tokens-motion/usage\\">use-tokens-motion</a>                                                       | Enforces usage of motion design tokens rather than hard-coded duration and easing values.                                                                                                                                                                                                                           |             |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tokens-shape/usage\\">use-tokens-shape</a>                                                         | Enforces usage of shape design tokens rather than hard-coded values.                                                                                                                                                                                                                                                |             | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tokens-space/usage\\">use-tokens-space</a>                                                         | Enforces usage of space design tokens rather than hard-coded values.                                                                                                                                                                                                                                                |             | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tokens-typography/usage\\">use-tokens-typography</a>                                               | Enforces usage of design tokens for typography properties rather than hard-coded values.                                                                                                                                                                                                                            | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-visually-hidden/usage\\">use-visually-hidden</a>                                                   | Enforce usage of the visually hidden component.                                                                                                                                                                                                                                                                     | Yes         | Yes     |             |\\n\\n<!-- END_RULE_TABLE_CODEGEN -->\\n\\n\\n## Props\\n\\nUse the recommended config to get reasonable defaults recommended by the Atlassian Design System:\\n\\n```diff\\nmodule.exports = {\\n  extends: [\\n+    \'plugin:@atlaskit/design-system/recommended\',\\n  ],\\n};\\n```\\n\\nWe don\'t recommended maintaining your own configuration. If you do not use our config you will need\\nto specify individual rules and configuration. Add the plugin to your `eslint.config.cjs` file.\\n\\n```diff\\nmodule.exports = {\\n  plugins: [\\n+    \'@atlaskit/design-system\',\\n  ],\\n};\\n```\\n\\nEnable the rules that you would like to use.\\n\\n```diff\\nmodule.exports = {\\n  rules: [\\n+    \'@atlaskit/design-system/no-deprecated-apis\': \'error\',\\n  ],\\n};\\n```\\n"}',
   ruleName: 'index',
   description: '---'
 }, {
@@ -101,9 +101,13 @@ export var lintRulesMcpStructuredContent = [{
   ruleName: 'no-direct-use-of-web-platform-drag-and-drop',
   description: 'Block the usage of web platform drag and drop functionality directly. Use Pragmatic drag and drop.'
 }, {
-  content: "{\"ruleName\":\"no-emotion-primitives\",\"description\":\"This rule ensures that imports from `@atlaskit/primitives` are replaced with their Compiled\",\"content\":\"# no-emotion-primitives\\n\\nThis rule ensures that imports from `@atlaskit/primitives` are replaced with their Compiled\\ncounterparts from `@atlaskit/primitives/compiled`. This helps ensure better performance and\\nconsistency across the codebase.\\n\\n## Examples\\n\\nThis rule marks code as violations when it uses the Emotion Primitives import path.\\n\\n### Incorrect\\n\\n```jsx\\nimport { Box } from '@atlaskit/primitives';\\nimport { Stack } from '@atlaskit/primitives';\\n```\\n\\n### Correct\\n\\n```jsx\\nimport { Box } from '@atlaskit/primitives/compiled';\\nimport { Stack } from '@atlaskit/primitives/compiled';\\n```\\n\\nThe rule will detect any imports from `@atlaskit/primitives` and suggest replacing them with the\\ncompiled version.\\n\\n## Options\\n\\n`autofix`: When enabled, the rule will automatically fix imports to use the Compiled entrypoint\\ninstead of just warning. Defaults to `false`.\\n\\n## Configuration\\n\\nBasic usage (warnings only):\\n\\n```js\\n{\\n  '@atlaskit/design-system/use-compiled-primitives': 'warn'\\n}\\n```\\n\\nWith auto-fixing enabled:\\n\\n```js\\n{\\n  '@atlaskit/design-system/use-compiled-primitives': ['warn', { autofix: true }]\\n}\\n```\\n\"}",
+  content: "{\"ruleName\":\"no-emotion-primitives\",\"description\":\"This rule ensures that imports from `@atlaskit/primitives` are replaced with their Compiled\",\"content\":\"# no-emotion-primitives\\n\\nThis rule ensures that imports from `@atlaskit/primitives` are replaced with their Compiled\\ncounterparts from `@atlaskit/primitives/compiled`. This helps ensure better performance and\\nconsistency across the codebase.\\n\\n## Examples\\n\\nThis rule marks code as violations when it uses the Emotion Primitives import path.\\n\\n### Incorrect\\n\\n```jsx\\nimport { Box } from '@atlaskit/primitives';\\nimport { Stack } from '@atlaskit/primitives';\\n```\\n\\n### Correct\\n\\n```jsx\\nimport { Box } from '@atlaskit/primitives/compiled/box';\\nimport { Stack } from '@atlaskit/primitives/compiled/stack';\\n```\\n\\nThe rule will detect any imports from `@atlaskit/primitives` and suggest replacing them with the\\ndedicated compiled entrypoint. Root component and prop-type imports are split into dedicated\\nimports; legacy styling APIs, namespace imports, and bindings without a safe equivalent require\\nmanual migration.\\n\\n## Options\\n\\n`autofix`: When enabled, the rule will automatically fix imports to use the Compiled entrypoint\\ninstead of just warning. Defaults to `false`.\\n\\n## Configuration\\n\\nBasic usage (warnings only):\\n\\n```js\\n{\\n  '@atlaskit/design-system/use-compiled-primitives': 'warn'\\n}\\n```\\n\\nWith auto-fixing enabled:\\n\\n```js\\n{\\n  '@atlaskit/design-system/use-compiled-primitives': ['warn', { autofix: true }]\\n}\\n```\\n\"}",
   ruleName: 'no-emotion-primitives',
   description: 'This rule ensures that imports from `@atlaskit/primitives` are replaced with their Compiled'
+}, {
+  content: '{"ruleName":"no-empty-icon-button-label","description":"Ensures that icon-only Atlassian Design System buttons do not have an empty accessible name.","content":"# no-empty-icon-button-label\\n\\nEnsures that icon-only Atlassian Design System buttons do not have an empty accessible name.\\n\\n`IconButton` and `LinkIconButton` render no visible text, so the `label` prop is the accessible name\\navailable to screen reader users. TypeScript requires the prop, but it still permits empty values.\\nThis rule checks that the label is non-empty.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport IconButton from \'@atlaskit/button/icon/button\';\\n\\n<IconButton icon={CrossIcon} label=\\"\\" onClick={onClose} />;\\n```\\n\\n```tsx\\nimport IconButton from \'@atlaskit/button/icon/button\';\\n\\n<IconButton icon={CopyIcon} label=\\"   \\" />;\\n```\\n\\n### Correct\\n\\n```tsx\\nimport IconButton from \'@atlaskit/button/icon/button\';\\n\\n<IconButton icon={CrossIcon} label=\\"Close\\" onClick={onClose} />;\\n```\\n\\n```tsx\\nimport IconButton from \'@atlaskit/button/icon/button\';\\n\\n<IconButton icon={ShowMoreIcon} label={formatMessage(messages.moreActions)} />;\\n```\\n\\n## Scope\\n\\nThe rule checks the `label` prop on `IconButton` and `LinkIconButton` imported from:\\n\\n- `@atlaskit/button/icon/button`\\n- `@atlaskit/button/icon/link`\\n- `@atlaskit/button/new`\\n\\nIt reports statically empty values, including empty or whitespace-only strings, empty template\\nliterals, `null`, `undefined`, and `false`. Dynamic values such as variables, function calls,\\nelements, and interpolated templates are not evaluated because their runtime value cannot be\\ndetermined safely by a static rule.\\n"}',
+  ruleName: 'no-empty-icon-button-label',
+  description: 'Ensures that icon-only Atlassian Design System buttons do not have an empty accessible name.'
 }, {
   content: '{"ruleName":"no-empty-styled-expression","description":"Disallows/discourages passing empty arguments to any `styled` expression when using a CSS-in-JS","content":"# no-empty-styled-expression\\n\\nDisallows/discourages passing empty arguments to any `styled` expression when using a CSS-in-JS\\nlibrary, including `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.\\n\\nIf Compiled is used in the file, passing an empty object or no object at all causes Compiled to\\nbuild extra `div/span` elements, as opposed to simply using a `div`. This leads to reduced\\nperformance and is greatly discouraged. If a wrapper is necessary, opt to use a `div` or wrap it in\\nthe empty React fragment `<> <YourComponentHere></YourComponentHere> </>`.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nconst EmptyStyledExpression = styled.div();\\n\\nconst EmptyStyledExpressionArgument = styled.div({});\\n\\nconst EmptyStyledExpressionArgument = styled.div([]);\\n```\\n\\n### Correct\\n\\n```tsx\\nconst Wrapper = styled.div({\\n\\tbackgroundColor: \'red\',\\n\\tMyComponent: {\\n\\t\\tbackgroundColor: \'green\',\\n\\t},\\n});\\n```\\n\\n## What to do instead?\\n\\n### Use elements directly\\n\\n```diff\\n- const Wrapper = styled.div({});\\n\\n   function App() {\\n-    return <Wrapper>hello world</Wrapper>;\\n+    return <div>hello world</div>;\\n  }\\n```\\n\\n### Use a React fragment\\n\\n```diff\\n- const Wrapper = styled.div({});\\n\\n   function App() {\\n-    return <Wrapper>hello world</Wrapper>;\\n+    return <>hello world</>;\\n  }\\n```\\n\\n## Options\\n\\n### importSources\\n\\nBy default, this rule will check `styled` usages from:\\n\\n- `@atlaskit/css`\\n- `@atlaskit/primitives`\\n- `@compiled/react`\\n- `@emotion/react`\\n- `@emotion/core`\\n- `@emotion/styled`\\n- `styled-components`\\n\\nTo change this list of libraries, you can define a custom set of `importSources`, which accepts an\\narray of package names (strings).\\n\\n```tsx\\n// [{ importSources: [\'other-lib\'] }]\\n\\nimport { styled } from \'other-lib\';\\n\\n// Invalid!\\nexport const Component = styled.div({});\\n```\\n"}',
   ruleName: 'no-empty-styled-expression',
@@ -117,11 +121,11 @@ export var lintRulesMcpStructuredContent = [{
   ruleName: 'no-exported-keyframes',
   description: 'Disallows `keyframes` export declarations that originate from a CSS-in-JS library, including'
 }, {
-  content: '{"ruleName":"no-html-anchor","description":"Don\'t use native HTML anchors. The Atlassian Design System provides ready-made link components that","content":"# no-html-anchor\\n\\nDon\'t use native HTML anchors. The Atlassian Design System provides ready-made link components that\\ninclude event tracking, automatic router configuration, ensure accessible implementations, and\\nprovide access to ADS styling features like design tokens.\\n\\nUse Atlassian Design System components such as the [Link](/components/link) or\\n[LinkButton](/components/button/link-button) components when suitable. There may also be other\\ncomponents better-suited depending on the use case. If these components aren\'t suitable, use the\\n[Anchor primitive](/components/primitives/anchor) which helps you build custom links with Atlassian\\nDesign System styling.\\n\\n## Examples\\n\\nThis rule marks code as violations when it finds native HTML anchor elements.\\n\\n### Incorrect\\n\\n```jsx\\n<a href=\\"/\\">\\n ^ Using a native HTML `<a>`\\n  Hello, World!\\n</a>\\n\\n<div role=\\"link\\" tabIndex=\\"0\\" data-href=\\"https://www.atlassian.com\\">\\n     ^^^^^^^^^^^ Using `role=\\"link\\"` to create links\\n  Hello, World!\\n</div>\\n\\n```\\n\\n### Correct\\n\\n```jsx\\nimport Anchor from \'@atlaskit/primitives/anchor\';\\n\\n<Anchor href=\\"/\\">Hello, World!</Anchor>;\\n\\nimport Link from \'@atlaskit/link\';\\n\\n<Link href=\\"/\\">Hello, World!</Link>;\\n\\nimport { LinkButton } from \'@atlaskit/button/new\';\\n\\n<LinkButton href=\\"/\\">Hello, World!</LinkButton>;\\n```\\n"}',
+  content: '{"ruleName":"no-html-anchor","description":"Don\'t use native HTML anchors. The Atlassian Design System provides ready-made link components that","content":"# no-html-anchor\\n\\nDon\'t use native HTML anchors. The Atlassian Design System provides ready-made link components that\\ninclude event tracking, automatic router configuration, ensure accessible implementations, and\\nprovide access to ADS styling features like design tokens.\\n\\nUse Atlassian Design System components such as the [Link](/components/link) or\\n[LinkButton](/components/button/link-button) components when suitable. There may also be other\\ncomponents better-suited depending on the use case. If these components aren\'t suitable, use the\\n[Anchor primitive](/components/primitives/anchor) which helps you build custom links with Atlassian\\nDesign System styling.\\n\\n## Examples\\n\\nThis rule marks code as violations when it finds native HTML anchor elements.\\n\\n### Incorrect\\n\\n```jsx\\n<a href=\\"/\\">\\n ^ Using a native HTML `<a>`\\n  Hello, World!\\n</a>\\n\\n<div role=\\"link\\" tabIndex=\\"0\\" data-href=\\"https://www.atlassian.com\\">\\n     ^^^^^^^^^^^ Using `role=\\"link\\"` to create links\\n  Hello, World!\\n</div>\\n\\n```\\n\\n### Correct\\n\\n```jsx\\nimport Anchor from \'@atlaskit/primitives/anchor\';\\n\\n<Anchor href=\\"/\\">Hello, World!</Anchor>;\\n\\nimport Link from \'@atlaskit/link\';\\n\\n<Link href=\\"/\\">Hello, World!</Link>;\\n\\nimport LinkButton from \'@atlaskit/button/link\';\\n\\n<LinkButton href=\\"/\\">Hello, World!</LinkButton>;\\n```\\n"}',
   ruleName: 'no-html-anchor',
   description: "Don't use native HTML anchors. The Atlassian Design System provides ready-made link components that"
 }, {
-  content: '{"ruleName":"no-html-button","description":"Don\'t use native HTML buttons. The Atlassian Design System provides ready-made button components","content":"# no-html-button\\n\\nDon\'t use native HTML buttons. The Atlassian Design System provides ready-made button components\\nthat include event tracking, ensure accessible implementations, and provide access to ADS styling\\nfeatures like design tokens.\\n\\nUse Atlassian Design System components such as the [Button component](/components/button) when\\nsuitable. There may also be other components better-suited depending on the use case. If these\\ncomponents aren\'t suitable, use the [Pressable primitive](/components/primitives/pressable) which\\nhelps you build custom buttons with Atlassian Design System styling.\\n\\n## Examples\\n\\nThis rule marks code as violations when it finds native HTML button elements.\\n\\n### Incorrect\\n\\n```jsx\\n<button>\\n ^^^^^^ Using a native HTML `<button>`\\n  Hello, World!\\n</button>\\n\\n<div role=\\"button\\" tabIndex=\\"0\\">\\n     ^^^^^^^^^^^^^ Using `role=\\"button\\"` to create buttons\\n  Hello, World!\\n</div>\\n\\n<input type=\\"button\\" value=\\"Button\\" />\\n       ^^^^^^^^^^^^^ Using a `<input>` as a button\\n\\n<input type=\\"submit\\" value=\\"Submit\\" />\\n       ^^^^^^^^^^^^^ Using a `<input>` as a button\\n\\n<input type=\\"reset\\" value=\\"Reset\\" />\\n       ^^^^^^^^^^^^ Using a `<input>` as a button\\n\\n<input type=\\"image\\" alt=\\"Submit\\" src=\\"/submit-button.png\\" />\\n       ^^^^^^^^^^^^ Using a `<input>` as a button\\n```\\n\\n### Correct\\n\\n```jsx\\nimport Pressable from \'@atlaskit/primitives/pressable\';\\n\\n<Pressable>Hello, World!</Pressable>;\\n\\nimport Button from \'@atlaskit/button/new\';\\n\\n<Button>Hello, World!</Button>;\\n```\\n"}',
+  content: '{"ruleName":"no-html-button","description":"Don\'t use native HTML buttons. The Atlassian Design System provides ready-made button components","content":"# no-html-button\\n\\nDon\'t use native HTML buttons. The Atlassian Design System provides ready-made button components\\nthat include event tracking, ensure accessible implementations, and provide access to ADS styling\\nfeatures like design tokens.\\n\\nUse Atlassian Design System components such as the [Button component](/components/button) when\\nsuitable. There may also be other components better-suited depending on the use case. If these\\ncomponents aren\'t suitable, use the [Pressable primitive](/components/primitives/pressable) which\\nhelps you build custom buttons with Atlassian Design System styling.\\n\\n## Examples\\n\\nThis rule marks code as violations when it finds native HTML button elements.\\n\\n### Incorrect\\n\\n```jsx\\n<button>\\n ^^^^^^ Using a native HTML `<button>`\\n  Hello, World!\\n</button>\\n\\n<div role=\\"button\\" tabIndex=\\"0\\">\\n     ^^^^^^^^^^^^^ Using `role=\\"button\\"` to create buttons\\n  Hello, World!\\n</div>\\n\\n<input type=\\"button\\" value=\\"Button\\" />\\n       ^^^^^^^^^^^^^ Using a `<input>` as a button\\n\\n<input type=\\"submit\\" value=\\"Submit\\" />\\n       ^^^^^^^^^^^^^ Using a `<input>` as a button\\n\\n<input type=\\"reset\\" value=\\"Reset\\" />\\n       ^^^^^^^^^^^^ Using a `<input>` as a button\\n\\n<input type=\\"image\\" alt=\\"Submit\\" src=\\"/submit-button.png\\" />\\n       ^^^^^^^^^^^^ Using a `<input>` as a button\\n```\\n\\n### Correct\\n\\n```jsx\\nimport Pressable from \'@atlaskit/primitives/pressable\';\\n\\n<Pressable>Hello, World!</Pressable>;\\n\\nimport Button from \'@atlaskit/button/default/button\';\\n\\n<Button>Hello, World!</Button>;\\n```\\n"}',
   ruleName: 'no-html-button',
   description: "Don't use native HTML buttons. The Atlassian Design System provides ready-made button components"
 }, {
@@ -161,7 +165,7 @@ export var lintRulesMcpStructuredContent = [{
   ruleName: 'no-html-textarea',
   description: "Don't use native HTML textarea elements. The Atlassian Design System provides a ready-made textarea"
 }, {
-  content: '{"ruleName":"no-icon-spacing-prop","description":"Disallows usage of the deprecated `spacing` prop on icon components from `@atlaskit/icon/core` and","content":"# no-icon-spacing-prop\\n\\nDisallows usage of the deprecated `spacing` prop on icon components from `@atlaskit/icon/core` and\\n`@atlaskit/icon-lab/core`.\\n\\nThe `spacing` prop is deprecated. Wrap the icon in a `Flex` from `@atlaskit/primitives/compiled`\\nwith `cssMap` padding from `@atlaskit/css` instead.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport AddIcon from \'@atlaskit/icon/core/add\';\\n\\n// ❌ Using deprecated spacing prop\\n<AddIcon label=\\"Add\\" spacing=\\"spacious\\" />\\n<AddIcon label=\\"Add\\" spacing=\\"compact\\" />\\n```\\n\\n### Correct\\n\\n```tsx\\n/** @jsxRuntime classic */\\n/** @jsx jsx */\\nimport { cssMap, jsx } from \'@atlaskit/css\';\\nimport AddIcon from \'@atlaskit/icon/core/add\';\\nimport { Flex } from \'@atlaskit/primitives/compiled\';\\nimport { token } from \'@atlaskit/tokens\';\\n\\nconst iconSpacingStyles = cssMap({\\n  space050: {\\n    paddingBlock: token(\'space.050\'),\\n    paddingInline: token(\'space.050\'),\\n  },\\n});\\n\\n// ✅ Using Flex with cssMap for spacing\\n<Flex xcss={iconSpacingStyles.space050}>\\n  <AddIcon label=\\"Add\\" />\\n</Flex>\\n\\n// ✅ No spacing needed (spacing=\\"none\\")\\n<AddIcon label=\\"Add\\" />\\n```\\n\\n## Migration\\n\\nUse the `next-icon-spacing-to-flex-primitive` codemod via `npx @atlaskit/codemod-cli` to migrate\\nautomatically, or use the 💡 IDE quick-fix suggestion from this ESLint rule.\\n\\nSpacing token reference:\\n\\n| `spacing` value | Icon size     | Token       | Result                      |\\n| --------------- | ------------- | ----------- | --------------------------- |\\n| `spacious`      | medium (16px) | `space.050` | 4px padding → 24px total    |\\n| `compact`       | medium (16px) | `space.050` | 4px padding → 24px total    |\\n| `spacious`      | small (12px)  | `space.075` | 6px padding → 24px total    |\\n| `compact`       | small (12px)  | `space.025` | 2px padding → 16px total    |\\n| `none`          | any           | —           | Remove prop, no Flex needed |\\n"}',
+  content: '{"ruleName":"no-icon-spacing-prop","description":"Disallows usage of the deprecated `spacing` prop on icon components from `@atlaskit/icon/core` and","content":"# no-icon-spacing-prop\\n\\nDisallows usage of the deprecated `spacing` prop on icon components from `@atlaskit/icon/core` and\\n`@atlaskit/icon-lab/core`.\\n\\nThe `spacing` prop is deprecated. Wrap the icon in a `Flex` from `@atlaskit/primitives/compiled`\\nwith `cssMap` padding from `@atlaskit/css` instead.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport AddIcon from \'@atlaskit/icon/core/add\';\\n\\n// ❌ Using deprecated spacing prop\\n<AddIcon label=\\"Add\\" spacing=\\"spacious\\" />\\n<AddIcon label=\\"Add\\" spacing=\\"compact\\" />\\n```\\n\\n### Correct\\n\\n```tsx\\n/** @jsxRuntime classic */\\n/** @jsx jsx */\\nimport { cssMap, jsx } from \'@atlaskit/css\';\\nimport AddIcon from \'@atlaskit/icon/core/add\';\\nimport { Flex } from \'@atlaskit/primitives/compiled/flex\';\\nimport { token } from \'@atlaskit/tokens\';\\n\\nconst iconSpacingStyles = cssMap({\\n  space050: {\\n    paddingBlock: token(\'space.050\'),\\n    paddingInline: token(\'space.050\'),\\n  },\\n});\\n\\n// ✅ Using Flex with cssMap for spacing\\n<Flex xcss={iconSpacingStyles.space050}>\\n  <AddIcon label=\\"Add\\" />\\n</Flex>\\n\\n// ✅ No spacing needed (spacing=\\"none\\")\\n<AddIcon label=\\"Add\\" />\\n```\\n\\n## Migration\\n\\nUse the `next-icon-spacing-to-flex-primitive` codemod via `npx @atlaskit/codemod-cli` to migrate\\nautomatically, or use the 💡 IDE quick-fix suggestion from this ESLint rule.\\n\\nSpacing token reference:\\n\\n| `spacing` value | Icon size     | Token       | Result                      |\\n| --------------- | ------------- | ----------- | --------------------------- |\\n| `spacious`      | medium (16px) | `space.050` | 4px padding → 24px total    |\\n| `compact`       | medium (16px) | `space.050` | 4px padding → 24px total    |\\n| `spacious`      | small (12px)  | `space.075` | 6px padding → 24px total    |\\n| `compact`       | small (12px)  | `space.025` | 2px padding → 16px total    |\\n| `none`          | any           | —           | Remove prop, no Flex needed |\\n"}',
   ruleName: 'no-icon-spacing-prop',
   description: 'Disallows usage of the deprecated `spacing` prop on icon components from `@atlaskit/icon/core` and'
 }, {
@@ -177,7 +181,7 @@ export var lintRulesMcpStructuredContent = [{
   ruleName: 'no-margin',
   description: "Using margins to define spacing results in components that can't be readily reused in other contexts"
 }, {
-  content: '{"ruleName":"no-modal-label","description":"Do not use the `label` prop on the Atlassian Design System modal dialog default import.","content":"# no-modal-label\\n\\nDo not use the `label` prop on the Atlassian Design System modal dialog default import.\\n\\nUse `ModalTitle` within `ModalHeader`, or another element with `titleId` applied from `useModal()`\\nto provide a clear, visible title for modal content. This content will be propagated to assistive\\ntechnology as well as serving visual users. It is very rare that a dialog title should differ\\nbetween the visible text and that shown to users of assistive technology.\\n\\n## Examples\\n\\nThis rule warns when `label` is used on:\\n\\n- the default import from `@atlaskit/modal-dialog` or `@atlaskit/modal-dialog/modal-dialog`\\n- `modalProps.label` on modal entry-point triggers from `@atlassian/entry-points`\\n\\n### Incorrect\\n\\n```tsx\\nimport ModalDialog from \'@atlaskit/modal-dialog\';\\n\\n<ModalDialog label=\\"Create issue\\" />;\\n```\\n\\n```tsx\\nimport Modal from \'@atlaskit/modal-dialog/modal-dialog\';\\n\\n<Modal label={modalLabel} />;\\n```\\n\\n```tsx\\nimport { ModalTrigger } from \'@atlassian/entry-points/modal-trigger\';\\n\\n<ModalTrigger entryPoint={entryPoint} modalProps={{ label: \'Create issue\' }}>\\n\\t{({ ref }) => <button ref={ref}>Open</button>}\\n</ModalTrigger>;\\n```\\n\\n### Correct\\n\\n```tsx\\nimport ModalDialog, { ModalHeader, ModalTitle } from \'@atlaskit/modal-dialog\';\\n\\n<ModalDialog>\\n\\t<ModalHeader>\\n\\t\\t<ModalTitle>Create issue</ModalTitle>\\n\\t</ModalHeader>\\n</ModalDialog>;\\n```\\n\\n```tsx\\nimport ModalDialog, { ModalHeader, ModalTitle, useModal } from \'@atlaskit/modal-dialog\';\\nimport Heading from \'@atlaskit/heading\';\\n\\nconst CustomHeader = () => {\\n\\tconst { titleId } = useModal();\\n\\n\\treturn (\\n\\t\\t<ModalHeader>\\n\\t\\t\\t<Heading id={titleId}>Create issue</Heading>\\n\\t\\t</ModalHeader>\\n\\t);\\n};\\n\\n<ModalDialog>\\n\\t<CustomHeader />\\n</ModalDialog>;\\n```\\n\\n```tsx\\nimport { ModalIconButtonTrigger } from \'@atlassian/entry-points/modal-icon-button-trigger\';\\n\\n// Top-level `label` on icon button triggers is the trigger button name — allowed.\\n<ModalIconButtonTrigger entryPoint={entryPoint} label=\\"Create issue\\" icon={AddIcon} />;\\n```\\n"}',
+  content: '{"ruleName":"no-modal-label","description":"Do not use the `label` prop on the Atlassian Design System modal dialog default import.","content":"# no-modal-label\\n\\nDo not use the `label` prop on the Atlassian Design System modal dialog default import.\\n\\nUse `ModalTitle` within `ModalHeader`, or another element with `titleId` applied from `useModal()`\\nto provide a clear, visible title for modal content. This content will be propagated to assistive\\ntechnology as well as serving visual users. It is very rare that a dialog title should differ\\nbetween the visible text and that shown to users of assistive technology.\\n\\n## Examples\\n\\nThis rule warns when `label` is used on:\\n\\n- the default import from `@atlaskit/modal-dialog` or `@atlaskit/modal-dialog/modal-dialog`\\n- `modalProps.label` on modal entry-point triggers from `@atlassian/entry-points`\\n\\n### Incorrect\\n\\n```tsx\\nimport ModalDialog from \'@atlaskit/modal-dialog\';\\n\\n<ModalDialog label=\\"Create issue\\" />;\\n```\\n\\n```tsx\\nimport Modal from \'@atlaskit/modal-dialog/modal-dialog\';\\n\\n<Modal label={modalLabel} />;\\n```\\n\\n```tsx\\nimport { ModalTrigger } from \'@atlassian/entry-points/modal-trigger\';\\n\\n<ModalTrigger entryPoint={entryPoint} modalProps={{ label: \'Create issue\' }}>\\n\\t{({ ref, ...triggerProps }) => (\\n\\t\\t<button ref={ref} {...triggerProps}>\\n\\t\\t\\tOpen\\n\\t\\t</button>\\n\\t)}\\n</ModalTrigger>;\\n```\\n\\n### Correct\\n\\n```tsx\\nimport ModalDialog, { ModalHeader, ModalTitle } from \'@atlaskit/modal-dialog\';\\n\\n<ModalDialog>\\n\\t<ModalHeader>\\n\\t\\t<ModalTitle>Create issue</ModalTitle>\\n\\t</ModalHeader>\\n</ModalDialog>;\\n```\\n\\n```tsx\\nimport ModalDialog, { ModalHeader, ModalTitle, useModal } from \'@atlaskit/modal-dialog\';\\nimport Heading from \'@atlaskit/heading\';\\n\\nconst CustomHeader = () => {\\n\\tconst { titleId } = useModal();\\n\\n\\treturn (\\n\\t\\t<ModalHeader>\\n\\t\\t\\t<Heading id={titleId}>Create issue</Heading>\\n\\t\\t</ModalHeader>\\n\\t);\\n};\\n\\n<ModalDialog>\\n\\t<CustomHeader />\\n</ModalDialog>;\\n```\\n\\n```tsx\\nimport { ModalIconButtonTrigger } from \'@atlassian/entry-points/modal-icon-button-trigger\';\\n\\n// Top-level `label` on icon button triggers is the trigger button name — allowed.\\n<ModalIconButtonTrigger entryPoint={entryPoint} label=\\"Create issue\\" icon={AddIcon} />;\\n```\\n"}',
   ruleName: 'no-modal-label',
   description: 'Do not use the `label` prop on the Atlassian Design System modal dialog default import.'
 }, {
@@ -221,7 +225,7 @@ export var lintRulesMcpStructuredContent = [{
   ruleName: 'no-unsafe-inline-snapshot',
   description: 'This rule enforces guardrails on `toMatchInlineSnapshot()` usage to prevent snapshots from becoming'
 }, {
-  content: '{"ruleName":"no-unsafe-style-overrides","description":"Unsafe style overrides cause friction and incidents when internals of the component you\'re","content":"# no-unsafe-style-overrides\\n\\nUnsafe style overrides cause friction and incidents when internals of the component you\'re\\noverriding change. They\'re inherently unbounded and everything is API that can change at a moments\\nnotice.\\n\\nInstead, lean on composition, primitive components, and safe style overrides via the `xcss` prop\\nwhere component authors declare what styles they want to support.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport Button from \'@atlaskit/button\';\\n\\n<Button css={{ fontWeight: 500 }}>foo</Button>;\\n        ^^^\\n```\\n\\n```tsx\\nimport { LinkItem } from \'@atlaskit/menu\';\\n\\n<LinkItem cssFn={() => ({ \'> div > div\': { padding: 2 } })} />;\\n          ^^^^^\\n```\\n\\n```tsx\\nimport { ButtonItem } from \'@atlaskit/side-navigation\';\\n\\n<ButtonItem className=\\"text-neutral-400\\" />;\\n            ^^^^^^^^^\\n```\\n\\n### Correct\\n\\n```tsx\\n<Button>\\n\\t<strong>foo</strong>\\n</Button>\\n```\\n\\n```tsx\\nconst styles = css({ padding: \'var(--ds-space-100)\' });\\n\\n<Anchor xcss={styles}>\\n\\t<Stack>\\n\\t\\t<Inline />\\n\\t\\t<Inline />\\n\\t</Stack>\\n</Anchor>;\\n```\\n"}',
+  content: '{"ruleName":"no-unsafe-style-overrides","description":"Unsafe style overrides cause friction and incidents when internals of the component you\'re","content":"# no-unsafe-style-overrides\\n\\nUnsafe style overrides cause friction and incidents when internals of the component you\'re\\noverriding change. They\'re inherently unbounded and everything is API that can change at a moments\\nnotice.\\n\\nInstead, lean on composition, primitive components, and safe style overrides via the `xcss` prop\\nwhere component authors declare what styles they want to support.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport Button from \'@atlaskit/button/default/button\';\\n\\n<Button css={{ fontWeight: 500 }}>foo</Button>;\\n        ^^^\\n```\\n\\n```tsx\\nimport { LinkItem } from \'@atlaskit/menu\';\\n\\n<LinkItem cssFn={() => ({ \'> div > div\': { padding: 2 } })} />;\\n          ^^^^^\\n```\\n\\n```tsx\\nimport { ButtonItem } from \'@atlaskit/side-navigation\';\\n\\n<ButtonItem className=\\"text-neutral-400\\" />;\\n            ^^^^^^^^^\\n```\\n\\n### Correct\\n\\n```tsx\\n<Button>\\n\\t<strong>foo</strong>\\n</Button>\\n```\\n\\n```tsx\\nconst styles = css({ padding: \'var(--ds-space-100)\' });\\n\\n<Anchor xcss={styles}>\\n\\t<Stack>\\n\\t\\t<Inline />\\n\\t\\t<Inline />\\n\\t</Stack>\\n</Anchor>;\\n```\\n"}',
   ruleName: 'no-unsafe-style-overrides',
   description: "Unsafe style overrides cause friction and incidents when internals of the component you're"
 }, {
@@ -273,7 +277,7 @@ export var lintRulesMcpStructuredContent = [{
   ruleName: 'use-heading',
   description: 'Using primitives allows you to delete bespoke component code and replace it with ready made'
 }, {
-  content: '{"ruleName":"use-heading-level-in-section-message","description":"The `SectionMessage` component in `@atlaskit/section-message`, when used with a `title` prop, needs","content":"# use-heading-level-in-section-message\\n\\nThe `SectionMessage` component in `@atlaskit/section-message`, when used with a `title` prop, needs\\nto be the correct level within the document flow. This is not something that can be automated and\\nrequires contextual knowledge of what is present in the experience.\\n\\nFor more information on proper heading flow, consider this\\n[W3C document on heading hierarchy](https://www.w3.org/WAI/tutorials/page-structure/headings/).\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport Heading from \'@atlaskit/heading\';\\nimport { Text } from \'@atlaskit/primitives/compiled\';\\nimport SectionMessage from \'@atlaskit/section-message\';\\n\\n<Heading as=\\"h1\\">Jira</Heading>\\n<SectionMessage title=\\"Editing is restricted\\">\\n ^^^^^^^^^^^^^^ Heading level is not explicitly set.\\n\\t<Text as=\\"p\\">You must be an administrator to edit this content.</Text>\\n</SectionMessage>\\n```\\n\\n### Correct\\n\\n```tsx\\nimport Heading from \'@atlaskit/heading\';\\nimport { Text } from \'@atlaskit/primitives/compiled\';\\nimport SectionMessage from \'@atlaskit/section-message\';\\n\\n<Heading as=\\"h1\\">Jira</Heading>\\n<SectionMessage title=\\"Editing is restricted\\" headingLevel=\\"h2\\">\\n\\t<Text as=\\"p\\">You must be an administrator to edit this content.</Text>\\n</SectionMessage>\\n```\\n"}',
+  content: '{"ruleName":"use-heading-level-in-section-message","description":"The `SectionMessage` component in `@atlaskit/section-message`, when used with a `title` prop, needs","content":"# use-heading-level-in-section-message\\n\\nThe `SectionMessage` component in `@atlaskit/section-message`, when used with a `title` prop, needs\\nto be the correct level within the document flow. This is not something that can be automated and\\nrequires contextual knowledge of what is present in the experience.\\n\\nFor more information on proper heading flow, consider this\\n[W3C document on heading hierarchy](https://www.w3.org/WAI/tutorials/page-structure/headings/).\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport Heading from \'@atlaskit/heading/heading\';\\nimport { Text } from \'@atlaskit/primitives/compiled/text\';\\nimport SectionMessage from \'@atlaskit/section-message/message\';\\n\\n<Heading as=\\"h1\\">Jira</Heading>\\n<SectionMessage title=\\"Editing is restricted\\">\\n ^^^^^^^^^^^^^^ Heading level is not explicitly set.\\n\\t<Text as=\\"p\\">You must be an administrator to edit this content.</Text>\\n</SectionMessage>\\n```\\n\\n### Correct\\n\\n```tsx\\nimport Heading from \'@atlaskit/heading/heading\';\\nimport { Text } from \'@atlaskit/primitives/compiled/text\';\\nimport SectionMessage from \'@atlaskit/section-message/message\';\\n\\n<Heading as=\\"h1\\">Jira</Heading>\\n<SectionMessage title=\\"Editing is restricted\\" headingLevel=\\"h2\\">\\n\\t<Text as=\\"p\\">You must be an administrator to edit this content.</Text>\\n</SectionMessage>\\n```\\n"}',
   ruleName: 'use-heading-level-in-section-message',
   description: 'The `SectionMessage` component in `@atlaskit/section-message`, when used with a `title` prop, needs'
 }, {
@@ -313,7 +317,7 @@ export var lintRulesMcpStructuredContent = [{
   ruleName: 'use-popup-label',
   description: 'Popup should have an accessible name or a reference to it when `role="dialog"`, so that upon'
 }, {
-  content: "{\"ruleName\":\"use-pressable-motion\",\"description\":\"Encourages semantic motion tokens when local static styles change interactive colours on `Pressable`\",\"content\":\"# use-pressable-motion\\n\\nEncourages semantic motion tokens when local static styles change interactive colours on `Pressable`\\nor native `<button>` elements.\\n\\nIt supports Pressable imports from `@atlaskit/primitives/compiled`,\\n`@atlaskit/primitives/compiled/pressable`, and `@atlaskit/primitives/pressable`. It recognises\\nstyles created with `css`, `cssMap`, and `xcss`. Use `&:hover` and `&:active` with `css` or\\n`cssMap`; use `:hover` and `:active` with `xcss`. Pass styles to Pressable with `xcss` and to native\\nbuttons with `css`.\\n\\nFor button motion, the rule detects `backgroundColor` and colour-only `background` changes. For\\nlist-item motion, it also detects `color`, `borderColor`, and `textDecorationColor`. It offers\\neditor suggestions for button and list-item motion; choose the family that matches the surface's\\nsemantics. Suggestions add `motion.button.*` or `motion.listitem.*` tokens for hover and pressed\\nstates, but the rule does not autofix code.\\n\\nThe rule does not infer semantics, follow imported or dynamic styles, or overwrite an existing\\n`transition`.\\n\\n## Pressable example\\n\\n```tsx\\nimport { token } from '@atlaskit/tokens';\\nimport { Pressable } from '@atlaskit/primitives/compiled';\\nimport { xcss } from '@atlaskit/primitives/xcss';\\n\\nconst styles = xcss({\\n\\ttransition: token('motion.button.hovered'),\\n\\t':hover': { backgroundColor: 'color.background.neutral.hovered' },\\n\\t':active': {\\n\\t\\tbackgroundColor: 'color.background.neutral.pressed',\\n\\t\\ttransition: token('motion.button.pressed'),\\n\\t},\\n});\\n\\n<Pressable xcss={styles} />;\\n```\\n\\n## Native button example\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst styles = css({\\n\\ttransition: token('motion.button.hovered'),\\n\\t'&:hover': { backgroundColor: token('color.background.neutral.hovered') },\\n\\t'&:active': {\\n\\t\\tbackgroundColor: token('color.background.neutral.pressed'),\\n\\t\\ttransition: token('motion.button.pressed'),\\n\\t},\\n});\\n\\n<button css={styles}>Save</button>;\\n```\\n\\nFor custom button guidance, see the\\n[Pressable motion documentation](https://atlassian.design/components/primitives/pressable/usage#apply-motion-to-pressable).\\n\"}",
+  content: "{\"ruleName\":\"use-pressable-motion\",\"description\":\"Encourages semantic motion tokens when local static styles change interactive colours on `Pressable`\",\"content\":\"# use-pressable-motion\\n\\nEncourages semantic motion tokens when local static styles change interactive colours on `Pressable`\\nor native `<button>` elements.\\n\\nIt supports Pressable imports from `@atlaskit/primitives/compiled`,\\n`@atlaskit/primitives/compiled/pressable`, and `@atlaskit/primitives/pressable`. It recognises\\nstyles created with `css`, `cssMap`, and `xcss`. Use `&:hover` and `&:active` with `css` or\\n`cssMap`; use `:hover` and `:active` with `xcss`. Pass styles to Pressable with `xcss` and to native\\nbuttons with `css`.\\n\\nFor button motion, the rule detects `backgroundColor` and colour-only `background` changes. For\\nlist-item motion, it also detects `color`, `borderColor`, and `textDecorationColor`. It offers\\neditor suggestions for button and list-item motion; choose the family that matches the surface's\\nsemantics. Suggestions add `motion.button.*` or `motion.listitem.*` tokens for hover and pressed\\nstates, but the rule does not autofix code. The rule also accepts `motion.tab` for tab label colour\\nchanges; it does not cover background, border, or text-decoration colour changes.\\n\\nThe rule does not infer semantics, follow imported or dynamic styles, or overwrite an existing\\n`transition`.\\n\\n## Pressable example\\n\\n```tsx\\nimport { token } from '@atlaskit/tokens';\\nimport { Pressable } from '@atlaskit/primitives/compiled/pressable';\\nimport { cssMap } from '@atlaskit/css';\\n\\nconst styles = cssMap({\\n\\troot: {\\n\\t\\ttransition: token('motion.button.hovered'),\\n\\t\\t'&:hover': { backgroundColor: token('color.background.neutral.hovered') },\\n\\t\\t'&:active': {\\n\\t\\t\\tbackgroundColor: token('color.background.neutral.pressed'),\\n\\t\\t\\ttransition: token('motion.button.pressed'),\\n\\t\\t},\\n\\t},\\n});\\n\\n<Pressable xcss={styles.root} />;\\n```\\n\\n## Native button example\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst styles = css({\\n\\ttransition: token('motion.button.hovered'),\\n\\t'&:hover': { backgroundColor: token('color.background.neutral.hovered') },\\n\\t'&:active': {\\n\\t\\tbackgroundColor: token('color.background.neutral.pressed'),\\n\\t\\ttransition: token('motion.button.pressed'),\\n\\t},\\n});\\n\\n<button css={styles}>Save</button>;\\n```\\n\\nFor custom button guidance, see the\\n[Pressable motion documentation](https://atlassian.design/components/primitives/pressable/usage#apply-motion-to-pressable).\\n\"}",
   ruleName: 'use-pressable-motion',
   description: 'Encourages semantic motion tokens when local static styles change interactive colours on `Pressable`'
 }, {
@@ -377,7 +381,7 @@ export var lintRulesMcpStructuredContent = [{
   ruleName: 'convert-props-syntax',
   description: 'Blocks dynamic styling syntax that is unsupported by `styled-components@<4` and `@emotion/styled`,'
 }, {
-  content: '{"ruleName":"enforce-style-prop","description":"Blocks providing static values through the `style` prop, which should only be used to provide","content":"# enforce-style-prop\\n\\nBlocks providing static values through the `style` prop, which should only be used to provide\\ndynamic values (values unknown at build time).\\n\\nUse the `css` prop for providing static values instead.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { token } from \'@atlaskit/tokens\';\\n\\nconst Component = () => (\\n\\t<div\\n\\t\\tstyle={{\\n\\t\\t\\tmargin: 0,\\n\\t\\t\\tcolor: token(\'color.text.danger\'),\\n\\t\\t}}\\n\\t/>\\n);\\n```\\n\\n### Correct\\n\\nAlthough `token` is a function call, it is statically resolvable by Compiled and should not be used\\nin the `style` prop.\\n\\n```tsx\\nimport { css } from \'@compiled/react\';\\nimport { token } from \'@atlaskit/tokens\';\\n\\ntype Props = { width: string };\\n\\nconst baseStyles = css({ margin: 0, color: token(\'color.text.danger\') });\\n\\nconst Component = ({ width }: Props) => (\\n\\t<div\\n\\t\\tcss={baseStyles}\\n\\t\\tstyle={{\\n\\t\\t\\twidth,\\n\\t\\t\\t\'--my-nested-width\': width,\\n\\t\\t}}\\n\\t/>\\n);\\n```\\n"}',
+  content: '{"ruleName":"enforce-style-prop","description":"Blocks providing static values through the `style` prop, which should only be used to provide","content":"# enforce-style-prop\\n\\nBlocks providing static values through the `style` prop, which should only be used to provide\\ndynamic values (values unknown at build time).\\n\\nUse the `css` prop for providing static values instead.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { token } from \'@atlaskit/tokens\';\\n\\nconst Component = () => (\\n\\t<div\\n\\t\\tstyle={{\\n\\t\\t\\tmargin: 0,\\n\\t\\t\\tcolor: token(\'color.text.danger\'),\\n\\t\\t}}\\n\\t/>\\n);\\n```\\n\\n### Correct\\n\\nAlthough `token` is a function call, it is statically resolvable by Compiled and should not be used\\nin the `style` prop.\\n\\n```tsx\\nimport { css } from \'@compiled/react\';\\nimport { token } from \'@atlaskit/tokens\';\\n\\ntype Props = { width: string };\\n\\nconst baseStyles = css({ margin: 0, color: token(\'color.text.danger\') });\\n\\nconst Component = ({ width }: Props) => (\\n\\t<div\\n\\t\\tcss={baseStyles}\\n\\t\\tstyle={{\\n\\t\\t\\twidth: props.width,\\n\\t\\t\\t\'--my-nested-width\': props.width,\\n\\t\\t}}\\n\\t/>\\n);\\n```\\n"}',
   ruleName: 'enforce-style-prop',
   description: 'Blocks providing static values through the `style` prop, which should only be used to provide'
 }, {
@@ -388,6 +392,10 @@ export var lintRulesMcpStructuredContent = [{
   content: '{"ruleName":"no-array-arguments","description":"Blocks passing array arguments to style declaration functions.","content":"# no-array-arguments\\n\\nBlocks passing array arguments to style declaration functions.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { css } from \'@compiled/react\';\\n\\nconst styles = css([{ width: 100 }, { height: 100 }]);\\n```\\n\\n```tsx\\nimport { styled } from \'@compiled/react\';\\n\\nconst styles = css([{ width: 100 }, ...items]);\\n```\\n\\n### Correct\\n\\n```tsx\\nimport { css } from \'@compiled/react\';\\n\\nconst styles = css({ width: 100 }, { height: 100 });\\n```\\n\\n```tsx\\nimport { css } from \'@compiled/react\';\\n\\nconst styles = css({ width: 100 }, ...items);\\n```\\n\\n## Options\\n\\n### `importSources: string[]`\\n\\nBy default, this rule will check styles using:\\n\\n- `@atlaskit/css`\\n- `@atlaskit/primitives`\\n- `@compiled/react`\\n- `@emotion/react`\\n- `@emotion/core`\\n- `@emotion/styled`\\n- `styled-components`\\n\\nOverride this list with the `importSources` option, which accepts an array of package names.\\n"}',
   ruleName: 'no-array-arguments',
   description: 'Blocks passing array arguments to style declaration functions.'
+}, {
+  content: "{\"ruleName\":\"no-atlaskit-theme\",\"description\":\"Disallow imports from `@atlaskit/theme` and its subpaths, including default, named, namespace,\",\"content\":\"# no-atlaskit-theme\\n\\nDisallow imports from `@atlaskit/theme` and its subpaths, including default, named, namespace,\\nside-effect, and type imports.\\n\\n`@atlaskit/theme` is a legacy styling package. Use design tokens from `@atlaskit/tokens` and\\nAtlassian Design System components instead.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { colors } from '@atlaskit/theme';\\nimport { gridSize } from '@atlaskit/theme/constants';\\nimport Theme from '@atlaskit/theme/theme';\\nimport type { ThemeProp } from '@atlaskit/theme/create-theme';\\n```\\n\\n### Correct\\n\\n```tsx\\nimport { token } from '@atlaskit/tokens';\\nimport { css } from '@atlaskit/css';\\n\\nconst styles = css({\\n\\tcolor: token('color.text'),\\n\\tpaddingTop: token('space.100'),\\n\\tpaddingRight: token('space.100'),\\n\\tpaddingBottom: token('space.100'),\\n\\tpaddingLeft: token('space.100'),\\n});\\n```\\n\"}",
+  ruleName: 'no-atlaskit-theme',
+  description: 'Disallow imports from `@atlaskit/theme` and its subpaths, including default, named, namespace,'
 }, {
   content: "{\"ruleName\":\"no-classname-prop\",\"description\":\"Blocks the `className` prop, which encourages unsafe global styles and cannot be statically\",\"content\":\"# no-classname-prop\\n\\nBlocks the `className` prop, which encourages unsafe global styles and cannot be statically\\nresolved.\\n\\nUse the `css` prop for styling, with props for configuration and `xcss` for bounded overrides.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\n<div className=\\\"my-class\\\">\\n```\\n\\n```tsx\\n<MyComponent className={isDisabled ? 'disabled' : undefined} />\\n```\\n\\n### Correct\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst myStyles = css({ padding: token('space.100') });\\n\\n<div css={myStyles} />;\\n```\\n\\n```tsx\\n<MyComponent isDisabled={isDisabled} />\\n```\\n\\n```tsx\\nimport { Checkbox } from '@atlaskit/checkbox';\\n\\n<Checkbox xcss={{ alignItems: 'center' }} />;\\n```\\n\\nPass-through `props.xcss` are allowed, expecting this to be typed, refer to\\n[@atlaskit/css](https://atlassian.design/components/css/overview#building-reusable-components)\\n\\n```tsx\\nimport { StrictXCSSProp } from '@atlaskit/css';\\n\\nconst Component = (props: { xcss?: StrictXCSSProp<'color', never> }) => (\\n\\t<div className={props.xcss} />\\n);\\n```\\n\\n## FAQ\\n\\n### What if I'm using `className` to target elements with JavaScript?\\n\\nThere are some cases where a selector is required to integrate with a 3rd party library, such as\\nlegacy code using jQuery.\\n\\nUse a `ref` if possible. Otherwise, if you _must_ have a selector, use a `data-*` attribute that\\ngives enough context and is unique enough, for example `data-editor-table-target=\\\"true\\\"`.\\n\"}",
   ruleName: 'no-classname-prop',