@atlaskit/ads-mcp 0.15.1 → 0.17.0

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

@@ -1,339 +1,347 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  *
- * Structured content for ESLint rule docs from constellation.
+ * Structured content for MCP (JSON) for ESLint rule docs from constellation.
  *
- * @codegen <<SignedSource::d1d3c0706fd041eaa66d5ba1a4568c46>>
+ * @codegen <<SignedSource::31ccbe611e32ed18b0d8477d40030cbc>>
  * @codegenCommand yarn build structured-docs
  */
 /* eslint-disable no-template-curly-in-string */
 
-export var lintRulesStructuredContent = [{
-  content: '# badge-appearance-semantic-migration\n\nThis rule enforces migration of Badge component `appearance` prop values to new semantic values.\n\n## Examples\n\n### Incorrect\n\n```tsx\n// Old appearance values that need migration\n<Badge appearance="added">{5}</Badge>\n<Badge appearance="removed">{10}</Badge>\n<Badge appearance="default">{3}</Badge>\n<Badge appearance="primary">{7}</Badge>\n<Badge appearance="primaryInverted">{2}</Badge>\n<Badge appearance="important">{99}</Badge>\n\n// Dynamic appearance expressions require manual review\n<Badge appearance={getStatus()}>{count}</Badge>\n<Badge appearance={condition ? \'added\' : \'removed\'}>{num}</Badge>\n```\n\n### Correct\n\n```tsx\n// New semantic appearance values\n<Badge appearance="success">{5}</Badge>\n<Badge appearance="danger">{10}</Badge>\n<Badge appearance="neutral">{3}</Badge>\n<Badge appearance="information">{7}</Badge>\n<Badge appearance="inverse">{2}</Badge>\n<Badge appearance="danger">{99}</Badge>\n\n// Already using semantic values\n<Badge appearance="success">{42}</Badge>\n```\n\n## Rule Details\n\nThis rule enforces the migration of Badge component appearance prop values from old non-semantic\nvalues to new semantic values:\n\n| Old Appearance    | New Appearance |\n| ----------------- | -------------- |\n| `added`           | `success`      |\n| `removed`         | `danger`       |\n| `default`         | `neutral`      |\n| `primary`         | `information`  |\n| `primaryInverted` | `inverse`      |\n| `important`       | `danger`       |\n\n## When to use\n\nUse this rule when migrating Badge components to use the new semantic appearance values. This\nensures consistency across your codebase and helps with the transition to the new Badge API.\n\n## Auto-fixes\n\n- ✅ Static appearance prop values (e.g., `appearance="added"` → `appearance="success"`)\n- ❌ Dynamic appearance expressions (warning only - requires manual review)\n\n## Options\n\nThis rule does not accept any options.\n',
+export var lintRulesMcpStructuredContent = [{
+  content: '{"ruleName":"badge-appearance-semantic-migration","description":"This rule enforces migration of Badge component `appearance` prop values to new semantic values.","content":"# badge-appearance-semantic-migration\\n\\nThis rule enforces migration of Badge component `appearance` prop values to new semantic values.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\n// Old appearance values that need migration\\n<Badge appearance=\\"added\\">{5}</Badge>\\n<Badge appearance=\\"removed\\">{10}</Badge>\\n<Badge appearance=\\"default\\">{3}</Badge>\\n<Badge appearance=\\"primary\\">{7}</Badge>\\n<Badge appearance=\\"primaryInverted\\">{2}</Badge>\\n<Badge appearance=\\"important\\">{99}</Badge>\\n\\n// Dynamic appearance expressions require manual review\\n<Badge appearance={getStatus()}>{count}</Badge>\\n<Badge appearance={condition ? \'added\' : \'removed\'}>{num}</Badge>\\n```\\n\\n### Correct\\n\\n```tsx\\n// New semantic appearance values\\n<Badge appearance=\\"success\\">{5}</Badge>\\n<Badge appearance=\\"danger\\">{10}</Badge>\\n<Badge appearance=\\"neutral\\">{3}</Badge>\\n<Badge appearance=\\"information\\">{7}</Badge>\\n<Badge appearance=\\"inverse\\">{2}</Badge>\\n<Badge appearance=\\"danger\\">{99}</Badge>\\n\\n// Already using semantic values\\n<Badge appearance=\\"success\\">{42}</Badge>\\n```\\n\\n## Rule Details\\n\\nThis rule enforces the migration of Badge component appearance prop values from old non-semantic\\nvalues to new semantic values:\\n\\n| Old Appearance    | New Appearance |\\n| ----------------- | -------------- |\\n| `added`           | `success`      |\\n| `removed`         | `danger`       |\\n| `default`         | `neutral`      |\\n| `primary`         | `information`  |\\n| `primaryInverted` | `inverse`      |\\n| `important`       | `danger`       |\\n\\n## When to use\\n\\nUse this rule when migrating Badge components to use the new semantic appearance values. This\\nensures consistency across your codebase and helps with the transition to the new Badge API.\\n\\n## Auto-fixes\\n\\n- ✅ Static appearance prop values (e.g., `appearance=\\"added\\"` → `appearance=\\"success\\"`)\\n- ❌ Dynamic appearance expressions (warning only - requires manual review)\\n\\n## Options\\n\\nThis rule does not accept any options.\\n"}',
   ruleName: 'badge-appearance-semantic-migration',
   description: 'This rule enforces migration of Badge component `appearance` prop values to new semantic values.'
 }, {
-  content: "# consistent-css-prop-usage\n\nEnsures consistency with css prop usage.\n\n## Rationale\n\nEvery app should be defining styles in the same way, using the same tools, enforced by the same\nlinting rules, which we can then all evolve and scale together.\n\n## How the rule works\n\nThis rule checks for the following cases:\n\n- Styles should not be defined inline; it should instead be in a standalone variable.\n  - The exception for this is style composition (e.g. `<div css={[baseStyles, moreStyles]} />`),\n    which is a way to combine styles from two variables.\n- Styles must be wrapped in a `css` function call.\n- Styles must be defined in the same file as their usage, and not be imported.\n- Styles should not contain spread operators (e.g. `css({ ...spreadStyles })`).\n- Styles must all be defined at the top of the file, or at the bottom of the file.\n\nThis rule also has an autofixer that enforces and fixes the code (where practical) to meet the above\nrequirements.\n\nAll the above can also work for custom `css` functions, such as `xcss`\n(https://atlassian.design/components/primitives/xcss/).\n\nThis rule has several options - see below.\n\n## Examples\n\n### Incorrect\n\n**Calling a css/xcss function or direct objects inside the JSX attribute.**\n\n```js\nfunction Button({ children }) {\n  return <div css={css({...})}>{children}</div>;\n                   ^^^^^^^ css function call used inline (performance issue)\n}\n```\n\n**Inserting a non css-function based object identifier into a css JSX attribute.**\n\n```js\nconst container = {\n      ^^^^^^^^^ should be a css function call\n  zIndex: 10,\n};\n\nfunction Button({ children }) {\n  return <button css={container}>{children}</button>;\n}\n```\n\n**Importing styles from another file.**\n\n```js\nimport { container } from './styles';\n         ^^^^^^^^^ styles should be local, not shared\n\nfunction Button({ children }) {\n  return <button css={container}>{children}</button>;\n}\n```\n\n**Nesting styles with objects instead of arrays.**\n\n```js\nconst baseContainerStyles = css({\n  zIndex: 5,\n});\n\nconst containerStyles = css({\n  ...baseContainerStyles,\n  ^^^^^^^^^^^^^^^^^^^^^^ compose styles by providing an array to the css call instead (see example below)\n  zIndex: 7,\n});\n\nfunction Button({ children }) {\n  return <button css={containerStyles}>{children}</button>;\n}\n```\n\n### Correct\n\n**Using the css() function to create a style object and passing it as a variable into the css={...}\nJSX attribute.**\n\nWith the following options turned on:\n\n- cssFunctions = ['css']\n- stylesPlacement = 'top'\n\n```js\nconst containerStyles = css({\n\tzIndex: 1,\n});\n\nfunction Button({ children }) {\n\treturn <button css={containerStyles}>{children}</button>;\n}\n```\n\n**Technically correct usage of the cssMap function.**\n\nWith the following options turned on:\n\n- cssFunctions = ['css']\n- stylesPlacement = 'top'\n\n```js\nconst borderStyles = cssMap({\n  'solid': '1px solid';\n  'none': '0px';\n})\n\nfunction Button({ children }) {\n  return <button css={borderStyles[solid]}>{children}</button>;\n}\n```\n\n**Create composite styles with arrays, not objects.**\n\nWith the following options turned on:\n\n- cssFunctions = ['css']\n- stylesPlacement = 'bottom'\n\n```js\nfunction Button({ children }) {\n\treturn <button css={[baseContainerStyles, containerStyles]}>{children}</button>;\n}\n\nconst baseContainerStyles = css({\n\tzIndex: 5,\n});\n\nconst containerStyles = css({\n\tzIndex: 7,\n});\n```\n\n**Ternaries can be used inline**\n\n```js\nconst baseStyles = css({ color: token('color.text.primary') });\nconst disabledStyles = css({ color: token('color.text.disabled') });\n\n<div css={props.disabled ? disabledStyles : baseStyles}></div>;\n```\n\n## Options\n\nThis rule comes with options to support different repository configurations.\n\n### cssFunctions\n\nAn array of function names the linting rule should target. Defaults to `['css', 'xcss']`. The\nfunctionality of `cssMap` will be linted regardless of the configuration of `cssFunctions`, as it\ncan be used with either attribute.\n\n### stylesPlacement\n\nEither `top` or `bottom`.\n\nThe rule prevents inline styles from being created. This option defines what the error message\nshould say: \"(...) styles at the top (...)\" or \"(...) styles at the bottom (...)\". Defaults to\n`top`.\n\n### cssImportSource\n\nWhen auto-fixing the contents of the `css` attribute, this rule will wrap CSS styles in a `css(...)`\nfunction call or ``css`...` `` template expression, and it will add an import declaration for the\n`css` function. `cssImportSource` is a string that determines what package `css` should be imported\nfrom.\n\nThis is `@compiled/react` by default.\n\n### xcssImportSource\n\nWhen auto-fixing the contents of the `xcss` attribute, this rule will wrap XCSS styles in a\n`xcss(...)` function call, and it will add an import declaration for the `xcss` function.\n`xcssImportSource` is a string that determines what package `xcss` should be imported from.\n\nThis is `@atlaskit/primitives` by default.\n\n### excludeReactComponents\n\nWhether to exclude `css` attributes of React components from being affected by this ESLint rule. We\nassume that an element is a React component if its name starts with a capital letter, e.g.\n`<Button />`.\n\nThis is `false` by default.\n\n### shouldAlwaysCheckXcss\n\nOverrides `excludeReactComponents` specifically for the `xcss` prop.\n\nThis means that even if `excludeReactComponents` is `true`, you can still lint the `xcss` prop by\nsetting `shouldAlwaysCheckXcss` to `true`.\n\nThis is `false` by default.\n\n### autoFix\n\nWhen set to `true`, this rule will turn on the autofixer. Set this to `false` if you do not want the\nautofixers to run.\n\nThis is `true` by default.\n",
+  content: "{\"ruleName\":\"consistent-css-prop-usage\",\"description\":\"Ensures consistency with css prop usage.\",\"content\":\"# consistent-css-prop-usage\\n\\nEnsures consistency with css prop usage.\\n\\n## Rationale\\n\\nEvery app should be defining styles in the same way, using the same tools, enforced by the same\\nlinting rules, which we can then all evolve and scale together.\\n\\n## How the rule works\\n\\nThis rule checks for the following cases:\\n\\n- Styles should not be defined inline; it should instead be in a standalone variable.\\n  - The exception for this is style composition (e.g. `<div css={[baseStyles, moreStyles]} />`),\\n    which is a way to combine styles from two variables.\\n- Styles must be wrapped in a `css` function call.\\n- Styles must be defined in the same file as their usage, and not be imported.\\n- Styles should not contain spread operators (e.g. `css({ ...spreadStyles })`).\\n- Styles must all be defined at the top of the file, or at the bottom of the file.\\n\\nThis rule also has an autofixer that enforces and fixes the code (where practical) to meet the above\\nrequirements.\\n\\nAll the above can also work for custom `css` functions, such as `xcss`\\n(https://atlassian.design/components/primitives/xcss/).\\n\\nThis rule has several options - see below.\\n\\n## Examples\\n\\n### Incorrect\\n\\n**Calling a css/xcss function or direct objects inside the JSX attribute.**\\n\\n```js\\nfunction Button({ children }) {\\n  return <div css={css({...})}>{children}</div>;\\n                   ^^^^^^^ css function call used inline (performance issue)\\n}\\n```\\n\\n**Inserting a non css-function based object identifier into a css JSX attribute.**\\n\\n```js\\nconst container = {\\n      ^^^^^^^^^ should be a css function call\\n  zIndex: 10,\\n};\\n\\nfunction Button({ children }) {\\n  return <button css={container}>{children}</button>;\\n}\\n```\\n\\n**Importing styles from another file.**\\n\\n```js\\nimport { container } from './styles';\\n         ^^^^^^^^^ styles should be local, not shared\\n\\nfunction Button({ children }) {\\n  return <button css={container}>{children}</button>;\\n}\\n```\\n\\n**Nesting styles with objects instead of arrays.**\\n\\n```js\\nconst baseContainerStyles = css({\\n  zIndex: 5,\\n});\\n\\nconst containerStyles = css({\\n  ...baseContainerStyles,\\n  ^^^^^^^^^^^^^^^^^^^^^^ compose styles by providing an array to the css call instead (see example below)\\n  zIndex: 7,\\n});\\n\\nfunction Button({ children }) {\\n  return <button css={containerStyles}>{children}</button>;\\n}\\n```\\n\\n### Correct\\n\\n**Using the css() function to create a style object and passing it as a variable into the css={...}\\nJSX attribute.**\\n\\nWith the following options turned on:\\n\\n- cssFunctions = ['css']\\n- stylesPlacement = 'top'\\n\\n```js\\nconst containerStyles = css({\\n\\tzIndex: 1,\\n});\\n\\nfunction Button({ children }) {\\n\\treturn <button css={containerStyles}>{children}</button>;\\n}\\n```\\n\\n**Technically correct usage of the cssMap function.**\\n\\nWith the following options turned on:\\n\\n- cssFunctions = ['css']\\n- stylesPlacement = 'top'\\n\\n```js\\nconst borderStyles = cssMap({\\n  'solid': '1px solid';\\n  'none': '0px';\\n})\\n\\nfunction Button({ children }) {\\n  return <button css={borderStyles[solid]}>{children}</button>;\\n}\\n```\\n\\n**Create composite styles with arrays, not objects.**\\n\\nWith the following options turned on:\\n\\n- cssFunctions = ['css']\\n- stylesPlacement = 'bottom'\\n\\n```js\\nfunction Button({ children }) {\\n\\treturn <button css={[baseContainerStyles, containerStyles]}>{children}</button>;\\n}\\n\\nconst baseContainerStyles = css({\\n\\tzIndex: 5,\\n});\\n\\nconst containerStyles = css({\\n\\tzIndex: 7,\\n});\\n```\\n\\n**Ternaries can be used inline**\\n\\n```js\\nconst baseStyles = css({ color: token('color.text.primary') });\\nconst disabledStyles = css({ color: token('color.text.disabled') });\\n\\n<div css={props.disabled ? disabledStyles : baseStyles}></div>;\\n```\\n\\n## Options\\n\\nThis rule comes with options to support different repository configurations.\\n\\n### cssFunctions\\n\\nAn array of function names the linting rule should target. Defaults to `['css', 'xcss']`. The\\nfunctionality of `cssMap` will be linted regardless of the configuration of `cssFunctions`, as it\\ncan be used with either attribute.\\n\\n### stylesPlacement\\n\\nEither `top` or `bottom`.\\n\\nThe rule prevents inline styles from being created. This option defines what the error message\\nshould say: \\\"(...) styles at the top (...)\\\" or \\\"(...) styles at the bottom (...)\\\". Defaults to\\n`top`.\\n\\n### cssImportSource\\n\\nWhen auto-fixing the contents of the `css` attribute, this rule will wrap CSS styles in a `css(...)`\\nfunction call or ``css`...` `` template expression, and it will add an import declaration for the\\n`css` function. `cssImportSource` is a string that determines what package `css` should be imported\\nfrom.\\n\\nThis is `@compiled/react` by default.\\n\\n### xcssImportSource\\n\\nWhen auto-fixing the contents of the `xcss` attribute, this rule will wrap XCSS styles in a\\n`xcss(...)` function call, and it will add an import declaration for the `xcss` function.\\n`xcssImportSource` is a string that determines what package `xcss` should be imported from.\\n\\nThis is `@atlaskit/primitives` by default.\\n\\n### excludeReactComponents\\n\\nWhether to exclude `css` attributes of React components from being affected by this ESLint rule. We\\nassume that an element is a React component if its name starts with a capital letter, e.g.\\n`<Button />`.\\n\\nThis is `false` by default.\\n\\n### shouldAlwaysCheckXcss\\n\\nOverrides `excludeReactComponents` specifically for the `xcss` prop.\\n\\nThis means that even if `excludeReactComponents` is `true`, you can still lint the `xcss` prop by\\nsetting `shouldAlwaysCheckXcss` to `true`.\\n\\nThis is `false` by default.\\n\\n### autoFix\\n\\nWhen set to `true`, this rule will turn on the autofixer. Set this to `false` if you do not want the\\nautofixers to run.\\n\\nThis is `true` by default.\\n\"}",
   ruleName: 'consistent-css-prop-usage',
   description: 'Ensures consistency with css prop usage.'
 }, {
-  content: "# enforce-inline-styles-in-select\n\nThis ESLint rule enforces inline styles only and disallows unsupported CSS selectors in the styles\nprop for @atlaskit/select component.\n\n1. **Inline styles only**: Variable-defined styles objects are not allowed\n2. **No unsupported CSS selectors**: Pseudo-classes, pseudo-elements, combinators, attribute\n   selectors, and at-rules are not allowed\n\n## Unsupported Selectors\n\n- **Pseudo-classes/elements**: `:hover`, `:focus`, `:active`, `:disabled`, `:before`, `:after`, etc.\n- **Attribute selectors**: `[type=\"text\"]`, `[disabled]`, etc.\n- **Combinators**: `>` (child), `+` (adjacent sibling), `~` (general sibling), ` ` (descendant)\n- **Universal selector**: `*`\n- **ID selector**: `#myId`\n- **Class selector**: `.myClass`\n- **At-rules**: `@media`, `@supports`, etc.\n- **Parent selector**: `&`\n- **Namespace separator**: `|`\n- **Attribute operators**: `^=`, `$=`, `=`\n\n## Incorrect\n\n```tsx\nimport Select from '@atlaskit/select';\n\n// ❌ Variable-defined styles (not allowed even without unsupported selectors)\nconst selectStyles = {\n\tcontrol: (base) => ({\n\t\t...base,\n\t\tbackgroundColor: 'white',\n\t\tborderColor: 'gray',\n\t}),\n};\n<Select styles={selectStyles} />;\n\n// ❌ Function call for styles\nconst getStyles = () => ({\n\tcontrol: (base) => ({ ...base, color: 'blue' }),\n});\n<Select styles={getStyles()} />;\n\n// ❌ Member expression for styles\nconst theme = {\n\tselectStyles: {\n\t\tcontrol: (base) => ({ ...base, color: 'red' }),\n\t},\n};\n<Select styles={theme.selectStyles} />;\n\n// ❌ Variable-defined styles with unsupported selectors\nconst selectStylesWithPseudo = {\n\tcontrol: (base) => ({\n\t\t...base,\n\t\t':focus-visible': { outline: '2px solid blue' },\n\t}),\n};\n<Select styles={selectStylesWithPseudo} />;\n\n// ❌ Inline styles with pseudo-classes\n<Select\n\tstyles={{\n\t\tcontrol: (base) => ({\n\t\t\t...base,\n\t\t\t':hover': { backgroundColor: 'blue' },\n\t\t\t':focus': { borderColor: 'red' },\n\t\t}),\n\t}}\n/>;\n\n// ❌ Inline styles with pseudo-elements\n<Select\n\tstyles={{\n\t\tcontrol: (base) => ({\n\t\t\t...base,\n\t\t\t':before': { content: '\"\"' },\n\t\t\t':after': { content: '\"*\"' },\n\t\t}),\n\t}}\n/>;\n\n// ❌ Inline styles with attribute selectors\n<Select\n\tstyles={{\n\t\tinput: (base) => ({\n\t\t\t...base,\n\t\t\t'[disabled]': { opacity: 0.5 },\n\t\t}),\n\t}}\n/>;\n\n// ❌ Inline styles with combinators\n<Select\n\tstyles={{\n\t\tcontrol: (base) => ({\n\t\t\t...base,\n\t\t\t'> div': { padding: '8px' },\n\t\t\t'& > span': { fontWeight: 'bold' },\n\t\t}),\n\t}}\n/>;\n\n// ❌ Inline styles with class selectors\n<Select\n\tstyles={{\n\t\tcontrol: (base) => ({\n\t\t\t...base,\n\t\t\t'.custom-class': { color: 'purple' },\n\t\t}),\n\t}}\n/>;\n```\n\n## Correct\n\n```tsx\nimport Select from '@atlaskit/select';\n\n// ✅ Inline styles with normal CSS properties only\n<Select\n\tstyles={{\n\t\tcontrol: (base) => ({\n\t\t\t...base,\n\t\t\tbackgroundColor: 'white',\n\t\t\tborderColor: 'gray',\n\t\t\tpadding: '8px',\n\t\t\tcolor: 'black',\n\t\t\tfontSize: '14px',\n\t\t}),\n\t\toption: (base, { isSelected }) => ({\n\t\t\t...base,\n\t\t\tbackgroundColor: isSelected ? 'blue' : 'white',\n\t\t\tcolor: isSelected ? 'white' : 'black',\n\t\t}),\n\t}}\n/>;\n\n// ✅ Use components API with xcss prop for pseudo-classes\nimport { cssMap } from '@compiled/react';\nimport Select, { components } from '@atlaskit/select';\n\nconst controlStyles = cssMap({\n\troot: {\n\t\t'&:hover': {\n\t\t\tbackgroundColor: 'white',\n\t\t},\n\t\t'&:focus': {\n\t\t\tborderColor: 'blue',\n\t\t},\n\t},\n});\n\n<Select\n\tcomponents={{\n\t\tControl: (props) => <components.Control {...props} xcss={controlStyles.root} />,\n\t}}\n/>;\n\n// ✅ Use components API with xcss prop for pseudo-elements\nconst controlWithPseudoStyles = cssMap({\n\troot: {\n\t\t'&:before': {\n\t\t\tcontent: '\"\"',\n\t\t\tposition: 'absolute',\n\t\t},\n\t\t'&:after': {\n\t\t\tcontent: '\"*\"',\n\t\t\tcolor: 'red',\n\t\t},\n\t},\n});\n\n<Select\n\tcomponents={{\n\t\tControl: (props) => <components.Control {...props} xcss={controlWithPseudoStyles.root} />,\n\t}}\n/>;\n\n// ✅ Use components API with xcss prop for complex selectors\nconst complexStyles = cssMap({\n\troot: {\n\t\t'& > div': {\n\t\t\tpadding: '8px',\n\t\t},\n\t\t'&[disabled]': {\n\t\t\topacity: 0.5,\n\t\t},\n\t\t'&.custom-class': {\n\t\t\tcolor: 'purple',\n\t\t},\n\t},\n});\n\n<Select\n\tcomponents={{\n\t\tControl: (props) => <components.Control {...props} xcss={complexStyles.root} />,\n\t}}\n/>;\n\n// ✅ Multiple inline style functions\n<Select\n\tstyles={{\n\t\tcontrol: (base, { isFocused, isDisabled }) => ({\n\t\t\t...base,\n\t\t\tbackgroundColor: isDisabled ? 'gray' : 'white',\n\t\t\tborderColor: isFocused ? 'blue' : 'lightgray',\n\t\t\topacity: isDisabled ? 0.6 : 1,\n\t\t}),\n\t\tmenu: (base) => ({\n\t\t\t...base,\n\t\t\tborderRadius: '4px',\n\t\t\tboxShadow: '0 2px 8px rgba(0,0,0,0.1)',\n\t\t}),\n\t\toption: (base, { isSelected, isFocused }) => ({\n\t\t\t...base,\n\t\t\tbackgroundColor: isSelected ? 'blue' : isFocused ? 'lightblue' : 'white',\n\t\t\tcolor: isSelected ? 'white' : 'black',\n\t\t}),\n\t}}\n/>;\n```\n\n## Migration Guide\n\nIf you have existing variable-defined styles, you have two options:\n\n### Option 1: Convert to Inline Styles (for basic styling)\n\n```tsx\n// Before\nconst selectStyles = {\n\tcontrol: (base) => ({\n\t\t...base,\n\t\tbackgroundColor: 'white',\n\t\tborderColor: 'gray',\n\t}),\n};\n<Select styles={selectStyles} />;\n\n// After\n<Select\n\tstyles={{\n\t\tcontrol: (base) => ({\n\t\t\t...base,\n\t\t\tbackgroundColor: 'white',\n\t\t\tborderColor: 'gray',\n\t\t}),\n\t}}\n/>;\n```\n\n### Option 2: Use Components API (for advanced selectors)\n\n```tsx\n// Before\nconst selectStyles = {\n\tcontrol: (base) => ({\n\t\t...base,\n\t\t':hover': { backgroundColor: 'lightgray' },\n\t\t':focus': { borderColor: 'blue' },\n\t}),\n};\n<Select styles={selectStyles} />;\n\n// After\nimport { cssMap } from '@compiled/react';\nimport { components } from '@atlaskit/select';\n\nconst controlStyles = cssMap({\n\troot: {\n\t\t'&:hover': { backgroundColor: 'lightgray' },\n\t\t'&:focus': { borderColor: 'blue' },\n\t},\n});\n\n<Select\n\tcomponents={{\n\t\tControl: (props) => <components.Control {...props} xcss={controlStyles.root} />,\n\t}}\n/>;\n```\n",
+  content: "{\"ruleName\":\"enforce-inline-styles-in-select\",\"description\":\"This ESLint rule enforces inline styles only and disallows unsupported CSS selectors in the styles\",\"content\":\"# enforce-inline-styles-in-select\\n\\nThis ESLint rule enforces inline styles only and disallows unsupported CSS selectors in the styles\\nprop for @atlaskit/select component.\\n\\n1. **Inline styles only**: Variable-defined styles objects are not allowed\\n2. **No unsupported CSS selectors**: Pseudo-classes, pseudo-elements, combinators, attribute\\n   selectors, and at-rules are not allowed\\n\\n## Unsupported Selectors\\n\\n- **Pseudo-classes/elements**: `:hover`, `:focus`, `:active`, `:disabled`, `:before`, `:after`, etc.\\n- **Attribute selectors**: `[type=\\\"text\\\"]`, `[disabled]`, etc.\\n- **Combinators**: `>` (child), `+` (adjacent sibling), `~` (general sibling), ` ` (descendant)\\n- **Universal selector**: `*`\\n- **ID selector**: `#myId`\\n- **Class selector**: `.myClass`\\n- **At-rules**: `@media`, `@supports`, etc.\\n- **Parent selector**: `&`\\n- **Namespace separator**: `|`\\n- **Attribute operators**: `^=`, `$=`, `=`\\n\\n## Incorrect\\n\\n```tsx\\nimport Select from '@atlaskit/select';\\n\\n// ❌ Variable-defined styles (not allowed even without unsupported selectors)\\nconst selectStyles = {\\n\\tcontrol: (base) => ({\\n\\t\\t...base,\\n\\t\\tbackgroundColor: 'white',\\n\\t\\tborderColor: 'gray',\\n\\t}),\\n};\\n<Select styles={selectStyles} />;\\n\\n// ❌ Function call for styles\\nconst getStyles = () => ({\\n\\tcontrol: (base) => ({ ...base, color: 'blue' }),\\n});\\n<Select styles={getStyles()} />;\\n\\n// ❌ Member expression for styles\\nconst theme = {\\n\\tselectStyles: {\\n\\t\\tcontrol: (base) => ({ ...base, color: 'red' }),\\n\\t},\\n};\\n<Select styles={theme.selectStyles} />;\\n\\n// ❌ Variable-defined styles with unsupported selectors\\nconst selectStylesWithPseudo = {\\n\\tcontrol: (base) => ({\\n\\t\\t...base,\\n\\t\\t':focus-visible': { outline: '2px solid blue' },\\n\\t}),\\n};\\n<Select styles={selectStylesWithPseudo} />;\\n\\n// ❌ Inline styles with pseudo-classes\\n<Select\\n\\tstyles={{\\n\\t\\tcontrol: (base) => ({\\n\\t\\t\\t...base,\\n\\t\\t\\t':hover': { backgroundColor: 'blue' },\\n\\t\\t\\t':focus': { borderColor: 'red' },\\n\\t\\t}),\\n\\t}}\\n/>;\\n\\n// ❌ Inline styles with pseudo-elements\\n<Select\\n\\tstyles={{\\n\\t\\tcontrol: (base) => ({\\n\\t\\t\\t...base,\\n\\t\\t\\t':before': { content: '\\\"\\\"' },\\n\\t\\t\\t':after': { content: '\\\"*\\\"' },\\n\\t\\t}),\\n\\t}}\\n/>;\\n\\n// ❌ Inline styles with attribute selectors\\n<Select\\n\\tstyles={{\\n\\t\\tinput: (base) => ({\\n\\t\\t\\t...base,\\n\\t\\t\\t'[disabled]': { opacity: 0.5 },\\n\\t\\t}),\\n\\t}}\\n/>;\\n\\n// ❌ Inline styles with combinators\\n<Select\\n\\tstyles={{\\n\\t\\tcontrol: (base) => ({\\n\\t\\t\\t...base,\\n\\t\\t\\t'> div': { padding: '8px' },\\n\\t\\t\\t'& > span': { fontWeight: 'bold' },\\n\\t\\t}),\\n\\t}}\\n/>;\\n\\n// ❌ Inline styles with class selectors\\n<Select\\n\\tstyles={{\\n\\t\\tcontrol: (base) => ({\\n\\t\\t\\t...base,\\n\\t\\t\\t'.custom-class': { color: 'purple' },\\n\\t\\t}),\\n\\t}}\\n/>;\\n```\\n\\n## Correct\\n\\n```tsx\\nimport Select from '@atlaskit/select';\\n\\n// ✅ Inline styles with normal CSS properties only\\n<Select\\n\\tstyles={{\\n\\t\\tcontrol: (base) => ({\\n\\t\\t\\t...base,\\n\\t\\t\\tbackgroundColor: 'white',\\n\\t\\t\\tborderColor: 'gray',\\n\\t\\t\\tpadding: '8px',\\n\\t\\t\\tcolor: 'black',\\n\\t\\t\\tfontSize: '14px',\\n\\t\\t}),\\n\\t\\toption: (base, { isSelected }) => ({\\n\\t\\t\\t...base,\\n\\t\\t\\tbackgroundColor: isSelected ? 'blue' : 'white',\\n\\t\\t\\tcolor: isSelected ? 'white' : 'black',\\n\\t\\t}),\\n\\t}}\\n/>;\\n\\n// ✅ Use components API with xcss prop for pseudo-classes\\nimport { cssMap } from '@compiled/react';\\nimport Select, { components } from '@atlaskit/select';\\n\\nconst controlStyles = cssMap({\\n\\troot: {\\n\\t\\t'&:hover': {\\n\\t\\t\\tbackgroundColor: 'white',\\n\\t\\t},\\n\\t\\t'&:focus': {\\n\\t\\t\\tborderColor: 'blue',\\n\\t\\t},\\n\\t},\\n});\\n\\n<Select\\n\\tcomponents={{\\n\\t\\tControl: (props) => <components.Control {...props} xcss={controlStyles.root} />,\\n\\t}}\\n/>;\\n\\n// ✅ Use components API with xcss prop for pseudo-elements\\nconst controlWithPseudoStyles = cssMap({\\n\\troot: {\\n\\t\\t'&:before': {\\n\\t\\t\\tcontent: '\\\"\\\"',\\n\\t\\t\\tposition: 'absolute',\\n\\t\\t},\\n\\t\\t'&:after': {\\n\\t\\t\\tcontent: '\\\"*\\\"',\\n\\t\\t\\tcolor: 'red',\\n\\t\\t},\\n\\t},\\n});\\n\\n<Select\\n\\tcomponents={{\\n\\t\\tControl: (props) => <components.Control {...props} xcss={controlWithPseudoStyles.root} />,\\n\\t}}\\n/>;\\n\\n// ✅ Use components API with xcss prop for complex selectors\\nconst complexStyles = cssMap({\\n\\troot: {\\n\\t\\t'& > div': {\\n\\t\\t\\tpadding: '8px',\\n\\t\\t},\\n\\t\\t'&[disabled]': {\\n\\t\\t\\topacity: 0.5,\\n\\t\\t},\\n\\t\\t'&.custom-class': {\\n\\t\\t\\tcolor: 'purple',\\n\\t\\t},\\n\\t},\\n});\\n\\n<Select\\n\\tcomponents={{\\n\\t\\tControl: (props) => <components.Control {...props} xcss={complexStyles.root} />,\\n\\t}}\\n/>;\\n\\n// ✅ Multiple inline style functions\\n<Select\\n\\tstyles={{\\n\\t\\tcontrol: (base, { isFocused, isDisabled }) => ({\\n\\t\\t\\t...base,\\n\\t\\t\\tbackgroundColor: isDisabled ? 'gray' : 'white',\\n\\t\\t\\tborderColor: isFocused ? 'blue' : 'lightgray',\\n\\t\\t\\topacity: isDisabled ? 0.6 : 1,\\n\\t\\t}),\\n\\t\\tmenu: (base) => ({\\n\\t\\t\\t...base,\\n\\t\\t\\tborderRadius: '4px',\\n\\t\\t\\tboxShadow: '0 2px 8px rgba(0,0,0,0.1)',\\n\\t\\t}),\\n\\t\\toption: (base, { isSelected, isFocused }) => ({\\n\\t\\t\\t...base,\\n\\t\\t\\tbackgroundColor: isSelected ? 'blue' : isFocused ? 'lightblue' : 'white',\\n\\t\\t\\tcolor: isSelected ? 'white' : 'black',\\n\\t\\t}),\\n\\t}}\\n/>;\\n```\\n\\n## Migration Guide\\n\\nIf you have existing variable-defined styles, you have two options:\\n\\n### Option 1: Convert to Inline Styles (for basic styling)\\n\\n```tsx\\n// Before\\nconst selectStyles = {\\n\\tcontrol: (base) => ({\\n\\t\\t...base,\\n\\t\\tbackgroundColor: 'white',\\n\\t\\tborderColor: 'gray',\\n\\t}),\\n};\\n<Select styles={selectStyles} />;\\n\\n// After\\n<Select\\n\\tstyles={{\\n\\t\\tcontrol: (base) => ({\\n\\t\\t\\t...base,\\n\\t\\t\\tbackgroundColor: 'white',\\n\\t\\t\\tborderColor: 'gray',\\n\\t\\t}),\\n\\t}}\\n/>;\\n```\\n\\n### Option 2: Use Components API (for advanced selectors)\\n\\n```tsx\\n// Before\\nconst selectStyles = {\\n\\tcontrol: (base) => ({\\n\\t\\t...base,\\n\\t\\t':hover': { backgroundColor: 'lightgray' },\\n\\t\\t':focus': { borderColor: 'blue' },\\n\\t}),\\n};\\n<Select styles={selectStyles} />;\\n\\n// After\\nimport { cssMap } from '@compiled/react';\\nimport { components } from '@atlaskit/select';\\n\\nconst controlStyles = cssMap({\\n\\troot: {\\n\\t\\t'&:hover': { backgroundColor: 'lightgray' },\\n\\t\\t'&:focus': { borderColor: 'blue' },\\n\\t},\\n});\\n\\n<Select\\n\\tcomponents={{\\n\\t\\tControl: (props) => <components.Control {...props} xcss={controlStyles.root} />,\\n\\t}}\\n/>;\\n```\\n\"}",
   ruleName: 'enforce-inline-styles-in-select',
   description: 'This ESLint rule enforces inline styles only and disallows unsupported CSS selectors in the styles'
 }, {
-  content: "# ensure-design-token-usage\n\nUsing design tokens results in a harmonious experience for end users whilst providing theming and\nconsistency. All experiences must use color tokens otherwise when switching between themes,\nunexpected incidents can occur where not all of the UI is themed. Space, and shape tokens are\nstrongly recommended to further align our experiences and make future changes easier.\n\n## Examples\n\nUsing anything other than design tokens such as hardcoded values or legacy theme colors will be\nconsidered violations.\n\n### Incorrect\n\n```js\nimport { e100 } from '@atlaskit/theme/elevation';\nimport { B100 } from '@atlaskit/theme/colors';\n\ncss({ color: 'red' });\n              ^^^\ncss({ boxShadow: '0px 1px 1px #161A1D32' });\n                              ^^^^^^^^^\ncss`${e100};`;\n      ^^^^\ncss({ color: B100 });\n             ^^^^\n```\n\n### Correct\n\n```js\nimport { token } from '@atlaskit/tokens';\n\ncss({ color: token('color.text.danger') });\n\ncss({ boxShadow: token('elevation.shadow.card') });\n```\n\n### Incorrect\n\n```js\ncss({ padding: '16px' });\n                ^^^\ncss({ margin: gridSize() });\n              ^^^^^^^^^^\n```\n\n### Correct\n\n```js\nimport { token } from '@atlaskit/tokens';\n\ncss({ padding: token('space.100') });\n```\n\n## Options\n\nThis rule comes with options to aid in migrating to design tokens.\n\n### domains\n\nAn array specifiying which token domains to lint against (`color`, `spacing`, `shape`). Defaults to\n[`'color'`] if not provided.\n\n### applyImport\n\nWhen `true`, the rule when automatically add imports to the `@atlaskit/tokens` package where tokens\nare auto-fixed. Defaults to `true` if not provided.\n\n### shouldEnforceFallbacks\n\nWhen `true` the rule will add in stub fallbacks when choosing a suggestion in your IDE. Defaults to\n`false` if not provided.\n\n### exceptions\n\nAn array specifying strings to ingore when linting.\n",
+  content: '{"ruleName":"ensure-avatar-tag-avatar-props","description":"Ensures that the `avatar` prop on `AvatarTag` does not include controlled props (`size`,","content":"# ensure-avatar-tag-avatar-props\\n\\nEnsures that the `avatar` prop on `AvatarTag` does not include controlled props (`size`,\\n`borderColor`, `appearance`) which are managed internally by `AvatarTag` based on the `type` prop.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { AvatarTag } from \'@atlaskit/tag\';\\nimport Avatar from \'@atlaskit/avatar\';\\nimport TeamAvatar from \'@atlaskit/teams-avatar\';\\n\\n// ❌ size is controlled by AvatarTag\\n<AvatarTag type=\\"user\\" text=\\"John\\" avatar={(props) => <Avatar {...props} size=\\"large\\" />} />\\n\\n// ❌ appearance is controlled by AvatarTag\\n<AvatarTag type=\\"agent\\" text=\\"Rovo\\" avatar={(props) => <Avatar {...props} appearance=\\"circle\\" />} />\\n\\n// ❌ borderColor is controlled by AvatarTag\\n<AvatarTag type=\\"other\\" text=\\"Team\\" avatar={(props) => <TeamAvatar {...props} borderColor=\\"red\\" />} />\\n```\\n\\n### Correct\\n\\n```tsx\\nimport { AvatarTag } from \'@atlaskit/tag\';\\nimport Avatar from \'@atlaskit/avatar\';\\nimport TeamAvatar from \'@atlaskit/teams-avatar\';\\n\\n// ✅ Simple Avatar usage\\n<AvatarTag type=\\"user\\" text=\\"John\\" avatar={(props) => <Avatar {...props} />} />\\n\\n// ✅ Avatar with src\\n<AvatarTag type=\\"user\\" text=\\"John\\" avatar={(props) => <Avatar {...props} src=\\"user.png\\" />} />\\n\\n// ✅ TeamAvatar\\n<AvatarTag type=\\"other\\" text=\\"Team\\" avatar={(props) => <TeamAvatar {...props} />} />\\n\\n// ✅ Passing the component directly\\n<AvatarTag type=\\"user\\" text=\\"John\\" avatar={Avatar} />\\n```\\n\\n## Why?\\n\\n`AvatarTag` determines the correct `size`, `appearance`, and `borderColor` based on its `type` prop:\\n\\n- `type=\\"user\\"` → `appearance=\\"circle\\"`\\n- `type=\\"agent\\"` → `appearance=\\"hexagon\\"`\\n- `type=\\"other\\"` → `appearance=\\"square\\"`\\n\\nAll avatar types receive `size=\\"xsmall\\"` and `borderColor=\\"transparent\\"`.\\n\\nPassing these props directly will be overridden by `AvatarTag`, creating confusing code.\\n"}',
+  ruleName: 'ensure-avatar-tag-avatar-props',
+  description: 'Ensures that the `avatar` prop on `AvatarTag` does not include controlled props (`size`,'
+}, {
+  content: "{\"ruleName\":\"ensure-design-token-usage\",\"description\":\"Using design tokens results in a harmonious experience for end users whilst providing theming and\",\"content\":\"# ensure-design-token-usage\\n\\nUsing design tokens results in a harmonious experience for end users whilst providing theming and\\nconsistency. All experiences must use color tokens otherwise when switching between themes,\\nunexpected incidents can occur where not all of the UI is themed. Space, and shape tokens are\\nstrongly recommended to further align our experiences and make future changes easier.\\n\\n## Examples\\n\\nUsing anything other than design tokens such as hardcoded values or legacy theme colors will be\\nconsidered violations.\\n\\n### Incorrect\\n\\n```js\\nimport { e100 } from '@atlaskit/theme/elevation';\\nimport { B100 } from '@atlaskit/theme/colors';\\n\\ncss({ color: 'red' });\\n              ^^^\\ncss({ boxShadow: '0px 1px 1px #161A1D32' });\\n                              ^^^^^^^^^\\ncss`${e100};`;\\n      ^^^^\\ncss({ color: B100 });\\n             ^^^^\\n```\\n\\n### Correct\\n\\n```js\\nimport { token } from '@atlaskit/tokens';\\n\\ncss({ color: token('color.text.danger') });\\n\\ncss({ boxShadow: token('elevation.shadow.card') });\\n```\\n\\n### Incorrect\\n\\n```js\\ncss({ padding: '16px' });\\n                ^^^\\ncss({ margin: gridSize() });\\n              ^^^^^^^^^^\\n```\\n\\n### Correct\\n\\n```js\\nimport { token } from '@atlaskit/tokens';\\n\\ncss({ padding: token('space.100') });\\n```\\n\\n## Options\\n\\nThis rule comes with options to aid in migrating to design tokens.\\n\\n### domains\\n\\nAn array specifiying which token domains to lint against (`color`, `spacing`, `shape`). Defaults to\\n[`'color'`] if not provided.\\n\\n### applyImport\\n\\nWhen `true`, the rule when automatically add imports to the `@atlaskit/tokens` package where tokens\\nare auto-fixed. Defaults to `true` if not provided.\\n\\n### shouldEnforceFallbacks\\n\\nWhen `true` the rule will add in stub fallbacks when choosing a suggestion in your IDE. Defaults to\\n`false` if not provided.\\n\\n### exceptions\\n\\nAn array specifying strings to ingore when linting.\\n\"}",
   ruleName: 'ensure-design-token-usage',
   description: 'Using design tokens results in a harmonious experience for end users whilst providing theming and'
 }, {
-  content: '# ensure-design-token-usage/preview\n\nThis rule is a clone of `ensure-design-token-usage` and is intended to allow you to set some domains\nto `warn` before they are set to `error` in the main rule.\n\nSee `ensure-design-token-usage` for full usage documentation.\n',
+  content: '{"ruleName":"ensure-design-token-usage-preview","description":"This rule is a clone of `ensure-design-token-usage` and is intended to allow you to set some domains","content":"# ensure-design-token-usage/preview\\n\\nThis rule is a clone of `ensure-design-token-usage` and is intended to allow you to set some domains\\nto `warn` before they are set to `error` in the main rule.\\n\\nSee `ensure-design-token-usage` for full usage documentation.\\n"}',
   ruleName: 'ensure-design-token-usage-preview',
   description: 'This rule is a clone of `ensure-design-token-usage` and is intended to allow you to set some domains'
 }, {
-  content: "# ensure-icon-color\n\nIn an upcoming release of `@atlaskit/icon`, new icon components in `@atlaskit/icon/core`,\n`@atlaskit/icon/utility` and `@atlaskit/icon-lab` are being updated so the default value of `color`\nis `currentColor`.\n\nTo assist with migration, this lint rule requires the `color` prop to be set.\n\n## Examples\n\nThis rule will find violations when an icon doesn't have the `color` prop set explicitly.\n\n### Incorrect\n\n```js\nimport AddIcon from '@atlaskit/icon/core/add'\n\n<AddIcon label=\"\">\n^^^^^^^^^^^^^^ missing `color` prop\n```\n\n### Correct\n\n```js\nimport AddIcon from '@atlaskit/icon/core/add';\nimport {token} from '@atlaskit/token';\n\n<AddIcon label=\"\" color={token('color.icon', '#44546F')} >\n```\n",
+  content: '{"ruleName":"ensure-icon-color","description":"In an upcoming release of `@atlaskit/icon`, new icon components in `@atlaskit/icon/core`,","content":"# ensure-icon-color\\n\\nIn an upcoming release of `@atlaskit/icon`, new icon components in `@atlaskit/icon/core`,\\n`@atlaskit/icon/utility` and `@atlaskit/icon-lab` are being updated so the default value of `color`\\nis `currentColor`.\\n\\nTo assist with migration, this lint rule requires the `color` prop to be set.\\n\\n## Examples\\n\\nThis rule will find violations when an icon doesn\'t have the `color` prop set explicitly.\\n\\n### Incorrect\\n\\n```js\\nimport AddIcon from \'@atlaskit/icon/core/add\'\\n\\n<AddIcon label=\\"\\">\\n^^^^^^^^^^^^^^ missing `color` prop\\n```\\n\\n### Correct\\n\\n```js\\nimport AddIcon from \'@atlaskit/icon/core/add\';\\nimport {token} from \'@atlaskit/token\';\\n\\n<AddIcon label=\\"\\" color={token(\'color.icon\', \'#44546F\')} >\\n```\\n"}',
   ruleName: 'ensure-icon-color',
   description: 'In an upcoming release of `@atlaskit/icon`, new icon components in `@atlaskit/icon/core`,'
 }, {
-  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';\\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\"}",
   ruleName: 'ensure-proper-xcss-usage',
   description: 'This ESLint rule enforces proper usage of the `xcss` prop with compiled Primitives from'
 }, {
-  content: '# icon-label\n\nIcon labels are used to describe what the icon is so the visually impaired can be described what the\nUI element is. There are cases where icons should have labels as well as cases where they shouldn\'t\nbe labelled.\n\n## Examples\n\nThis rule will find violations for when an icon label is or isn\'t needed when composed with other\nDesign System components.\n\n### Incorrect\n\n```js\nimport ActivityIcon from \'@atlaskit/icon/glyph/activity\'\n\n<ActivityIcon>\n^^^^^^^^^^^^^^ missing `label` prop\n\n<Button iconLeft={<ActivityIcon label="">} />\n                                ^^^^^ label should be defined\n\n<ButtonItem iconBefore={<ActivityIcon label="">}>\n                                      ^^^^^ label should not be defined\n  My activity\n</ButtonItem>\n```\n\n### Correct\n\n```js\nimport ActivityIcon from \'@atlaskit/icon/glyph/activity\'\n\n<ActivityIcon label="Activity">\n\n<Button iconLeft={<ActivityIcon label="Activity">} />\n\n<ButtonItem iconBefore={<ActivityIcon label="">}>\n  My activity\n</ButtonItem>\n```\n',
+  content: '{"ruleName":"icon-label","description":"Icon labels are used to describe what the icon is so the visually impaired can be described what the","content":"# icon-label\\n\\nIcon labels are used to describe what the icon is so the visually impaired can be described what the\\nUI element is. There are cases where icons should have labels as well as cases where they shouldn\'t\\nbe labelled.\\n\\n## Examples\\n\\nThis rule will find violations for when an icon label is or isn\'t needed when composed with other\\nDesign System components.\\n\\n### Incorrect\\n\\n```js\\nimport ActivityIcon from \'@atlaskit/icon/glyph/activity\'\\n\\n<ActivityIcon>\\n^^^^^^^^^^^^^^ missing `label` prop\\n\\n<Button iconLeft={<ActivityIcon label=\\"\\">} />\\n                                ^^^^^ label should be defined\\n\\n<ButtonItem iconBefore={<ActivityIcon label=\\"\\">}>\\n                                      ^^^^^ label should not be defined\\n  My activity\\n</ButtonItem>\\n```\\n\\n### Correct\\n\\n```js\\nimport ActivityIcon from \'@atlaskit/icon/glyph/activity\'\\n\\n<ActivityIcon label=\\"Activity\\">\\n\\n<Button iconLeft={<ActivityIcon label=\\"Activity\\">} />\\n\\n<ButtonItem iconBefore={<ActivityIcon label=\\"\\">}>\\n  My activity\\n</ButtonItem>\\n```\\n"}',
   ruleName: 'icon-label',
   description: 'Icon labels are used to describe what the icon is so the visually impaired can be described what the'
 }, {
-  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-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/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-boolean-autofocus-on-modal-dialog/usage">no-boolean-autofocus-on-modal-dialog</a>                 | Encourages makers to not use boolean values for `autoFocus` on Atlassian Design System\'s modal dialog component.                                                                                                                                                                                                    | 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-custom-icons/usage">no-custom-icons</a>                                                           | Enforces custom glyph icons are used.                                                                                                                                                                                                                                                                               |             |         |             |\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-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-legacy-icons/usage">no-legacy-icons</a>                                                           | Enforces no legacy icons are used.                                                                                                                                                                                                                                                                                  |             | Yes     | 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-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-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() in favor of toMatchInlineSnapshot(). See https://hello.atlassian.net/wiki/spaces/DST/pages/6105892000/DSTRFC-038+-+Removal+of+.toMatchSnapshot for rationale.                                                                                                                      |             |         |             |\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. To enforce usage please refer to the `use-primitives` rule.                                                                                                                                    |             |         |             |\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-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-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-primitives/usage">use-primitives</a>                                                             | Encourage the usage of primitives components.                                                                                                                                                                                                                                                                       |             | Yes     | 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-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 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/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-boolean-autofocus-on-modal-dialog/usage\\">no-boolean-autofocus-on-modal-dialog</a>                 | Encourages makers to not use boolean values for `autoFocus` on Atlassian Design System\'s modal dialog component.                                                                                                                                                                                                    | 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-custom-icons/usage\\">no-custom-icons</a>                                                           | Enforces custom glyph icons are used.                                                                                                                                                                                                                                                                               |             |         |             |\\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-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-legacy-icons/usage\\">no-legacy-icons</a>                                                           | Enforces no legacy icons are used.                                                                                                                                                                                                                                                                                  |             | Yes     | 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-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-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() in favor of toMatchInlineSnapshot(). See https://hello.atlassian.net/wiki/spaces/DST/pages/6105892000/DSTRFC-038+-+Removal+of+.toMatchSnapshot for rationale.                                                                                                                      |             |         |             |\\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. To enforce usage please refer to the `use-primitives` rule.                                                                                                                                    |             |         |             |\\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-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-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-primitives/usage\\">use-primitives</a>                                                             | Encourage the usage of primitives components.                                                                                                                                                                                                                                                                       |             | Yes     | 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-side-nav-items-package/usage\\">use-side-nav-items-package</a>                                     | Use @atlaskit/side-nav-items instead of @atlaskit/navigation-system/side-nav-items.                                                                                                                                                                                                                                 | Yes         | 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-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: '---'
 }, {
-  content: '# lozenge-appearance-and-isbold-migration\n\nThis rule helps migrate deprecated `<Lozenge>` usages to the new API or `<Tag>` component, and\nmigrate `<Badge>` component appearance prop to new semantic values as part of the Labelling System\nPhase 1 migration.\n\n## Examples\n\n### Incorrect\n\n```tsx\n// Non-bold Lozenge variants should migrate to Tag\n<Lozenge isBold={false} />\n<Lozenge /> // no isBold means implicit false\n\n// Dynamic isBold expressions require manual review\n<Lozenge isBold={someVariable} />\n<Lozenge isBold={condition ? true : false} />\n\n// Badge: Old appearance values that need migration\n<Badge appearance="added">{5}</Badge>\n<Badge appearance="removed">{10}</Badge>\n<Badge appearance="default">{3}</Badge>\n<Badge appearance="primary">{7}</Badge>\n<Badge appearance="primaryInverted">{2}</Badge>\n<Badge appearance="important">{99}</Badge>\n\n// Badge: Dynamic appearance expressions require manual review\n<Badge appearance={getStatus()}>{count}</Badge>\n<Badge appearance={condition ? \'added\' : \'removed\'}>{num}</Badge>\n```\n\n### Correct\n\n```tsx\n// Non-bold variants should use Tag component with appearance prop\n<Tag appearance="success" />\n<Tag appearance="default" />\n\n// Bold Lozenge variants can stay as Lozenge\n<Lozenge isBold />\n<Lozenge isBold={true} />\n<Lozenge appearance="success" isBold />\n\n// Badge: New semantic appearance values\n<Badge appearance="success">{5}</Badge>\n<Badge appearance="danger">{10}</Badge>\n<Badge appearance="neutral">{3}</Badge>\n<Badge appearance="information">{7}</Badge>\n<Badge appearance="inverse">{2}</Badge>\n<Badge appearance="danger">{99}</Badge>\n\n// Badge: Already using semantic values\n<Badge appearance="success">{42}</Badge>\n```\n\n## Rule Details\n\nThis rule enforces multiple migration patterns:\n\n1. **Migrate `isBold={false}` or missing `isBold` → `<Tag />`**: Detects non-bold Lozenge variants\n   and suggests migrating to the Tag component, preserving other props including the `appearance`\n   prop with its value.\n\n2. **Warn on dynamic `isBold` expressions**: Detects dynamic `isBold` props that cannot be safely\n   auto-fixed and require manual review.\n\n3. **Migrate Badge appearance values**: Detects Badge components using old appearance values and\n   migrates them to new semantic values.\n\n4. **Warn on dynamic Badge appearance expressions**: Detects dynamic `appearance` props on Badge\n   components that cannot be safely auto-fixed and require manual review.\n\n## Appearance Prop Handling\n\n### Lozenge and Tag\n\nBoth `<Lozenge>` and `<Tag>` now use the `appearance` prop with new semantic values. The rule will\nautomatically map old appearance values to the new semantic values when they differ.\n\n### Appearance Value Mapping\n\nThe rule includes a mapping function that will update old appearance values to new semantic values:\n\n```tsx\n// Example mappings (to be updated with actual semantic values)\n\'success\' → \'success\'      // or new semantic equivalent\n\'default\' → \'default\'      // or new semantic equivalent\n\'removed\' → \'removed\'      // or new semantic equivalent\n\'inprogress\' → \'inprogress\' // or new semantic equivalent\n\'new\' → \'new\'             // or new semantic equivalent\n\'moved\' → \'moved\'         // or new semantic equivalent\n```\n\n**Note**: The current implementation preserves existing values. The mapping will be updated once the\nnew semantic values are finalized.\n\n### Badge Appearance Value Mapping\n\nBadge components use the following appearance value mapping:\n\n| Old Appearance    | New Appearance |\n| ----------------- | -------------- |\n| `added`           | `success`      |\n| `removed`         | `danger`       |\n| `default`         | `neutral`      |\n| `primary`         | `information`  |\n| `primaryInverted` | `inverse`      |\n| `important`       | `danger`       |\n\n## Auto-fixes\n\n- ✅ `isBold={false}` and missing `isBold` migration to `<Tag>` with preserved `appearance` prop\n- ✅ Static Badge appearance prop values (e.g., `appearance="added"` → `appearance="success"`)\n- ❌ Dynamic `isBold` expressions (warning only)\n- ❌ Dynamic Badge appearance expressions (warning only - requires manual review)\n',
+  content: '{"ruleName":"lozenge-appearance-and-isbold-migration","description":"This rule helps migrate deprecated `<Lozenge>` usages to the new API or `<Tag>` component, and","content":"# lozenge-appearance-and-isbold-migration\\n\\nThis rule helps migrate deprecated `<Lozenge>` usages to the new API or `<Tag>` component, and\\nmigrate `<Badge>` component appearance prop to new semantic values as part of the Labelling System\\nPhase 1 migration.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\n// Non-bold Lozenge variants should migrate to Tag\\n<Lozenge isBold={false} />\\n<Lozenge /> // no isBold means implicit false\\n\\n// Dynamic isBold expressions require manual review\\n<Lozenge isBold={someVariable} />\\n<Lozenge isBold={condition ? true : false} />\\n\\n// Badge: Old appearance values that need migration\\n<Badge appearance=\\"added\\">{5}</Badge>\\n<Badge appearance=\\"removed\\">{10}</Badge>\\n<Badge appearance=\\"default\\">{3}</Badge>\\n<Badge appearance=\\"primary\\">{7}</Badge>\\n<Badge appearance=\\"primaryInverted\\">{2}</Badge>\\n<Badge appearance=\\"important\\">{99}</Badge>\\n\\n// Badge: Dynamic appearance expressions require manual review\\n<Badge appearance={getStatus()}>{count}</Badge>\\n<Badge appearance={condition ? \'added\' : \'removed\'}>{num}</Badge>\\n```\\n\\n### Correct\\n\\n```tsx\\n// Non-bold variants should use Tag component with appearance prop\\n<Tag appearance=\\"success\\" />\\n<Tag appearance=\\"default\\" />\\n\\n// Bold Lozenge variants can stay as Lozenge\\n<Lozenge isBold />\\n<Lozenge isBold={true} />\\n<Lozenge appearance=\\"success\\" isBold />\\n\\n// Badge: New semantic appearance values\\n<Badge appearance=\\"success\\">{5}</Badge>\\n<Badge appearance=\\"danger\\">{10}</Badge>\\n<Badge appearance=\\"neutral\\">{3}</Badge>\\n<Badge appearance=\\"information\\">{7}</Badge>\\n<Badge appearance=\\"inverse\\">{2}</Badge>\\n<Badge appearance=\\"danger\\">{99}</Badge>\\n\\n// Badge: Already using semantic values\\n<Badge appearance=\\"success\\">{42}</Badge>\\n```\\n\\n## Rule Details\\n\\nThis rule enforces multiple migration patterns:\\n\\n1. **Migrate `isBold={false}` or missing `isBold` → `<Tag />`**: Detects non-bold Lozenge variants\\n   and suggests migrating to the Tag component, preserving other props including the `appearance`\\n   prop with its value.\\n\\n2. **Warn on dynamic `isBold` expressions**: Detects dynamic `isBold` props that cannot be safely\\n   auto-fixed and require manual review.\\n\\n3. **Migrate Badge appearance values**: Detects Badge components using old appearance values and\\n   migrates them to new semantic values.\\n\\n4. **Warn on dynamic Badge appearance expressions**: Detects dynamic `appearance` props on Badge\\n   components that cannot be safely auto-fixed and require manual review.\\n\\n## Appearance Prop Handling\\n\\n### Lozenge and Tag\\n\\nBoth `<Lozenge>` and `<Tag>` now use the `appearance` prop with new semantic values. The rule will\\nautomatically map old appearance values to the new semantic values when they differ.\\n\\n### Appearance Value Mapping\\n\\nThe rule includes a mapping function that will update old appearance values to new semantic values:\\n\\n```tsx\\n// Example mappings (to be updated with actual semantic values)\\n\'success\' → \'success\'      // or new semantic equivalent\\n\'default\' → \'default\'      // or new semantic equivalent\\n\'removed\' → \'removed\'      // or new semantic equivalent\\n\'inprogress\' → \'inprogress\' // or new semantic equivalent\\n\'new\' → \'new\'             // or new semantic equivalent\\n\'moved\' → \'moved\'         // or new semantic equivalent\\n```\\n\\n**Note**: The current implementation preserves existing values. The mapping will be updated once the\\nnew semantic values are finalized.\\n\\n### Badge Appearance Value Mapping\\n\\nBadge components use the following appearance value mapping:\\n\\n| Old Appearance    | New Appearance |\\n| ----------------- | -------------- |\\n| `added`           | `success`      |\\n| `removed`         | `danger`       |\\n| `default`         | `neutral`      |\\n| `primary`         | `information`  |\\n| `primaryInverted` | `inverse`      |\\n| `important`       | `danger`       |\\n\\n## Auto-fixes\\n\\n- ✅ `isBold={false}` and missing `isBold` migration to `<Tag>` with preserved `appearance` prop\\n- ✅ Static Badge appearance prop values (e.g., `appearance=\\"added\\"` → `appearance=\\"success\\"`)\\n- ❌ Dynamic `isBold` expressions (warning only)\\n- ❌ Dynamic Badge appearance expressions (warning only - requires manual review)\\n"}',
   ruleName: 'lozenge-appearance-and-isbold-migration',
   description: 'This rule helps migrate deprecated `<Lozenge>` usages to the new API or `<Tag>` component, and'
 }, {
-  content: '# lozenge-badge-appearance-migration\n\nThis rule helps migrate deprecated `<Lozenge>` usages to the new API or `<Tag>` component, and\nmigrate `<Badge>` component appearance prop to new semantic values as part of the Labelling System\nPhase 1 migration.\n\n## Examples\n\n### Incorrect\n\n```tsx\n// Non-bold Lozenge variants should migrate to Tag\n<Lozenge isBold={false} />\n<Lozenge /> // no isBold means implicit false\n\n// Dynamic isBold expressions require manual review\n<Lozenge isBold={someVariable} />\n<Lozenge isBold={condition ? true : false} />\n\n// Badge: Old appearance values that need migration\n<Badge appearance="added">{5}</Badge>\n<Badge appearance="removed">{10}</Badge>\n<Badge appearance="default">{3}</Badge>\n<Badge appearance="primary">{7}</Badge>\n<Badge appearance="primaryInverted">{2}</Badge>\n<Badge appearance="important">{99}</Badge>\n\n// Badge: Dynamic appearance expressions require manual review\n<Badge appearance={getStatus()}>{count}</Badge>\n<Badge appearance={condition ? \'added\' : \'removed\'}>{num}</Badge>\n```\n\n### Correct\n\n```tsx\n// Non-bold variants should use Tag component with appearance prop\n<Tag appearance="success" />\n<Tag appearance="default" />\n\n// Bold Lozenge variants can stay as Lozenge\n<Lozenge isBold />\n<Lozenge isBold={true} />\n<Lozenge appearance="success" isBold />\n\n// Badge: New semantic appearance values\n<Badge appearance="success">{5}</Badge>\n<Badge appearance="danger">{10}</Badge>\n<Badge appearance="neutral">{3}</Badge>\n<Badge appearance="information">{7}</Badge>\n<Badge appearance="inverse">{2}</Badge>\n<Badge appearance="danger">{99}</Badge>\n\n// Badge: Already using semantic values\n<Badge appearance="success">{42}</Badge>\n```\n\n## Rule Details\n\nThis rule enforces multiple migration patterns:\n\n1. **Migrate `isBold={false}` or missing `isBold` → `<Tag />`**: Detects non-bold Lozenge variants\n   and suggests migrating to the Tag component, preserving other props including the `appearance`\n   prop with its value.\n\n2. **Warn on dynamic `isBold` expressions**: Detects dynamic `isBold` props that cannot be safely\n   auto-fixed and require manual review.\n\n3. **Migrate Badge appearance values**: Detects Badge components using old appearance values and\n   migrates them to new semantic values.\n\n4. **Warn on dynamic Badge appearance expressions**: Detects dynamic `appearance` props on Badge\n   components that cannot be safely auto-fixed and require manual review.\n\n## Appearance Prop Handling\n\n### Lozenge and Tag\n\nBoth `<Lozenge>` and `<Tag>` now use the `appearance` prop with new semantic values. The rule will\nautomatically map old appearance values to the new semantic values when they differ.\n\n### Appearance Value Mapping\n\nThe rule includes a mapping function that will update old appearance values to new semantic values:\n\n```tsx\n// Example mappings (to be updated with actual semantic values)\n\'success\' → \'success\'      // or new semantic equivalent\n\'default\' → \'default\'      // or new semantic equivalent\n\'removed\' → \'removed\'      // or new semantic equivalent\n\'inprogress\' → \'inprogress\' // or new semantic equivalent\n\'new\' → \'new\'             // or new semantic equivalent\n\'moved\' → \'moved\'         // or new semantic equivalent\n```\n\n**Note**: The current implementation preserves existing values. The mapping will be updated once the\nnew semantic values are finalized.\n\n### Badge Appearance Value Mapping\n\nBadge components use the following appearance value mapping:\n\n| Old Appearance    | New Appearance |\n| ----------------- | -------------- |\n| `added`           | `success`      |\n| `removed`         | `danger`       |\n| `default`         | `neutral`      |\n| `primary`         | `information`  |\n| `primaryInverted` | `inverse`      |\n| `important`       | `danger`       |\n\n## Auto-fixes\n\n- ✅ `isBold={false}` and missing `isBold` migration to `<Tag>` with preserved `appearance` prop\n- ✅ Static Badge appearance prop values (e.g., `appearance="added"` → `appearance="success"`)\n- ❌ Dynamic `isBold` expressions (warning only)\n- ❌ Dynamic Badge appearance expressions (warning only - requires manual review)\n',
+  content: '{"ruleName":"lozenge-badge-appearance-migration","description":"This rule helps migrate deprecated `<Lozenge>` usages to the new API or `<Tag>` component, and","content":"# lozenge-badge-appearance-migration\\n\\nThis rule helps migrate deprecated `<Lozenge>` usages to the new API or `<Tag>` component, and\\nmigrate `<Badge>` component appearance prop to new semantic values as part of the Labelling System\\nPhase 1 migration.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\n// Non-bold Lozenge variants should migrate to Tag\\n<Lozenge isBold={false} />\\n<Lozenge /> // no isBold means implicit false\\n\\n// Dynamic isBold expressions require manual review\\n<Lozenge isBold={someVariable} />\\n<Lozenge isBold={condition ? true : false} />\\n\\n// Badge: Old appearance values that need migration\\n<Badge appearance=\\"added\\">{5}</Badge>\\n<Badge appearance=\\"removed\\">{10}</Badge>\\n<Badge appearance=\\"default\\">{3}</Badge>\\n<Badge appearance=\\"primary\\">{7}</Badge>\\n<Badge appearance=\\"primaryInverted\\">{2}</Badge>\\n<Badge appearance=\\"important\\">{99}</Badge>\\n\\n// Badge: Dynamic appearance expressions require manual review\\n<Badge appearance={getStatus()}>{count}</Badge>\\n<Badge appearance={condition ? \'added\' : \'removed\'}>{num}</Badge>\\n```\\n\\n### Correct\\n\\n```tsx\\n// Non-bold variants should use Tag component with appearance prop\\n<Tag appearance=\\"success\\" />\\n<Tag appearance=\\"default\\" />\\n\\n// Bold Lozenge variants can stay as Lozenge\\n<Lozenge isBold />\\n<Lozenge isBold={true} />\\n<Lozenge appearance=\\"success\\" isBold />\\n\\n// Badge: New semantic appearance values\\n<Badge appearance=\\"success\\">{5}</Badge>\\n<Badge appearance=\\"danger\\">{10}</Badge>\\n<Badge appearance=\\"neutral\\">{3}</Badge>\\n<Badge appearance=\\"information\\">{7}</Badge>\\n<Badge appearance=\\"inverse\\">{2}</Badge>\\n<Badge appearance=\\"danger\\">{99}</Badge>\\n\\n// Badge: Already using semantic values\\n<Badge appearance=\\"success\\">{42}</Badge>\\n```\\n\\n## Rule Details\\n\\nThis rule enforces multiple migration patterns:\\n\\n1. **Migrate `isBold={false}` or missing `isBold` → `<Tag />`**: Detects non-bold Lozenge variants\\n   and suggests migrating to the Tag component, preserving other props including the `appearance`\\n   prop with its value.\\n\\n2. **Warn on dynamic `isBold` expressions**: Detects dynamic `isBold` props that cannot be safely\\n   auto-fixed and require manual review.\\n\\n3. **Migrate Badge appearance values**: Detects Badge components using old appearance values and\\n   migrates them to new semantic values.\\n\\n4. **Warn on dynamic Badge appearance expressions**: Detects dynamic `appearance` props on Badge\\n   components that cannot be safely auto-fixed and require manual review.\\n\\n## Appearance Prop Handling\\n\\n### Lozenge and Tag\\n\\nBoth `<Lozenge>` and `<Tag>` now use the `appearance` prop with new semantic values. The rule will\\nautomatically map old appearance values to the new semantic values when they differ.\\n\\n### Appearance Value Mapping\\n\\nThe rule includes a mapping function that will update old appearance values to new semantic values:\\n\\n```tsx\\n// Example mappings (to be updated with actual semantic values)\\n\'success\' → \'success\'      // or new semantic equivalent\\n\'default\' → \'default\'      // or new semantic equivalent\\n\'removed\' → \'removed\'      // or new semantic equivalent\\n\'inprogress\' → \'inprogress\' // or new semantic equivalent\\n\'new\' → \'new\'             // or new semantic equivalent\\n\'moved\' → \'moved\'         // or new semantic equivalent\\n```\\n\\n**Note**: The current implementation preserves existing values. The mapping will be updated once the\\nnew semantic values are finalized.\\n\\n### Badge Appearance Value Mapping\\n\\nBadge components use the following appearance value mapping:\\n\\n| Old Appearance    | New Appearance |\\n| ----------------- | -------------- |\\n| `added`           | `success`      |\\n| `removed`         | `danger`       |\\n| `default`         | `neutral`      |\\n| `primary`         | `information`  |\\n| `primaryInverted` | `inverse`      |\\n| `important`       | `danger`       |\\n\\n## Auto-fixes\\n\\n- ✅ `isBold={false}` and missing `isBold` migration to `<Tag>` with preserved `appearance` prop\\n- ✅ Static Badge appearance prop values (e.g., `appearance=\\"added\\"` → `appearance=\\"success\\"`)\\n- ❌ Dynamic `isBold` expressions (warning only)\\n- ❌ Dynamic Badge appearance expressions (warning only - requires manual review)\\n"}',
   ruleName: 'lozenge-badge-appearance-migration',
   description: 'This rule helps migrate deprecated `<Lozenge>` usages to the new API or `<Tag>` component, and'
 }, {
-  content: '# lozenge-badge-tag-labelling-system-migration\n\nThis rule helps migrate deprecated `<Lozenge>` usages to the new API or `<Tag>` component, migrate\n`<Badge>` component appearance prop to new semantic values, and migrate `<SimpleTag>` and\n`<RemovableTag>` components to the new `<Tag>` or `<avatarTag>` components as part of the Labelling\nSystem Phase 1 migration.\n\n## Examples\n\n### Incorrect\n\n```tsx\n// Non-bold Lozenge variants should migrate to Tag\n<Lozenge isBold={false} />\n<Lozenge /> // no isBold means implicit false\n\n// Dynamic isBold expressions require manual review\n<Lozenge isBold={someVariable} />\n<Lozenge isBold={condition ? true : false} />\n\n// Badge: Old appearance values that need migration\n<Badge appearance="added">{5}</Badge>\n<Badge appearance="removed">{10}</Badge>\n<Badge appearance="default">{3}</Badge>\n<Badge appearance="primary">{7}</Badge>\n<Badge appearance="primaryInverted">{2}</Badge>\n<Badge appearance="important">{99}</Badge>\n\n// Badge: Dynamic appearance expressions require manual review\n<Badge appearance={getStatus()}>{count}</Badge>\n<Badge appearance={condition ? \'added\' : \'removed\'}>{num}</Badge>\n\n// SimpleTag/RemovableTag: Old tag components that need migration\n<SimpleTag>Hello</SimpleTag>\n<SimpleTag color="blueLight">Hello</SimpleTag>\n<SimpleTag elemBefore={<Avatar src="x" />}>Hello</SimpleTag>\n<RemovableTag color="redLight">Hello</RemovableTag>\n<RemovableTag elemBefore={<Avatar />}>Hello</RemovableTag>\n\n// SimpleTag/RemovableTag from subpaths: Also need migration\nimport SimpleTag from \'@atlaskit/tag/simple-tag\';\n<SimpleTag color="blueLight">Hello</SimpleTag>\n\nimport RemovableTag from \'@atlaskit/tag/removable-tag\';\n<RemovableTag color="redLight">Hello</RemovableTag>\n```\n\n### Correct\n\n```tsx\n// Non-bold variants should use Tag component with appearance prop\n<Tag appearance="success" />\n<Tag appearance="default" />\n\n// Bold Lozenge variants can stay as Lozenge\n<Lozenge isBold />\n<Lozenge isBold={true} />\n<Lozenge appearance="success" isBold />\n\n// Badge: New semantic appearance values\n<Badge appearance="success">{5}</Badge>\n<Badge appearance="danger">{10}</Badge>\n<Badge appearance="neutral">{3}</Badge>\n<Badge appearance="information">{7}</Badge>\n<Badge appearance="inverse">{2}</Badge>\n<Badge appearance="danger">{99}</Badge>\n\n// Badge: Already using semantic values\n<Badge appearance="success">{42}</Badge>\n\n// SimpleTag/RemovableTag: Migrate to Tag component\nimport Tag from \'@atlaskit/tag\';\n<Tag>Hello</Tag>\n<Tag color="blue" isRemovable={false}>Hello</Tag>\n\n// SimpleTag/RemovableTag: Migrate to AvatarTag with render props\nimport { AvatarTag } from \'@atlaskit/tag\';\nimport Avatar from \'@atlaskit/avatar\';\n<AvatarTag avatar={(props) => <Avatar {...props} src="x" />}>Hello</AvatarTag>\n\n// SimpleTag/RemovableTag from subpaths: Also migrate to main module\nimport Tag from \'@atlaskit/tag\';\nimport Avatar from \'@atlaskit/avatar\';\n<Tag color="blue" isRemovable={false}>Hello</Tag>\n<AvatarTag avatar={(props) => <Avatar {...props} />}>Hello</AvatarTag>\n```\n\n## Rule Details\n\nThis rule enforces multiple migration patterns:\n\n1. **Migrate `isBold={false}` or missing `isBold` → `<Tag />`**: Detects non-bold Lozenge variants\n   and suggests migrating to the Tag component, preserving other props including the `appearance`\n   prop with its value.\n\n2. **Warn on dynamic `isBold` expressions**: Detects dynamic `isBold` props that cannot be safely\n   auto-fixed and require manual review.\n\n3. **Migrate Badge appearance values**: Detects Badge components using old appearance values and\n   migrates them to new semantic values.\n\n4. **Warn on dynamic Badge appearance expressions**: Detects dynamic `appearance` props on Badge\n   components that cannot be safely auto-fixed and require manual review.\n\n5. **Migrate SimpleTag/RemovableTag to Tag**: Detects SimpleTag and RemovableTag components (from\n   named imports or subpaths) and migrates them to the new Tag component, updating imports and\n   handling color prop mapping.\n\n6. **Migrate SimpleTag/RemovableTag with Avatar to AvatarTag**: Detects SimpleTag and RemovableTag\n   components that use an Avatar component in the `elemBefore` prop and migrates them to the new\n   `AvatarTag` component with render props pattern: `avatar={(props) => <Avatar {...props} />}`.\n   Removes `appearance` and `color` props from AvatarTag migrations.\n\n7. **Handle subpath imports**: Detects default imports from `@atlaskit/tag/simple-tag` and\n   `@atlaskit/tag/removable-tag` and migrates them to the main `@atlaskit/tag` module with the\n   appropriate component (Tag or AvatarTag).\n\n8. **Handle default Tag imports**: Detects default imports from `@atlaskit/tag` (old RemovableTag)\n   and checks if they need migration. If nothing needs migration, treats them as the new Tag\n   component.\n\n## Flowcharts\n\n### Tag Migration Flowchart (SimpleTag/RemovableTag/Tag)\n\n```\n┌─────────────────────────────────────────────────────────────┐\n│         Tag Migration (SimpleTag/RemovableTag/Tag)          │\n└─────────────────────────────────────────────────────────────┘\n                            │\n                            ▼\n                    ┌───────────────┐\n                    │  Is default   │\n                    │  Tag import   │\n                    │  from         │\n                    │  @atlaskit/   │\n                    │  tag?         │\n                    └───────┬───────┘\n                            │\n                ┌───────────┴───┐\n                │               │\n            YES │               │ NO\n                │               │\n                ▼               │\n        ┌───────────────┐       │\n        │ Check if      │       │\n        │ already new   │       │\n        │ Tag (nothing  │       │\n        │ to migrate)   │       │\n        └───────┬───────┘       │\n                │               │\n        ┌───────┴───────┐       │\n        │               │       │\n    YES │               │ NO    │\n        │               │       │\n        ▼               ▼       ▼\n┌───────────────┐ ┌───────────────┐\n│   SKIP        │ │  Check        │\n│  (Already     │ │  elemBefore   │\n│   migrated)   │ │  for Avatar   │\n└───────────────┘ └───────┬───────┘\n                          │\n                  ┌───────┴───────┐\n                  │               │\n              YES │               │ NO\n                  │               │\n                  ▼               ▼\n          ┌───────────────┐ ┌───────────────┐\n          │ Migrate to    │ │ Migrate to    │\n          │ AvatarTag     │ │ Tag           │\n          │ - Convert     │ │ - Map colors  │\n          │   elemBefore  │ │ - Add         │\n          │   to avatar   │ │   isRemovable │\n          │   render prop │ │   ={false}    │\n          │ - Remove      │ │   (if         │\n          │   appearance/ │ │   SimpleTag)  │\n          │   color       │ │ - Update      │\n          │               │ │   imports     │\n          └───────────────┘ └───────────────┘\n```\n\n### Badge Migration Flowchart\n\n```\n┌─────────────────────────────────────────────────────────────┐\n│                    Badge Migration                          │\n└─────────────────────────────────────────────────────────────┘\n                            │\n                            ▼\n                    ┌───────────────┐\n                    │  Has          │\n                    │  appearance   │\n                    │  prop?        │\n                    └───────┬───────┘\n                            │\n                ┌───────────┴───────────┐\n                │                       │\n            YES │                       │ NO\n                │                       │\n                ▼                       ▼\n        ┌───────────────┐      ┌───────────────┐\n        │  Is dynamic?  │      │   SKIP        │\n        │  (variable/   │      │  (no          │\n        │   expression) │      │   migration   │\n        └───────┬───────┘      │   needed)     │\n                │              └───────────────┘\n        ┌───────┴───────┐\n        │               │\n    YES │               │ NO\n        │               │\n        ▼               ▼\n┌───────────────┐ ┌───────────────┐\n│ Report        │ │ Map & fix     │\n│ warning       │ │ appearance    │\n│ (manual       │ │ value:        │\n│  review)      │ │ - added →     │\n│               │ │   success     │\n│               │ │ - removed →   │\n│               │ │   danger      │\n│               │ │ - default →   │\n│               │ │   neutral     │\n│               │ │ - primary →   │\n│               │ │   information │\n│               │ │ - primaryIn   │\n│               │ │   verted →    │\n│               │ │   inverse     │\n│               │ │ - important → │\n│               │ │   danger      │\n└───────────────┘ └───────────────┘\n```\n\n### Lozenge Migration Flowchart\n\n```\n┌─────────────────────────────────────────────────────────────┐\n│                    Lozenge Migration                        │\n└─────────────────────────────────────────────────────────────┘\n                            │\n                            ▼\n                    ┌───────────────┐\n                    │  Check isBold │\n                    │  prop         │\n                    └───────┬───────┘\n                            │\n        ┌───────────────────┼───────────────────┐\n        │                   │                   │\n        ▼                   ▼                   ▼\n┌───────────────┐  ┌────────────────┐  ┌───────────────┐\n│ isBold={false}│  │ No isBold prop │  │ isBold={true} │\n│               │  │ (implicit      │  │ OR            │\n│               │  │ false)         │  │ isBold        │\n│               │  │                │  │ (implicit)    │\n└───────┬───────┘  └───────┬────────┘  └───────┬───────┘\n        │                  │                   │\n        │                  │                   │\n        ▼                  ▼                   ▼\n┌────────────────────────────┐        ┌───────────────┐\n│ Check if                   │        │ Stay as       │\n│ appearance is              │        │ Lozenge       │\n│ dynamic                    |        │ - Update      │\n└───────┬────────────────────┘        │   appearance  │\n        │                             │   if needed   │\n┌───────┴─────────────────┐           └───────────────┘\n│                         │\n│ DYNAMIC                 │ NOT DYNAMIC\n│                         │\n▼                         ▼\n┌───────────────┐  ┌───────────────┐\n│ Report        │  │ Migrate to    │\n│ warning       │  │ Tag           │\n│ (manual       │  │ - appearance  │\n│  review)      │  │   → color     │\n│               │  │ - Map values: │\n│               │  │   success →   │\n│               │  │   lime        │\n│               │  │   default →   │\n│               │  │   standard    │\n│               │  │   removed →   │\n│               │  │   red         │\n│               │  │   inprogress  │\n│               │  │   → blue      │\n│               │  │   new →       │\n│               │  │   purple      │\n│               │  │   moved →     │\n│               │  │   yellow      │\n│               │  │ - Remove      │\n│               │  │   isBold      │\n│               │  │ - Add         │\n│               │  │   isRemov     │\n│               │  │   able=       │\n│               │  │   {false}     │\n└───────────────┘  └───────────────┘\n```\n\n## Appearance Prop Handling\n\n### Lozenge → Tag Migration\n\nWhen migrating `<Lozenge>` to `<Tag>`, the `appearance` prop is converted to `color` prop with value\nmapping.\n\n### Lozenge Appearance → Tag Color Mapping\n\nWhen migrating Lozenge to Tag, appearance values are mapped to color values:\n\n| Lozenge Appearance | Tag Color  |\n| ------------------ | ---------- |\n| `success`          | `lime`     |\n| `default`          | `standard` |\n| `removed`          | `red`      |\n| `inprogress`       | `blue`     |\n| `new`              | `purple`   |\n| `moved`            | `yellow`   |\n\n**Note**: Dynamic appearance values in Lozenge components require manual review before migration.\n\n### Badge Appearance Value Mapping\n\nBadge components use the following appearance value mapping:\n\n| Old Appearance    | New Appearance |\n| ----------------- | -------------- |\n| `added`           | `success`      |\n| `removed`         | `danger`       |\n| `default`         | `neutral`      |\n| `primary`         | `information`  |\n| `primaryInverted` | `inverse`      |\n| `important`       | `danger`       |\n\n### Tag Color Mapping\n\nSimpleTag and RemovableTag color props are mapped to new semantic color values when migrating to\nTag:\n\n| Old Color      | New Color |\n| -------------- | --------- |\n| `limeLight`    | `lime`    |\n| `orangeLight`  | `orange`  |\n| `magentaLight` | `magenta` |\n| `greenLight`   | `green`   |\n| `blueLight`    | `blue`    |\n| `redLight`     | `red`     |\n| `purpleLight`  | `purple`  |\n| `greyLight`    | `gray`    |\n| `tealLight`    | `teal`    |\n| `yellowLight`  | `yellow`  |\n| `grey`         | `gray`    |\n\n## Auto-fixes\n\n- ✅ `isBold={false}` and missing `isBold` migration to `<Tag>` with preserved `appearance` prop\n- ✅ Static Badge appearance prop values (e.g., `appearance="added"` → `appearance="success"`)\n- ✅ SimpleTag/RemovableTag migration to `<Tag>` with color mapping and import updates\n- ✅ SimpleTag/RemovableTag from subpaths (e.g., `@atlaskit/tag/simple-tag`) migration to main\n  module\n- ✅ SimpleTag/RemovableTag with Avatar migration to `<AvatarTag>` with render props pattern\n- ✅ Static Tag color prop mapping (e.g., `color="blueLight"` → `color="blue"`)\n- ✅ SimpleTag `isRemovable={false}` prop addition when migrating to Tag\n- ✅ Subpath import conversion to main `@atlaskit/tag` module\n- ❌ Dynamic `isBold` expressions (warning only)\n- ❌ Dynamic Badge appearance expressions (warning only - requires manual review)\n',
+  content: '{"ruleName":"lozenge-badge-tag-labelling-system-migration","description":"This rule helps migrate deprecated `<Lozenge>` usages to the new API or `<Tag>` component, migrate","content":"# lozenge-badge-tag-labelling-system-migration\\n\\nThis rule helps migrate deprecated `<Lozenge>` usages to the new API or `<Tag>` component, migrate\\n`<Badge>` component appearance prop to new semantic values, and migrate `<SimpleTag>` and\\n`<RemovableTag>` components to the new `<Tag>` or `<avatarTag>` components as part of the Labelling\\nSystem Phase 1 migration.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\n// Non-bold Lozenge variants should migrate to Tag\\n<Lozenge isBold={false} />\\n<Lozenge /> // no isBold means implicit false\\n\\n// Dynamic isBold expressions require manual review\\n<Lozenge isBold={someVariable} />\\n<Lozenge isBold={condition ? true : false} />\\n\\n// Badge: Old appearance values that need migration\\n<Badge appearance=\\"added\\">{5}</Badge>\\n<Badge appearance=\\"removed\\">{10}</Badge>\\n<Badge appearance=\\"default\\">{3}</Badge>\\n<Badge appearance=\\"primary\\">{7}</Badge>\\n<Badge appearance=\\"primaryInverted\\">{2}</Badge>\\n<Badge appearance=\\"important\\">{99}</Badge>\\n\\n// Badge: Dynamic appearance expressions require manual review\\n<Badge appearance={getStatus()}>{count}</Badge>\\n<Badge appearance={condition ? \'added\' : \'removed\'}>{num}</Badge>\\n\\n// SimpleTag/RemovableTag: Old tag components that need migration\\n<SimpleTag>Hello</SimpleTag>\\n<SimpleTag color=\\"blueLight\\">Hello</SimpleTag>\\n<SimpleTag elemBefore={<Avatar src=\\"x\\" />}>Hello</SimpleTag>\\n<RemovableTag color=\\"redLight\\">Hello</RemovableTag>\\n<RemovableTag elemBefore={<Avatar />}>Hello</RemovableTag>\\n\\n// SimpleTag/RemovableTag from subpaths: Also need migration\\nimport SimpleTag from \'@atlaskit/tag/simple-tag\';\\n<SimpleTag color=\\"blueLight\\">Hello</SimpleTag>\\n\\nimport RemovableTag from \'@atlaskit/tag/removable-tag\';\\n<RemovableTag color=\\"redLight\\">Hello</RemovableTag>\\n```\\n\\n### Correct\\n\\n```tsx\\n// Non-bold variants should use Tag component with migration_fallback for safe rollout\\n// migration_fallback=\\"lozenge\\" renders as Lozenge when feature flag is off\\n<Tag text=\\"Label\\" color=\\"lime\\" isRemovable={false} migration_fallback=\\"lozenge\\" />\\n<Tag text=\\"Status\\" color=\\"gray\\" isRemovable={false} migration_fallback=\\"lozenge\\" />\\n\\n// Bold Lozenge variants can stay as Lozenge\\n<Lozenge isBold />\\n<Lozenge isBold={true} />\\n<Lozenge appearance=\\"success\\" isBold />\\n\\n// Badge: New semantic appearance values\\n<Badge appearance=\\"success\\">{5}</Badge>\\n<Badge appearance=\\"danger\\">{10}</Badge>\\n<Badge appearance=\\"neutral\\">{3}</Badge>\\n<Badge appearance=\\"information\\">{7}</Badge>\\n<Badge appearance=\\"inverse\\">{2}</Badge>\\n<Badge appearance=\\"danger\\">{99}</Badge>\\n\\n// Badge: Already using semantic values\\n<Badge appearance=\\"success\\">{42}</Badge>\\n\\n// SimpleTag/RemovableTag: Migrate to Tag component\\nimport Tag from \'@atlaskit/tag\';\\n<Tag>Hello</Tag>\\n<Tag color=\\"blue\\" isRemovable={false}>Hello</Tag>\\n\\n// SimpleTag/RemovableTag: Migrate to AvatarTag with render props\\nimport { AvatarTag } from \'@atlaskit/tag\';\\nimport Avatar from \'@atlaskit/avatar\';\\n<AvatarTag avatar={(props) => <Avatar {...props} src=\\"x\\" />}>Hello</AvatarTag>\\n\\n// SimpleTag/RemovableTag from subpaths: Also migrate to main module\\nimport Tag from \'@atlaskit/tag\';\\nimport Avatar from \'@atlaskit/avatar\';\\n<Tag color=\\"blue\\" isRemovable={false}>Hello</Tag>\\n<AvatarTag avatar={(props) => <Avatar {...props} />}>Hello</AvatarTag>\\n```\\n\\n## Rule Details\\n\\nThis rule enforces multiple migration patterns:\\n\\n1. **Migrate `isBold={false}` or missing `isBold` → `<Tag />`**: Detects non-bold Lozenge variants\\n   and suggests migrating to the Tag component, preserving other props including the `appearance`\\n   prop with its value.\\n\\n2. **Warn on dynamic `isBold` expressions**: Detects dynamic `isBold` props that cannot be safely\\n   auto-fixed and require manual review.\\n\\n3. **Migrate Badge appearance values**: Detects Badge components using old appearance values and\\n   migrates them to new semantic values.\\n\\n4. **Warn on dynamic Badge appearance expressions**: Detects dynamic `appearance` props on Badge\\n   components that cannot be safely auto-fixed and require manual review.\\n\\n5. **Migrate SimpleTag/RemovableTag to Tag**: Detects SimpleTag and RemovableTag components (from\\n   named imports or subpaths) and migrates them to the new Tag component, updating imports and\\n   handling color prop mapping.\\n\\n6. **Migrate SimpleTag/RemovableTag with Avatar to AvatarTag**: Detects SimpleTag and RemovableTag\\n   components that use an Avatar component in the `elemBefore` prop and migrates them to the new\\n   `AvatarTag` component with render props pattern: `avatar={(props) => <Avatar {...props} />}`.\\n   Removes `appearance` and `color` props from AvatarTag migrations.\\n\\n7. **Handle subpath imports**: Detects default imports from `@atlaskit/tag/simple-tag` and\\n   `@atlaskit/tag/removable-tag` and migrates them to the main `@atlaskit/tag` module with the\\n   appropriate component (Tag or AvatarTag).\\n\\n8. **Handle default Tag imports**: Detects default imports from `@atlaskit/tag` (old RemovableTag)\\n   and checks if they need migration. If nothing needs migration, treats them as the new Tag\\n   component.\\n\\n## Flowcharts\\n\\n### Tag Migration Flowchart (SimpleTag/RemovableTag/Tag)\\n\\n```\\n┌─────────────────────────────────────────────────────────────┐\\n│         Tag Migration (SimpleTag/RemovableTag/Tag)          │\\n└─────────────────────────────────────────────────────────────┘\\n                            │\\n                            ▼\\n                    ┌───────────────┐\\n                    │  Is default   │\\n                    │  Tag import   │\\n                    │  from         │\\n                    │  @atlaskit/   │\\n                    │  tag?         │\\n                    └───────┬───────┘\\n                            │\\n                ┌───────────┴───┐\\n                │               │\\n            YES │               │ NO\\n                │               │\\n                ▼               │\\n        ┌───────────────┐       │\\n        │ Check if      │       │\\n        │ already new   │       │\\n        │ Tag (nothing  │       │\\n        │ to migrate)   │       │\\n        └───────┬───────┘       │\\n                │               │\\n        ┌───────┴───────┐       │\\n        │               │       │\\n    YES │               │ NO    │\\n        │               │       │\\n        ▼               ▼       ▼\\n┌───────────────┐ ┌───────────────┐\\n│   SKIP        │ │  Check        │\\n│  (Already     │ │  elemBefore   │\\n│   migrated)   │ │  for Avatar   │\\n└───────────────┘ └───────┬───────┘\\n                          │\\n                  ┌───────┴───────┐\\n                  │               │\\n              YES │               │ NO\\n                  │               │\\n                  ▼               ▼\\n          ┌───────────────┐ ┌───────────────┐\\n          │ Migrate to    │ │ Migrate to    │\\n          │ AvatarTag     │ │ Tag           │\\n          │ - Convert     │ │ - Map colors  │\\n          │   elemBefore  │ │ - Add         │\\n          │   to avatar   │ │   isRemovable │\\n          │   render prop │ │   ={false}    │\\n          │ - Remove      │ │   (if         │\\n          │   appearance/ │ │   SimpleTag)  │\\n          │   color       │ │ - Update      │\\n          │               │ │   imports     │\\n          └───────────────┘ └───────────────┘\\n```\\n\\n### Badge Migration Flowchart\\n\\n```\\n┌─────────────────────────────────────────────────────────────┐\\n│                    Badge Migration                          │\\n└─────────────────────────────────────────────────────────────┘\\n                            │\\n                            ▼\\n                    ┌───────────────┐\\n                    │  Has          │\\n                    │  appearance   │\\n                    │  prop?        │\\n                    └───────┬───────┘\\n                            │\\n                ┌───────────┴───────────┐\\n                │                       │\\n            YES │                       │ NO\\n                │                       │\\n                ▼                       ▼\\n        ┌───────────────┐      ┌───────────────┐\\n        │  Is dynamic?  │      │   SKIP        │\\n        │  (variable/   │      │  (no          │\\n        │   expression) │      │   migration   │\\n        └───────┬───────┘      │   needed)     │\\n                │              └───────────────┘\\n        ┌───────┴───────┐\\n        │               │\\n    YES │               │ NO\\n        │               │\\n        ▼               ▼\\n┌───────────────┐ ┌───────────────┐\\n│ Report        │ │ Map & fix     │\\n│ warning       │ │ appearance    │\\n│ (manual       │ │ value:        │\\n│  review)      │ │ - added →     │\\n│               │ │   success     │\\n│               │ │ - removed →   │\\n│               │ │   danger      │\\n│               │ │ - default →   │\\n│               │ │   neutral     │\\n│               │ │ - primary →   │\\n│               │ │   information │\\n│               │ │ - primaryIn   │\\n│               │ │   verted →    │\\n│               │ │   inverse     │\\n│               │ │ - important → │\\n│               │ │   danger      │\\n└───────────────┘ └───────────────┘\\n```\\n\\n### Lozenge Migration Flowchart\\n\\n```\\n┌─────────────────────────────────────────────────────────────┐\\n│                    Lozenge Migration                        │\\n└─────────────────────────────────────────────────────────────┘\\n                            │\\n                            ▼\\n                    ┌───────────────┐\\n                    │  Check isBold │\\n                    │  prop         │\\n                    └───────┬───────┘\\n                            │\\n        ┌───────────────────┼───────────────────┐\\n        │                   │                   │\\n        ▼                   ▼                   ▼\\n┌───────────────┐  ┌────────────────┐  ┌───────────────┐\\n│ isBold={false}│  │ No isBold prop │  │ isBold={true} │\\n│               │  │ (implicit      │  │ OR            │\\n│               │  │ false)         │  │ isBold        │\\n│               │  │                │  │ (implicit)    │\\n└───────┬───────┘  └───────┬────────┘  └───────┬───────┘\\n        │                  │                   │\\n        │                  │                   │\\n        ▼                  ▼                   ▼\\n┌────────────────────────────┐        ┌───────────────┐\\n│ Check if                   │        │ Stay as       │\\n│ appearance is              │        │ Lozenge       │\\n│ dynamic                    |        │ - Update      │\\n└───────┬────────────────────┘        │   appearance  │\\n        │                             │   if needed   │\\n┌───────┴─────────────────┐           └───────────────┘\\n│                         │\\n│ DYNAMIC                 │ NOT DYNAMIC\\n│                         │\\n▼                         ▼\\n┌───────────────┐  ┌───────────────┐\\n│ Report        │  │ Migrate to    │\\n│ warning       │  │ Tag           │\\n│ (manual       │  │ - appearance  │\\n│  review)      │  │   → color     │\\n│               │  │ - Map values: │\\n│               │  │   success →   │\\n│               │  │   lime        │\\n│               │  │   default →   │\\n│               │  │   gray        │\\n│               │  │   removed →   │\\n│               │  │   red         │\\n│               │  │   inprogress  │\\n│               │  │   → blue      │\\n│               │  │   new →       │\\n│               │  │   purple      │\\n│               │  │   moved →     │\\n│               │  │   yellow      │\\n│               │  │ - Remove      │\\n│               │  │   isBold      │\\n│               │  │ - Add         │\\n│               │  │   isRemov     │\\n│               │  │   able=       │\\n│               │  │   {false}     │\\n│               │  │ - Add         │\\n│               │  │   migration_  │\\n│               │  │   fallback=   │\\n│               │  │   \\"lozenge\\"   │\\n└───────────────┘  └───────────────┘\\n```\\n\\n## Appearance Prop Handling\\n\\n### Lozenge → Tag Migration\\n\\nWhen migrating `<Lozenge>` to `<Tag>`, the `appearance` prop is converted to `color` prop with value\\nmapping.\\n\\n### Lozenge Appearance → Tag Color Mapping\\n\\nWhen migrating Lozenge to Tag, appearance values are mapped to color values:\\n\\n| Lozenge Appearance | Tag Color |\\n| ------------------ | --------- |\\n| `success`          | `lime`    |\\n| `default`          | `gray`    |\\n| `removed`          | `red`     |\\n| `inprogress`       | `blue`    |\\n| `new`              | `purple`  |\\n| `moved`            | `yellow`  |\\n\\n**Note**: Dynamic appearance values in Lozenge components require manual review before migration.\\n\\n### Migration Fallback Prop\\n\\nFor safe, staged rollout when migrating from Lozenge to Tag, use the `migration_fallback=\\"lozenge\\"`\\nprop:\\n\\n```tsx\\n// Before (Lozenge)\\n<Lozenge appearance=\\"success\\">{data.label}</Lozenge>\\n\\n// After (Tag with migration_fallback for safe rollout)\\n<Tag\\n  text={data.label}\\n  color=\\"lime\\"\\n  isRemovable={false}\\n  migration_fallback=\\"lozenge\\"\\n/>\\n```\\n\\nWhen `migration_fallback=\\"lozenge\\"` is set and the feature flag\\n`platform-dst-lozenge-tag-badge-visual-uplifts` is **OFF**, the Tag component renders as a Lozenge\\nwith `isBold={false}`. When the feature flag is **ON**, it renders as the new Tag component.\\n\\nThis prop is:\\n\\n- **Temporary**: Should be cleaned up via codemod after migration is complete\\n- **Internal**: Intended for staged rollout to support large consumers (like Jira)\\n- **Safe**: Prevents visual regressions during migration\\n\\nThe `migration_fallback` prop will be automatically added by the ESLint auto-fix when migrating from\\nLozenge to Tag.\\n\\n### Badge Appearance Value Mapping\\n\\nBadge components use the following appearance value mapping:\\n\\n| Old Appearance    | New Appearance |\\n| ----------------- | -------------- |\\n| `added`           | `success`      |\\n| `removed`         | `danger`       |\\n| `default`         | `neutral`      |\\n| `primary`         | `information`  |\\n| `primaryInverted` | `inverse`      |\\n| `important`       | `danger`       |\\n\\n### Tag Color Mapping\\n\\nSimpleTag and RemovableTag color props are mapped to new semantic color values when migrating to\\nTag:\\n\\n| Old Color      | New Color |\\n| -------------- | --------- |\\n| `limeLight`    | `lime`    |\\n| `orangeLight`  | `orange`  |\\n| `magentaLight` | `magenta` |\\n| `greenLight`   | `green`   |\\n| `blueLight`    | `blue`    |\\n| `redLight`     | `red`     |\\n| `purpleLight`  | `purple`  |\\n| `greyLight`    | `gray`    |\\n| `tealLight`    | `teal`    |\\n| `yellowLight`  | `yellow`  |\\n| `grey`         | `gray`    |\\n\\n## Auto-fixes\\n\\n- ✅ `isBold={false}` and missing `isBold` migration to `<Tag>` with `migration_fallback=\\"lozenge\\"`\\n  for safe rollout\\n- ✅ Static Badge appearance prop values (e.g., `appearance=\\"added\\"` → `appearance=\\"success\\"`)\\n- ✅ SimpleTag/RemovableTag migration to `<Tag>` with color mapping and import updates\\n- ✅ SimpleTag/RemovableTag from subpaths (e.g., `@atlaskit/tag/simple-tag`) migration to main\\n  module\\n- ✅ SimpleTag/RemovableTag with Avatar migration to `<AvatarTag>` with render props pattern\\n- ✅ Static Tag color prop mapping (e.g., `color=\\"blueLight\\"` → `color=\\"blue\\"`)\\n- ✅ SimpleTag `isRemovable={false}` prop addition when migrating to Tag\\n- ✅ Subpath import conversion to main `@atlaskit/tag` module\\n- ✅ Lozenge to Tag migration adds `migration_fallback=\\"lozenge\\"` for safe staged rollout\\n- ❌ Dynamic `isBold` expressions (warning only)\\n- ❌ Dynamic Badge appearance expressions (warning only - requires manual review)\\n"}',
   ruleName: 'lozenge-badge-tag-labelling-system-migration',
   description: 'This rule helps migrate deprecated `<Lozenge>` usages to the new API or `<Tag>` component, migrate'
 }, {
-  content: '# lozenge-isBold-and-lozenge-badge-appearance-migration\n\nThis rule helps migrate deprecated `<Lozenge>` usages to the new API or `<Tag>` component, and\nmigrate `<Badge>` component appearance prop to new semantic values as part of the Labelling System\nPhase 1 migration.\n\n## Examples\n\n### Incorrect\n\n```tsx\n// Non-bold Lozenge variants should migrate to Tag\n<Lozenge isBold={false} />\n<Lozenge /> // no isBold means implicit false\n\n// Dynamic isBold expressions require manual review\n<Lozenge isBold={someVariable} />\n<Lozenge isBold={condition ? true : false} />\n\n// Badge: Old appearance values that need migration\n<Badge appearance="added">{5}</Badge>\n<Badge appearance="removed">{10}</Badge>\n<Badge appearance="default">{3}</Badge>\n<Badge appearance="primary">{7}</Badge>\n<Badge appearance="primaryInverted">{2}</Badge>\n<Badge appearance="important">{99}</Badge>\n\n// Badge: Dynamic appearance expressions require manual review\n<Badge appearance={getStatus()}>{count}</Badge>\n<Badge appearance={condition ? \'added\' : \'removed\'}>{num}</Badge>\n```\n\n### Correct\n\n```tsx\n// Non-bold variants should use Tag component with appearance prop\n<Tag appearance="success" />\n<Tag appearance="default" />\n\n// Bold Lozenge variants can stay as Lozenge\n<Lozenge isBold />\n<Lozenge isBold={true} />\n<Lozenge appearance="success" isBold />\n\n// Badge: New semantic appearance values\n<Badge appearance="success">{5}</Badge>\n<Badge appearance="danger">{10}</Badge>\n<Badge appearance="neutral">{3}</Badge>\n<Badge appearance="information">{7}</Badge>\n<Badge appearance="inverse">{2}</Badge>\n<Badge appearance="danger">{99}</Badge>\n\n// Badge: Already using semantic values\n<Badge appearance="success">{42}</Badge>\n```\n\n## Rule Details\n\nThis rule enforces multiple migration patterns:\n\n1. **Migrate `isBold={false}` or missing `isBold` → `<Tag />`**: Detects non-bold Lozenge variants\n   and suggests migrating to the Tag component, preserving other props including the `appearance`\n   prop with its value.\n\n2. **Warn on dynamic `isBold` expressions**: Detects dynamic `isBold` props that cannot be safely\n   auto-fixed and require manual review.\n\n3. **Migrate Badge appearance values**: Detects Badge components using old appearance values and\n   migrates them to new semantic values.\n\n4. **Warn on dynamic Badge appearance expressions**: Detects dynamic `appearance` props on Badge\n   components that cannot be safely auto-fixed and require manual review.\n\n## Appearance Prop Handling\n\n### Lozenge and Tag\n\nBoth `<Lozenge>` and `<Tag>` now use the `appearance` prop with new semantic values. The rule will\nautomatically map old appearance values to the new semantic values when they differ.\n\n### Appearance Value Mapping\n\nThe rule includes a mapping function that will update old appearance values to new semantic values:\n\n```tsx\n// Example mappings (to be updated with actual semantic values)\n\'success\' → \'success\'      // or new semantic equivalent\n\'default\' → \'default\'      // or new semantic equivalent\n\'removed\' → \'removed\'      // or new semantic equivalent\n\'inprogress\' → \'inprogress\' // or new semantic equivalent\n\'new\' → \'new\'             // or new semantic equivalent\n\'moved\' → \'moved\'         // or new semantic equivalent\n```\n\n**Note**: The current implementation preserves existing values. The mapping will be updated once the\nnew semantic values are finalized.\n\n### Badge Appearance Value Mapping\n\nBadge components use the following appearance value mapping:\n\n| Old Appearance    | New Appearance |\n| ----------------- | -------------- |\n| `added`           | `success`      |\n| `removed`         | `danger`       |\n| `default`         | `neutral`      |\n| `primary`         | `information`  |\n| `primaryInverted` | `inverse`      |\n| `important`       | `danger`       |\n\n## Auto-fixes\n\n- ✅ `isBold={false}` and missing `isBold` migration to `<Tag>` with preserved `appearance` prop\n- ✅ Static Badge appearance prop values (e.g., `appearance="added"` → `appearance="success"`)\n- ❌ Dynamic `isBold` expressions (warning only)\n- ❌ Dynamic Badge appearance expressions (warning only - requires manual review)\n',
+  content: '{"ruleName":"lozenge-isBold-and-lozenge-badge-appearance-migration","description":"This rule helps migrate deprecated `<Lozenge>` usages to the new API or `<Tag>` component, and","content":"# lozenge-isBold-and-lozenge-badge-appearance-migration\\n\\nThis rule helps migrate deprecated `<Lozenge>` usages to the new API or `<Tag>` component, and\\nmigrate `<Badge>` component appearance prop to new semantic values as part of the Labelling System\\nPhase 1 migration.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\n// Non-bold Lozenge variants should migrate to Tag\\n<Lozenge isBold={false} />\\n<Lozenge /> // no isBold means implicit false\\n\\n// Dynamic isBold expressions require manual review\\n<Lozenge isBold={someVariable} />\\n<Lozenge isBold={condition ? true : false} />\\n\\n// Badge: Old appearance values that need migration\\n<Badge appearance=\\"added\\">{5}</Badge>\\n<Badge appearance=\\"removed\\">{10}</Badge>\\n<Badge appearance=\\"default\\">{3}</Badge>\\n<Badge appearance=\\"primary\\">{7}</Badge>\\n<Badge appearance=\\"primaryInverted\\">{2}</Badge>\\n<Badge appearance=\\"important\\">{99}</Badge>\\n\\n// Badge: Dynamic appearance expressions require manual review\\n<Badge appearance={getStatus()}>{count}</Badge>\\n<Badge appearance={condition ? \'added\' : \'removed\'}>{num}</Badge>\\n```\\n\\n### Correct\\n\\n```tsx\\n// Non-bold variants should use Tag component with appearance prop\\n<Tag appearance=\\"success\\" />\\n<Tag appearance=\\"default\\" />\\n\\n// Bold Lozenge variants can stay as Lozenge\\n<Lozenge isBold />\\n<Lozenge isBold={true} />\\n<Lozenge appearance=\\"success\\" isBold />\\n\\n// Badge: New semantic appearance values\\n<Badge appearance=\\"success\\">{5}</Badge>\\n<Badge appearance=\\"danger\\">{10}</Badge>\\n<Badge appearance=\\"neutral\\">{3}</Badge>\\n<Badge appearance=\\"information\\">{7}</Badge>\\n<Badge appearance=\\"inverse\\">{2}</Badge>\\n<Badge appearance=\\"danger\\">{99}</Badge>\\n\\n// Badge: Already using semantic values\\n<Badge appearance=\\"success\\">{42}</Badge>\\n```\\n\\n## Rule Details\\n\\nThis rule enforces multiple migration patterns:\\n\\n1. **Migrate `isBold={false}` or missing `isBold` → `<Tag />`**: Detects non-bold Lozenge variants\\n   and suggests migrating to the Tag component, preserving other props including the `appearance`\\n   prop with its value.\\n\\n2. **Warn on dynamic `isBold` expressions**: Detects dynamic `isBold` props that cannot be safely\\n   auto-fixed and require manual review.\\n\\n3. **Migrate Badge appearance values**: Detects Badge components using old appearance values and\\n   migrates them to new semantic values.\\n\\n4. **Warn on dynamic Badge appearance expressions**: Detects dynamic `appearance` props on Badge\\n   components that cannot be safely auto-fixed and require manual review.\\n\\n## Appearance Prop Handling\\n\\n### Lozenge and Tag\\n\\nBoth `<Lozenge>` and `<Tag>` now use the `appearance` prop with new semantic values. The rule will\\nautomatically map old appearance values to the new semantic values when they differ.\\n\\n### Appearance Value Mapping\\n\\nThe rule includes a mapping function that will update old appearance values to new semantic values:\\n\\n```tsx\\n// Example mappings (to be updated with actual semantic values)\\n\'success\' → \'success\'      // or new semantic equivalent\\n\'default\' → \'default\'      // or new semantic equivalent\\n\'removed\' → \'removed\'      // or new semantic equivalent\\n\'inprogress\' → \'inprogress\' // or new semantic equivalent\\n\'new\' → \'new\'             // or new semantic equivalent\\n\'moved\' → \'moved\'         // or new semantic equivalent\\n```\\n\\n**Note**: The current implementation preserves existing values. The mapping will be updated once the\\nnew semantic values are finalized.\\n\\n### Badge Appearance Value Mapping\\n\\nBadge components use the following appearance value mapping:\\n\\n| Old Appearance    | New Appearance |\\n| ----------------- | -------------- |\\n| `added`           | `success`      |\\n| `removed`         | `danger`       |\\n| `default`         | `neutral`      |\\n| `primary`         | `information`  |\\n| `primaryInverted` | `inverse`      |\\n| `important`       | `danger`       |\\n\\n## Auto-fixes\\n\\n- ✅ `isBold={false}` and missing `isBold` migration to `<Tag>` with preserved `appearance` prop\\n- ✅ Static Badge appearance prop values (e.g., `appearance=\\"added\\"` → `appearance=\\"success\\"`)\\n- ❌ Dynamic `isBold` expressions (warning only)\\n- ❌ Dynamic Badge appearance expressions (warning only - requires manual review)\\n"}',
   ruleName: 'lozenge-isBold-and-lozenge-badge-appearance-migration',
   description: 'This rule helps migrate deprecated `<Lozenge>` usages to the new API or `<Tag>` component, and'
 }, {
-  content: "# no-banned-imports\n\nUsing private or experimental packages is dangerous as they are not supported across major versions\nmeaning you will not be able to migrate easily causing friction for yourself and the Atlassian\nDesign System team.\n\n## Examples\n\nAnything that is considered private or experimental will be marked as violations.\n\n### Incorrect\n\n```ts\nimport noop from '@atlaskit/ds-lib/noop';\n                  ^^^^^^^^^^^^^^^^^^^^^\n\nimport { Text } from '@atlaskit/ds-explorations';\n                      ^^^^^^^^^^^^^^^^^^^^^^^^^\n```\n",
+  content: '{"ruleName":"no-banned-imports","description":"Using private or experimental packages is dangerous as they are not supported across major versions","content":"# no-banned-imports\\n\\nUsing private or experimental packages is dangerous as they are not supported across major versions\\nmeaning you will not be able to migrate easily causing friction for yourself and the Atlassian\\nDesign System team.\\n\\n## Examples\\n\\nAnything that is considered private or experimental will be marked as violations.\\n\\n### Incorrect\\n\\n```ts\\nimport noop from \'@atlaskit/ds-lib/noop\';\\n                  ^^^^^^^^^^^^^^^^^^^^^\\n\\nimport { Text } from \'@atlaskit/ds-explorations\';\\n                      ^^^^^^^^^^^^^^^^^^^^^^^^^\\n```\\n"}',
   ruleName: 'no-banned-imports',
   description: 'Using private or experimental packages is dangerous as they are not supported across major versions'
 }, {
-  content: "# no-boolean-autofocus-on-modal-dialog\n\nThe modal dialog should only have `ref`'s in the `autoFocus` prop. The default value is `true`,\nwhich is the most accessible base case. Using `false` results in accessibility issues and should be\navoided.\n\n## Examples\n\nThis rule will warn makers if the `autoFocus` prop is set using a boolean.\n\n### Incorrect\n\n```tsx\n<ModalDialog autoFocus={true}>\n ^^^^^^^^^^^ `autoFocus` should be set to a component's `ref` or left to resolve to the default value of `true`. It is recommended to leave it as is for a maximally accessible experience.\n\t<ModalHeader hasCloseButton>\n\t\t<ModalTitle>Modal Title</ModalTitle>\n\t</ModalHeader>\n</ModalDialog>\n\n<ModalDialog autoFocus={false}>\n ^^^^^^^^^^^ `autoFocus` should be set to a component's `ref` or left to resolve to the default value of `true`. It is recommended to leave it as is for a maximally accessible experience.\n\t<ModalHeader hasCloseButton>\n\t\t<ModalTitle>Modal Title</ModalTitle>\n\t</ModalHeader>\n</ModalDialog>\n```\n\n### Correct\n\n```tsx\n<ModalDialog>\n\t<ModalHeader hasCloseButton>\n\t\t<ModalTitle>Modal Title</ModalTitle>\n\t</ModalHeader>\n</ModalDialog>\n```\n\n```tsx\nconst ref = useRef<HTMLElement>(null);\n\n<ModalDialog autoFocus={ref}>\n\t<ModalHeader hasCloseButton>\n\t\t<ModalTitle>Modal Title</ModalTitle>\n\t</ModalHeader>\n\t<ModalBody>\n\t\t<p tabindex={-1} ref={ref}>\n\t\t\tThis is the content.\n\t\t</p>\n\t</ModalBody>\n</ModalDialog>;\n```\n",
+  content: '{"ruleName":"no-boolean-autofocus-on-modal-dialog","description":"The modal dialog should only have `ref`\'s in the `autoFocus` prop. The default value is `true`,","content":"# no-boolean-autofocus-on-modal-dialog\\n\\nThe modal dialog should only have `ref`\'s in the `autoFocus` prop. The default value is `true`,\\nwhich is the most accessible base case. Using `false` results in accessibility issues and should be\\navoided.\\n\\n## Examples\\n\\nThis rule will warn makers if the `autoFocus` prop is set using a boolean.\\n\\n### Incorrect\\n\\n```tsx\\n<ModalDialog autoFocus={true}>\\n ^^^^^^^^^^^ `autoFocus` should be set to a component\'s `ref` or left to resolve to the default value of `true`. It is recommended to leave it as is for a maximally accessible experience.\\n\\t<ModalHeader hasCloseButton>\\n\\t\\t<ModalTitle>Modal Title</ModalTitle>\\n\\t</ModalHeader>\\n</ModalDialog>\\n\\n<ModalDialog autoFocus={false}>\\n ^^^^^^^^^^^ `autoFocus` should be set to a component\'s `ref` or left to resolve to the default value of `true`. It is recommended to leave it as is for a maximally accessible experience.\\n\\t<ModalHeader hasCloseButton>\\n\\t\\t<ModalTitle>Modal Title</ModalTitle>\\n\\t</ModalHeader>\\n</ModalDialog>\\n```\\n\\n### Correct\\n\\n```tsx\\n<ModalDialog>\\n\\t<ModalHeader hasCloseButton>\\n\\t\\t<ModalTitle>Modal Title</ModalTitle>\\n\\t</ModalHeader>\\n</ModalDialog>\\n```\\n\\n```tsx\\nconst ref = useRef<HTMLElement>(null);\\n\\n<ModalDialog autoFocus={ref}>\\n\\t<ModalHeader hasCloseButton>\\n\\t\\t<ModalTitle>Modal Title</ModalTitle>\\n\\t</ModalHeader>\\n\\t<ModalBody>\\n\\t\\t<p tabindex={-1} ref={ref}>\\n\\t\\t\\tThis is the content.\\n\\t\\t</p>\\n\\t</ModalBody>\\n</ModalDialog>;\\n```\\n"}',
   ruleName: 'no-boolean-autofocus-on-modal-dialog',
   description: "The modal dialog should only have `ref`'s in the `autoFocus` prop. The default value is `true`,"
 }, {
-  content: "# no-css-tagged-template-expression\n\nDisallows any `css` tagged template expressions that originate from a CSS-in-JS library, including\n`@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.\n\nTagged template expressions cannot be type safe and are difficult to parse correctly. Will auto fix\n` css`` ` to the preferred `css({})` call expression syntax.\n\nThank you to the\n[Compiled team for their rule](https://github.com/atlassian-labs/compiled/tree/master/packages/eslint-plugin/src/rules/no-css-tagged-template-expression)\nfrom which this was ported.\n\n## Examples\n\n### Incorrect\n\n```js\nimport { css } from '@emotion/react';\n\ncss`\n\tcolor: blue;\n`;\n\nconst styles = css`\n\tcolor: blue;\n\tfont-weight: 500;\n`;\n```\n\n### Correct\n\n```js\nimport { css } from '@emotion/react';\n\ncss({ color: 'blue' });\n\nconst styles = css({\n\tcolor: 'blue',\n\tfontWeight: 500,\n});\n```\n\n## Options\n\n### importSources\n\nBy default, this rule will check `css` 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 { css } from 'other-lib';\n\n// Invalid!\nexport const styles = css``;\n```\n\n## Limitations\n\n- Comments are not auto-fixable. You will need to manually convert usages containing functions.\n",
+  content: '{"ruleName":"no-css-tagged-template-expression","description":"Disallows any `css` tagged template expressions that originate from a CSS-in-JS library, including","content":"# no-css-tagged-template-expression\\n\\nDisallows any `css` tagged template expressions that originate from a CSS-in-JS library, including\\n`@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.\\n\\nTagged template expressions cannot be type safe and are difficult to parse correctly. Will auto fix\\n` css`` ` to the preferred `css({})` call expression syntax.\\n\\nThank you to the\\n[Compiled team for their rule](https://github.com/atlassian-labs/compiled/tree/master/packages/eslint-plugin/src/rules/no-css-tagged-template-expression)\\nfrom which this was ported.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```js\\nimport { css } from \'@emotion/react\';\\n\\ncss`\\n\\tcolor: blue;\\n`;\\n\\nconst styles = css`\\n\\tcolor: blue;\\n\\tfont-weight: 500;\\n`;\\n```\\n\\n### Correct\\n\\n```js\\nimport { css } from \'@emotion/react\';\\n\\ncss({ color: \'blue\' });\\n\\nconst styles = css({\\n\\tcolor: \'blue\',\\n\\tfontWeight: 500,\\n});\\n```\\n\\n## Options\\n\\n### importSources\\n\\nBy default, this rule will check `css` 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 { css } from \'other-lib\';\\n\\n// Invalid!\\nexport const styles = css``;\\n```\\n\\n## Limitations\\n\\n- Comments are not auto-fixable. You will need to manually convert usages containing functions.\\n"}',
   ruleName: 'no-css-tagged-template-expression',
   description: 'Disallows any `css` tagged template expressions that originate from a CSS-in-JS library, including'
 }, {
-  content: '# no-custom-icons\n\nIcons are being updated with new designs, a simplified set of available icons and sizes, as well as\nmore consistent padding and spacing.\n\nThe new icon components allows your components to align with the new visual language - either by\ndefault, or when enabled via a feature flag.\n\nCustom icons are no longer supported, and should either be replaced with an existing icon from the\n`@atlaskit/icon` or `@atlaskit/icon-lab` packages, or contributed to those packages.\n\nDuring the migration process, any custom icons that are not third party logos should be moved into a\ncentral location to disable this error and allow the icon to be quickly replaced. What location to\ndisplay in the error can be configured via the `legacyIconPackages` option.\n\nThird party logos should use a standard `<svg>` element with a `label`.\n\n## Examples\n\nThis rule identifies usages of custom icons from `@atlaskit/icon` or `@atlaskit/icon/base`.\n\n### Incorrect\n\n```js\nimport Icon from \'@atlaskit/icon\';\n                 ^^^^^^^^^^^^^^^^^ custom icon import\n\n<Icon label="Activity" glyph="...">\n^^^^^^^^^^^^^^^^^^^^^^^ custom icon\n```\n\n### Correct\n\n```js\nimport AddIcon from \'@atlaskit/icon/core/add\';\n\n<AddIcon label="" />;\n```\n',
+  content: '{"ruleName":"no-custom-icons","description":"Icons are being updated with new designs, a simplified set of available icons and sizes, as well as","content":"# no-custom-icons\\n\\nIcons are being updated with new designs, a simplified set of available icons and sizes, as well as\\nmore consistent padding and spacing.\\n\\nThe new icon components allows your components to align with the new visual language - either by\\ndefault, or when enabled via a feature flag.\\n\\nCustom icons are no longer supported, and should either be replaced with an existing icon from the\\n`@atlaskit/icon` or `@atlaskit/icon-lab` packages, or contributed to those packages.\\n\\nDuring the migration process, any custom icons that are not third party logos should be moved into a\\ncentral location to disable this error and allow the icon to be quickly replaced. What location to\\ndisplay in the error can be configured via the `legacyIconPackages` option.\\n\\nThird party logos should use a standard `<svg>` element with a `label`.\\n\\n## Examples\\n\\nThis rule identifies usages of custom icons from `@atlaskit/icon` or `@atlaskit/icon/base`.\\n\\n### Incorrect\\n\\n```js\\nimport Icon from \'@atlaskit/icon\';\\n                 ^^^^^^^^^^^^^^^^^ custom icon import\\n\\n<Icon label=\\"Activity\\" glyph=\\"...\\">\\n^^^^^^^^^^^^^^^^^^^^^^^ custom icon\\n```\\n\\n### Correct\\n\\n```js\\nimport AddIcon from \'@atlaskit/icon/core/add\';\\n\\n<AddIcon label=\\"\\" />;\\n```\\n"}',
   ruleName: 'no-custom-icons',
   description: 'Icons are being updated with new designs, a simplified set of available icons and sizes, as well as'
 }, {
-  content: "# no-dark-theme-vr-tests\n\nDark theme VR tests are redundant. See\n[this RFC](https://hello.atlassian.net/wiki/spaces/DST/pages/4083370233/DSTRFC-022+-+Intent+to+remove+dark+VR+tests+from+AFM)\n\n### Incorrect\n\n```tsx\nimport { snapshot } from '@af/visual-regression';\n\nsnapshot(ComponentName, {\n\tvariants: [\n\t\t{\n\t\t\tname: 'Light',\n\t\t\tenvironment: {\n\t\t\t\tcolorScheme: 'light',\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tname: 'Dark',\n\t\t\tenvironment: {\n\t\t\t\tcolorScheme: 'dark',\n\t\t\t\t^^^^^^^^^^^^^^^^^^^^ invalid\n\t\t\t},\n\t\t},\n\t],\n});\n\n```\n\n### Correct\n\n```tsx\nimport { snapshot } from '@af/visual-regression';\n\nsnapshot(ComponentName, {\n\tvariants: [\n\t\t{\n\t\t\tname: 'Light',\n\t\t\tenvironment: {\n\t\t\t\tcolorScheme: 'light',\n\t\t\t},\n\t\t},\n\t],\n});\n```\n",
+  content: "{\"ruleName\":\"no-dark-theme-vr-tests\",\"description\":\"Dark theme VR tests are redundant. See\",\"content\":\"# no-dark-theme-vr-tests\\n\\nDark theme VR tests are redundant. See\\n[this RFC](https://hello.atlassian.net/wiki/spaces/DST/pages/4083370233/DSTRFC-022+-+Intent+to+remove+dark+VR+tests+from+AFM)\\n\\n### Incorrect\\n\\n```tsx\\nimport { snapshot } from '@af/visual-regression';\\n\\nsnapshot(ComponentName, {\\n\\tvariants: [\\n\\t\\t{\\n\\t\\t\\tname: 'Light',\\n\\t\\t\\tenvironment: {\\n\\t\\t\\t\\tcolorScheme: 'light',\\n\\t\\t\\t},\\n\\t\\t},\\n\\t\\t{\\n\\t\\t\\tname: 'Dark',\\n\\t\\t\\tenvironment: {\\n\\t\\t\\t\\tcolorScheme: 'dark',\\n\\t\\t\\t\\t^^^^^^^^^^^^^^^^^^^^ invalid\\n\\t\\t\\t},\\n\\t\\t},\\n\\t],\\n});\\n\\n```\\n\\n### Correct\\n\\n```tsx\\nimport { snapshot } from '@af/visual-regression';\\n\\nsnapshot(ComponentName, {\\n\\tvariants: [\\n\\t\\t{\\n\\t\\t\\tname: 'Light',\\n\\t\\t\\tenvironment: {\\n\\t\\t\\t\\tcolorScheme: 'light',\\n\\t\\t\\t},\\n\\t\\t},\\n\\t],\\n});\\n```\\n\"}",
   ruleName: 'no-dark-theme-vr-tests',
   description: 'Dark theme VR tests are redundant. See'
 }, {
-  content: "# no-deprecated-apis\n\nProps across the Atlassian Design System can be deprecated when they are deemed no-longer fit for\npurporse or dangerous and risk effective use at scale.\n\n## Examples\n\nAnything that can be used as props from Atlassian Design System components can be violations when\nmarked as deprecated.\n\n### Incorrect\n\n```tsx\n<ButtonItem cssFn={cssFn()} />\n            ^^^^\n\n<Drawer overrides={overrides} />\n        ^^^^^^^^^\n```\n\n## Options\n\nThe rule can take one option: `deprecatedConfig`, if not provided the rule will use an internal\nconfig. If provided the rule will use the passed in config instead.\n\n### deprecatedConfig\n\nThe following fields can be defined in the config:\n\n- `deprecatedProp`, which is the deprecated props. Each prop has the following fields:\n  - `moduleSpecifier`, which is the module specifier of the package in which the prop was\n    deprecated. For example: `@atlaskit/button`.\n  - `namedSpecifier` **(optional)**, which is an array of named specifiers of the package in which\n    the prop was deprecated. For example: `Button`.\n  - `actionableVersion` **(optional)**, which is the version of the package in which the prop can be\n    actioned on. For example: `1.0.0`.\n\n```json\n{\n\t\"cssFn\": [\n\t\t{\n\t\t\t\"moduleSpecifier\": \"@atlaskit/menu\"\n\t\t}\n\t]\n}\n```\n\n```js\nimport { configs } from '@atlaskit/eslint-plugin-design-system';\n\nmodule.exports = {\n\trules: {\n\t\t'@atlaskit/design-system/no-deprecated-api': [\n\t\t\t'error',\n\t\t\t{\n\t\t\t\tdeprecatedConfig: {\n\t\t\t\t\tcssFn: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tmoduleSpecifier: '@atlaskit/menu',\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t},\n};\n```\n\nThe plugin also provides a `filterActionableDeprecations` util function that accepts the\n`deprecated APIs config` and your root `package.json` as params and will filter the default\ndeprecated APIs config based on the package versions installed.\n\n```js\nimport { configs, filterActionableDeprecations } from '@atlaskit/eslint-plugin-design-system';\nimport packageJson from './package.json';\n\nrules: {\n  '@atlaskit/design-system/no-deprecated-api': ['error', {\n    'deprecatedConfig': filterActionableDeprecations(configs.deprecatedConfig, packageJson),\n  }]\n}\n```\n",
+  content: '{"ruleName":"no-deprecated-apis","description":"Props across the Atlassian Design System can be deprecated when they are deemed no-longer fit for","content":"# no-deprecated-apis\\n\\nProps across the Atlassian Design System can be deprecated when they are deemed no-longer fit for\\npurporse or dangerous and risk effective use at scale.\\n\\n## Examples\\n\\nAnything that can be used as props from Atlassian Design System components can be violations when\\nmarked as deprecated.\\n\\n### Incorrect\\n\\n```tsx\\n<ButtonItem cssFn={cssFn()} />\\n            ^^^^\\n\\n<Drawer overrides={overrides} />\\n        ^^^^^^^^^\\n```\\n\\n## Options\\n\\nThe rule can take one option: `deprecatedConfig`, if not provided the rule will use an internal\\nconfig. If provided the rule will use the passed in config instead.\\n\\n### deprecatedConfig\\n\\nThe following fields can be defined in the config:\\n\\n- `deprecatedProp`, which is the deprecated props. Each prop has the following fields:\\n  - `moduleSpecifier`, which is the module specifier of the package in which the prop was\\n    deprecated. For example: `@atlaskit/button`.\\n  - `namedSpecifier` **(optional)**, which is an array of named specifiers of the package in which\\n    the prop was deprecated. For example: `Button`.\\n  - `actionableVersion` **(optional)**, which is the version of the package in which the prop can be\\n    actioned on. For example: `1.0.0`.\\n\\n```json\\n{\\n\\t\\"cssFn\\": [\\n\\t\\t{\\n\\t\\t\\t\\"moduleSpecifier\\": \\"@atlaskit/menu\\"\\n\\t\\t}\\n\\t]\\n}\\n```\\n\\n```js\\nimport { configs } from \'@atlaskit/eslint-plugin-design-system\';\\n\\nmodule.exports = {\\n\\trules: {\\n\\t\\t\'@atlaskit/design-system/no-deprecated-api\': [\\n\\t\\t\\t\'error\',\\n\\t\\t\\t{\\n\\t\\t\\t\\tdeprecatedConfig: {\\n\\t\\t\\t\\t\\tcssFn: [\\n\\t\\t\\t\\t\\t\\t{\\n\\t\\t\\t\\t\\t\\t\\tmoduleSpecifier: \'@atlaskit/menu\',\\n\\t\\t\\t\\t\\t\\t},\\n\\t\\t\\t\\t\\t],\\n\\t\\t\\t\\t},\\n\\t\\t\\t},\\n\\t\\t],\\n\\t},\\n};\\n```\\n\\nThe plugin also provides a `filterActionableDeprecations` util function that accepts the\\n`deprecated APIs config` and your root `package.json` as params and will filter the default\\ndeprecated APIs config based on the package versions installed.\\n\\n```js\\nimport { configs, filterActionableDeprecations } from \'@atlaskit/eslint-plugin-design-system\';\\nimport packageJson from \'./package.json\';\\n\\nrules: {\\n  \'@atlaskit/design-system/no-deprecated-api\': [\'error\', {\\n    \'deprecatedConfig\': filterActionableDeprecations(configs.deprecatedConfig, packageJson),\\n  }]\\n}\\n```\\n"}',
   ruleName: 'no-deprecated-apis',
   description: 'Props across the Atlassian Design System can be deprecated when they are deemed no-longer fit for'
 }, {
-  content: "# no-deprecated-design-token-usage\n\nUsing deprecated design tokens is dangerous as they will eventually be deleted after the sunset\nperiod. This rule helps you move to non-deprecated design tokens.\n\n## Examples\n\nThis rule will mark usage of deprecated design tokens as violations.\n\n## Incorrect\n\n```js\nimport { token } from '@atlaskit/tokens';\n\ncss({ color: token('i.am.deprecated') });\n                    ^^^^^^^^^^^^^^^\ncss({ color: token('i.am.a.token') });\n                    ^^^^^^^^^^^^^\n```\n\n## Options\n\nIt's recommended to set this rule to \"warn\" to allow for new and old tokens to exist side-by-side\nfor the duration of the deprecation period and avoid big-bang migrations.\n\nOnce the deprecation period is over for a design token it will be moved into `deleted` state at\nwhich point the counterpart of this rule `no-unsafe-design-token-usage` will mark violations as\nerrors.\n\nRunning `eslint --fix` will automatically apply replacement tokens if present.\n",
+  content: '{"ruleName":"no-deprecated-design-token-usage","description":"Using deprecated design tokens is dangerous as they will eventually be deleted after the sunset","content":"# no-deprecated-design-token-usage\\n\\nUsing deprecated design tokens is dangerous as they will eventually be deleted after the sunset\\nperiod. This rule helps you move to non-deprecated design tokens.\\n\\n## Examples\\n\\nThis rule will mark usage of deprecated design tokens as violations.\\n\\n## Incorrect\\n\\n```js\\nimport { token } from \'@atlaskit/tokens\';\\n\\ncss({ color: token(\'i.am.deprecated\') });\\n                    ^^^^^^^^^^^^^^^\\ncss({ color: token(\'i.am.a.token\') });\\n                    ^^^^^^^^^^^^^\\n```\\n\\n## Options\\n\\nIt\'s recommended to set this rule to \\"warn\\" to allow for new and old tokens to exist side-by-side\\nfor the duration of the deprecation period and avoid big-bang migrations.\\n\\nOnce the deprecation period is over for a design token it will be moved into `deleted` state at\\nwhich point the counterpart of this rule `no-unsafe-design-token-usage` will mark violations as\\nerrors.\\n\\nRunning `eslint --fix` will automatically apply replacement tokens if present.\\n"}',
   ruleName: 'no-deprecated-design-token-usage',
   description: 'Using deprecated design tokens is dangerous as they will eventually be deleted after the sunset'
 }, {
-  content: "# no-deprecated-imports\n\nPackages across the Atlassian Design System can be deprecated when they are deemed no-longer fit for\npurporse or dangerous and risk effective use at scale.\n\n## Examples\n\nThis rule will mark usage of deprecated modules as violations.\n\n### Incorrect\n\n```ts\nimport Item from '@atlaskit/item';\n                  ^^^^^^^^^^^^^^\nimport GlobalNav from '@atlaskit/global-navigation';\n                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n```\n\n## Options\n\nThe rule can take one option: `deprecatedConfig`, if not provided the rule will use an internal\nconfig. If provided the rule will use the passed in config instead.\n\n### deprecatedConfig\n\nThe following fields can be defined in the config:\n\n- `packagePath`, which is the name of the package. For example: `@atlaskit/navigation-next` and\n  `@atlaskit/navigation`. With the package path as the key, you can either provide the values as:\n  - `message` **(optional)**, the message to display when the deprecated packages path is used. For\n    example: `multi-select is deprecated. Please use '@atlaskit/select' instead.` Or as:\n  - `imports`, which is an array of named imports to be deprecated. Each named import has the\n    following fields:\n    - `importName`, which is the name of the import to be deprecated. For example: `assistive` and\n      `visuallyHidden`.\n    - `message` **(optional)**, which is the message to display when the deprecated import is used.\n      For example:\n      `The assistive mixin is deprecated. Please use `@atlaskit/visually-hidden` instead.`.\n\n```json\n{\n\t\"@atlaskit/navigation-next\": {\n\t\t\"message\": \"navigation-next is deprecated. Please use '@atlaskit/atlassian-navigation' instead.\"\n\t}\n}\n```\n\n```js\nimport packageJson from './package.json';\n\nmodule.exports = {\n\trules: {\n\t\t'@atlaskit/design-system/no-deprecated-imports': [\n\t\t\t'error',\n\t\t\t{\n\t\t\t\tdeprecatedConfig: {\n\t\t\t\t\t'@atlaskit/navigation-next': {\n\t\t\t\t\t\tmessage:\n\t\t\t\t\t\t\t\"navigation-next is deprecated. Please use '@atlaskit/atlassian-navigation' instead.\",\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t},\n};\n```\n",
+  content: '{"ruleName":"no-deprecated-imports","description":"Packages across the Atlassian Design System can be deprecated when they are deemed no-longer fit for","content":"# no-deprecated-imports\\n\\nPackages across the Atlassian Design System can be deprecated when they are deemed no-longer fit for\\npurporse or dangerous and risk effective use at scale.\\n\\n## Examples\\n\\nThis rule will mark usage of deprecated modules as violations.\\n\\n### Incorrect\\n\\n```ts\\nimport Item from \'@atlaskit/item\';\\n                  ^^^^^^^^^^^^^^\\nimport GlobalNav from \'@atlaskit/global-navigation\';\\n                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^\\n```\\n\\n## Options\\n\\nThe rule can take one option: `deprecatedConfig`, if not provided the rule will use an internal\\nconfig. If provided the rule will use the passed in config instead.\\n\\n### deprecatedConfig\\n\\nThe following fields can be defined in the config:\\n\\n- `packagePath`, which is the name of the package. For example: `@atlaskit/navigation-next` and\\n  `@atlaskit/navigation`. With the package path as the key, you can either provide the values as:\\n  - `message` **(optional)**, the message to display when the deprecated packages path is used. For\\n    example: `multi-select is deprecated. Please use \'@atlaskit/select\' instead.` Or as:\\n  - `imports`, which is an array of named imports to be deprecated. Each named import has the\\n    following fields:\\n    - `importName`, which is the name of the import to be deprecated. For example: `assistive` and\\n      `visuallyHidden`.\\n    - `message` **(optional)**, which is the message to display when the deprecated import is used.\\n      For example:\\n      `The assistive mixin is deprecated. Please use `@atlaskit/visually-hidden` instead.`.\\n\\n```json\\n{\\n\\t\\"@atlaskit/navigation-next\\": {\\n\\t\\t\\"message\\": \\"navigation-next is deprecated. Please use \'@atlaskit/atlassian-navigation\' instead.\\"\\n\\t}\\n}\\n```\\n\\n```js\\nimport packageJson from \'./package.json\';\\n\\nmodule.exports = {\\n\\trules: {\\n\\t\\t\'@atlaskit/design-system/no-deprecated-imports\': [\\n\\t\\t\\t\'error\',\\n\\t\\t\\t{\\n\\t\\t\\t\\tdeprecatedConfig: {\\n\\t\\t\\t\\t\\t\'@atlaskit/navigation-next\': {\\n\\t\\t\\t\\t\\t\\tmessage:\\n\\t\\t\\t\\t\\t\\t\\t\\"navigation-next is deprecated. Please use \'@atlaskit/atlassian-navigation\' instead.\\",\\n\\t\\t\\t\\t\\t},\\n\\t\\t\\t\\t},\\n\\t\\t\\t},\\n\\t\\t],\\n\\t},\\n};\\n```\\n"}',
   ruleName: 'no-deprecated-imports',
   description: 'Packages across the Atlassian Design System can be deprecated when they are deemed no-longer fit for'
 }, {
-  content: "# no-direct-use-of-web-platform-drag-and-drop\n\nBlock the usage of web platform drag and drop functionality directly. Use Pragmatic drag and drop.\n\n## Rationale\n\nThe web platform has powerful drag and drop functionality built in. However, it is hard to be\nsuccessful with web platform drag and drop due to bugs, inconsistencies and usage friction. Rather\nthan leveraging the web platform API directly, the rule enforces the usage of\n[Pragmatic drag and drop](https://atlassian.design/components/pragmatic-drag-and-drop), which allows\npeople to easily and successfully leverage web platform drag and drop.\n\n## Examples\n\nThis rule marks direct usage of web platform drag events as violations.\n\n### Incorrect\n\nAdding drag related event listeners on intrinsic `react` elements (eg `div`, `span`, `strong` and so\non).\n\n```tsx\n<div onDragStart={fn}>{children}</div>\n     ^^^^^^^^^^^\n<div onDragEnter={fn}>{children}</div>\n     ^^^^^^^^^^^\n<div onDragLeave={fn}>{children}</div>\n     ^^^^^^^^^^^\n<div onDragOver={fn}>{children}</div>\n     ^^^^^^^^^^^\n<div onDrag={fn}>{children}</div>\n     ^^^^^^\n<div onDrop={fn}>{children}</div>\n     ^^^^^^\n<div onDragEnd={fn}>{children}</div>\n     ^^^^^^^^^\n```\n\nAdding drag related event listeners on our `<Box>` primitive.\n\n```tsx\nimport { Box } from '@atlaskit/primitives';\n\n<Box onDragStart={fn}>{children}</Box>\n     ^^^^^^^^^^^\n<Box onDragEnter={fn}>{children}</Box>\n     ^^^^^^^^^^^\n<Box onDragLeave={fn}>{children}</Box>\n     ^^^^^^^^^^^\n<Box onDragOver={fn}>{children}</Box>\n     ^^^^^^^^^^^\n<Box onDrag={fn}>{children}</Box>\n     ^^^^^^\n<Box onDrop={fn}>{children}</Box>\n     ^^^^^^\n<Box onDragEnd={fn}>{children}</Box>\n     ^^^^^^^^^\n```\n\nBinding drag related events using `eventTarget.addEventListener()`\n\n```ts\nwindow.addEventListener('dragstart', fn);\n                        ^^^^^^^^^^^\nwindow.addEventListener('dragenter', fn);\n                        ^^^^^^^^^^^\nwindow.addEventListener('dragleave', fn);\n                        ^^^^^^^^^^^\nwindow.addEventListener('dragover', fn);\n                        ^^^^^^^^^^\nwindow.addEventListener('drag', fn);\n                        ^^^^^^\nwindow.addEventListener('drop', fn);\n                        ^^^^^^\nwindow.addEventListener('dragend', fn);\n                        ^^^^^^^^^\n```\n\nBinding drag related events using `bind()` from\n[bind-event-listener](https://github.com/alexreardon/bind-event-listener)\n\n```ts\nimport {bind} from 'bind-event-listener';\n\nbind(element, { type: 'dragstart', listener: fn });\n                      ^^^^^^^^^^^\nbind(element, { type: 'dragenter', listener: fn });\n                      ^^^^^^^^^^^\nbind(element, { type: 'dragleave', listener: fn });\n                      ^^^^^^^^^^^\nbind(element, { type: 'dragover', listener: fn });\n                      ^^^^^^^^^^\nbind(element, { type: 'drag', listener: fn });\n                      ^^^^^^\nbind(element, { type: 'drop', listener: fn });\n                      ^^^^^^\nbind(element, { type: 'dragend', listener: fn });\n                      ^^^^^^^^^\n```\n\nBinding drag related events using `bindAll()` from\n[bind-event-listener](https://github.com/alexreardon/bind-event-listener)\n\n```ts\nimport {bindAll} from 'bind-event-listener';\n\nbindAll(window, [\n  { type: 'dragstart', listener: fn },\n          ^^^^^^^^^^\n  { type: 'dragenter', listener: fn },\n          ^^^^^^^^^^\n  { type: 'dragleave', listener: fn },\n          ^^^^^^^^^^\n  { type: 'dragover', listener: fn },\n          ^^^^^^^^^^\n  { type: 'drag', listener: fn },\n          ^^^^^^\n  { type: 'drop', listener: fn },\n          ^^^^^^\n  { type: 'dragend', listener: fn },\n          ^^^^^^^^^\n]);\n```\n\n### Correct\n\nLeveraging Pragmatic drag and drop for web platform drag and drop.\n\n```ts\nimport { monitor } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\n\nmonitor({\n\tonGenerateDragPreview: fn,\n\tonDragStart: fn,\n\tonDropTargetChange: fn,\n\tonDrag: fn,\n\tonDrop: fn,\n});\n```\n\n> See the\n> [Pragmatic drag and drop documentation](https://atlassian.design/components/pragmatic-drag-and-drop)\n> for more information about it's usage.\n\nUsing blocked JSX attributes on custom `react` components\n\n```tsx\n<MyComponent onDragStart={fn}>\n```\n",
+  content: "{\"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\":\"# no-direct-use-of-web-platform-drag-and-drop\\n\\nBlock the usage of web platform drag and drop functionality directly. Use Pragmatic drag and drop.\\n\\n## Rationale\\n\\nThe web platform has powerful drag and drop functionality built in. However, it is hard to be\\nsuccessful with web platform drag and drop due to bugs, inconsistencies and usage friction. Rather\\nthan leveraging the web platform API directly, the rule enforces the usage of\\n[Pragmatic drag and drop](https://atlassian.design/components/pragmatic-drag-and-drop), which allows\\npeople to easily and successfully leverage web platform drag and drop.\\n\\n## Examples\\n\\nThis rule marks direct usage of web platform drag events as violations.\\n\\n### Incorrect\\n\\nAdding drag related event listeners on intrinsic `react` elements (eg `div`, `span`, `strong` and so\\non).\\n\\n```tsx\\n<div onDragStart={fn}>{children}</div>\\n     ^^^^^^^^^^^\\n<div onDragEnter={fn}>{children}</div>\\n     ^^^^^^^^^^^\\n<div onDragLeave={fn}>{children}</div>\\n     ^^^^^^^^^^^\\n<div onDragOver={fn}>{children}</div>\\n     ^^^^^^^^^^^\\n<div onDrag={fn}>{children}</div>\\n     ^^^^^^\\n<div onDrop={fn}>{children}</div>\\n     ^^^^^^\\n<div onDragEnd={fn}>{children}</div>\\n     ^^^^^^^^^\\n```\\n\\nAdding drag related event listeners on our `<Box>` primitive.\\n\\n```tsx\\nimport { Box } from '@atlaskit/primitives';\\n\\n<Box onDragStart={fn}>{children}</Box>\\n     ^^^^^^^^^^^\\n<Box onDragEnter={fn}>{children}</Box>\\n     ^^^^^^^^^^^\\n<Box onDragLeave={fn}>{children}</Box>\\n     ^^^^^^^^^^^\\n<Box onDragOver={fn}>{children}</Box>\\n     ^^^^^^^^^^^\\n<Box onDrag={fn}>{children}</Box>\\n     ^^^^^^\\n<Box onDrop={fn}>{children}</Box>\\n     ^^^^^^\\n<Box onDragEnd={fn}>{children}</Box>\\n     ^^^^^^^^^\\n```\\n\\nBinding drag related events using `eventTarget.addEventListener()`\\n\\n```ts\\nwindow.addEventListener('dragstart', fn);\\n                        ^^^^^^^^^^^\\nwindow.addEventListener('dragenter', fn);\\n                        ^^^^^^^^^^^\\nwindow.addEventListener('dragleave', fn);\\n                        ^^^^^^^^^^^\\nwindow.addEventListener('dragover', fn);\\n                        ^^^^^^^^^^\\nwindow.addEventListener('drag', fn);\\n                        ^^^^^^\\nwindow.addEventListener('drop', fn);\\n                        ^^^^^^\\nwindow.addEventListener('dragend', fn);\\n                        ^^^^^^^^^\\n```\\n\\nBinding drag related events using `bind()` from\\n[bind-event-listener](https://github.com/alexreardon/bind-event-listener)\\n\\n```ts\\nimport {bind} from 'bind-event-listener';\\n\\nbind(element, { type: 'dragstart', listener: fn });\\n                      ^^^^^^^^^^^\\nbind(element, { type: 'dragenter', listener: fn });\\n                      ^^^^^^^^^^^\\nbind(element, { type: 'dragleave', listener: fn });\\n                      ^^^^^^^^^^^\\nbind(element, { type: 'dragover', listener: fn });\\n                      ^^^^^^^^^^\\nbind(element, { type: 'drag', listener: fn });\\n                      ^^^^^^\\nbind(element, { type: 'drop', listener: fn });\\n                      ^^^^^^\\nbind(element, { type: 'dragend', listener: fn });\\n                      ^^^^^^^^^\\n```\\n\\nBinding drag related events using `bindAll()` from\\n[bind-event-listener](https://github.com/alexreardon/bind-event-listener)\\n\\n```ts\\nimport {bindAll} from 'bind-event-listener';\\n\\nbindAll(window, [\\n  { type: 'dragstart', listener: fn },\\n          ^^^^^^^^^^\\n  { type: 'dragenter', listener: fn },\\n          ^^^^^^^^^^\\n  { type: 'dragleave', listener: fn },\\n          ^^^^^^^^^^\\n  { type: 'dragover', listener: fn },\\n          ^^^^^^^^^^\\n  { type: 'drag', listener: fn },\\n          ^^^^^^\\n  { type: 'drop', listener: fn },\\n          ^^^^^^\\n  { type: 'dragend', listener: fn },\\n          ^^^^^^^^^\\n]);\\n```\\n\\n### Correct\\n\\nLeveraging Pragmatic drag and drop for web platform drag and drop.\\n\\n```ts\\nimport { monitor } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\\n\\nmonitor({\\n\\tonGenerateDragPreview: fn,\\n\\tonDragStart: fn,\\n\\tonDropTargetChange: fn,\\n\\tonDrag: fn,\\n\\tonDrop: fn,\\n});\\n```\\n\\n> See the\\n> [Pragmatic drag and drop documentation](https://atlassian.design/components/pragmatic-drag-and-drop)\\n> for more information about it's usage.\\n\\nUsing blocked JSX attributes on custom `react` components\\n\\n```tsx\\n<MyComponent onDragStart={fn}>\\n```\\n\"}",
   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: "# 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';\\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\"}",
   ruleName: 'no-emotion-primitives',
   description: 'This rule ensures that imports from `@atlaskit/primitives` are replaced with their Compiled'
 }, {
-  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",
+  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',
   description: 'Disallows/discourages passing empty arguments to any `styled` expression when using a CSS-in-JS'
 }, {
-  content: "# no-exported-css\n\nDisallows `css` export declarations that originate from a CSS-in-JS library, including\n`@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.\n\nIn Compiled (`@atlaskit/css` and `@compiled/react`), exporting `css` declarations may result in\nunexpected errors when imported, because its value will be `null` at runtime. Additionally,\nco-locating `css` definitions with their usage is considered best practice in order to improve code\nreadability and build performance.\n\n## Examples\n\n### Incorrect\n\n```tsx\nimport { css } from '@compiled/react';\n\nexport const styles = css({});\n\nexport default css({});\n```\n\n### Correct\n\n```tsx\nimport { css } from '@compiled/react';\n\nconst styles = css({});\n```\n\n## Options\n\n### importSources\n\nBy default, this rule will check `css` 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 { css } from 'other-lib';\n\n// Invalid!\nexport const styles = css({});\n```\n",
+  content: '{"ruleName":"no-exported-css","description":"Disallows `css` export declarations that originate from a CSS-in-JS library, including","content":"# no-exported-css\\n\\nDisallows `css` export declarations that originate from a CSS-in-JS library, including\\n`@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.\\n\\nIn Compiled (`@atlaskit/css` and `@compiled/react`), exporting `css` declarations may result in\\nunexpected errors when imported, because its value will be `null` at runtime. Additionally,\\nco-locating `css` definitions with their usage is considered best practice in order to improve code\\nreadability and build performance.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { css } from \'@compiled/react\';\\n\\nexport const styles = css({});\\n\\nexport default css({});\\n```\\n\\n### Correct\\n\\n```tsx\\nimport { css } from \'@compiled/react\';\\n\\nconst styles = css({});\\n```\\n\\n## Options\\n\\n### importSources\\n\\nBy default, this rule will check `css` 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 { css } from \'other-lib\';\\n\\n// Invalid!\\nexport const styles = css({});\\n```\\n"}',
   ruleName: 'no-exported-css',
   description: 'Disallows `css` export declarations that originate from a CSS-in-JS library, including'
 }, {
-  content: "# no-exported-keyframes\n\nDisallows `keyframes` export declarations that originate from a CSS-in-JS library, including\n`@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.\n\nIn Compiled (`@atlaskit/css` and `@compiled/react`), exporting `keyframes` declarations may result\nin unexpected errors when imported, because its value will be `null` at runtime. Additionally,\nco-locating `keyframes` definitions with their usage is considered best practice in order to improve\ncode readability and build performance.\n\n## Examples\n\n### Incorrect\n\n```tsx\nimport { keyframes } from '@compiled/react';\n\nexport const animation = keyframes({});\n\nexport default keyframes({});\n```\n\n### Correct\n\n```tsx\nimport { keyframes } from '@compiled/react';\n\nconst animation = keyframes({});\n```\n\n## Options\n\n### importSources\n\nBy default, this rule will check `keyframes` 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 { keyframes } from 'other-lib';\n\n// Invalid!\nexport const animation = keyframes({});\n```\n",
+  content: '{"ruleName":"no-exported-keyframes","description":"Disallows `keyframes` export declarations that originate from a CSS-in-JS library, including","content":"# no-exported-keyframes\\n\\nDisallows `keyframes` export declarations that originate from a CSS-in-JS library, including\\n`@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.\\n\\nIn Compiled (`@atlaskit/css` and `@compiled/react`), exporting `keyframes` declarations may result\\nin unexpected errors when imported, because its value will be `null` at runtime. Additionally,\\nco-locating `keyframes` definitions with their usage is considered best practice in order to improve\\ncode readability and build performance.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { keyframes } from \'@compiled/react\';\\n\\nexport const animation = keyframes({});\\n\\nexport default keyframes({});\\n```\\n\\n### Correct\\n\\n```tsx\\nimport { keyframes } from \'@compiled/react\';\\n\\nconst animation = keyframes({});\\n```\\n\\n## Options\\n\\n### importSources\\n\\nBy default, this rule will check `keyframes` 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 { keyframes } from \'other-lib\';\\n\\n// Invalid!\\nexport const animation = keyframes({});\\n```\\n"}',
   ruleName: 'no-exported-keyframes',
   description: 'Disallows `keyframes` export declarations that originate from a CSS-in-JS library, including'
 }, {
-  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/new\';\\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: '# 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/new\';\\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"
 }, {
-  content: '# no-html-checkbox\n\nDon\'t use native HTML checkboxes. The Atlassian Design System provides a ready-made checkbox\ncomponent that includes event tracking, ensures accessible implementations, and provides access to\nADS styling features like design tokens.\n\nUse the Atlassian Design System [Checkbox](https://atlassian.design/components/checkbox) component\nwhen suitable.\n\n## Examples\n\nThis rule marks code as violations when it finds native HTML checkbox elements.\n\n### Incorrect\n\n```jsx\n<label>\n\tRemember me\n\t<input type="checkbox" id="remember-me" />\n\t^^^^^ Using a native checkbox input\n</label>\n```\n\n### Correct\n\n```jsx\nimport { Checkbox } from \'@atlaskit/checkbox\';\n\n<Checkbox value="remember-me" label="Remember me" name="remember-me" />;\n```\n',
+  content: '{"ruleName":"no-html-checkbox","description":"Don\'t use native HTML checkboxes. The Atlassian Design System provides a ready-made checkbox","content":"# no-html-checkbox\\n\\nDon\'t use native HTML checkboxes. The Atlassian Design System provides a ready-made checkbox\\ncomponent that includes event tracking, ensures accessible implementations, and provides access to\\nADS styling features like design tokens.\\n\\nUse the Atlassian Design System [Checkbox](https://atlassian.design/components/checkbox) component\\nwhen suitable.\\n\\n## Examples\\n\\nThis rule marks code as violations when it finds native HTML checkbox elements.\\n\\n### Incorrect\\n\\n```jsx\\n<label>\\n\\tRemember me\\n\\t<input type=\\"checkbox\\" id=\\"remember-me\\" />\\n\\t^^^^^ Using a native checkbox input\\n</label>\\n```\\n\\n### Correct\\n\\n```jsx\\nimport { Checkbox } from \'@atlaskit/checkbox\';\\n\\n<Checkbox value=\\"remember-me\\" label=\\"Remember me\\" name=\\"remember-me\\" />;\\n```\\n"}',
   ruleName: 'no-html-checkbox',
   description: "Don't use native HTML checkboxes. The Atlassian Design System provides a ready-made checkbox"
 }, {
-  content: "# no-html-code\n\nDon't use native HTML code element. The Atlassian Design System provides a ready-made code component\nthat ensures accessible implementations and consistent ADS styling.\n\nUse the Atlassian Design System [Code](/components/code/) component when suitable.\n\n## Examples\n\nThis rule marks code as violations when it finds native HTML code elements.\n\n### Incorrect\n\n```jsx\n<code>yarn changeset</code>\n ^^^^ Using a native HTML `<code>`\n```\n\n### Correct\n\n```jsx\nimport { Code } from '@atlaskit/code';\n\n<Code>yarn changeset</Code>;\n```\n",
+  content: '{"ruleName":"no-html-code","description":"Don\'t use native HTML code element. The Atlassian Design System provides a ready-made code component","content":"# no-html-code\\n\\nDon\'t use native HTML code element. The Atlassian Design System provides a ready-made code component\\nthat ensures accessible implementations and consistent ADS styling.\\n\\nUse the Atlassian Design System [Code](/components/code/) component when suitable.\\n\\n## Examples\\n\\nThis rule marks code as violations when it finds native HTML code elements.\\n\\n### Incorrect\\n\\n```jsx\\n<code>yarn changeset</code>\\n ^^^^ Using a native HTML `<code>`\\n```\\n\\n### Correct\\n\\n```jsx\\nimport { Code } from \'@atlaskit/code\';\\n\\n<Code>yarn changeset</Code>;\\n```\\n"}',
   ruleName: 'no-html-code',
   description: "Don't use native HTML code element. The Atlassian Design System provides a ready-made code component"
 }, {
-  content: '# no-html-heading\n\nDon\'t use native HTML headings. The Atlassian Design System provides a ready-made heading component\nthat ensures accessible implementations, and provides access to ADS styling features like design\ntokens.\n\nUse the Atlassian Design System [Heading](/components/heading/) component when suitable.\n\n## Examples\n\nThis rule marks code as violations when it finds native HTML heading elements.\n\n### Incorrect\n\n```jsx\n<h1>Hello world!</h1>\n ^^ Using a native HTML heading element\n\n<span role="heading" aria-level="1">Hello world!</span>\n ^^^^ Using `role="heading"` to create headings\n```\n\n### Correct\n\n```jsx\nimport Heading from \'@atlaskit/heading\';\n\n<Heading as="h1">Hello, World!</Heading>;\n```\n',
+  content: '{"ruleName":"no-html-heading","description":"Don\'t use native HTML headings. The Atlassian Design System provides a ready-made heading component","content":"# no-html-heading\\n\\nDon\'t use native HTML headings. The Atlassian Design System provides a ready-made heading component\\nthat ensures accessible implementations, and provides access to ADS styling features like design\\ntokens.\\n\\nUse the Atlassian Design System [Heading](/components/heading/) component when suitable.\\n\\n## Examples\\n\\nThis rule marks code as violations when it finds native HTML heading elements.\\n\\n### Incorrect\\n\\n```jsx\\n<h1>Hello world!</h1>\\n ^^ Using a native HTML heading element\\n\\n<span role=\\"heading\\" aria-level=\\"1\\">Hello world!</span>\\n ^^^^ Using `role=\\"heading\\"` to create headings\\n```\\n\\n### Correct\\n\\n```jsx\\nimport Heading from \'@atlaskit/heading\';\\n\\n<Heading as=\\"h1\\">Hello, World!</Heading>;\\n```\\n"}',
   ruleName: 'no-html-heading',
   description: "Don't use native HTML headings. The Atlassian Design System provides a ready-made heading component"
 }, {
-  content: '# no-html-image\n\nDon\'t use native HTML images. The Atlassian Design System provides a ready-made image component that\nensures accessible implementations and provides access to ADS styling features like design tokens.\n\nUse the Atlassian Design System [Image](/components/image/) component when suitable.\n\n## Examples\n\nThis rule marks code as violations when it finds native HTML image elements.\n\n### Incorrect\n\n```jsx\n<img src="foo.jpg" alt="The word \'foo\' written on a white background." />\n ^^^ Using a native HTML `<img>`\n\n<div role="img" src="foo.jpg" alt="The word \'foo\' written on a white background." />\n ^^^ Using `role="img"` to create images\n\n```\n\n### Correct\n\n```jsx\nimport Image from \'@atlaskit/image\';\n\n<Image src="foo.jpg" alt="The word \'foo\' written on a white background." />;\n```\n',
+  content: '{"ruleName":"no-html-image","description":"Don\'t use native HTML images. The Atlassian Design System provides a ready-made image component that","content":"# no-html-image\\n\\nDon\'t use native HTML images. The Atlassian Design System provides a ready-made image component that\\nensures accessible implementations and provides access to ADS styling features like design tokens.\\n\\nUse the Atlassian Design System [Image](/components/image/) component when suitable.\\n\\n## Examples\\n\\nThis rule marks code as violations when it finds native HTML image elements.\\n\\n### Incorrect\\n\\n```jsx\\n<img src=\\"foo.jpg\\" alt=\\"The word \'foo\' written on a white background.\\" />\\n ^^^ Using a native HTML `<img>`\\n\\n<div role=\\"img\\" src=\\"foo.jpg\\" alt=\\"The word \'foo\' written on a white background.\\" />\\n ^^^ Using `role=\\"img\\"` to create images\\n\\n```\\n\\n### Correct\\n\\n```jsx\\nimport Image from \'@atlaskit/image\';\\n\\n<Image src=\\"foo.jpg\\" alt=\\"The word \'foo\' written on a white background.\\" />;\\n```\\n"}',
   ruleName: 'no-html-image',
   description: "Don't use native HTML images. The Atlassian Design System provides a ready-made image component that"
 }, {
-  content: '# no-html-radio\n\nDon\'t use native HTML radios. The Atlassian Design System provides a ready-made radio component that\nincludes event tracking, ensures accessible implementations, and provides access to ADS styling\nfeatures like design tokens.\n\nUse the Atlassian Design System [Radio](https://atlassian.design/components/radio) and\n[RadioGroup](https://atlassian.design/components/radio/radio-group/examples) components when\nsuitable.\n\n## Examples\n\nThis rule marks code as violations when it finds native HTML radio elements.\n\n### Incorrect\n\n```jsx\n<fieldset>\n\t<legend>Preferred contact method</legend>\n\t<input type="radio" id="contact-method--email" name="contact" value="email" />\n\t^^^^^ Using a native radio input\n\t<label for="contact-method--email">Email</label>\n\t<input type="radio" id="contact-method--phone" name="contact" value="phone" />\n\t^^^^^ Using a native radio input\n\t<label for="contact-method--phone">Phone</label>\n</label>\n```\n\n### Correct\n\n```jsx\nimport { ErrorMessage, Field } from \'@atlaskit/form\';\nimport { RadioGroup } from \'@atlaskit/radio\';\nimport { type OptionsPropType } from \'@atlaskit/radio/types\';\n\nconst options: OptionsPropType = [\n\t{ name: \'contact\', value: \'email\', label: \'Email\' },\n\t{ name: \'contact\', value: \'phone\', label: \'Phone\' },\n];\n\n<Field label="Preferred contact method" name="contact" defaultValue="email">\n\t{({ fieldProps }) => <RadioGroup {...fieldProps} options={options} />}\n</Field>\n```\n',
+  content: '{"ruleName":"no-html-radio","description":"Don\'t use native HTML radios. The Atlassian Design System provides a ready-made radio component that","content":"# no-html-radio\\n\\nDon\'t use native HTML radios. The Atlassian Design System provides a ready-made radio component that\\nincludes event tracking, ensures accessible implementations, and provides access to ADS styling\\nfeatures like design tokens.\\n\\nUse the Atlassian Design System [Radio](https://atlassian.design/components/radio) and\\n[RadioGroup](https://atlassian.design/components/radio/radio-group/examples) components when\\nsuitable.\\n\\n## Examples\\n\\nThis rule marks code as violations when it finds native HTML radio elements.\\n\\n### Incorrect\\n\\n```jsx\\n<fieldset>\\n\\t<legend>Preferred contact method</legend>\\n\\t<input type=\\"radio\\" id=\\"contact-method--email\\" name=\\"contact\\" value=\\"email\\" />\\n\\t^^^^^ Using a native radio input\\n\\t<label for=\\"contact-method--email\\">Email</label>\\n\\t<input type=\\"radio\\" id=\\"contact-method--phone\\" name=\\"contact\\" value=\\"phone\\" />\\n\\t^^^^^ Using a native radio input\\n\\t<label for=\\"contact-method--phone\\">Phone</label>\\n</label>\\n```\\n\\n### Correct\\n\\n```jsx\\nimport { ErrorMessage, Field } from \'@atlaskit/form\';\\nimport { RadioGroup } from \'@atlaskit/radio\';\\nimport { type OptionsPropType } from \'@atlaskit/radio/types\';\\n\\nconst options: OptionsPropType = [\\n\\t{ name: \'contact\', value: \'email\', label: \'Email\' },\\n\\t{ name: \'contact\', value: \'phone\', label: \'Phone\' },\\n];\\n\\n<Field label=\\"Preferred contact method\\" name=\\"contact\\" defaultValue=\\"email\\">\\n\\t{({ fieldProps }) => <RadioGroup {...fieldProps} options={options} />}\\n</Field>\\n```\\n"}',
   ruleName: 'no-html-radio',
   description: "Don't use native HTML radios. The Atlassian Design System provides a ready-made radio component that"
 }, {
-  content: '# no-html-range\n\nDon\'t use native HTML ranges. The Atlassian Design System provides a ready-made range component that\nincludes event tracking, ensures accessible implementations, and provides access to ADS styling\nfeatures like design tokens.\n\nUse the Atlassian Design System [Range](https://atlassian.design/components/range) component when\nsuitable.\n\n## Examples\n\nThis rule marks code as violations when it finds native HTML range elements.\n\n### Incorrect\n\n```jsx\n<label for="volume">Volume</label>\n<input type="range" id="volume" name="volume" step="1" min="0" max="10" />\n```\n\n### Correct\n\n```jsx\nimport Range from \'@atlaskit/range\';\n\n<label for="volume">Volume</label>\n<Range id="volume" step={1} min={0} max={10} />\n```\n',
+  content: '{"ruleName":"no-html-range","description":"Don\'t use native HTML ranges. The Atlassian Design System provides a ready-made range component that","content":"# no-html-range\\n\\nDon\'t use native HTML ranges. The Atlassian Design System provides a ready-made range component that\\nincludes event tracking, ensures accessible implementations, and provides access to ADS styling\\nfeatures like design tokens.\\n\\nUse the Atlassian Design System [Range](https://atlassian.design/components/range) component when\\nsuitable.\\n\\n## Examples\\n\\nThis rule marks code as violations when it finds native HTML range elements.\\n\\n### Incorrect\\n\\n```jsx\\n<label for=\\"volume\\">Volume</label>\\n<input type=\\"range\\" id=\\"volume\\" name=\\"volume\\" step=\\"1\\" min=\\"0\\" max=\\"10\\" />\\n```\\n\\n### Correct\\n\\n```jsx\\nimport Range from \'@atlaskit/range\';\\n\\n<label for=\\"volume\\">Volume</label>\\n<Range id=\\"volume\\" step={1} min={0} max={10} />\\n```\\n"}',
   ruleName: 'no-html-range',
   description: "Don't use native HTML ranges. The Atlassian Design System provides a ready-made range component that"
 }, {
-  content: "# no-html-select\n\nDon't use native HTML selects. The Atlassian Design System provides a ready-made select component\nthat has event tracking, ensures accessible implementations, and provides access to ADS styling\nfeatures like design tokens.\n\nUse one of the Atlassian Design System [Select](/components/select/) components when suitable.\n\n## Examples\n\nThis rule marks code as violations when it finds native HTML select elements.\n\n### Incorrect\n\n```jsx\n<select name=\"cities\" id=\"city-select\">\n\t<option value=\"adelaide\">Adelaide</option>\n\t<option value=\"brisbane\">Brisbane</option>\n\t<option value=\"canberra\">Canberra</option>\n\t<option value=\"darwin\">Darwin</option>\n\t<option value=\"hobart\">Hobart</option>\n\t<option value=\"melbourne\">Melbourne</option>\n\t<option value=\"perth\">Perth</option>\n\t<option value=\"sydney\">Sydney</option>\n</select>\n```\n\n### Correct\n\n```jsx\nimport Select from '@atlaskit/select';\n\nexport const cities: OptionsType = [\n\t{ label: 'Adelaide', value: 'adelaide', extra: 'extra' },\n\t{ label: 'Brisbane', value: 'brisbane' },\n\t{ label: 'Canberra', value: 'canberra' },\n\t{ label: 'Darwin', value: 'darwin' },\n\t{ label: 'Hobart', value: 'hobart' },\n\t{ label: 'Melbourne', value: 'melbourne' },\n\t{ label: 'Perth', value: 'perth' },\n\t{ label: 'Sydney', value: 'sydney' },\n];\n\n<Select inputId=\"city-select\" options={cities} />\n```\n",
+  content: "{\"ruleName\":\"no-html-select\",\"description\":\"Don't use native HTML selects. The Atlassian Design System provides a ready-made select component\",\"content\":\"# no-html-select\\n\\nDon't use native HTML selects. The Atlassian Design System provides a ready-made select component\\nthat has event tracking, ensures accessible implementations, and provides access to ADS styling\\nfeatures like design tokens.\\n\\nUse one of the Atlassian Design System [Select](/components/select/) components when suitable.\\n\\n## Examples\\n\\nThis rule marks code as violations when it finds native HTML select elements.\\n\\n### Incorrect\\n\\n```jsx\\n<select name=\\\"cities\\\" id=\\\"city-select\\\">\\n\\t<option value=\\\"adelaide\\\">Adelaide</option>\\n\\t<option value=\\\"brisbane\\\">Brisbane</option>\\n\\t<option value=\\\"canberra\\\">Canberra</option>\\n\\t<option value=\\\"darwin\\\">Darwin</option>\\n\\t<option value=\\\"hobart\\\">Hobart</option>\\n\\t<option value=\\\"melbourne\\\">Melbourne</option>\\n\\t<option value=\\\"perth\\\">Perth</option>\\n\\t<option value=\\\"sydney\\\">Sydney</option>\\n</select>\\n```\\n\\n### Correct\\n\\n```jsx\\nimport Select from '@atlaskit/select';\\n\\nexport const cities: OptionsType = [\\n\\t{ label: 'Adelaide', value: 'adelaide', extra: 'extra' },\\n\\t{ label: 'Brisbane', value: 'brisbane' },\\n\\t{ label: 'Canberra', value: 'canberra' },\\n\\t{ label: 'Darwin', value: 'darwin' },\\n\\t{ label: 'Hobart', value: 'hobart' },\\n\\t{ label: 'Melbourne', value: 'melbourne' },\\n\\t{ label: 'Perth', value: 'perth' },\\n\\t{ label: 'Sydney', value: 'sydney' },\\n];\\n\\n<Select inputId=\\\"city-select\\\" options={cities} />\\n```\\n\"}",
   ruleName: 'no-html-select',
   description: "Don't use native HTML selects. The Atlassian Design System provides a ready-made select component"
 }, {
-  content: '# no-html-text-input\n\nDon\'t use native HTML text inputs. The Atlassian Design System provides a ready-made textfield\ncomponent that includes event tracking, ensures accessible implementations, and provides access to\nADS styling features like design tokens.\n\nUse the Atlassian Design System [Textfield](https://atlassian.design/components/textfield) component\nwhen suitable.\n\n## Examples\n\nThis rule marks code as violations when it finds native HTML range elements.\n\n### Incorrect\n\n```jsx\n<label for="full-name">Full Name</label>\n<input name="full-name" id="full-name" />\n\n<label for="nickname">Nickname</label>\n<input name="nickname" id="nickname" type="text" />\n```\n\n### Correct\n\n```jsx\nimport Textfield from \'@atlaskit/range\';\n\n<label for="full-name">Full Name</label>\n<Textfield name="full-name" id="full-name" />\n\n<label for="nickname">Nickname</label>\n<Textfield name="nickname" id="nickname" />\n```\n',
+  content: '{"ruleName":"no-html-text-input","description":"Don\'t use native HTML text inputs. The Atlassian Design System provides a ready-made textfield","content":"# no-html-text-input\\n\\nDon\'t use native HTML text inputs. The Atlassian Design System provides a ready-made textfield\\ncomponent that includes event tracking, ensures accessible implementations, and provides access to\\nADS styling features like design tokens.\\n\\nUse the Atlassian Design System [Textfield](https://atlassian.design/components/textfield) component\\nwhen suitable.\\n\\n## Examples\\n\\nThis rule marks code as violations when it finds native HTML range elements.\\n\\n### Incorrect\\n\\n```jsx\\n<label for=\\"full-name\\">Full Name</label>\\n<input name=\\"full-name\\" id=\\"full-name\\" />\\n\\n<label for=\\"nickname\\">Nickname</label>\\n<input name=\\"nickname\\" id=\\"nickname\\" type=\\"text\\" />\\n```\\n\\n### Correct\\n\\n```jsx\\nimport Textfield from \'@atlaskit/range\';\\n\\n<label for=\\"full-name\\">Full Name</label>\\n<Textfield name=\\"full-name\\" id=\\"full-name\\" />\\n\\n<label for=\\"nickname\\">Nickname</label>\\n<Textfield name=\\"nickname\\" id=\\"nickname\\" />\\n```\\n"}',
   ruleName: 'no-html-text-input',
   description: "Don't use native HTML text inputs. The Atlassian Design System provides a ready-made textfield"
 }, {
-  content: '# no-html-textarea\n\nDon\'t use native HTML textarea elements. The Atlassian Design System provides a ready-made textarea\ncomponent that includes event tracking, ensures accessible implementations, and provides access to\nADS styling features like design tokens.\n\nUse the Atlassian Design System [Textarea](/components/textarea/) component when suitable.\n\n## Examples\n\nThis rule marks code as violations when it finds native HTML code elements.\n\n### Incorrect\n\n```jsx\n<label htmlFor="textarea">Share your feedback</label>\n<textarea id="textarea"></textarea>\n ^^^^^^^^ Using a native HTML `<textarea>`\n```\n\n### Correct\n\n```jsx\nimport Textarea from \'@atlaskit/textarea\';\n\n<label htmlFor="textarea">Share your feedback</label>\n<Textarea id="textarea" />\n```\n',
+  content: '{"ruleName":"no-html-textarea","description":"Don\'t use native HTML textarea elements. The Atlassian Design System provides a ready-made textarea","content":"# no-html-textarea\\n\\nDon\'t use native HTML textarea elements. The Atlassian Design System provides a ready-made textarea\\ncomponent that includes event tracking, ensures accessible implementations, and provides access to\\nADS styling features like design tokens.\\n\\nUse the Atlassian Design System [Textarea](/components/textarea/) component when suitable.\\n\\n## Examples\\n\\nThis rule marks code as violations when it finds native HTML code elements.\\n\\n### Incorrect\\n\\n```jsx\\n<label htmlFor=\\"textarea\\">Share your feedback</label>\\n<textarea id=\\"textarea\\"></textarea>\\n ^^^^^^^^ Using a native HTML `<textarea>`\\n```\\n\\n### Correct\\n\\n```jsx\\nimport Textarea from \'@atlaskit/textarea\';\\n\\n<label htmlFor=\\"textarea\\">Share your feedback</label>\\n<Textarea id=\\"textarea\\" />\\n```\\n"}',
   ruleName: 'no-html-textarea',
   description: "Don't use native HTML textarea elements. The Atlassian Design System provides a ready-made textarea"
 }, {
-  content: "# no-invalid-css-map\n\nEnsure that all usages of the `cssMap` API are valid, and enforces the format of the object that is\npassed to `cssMap`.\n\nPlease refer to the [Compiled documentation](https://compiledcssinjs.com/docs/api-cssmap) for more\ndetails and some examples.\n\nNote that this version of the `no-invalid-css-map` rule differs from\n`@compiled/eslint-plugin/no-invalid-css-map` in that this will apply to both `@compiled/react` and\n`@atlaskit/css`.\n\nThis is intended to be used in conjunction with type checking (through TypeScript).\n\n## Examples\n\n### Incorrect\n\n```tsx\nimport React from 'react';\nimport { cssMap } from '@compiled/react';\n\n// cssMap needs to be declared in the top-most scope.\n// (not within a function, class, etc.)\n\nconst Foo = () => {\n\tconst bar = cssMap({\n\t\tdanger: {\n\t\t\tcolor: 'red',\n\t\t},\n\t});\n};\n```\n\n```tsx\nimport React from 'react';\nimport { cssMap } from '@compiled/react';\nimport { importedVariable, importedFunction } from 'another-package';\n\n// Cannot use imported functions as values in cssMap.\n\nconst myVariable = importedFunction();\n\nconst styles = cssMap({\n\tdanger: {\n\t\t// Both invalid because they rely on an imported function.\n\t\tcolor: myVariable,\n\t\tpadding: importedFunction(),\n\t},\n});\n```\n\n```tsx\nimport React from 'react';\nimport { cssMap } from '@compiled/react';\n\n// Cannot export usages of cssMap.\n// Any usages of cssMap must be in the same file.\n\nexport const foo = cssMap({\n\tdanger: {\n\t\tcolor: 'red',\n\t},\n});\n```\n\n```tsx\nimport React from 'react';\nimport { cssMap } from '@compiled/react';\nimport { token } from '@atlaskit/tokens';\n\n// Functions and object methods are not allowed as\n// values in cssMap.\n\nconst styles = cssMap({\n\t// Object method\n\tget danger() {\n\t\treturn { color: '#123456' };\n\t},\n});\n\nconst styles2 = cssMap({\n\t// Arrow function\n\tdanger: () => {\n\t\tcolor: '#123456';\n\t},\n});\n\nfunction customFunction(...args) {\n\treturn arguments.join('');\n}\n\nconst styles3 = cssMap({\n\tdanger: {\n\t\t// Locally defined function\n\t\tcolor: customFunction('red', 'blue'),\n\t\tbackgroundColor: 'red',\n\t},\n});\n```\n\n```tsx\nimport React from 'react';\nimport { cssMap } from '@compiled/react';\n\n// Spread elements (\"...\") cannot be used in cssMap.\n\nconst base = {\n\tsuccess: {\n\t\tcolor: 'green',\n\t},\n};\n\nconst bar = cssMap({\n\t...base,\n\tdanger: {\n\t\tcolor: 'red',\n\t},\n});\n```\n\n### Correct\n\n```tsx\nimport React from 'react';\nimport { cssMap } from '@compiled/react';\n\n// Literals (strings, numbers, etc.) are used as values\n// in cssMap.\n\nconst styles = cssMap({\n\tdanger: {\n\t\tcolor: 'red',\n\t\tbackgroundColor: 'red',\n\t},\n\tsuccess: {\n\t\tcolor: 'green',\n\t\tbackgroundColor: 'green',\n\t},\n});\n```\n\n```tsx\nimport React from 'react';\nimport { cssMap } from '@compiled/react';\n\n// A statically evaluable variable (known at build time)\n// is used here.\n\nconst bap = 'blue';\n\nconst styles = cssMap({\n\tdanger: {\n\t\tcolor: bap,\n\t},\n});\n```\n\n### Options\n\n#### `allowedFunctionCalls`: [string, string][]\n\nNormally, this ESLint rule forbids all function calls from being used inside the `cssMap(...)`\nfunction call. For example, this would be invalid using default settings:\n\n```tsx\nimport React from 'react';\nimport { cssMap } from '@compiled/react';\nimport { token } from '@atlaskit/tokens';\n\nconst styles = cssMap({\n\tdanger: {\n\t\tcolor: token('my-color'),\n\t\tbackgroundColor: 'red',\n\t},\n\tsuccess: {\n\t\tcolor: 'green',\n\t},\n});\n```\n\nIf you would like to whitelist certain functions (e.g. `token` from `@atlaskit/tokens`), you can\ninclude the names of the functions as part of the `allowedFunctionCalls` argument. Each function\nshould be represented as a two-element array, with the first element being the package the function\nis from, and the second element being the name of the function.\n\nFor example, with the below configuration, the above code example would be okay.\n\n```tsx\n// eslint.config.cjs\n\n// ...\n      rules: {\n        '@atlaskit/eslint-plugin-design-system/no-invalid-css-map': [\n          'error',\n          {\n            allowedFunctionCalls: [\n              ['@atlaskit/tokens', 'token'],\n            ]\n          },\n        ],\n        // ...\n      },\n// ...\n```\n\nPlease note that this ESLint rule only supports whitelisting imports in the form\n`import { myFunctionOrVariable } from 'my-package'`; we do not currently support whitelisting\ndefault imports, so `import myFunctionOrVariable from 'my-package'` would always be invalid when\nused in `cssMap`.\n",
+  content: "{\"ruleName\":\"no-invalid-css-map\",\"description\":\"Ensure that all usages of the `cssMap` API are valid, and enforces the format of the object that is\",\"content\":\"# no-invalid-css-map\\n\\nEnsure that all usages of the `cssMap` API are valid, and enforces the format of the object that is\\npassed to `cssMap`.\\n\\nPlease refer to the [Compiled documentation](https://compiledcssinjs.com/docs/api-cssmap) for more\\ndetails and some examples.\\n\\nNote that this version of the `no-invalid-css-map` rule differs from\\n`@compiled/eslint-plugin/no-invalid-css-map` in that this will apply to both `@compiled/react` and\\n`@atlaskit/css`.\\n\\nThis is intended to be used in conjunction with type checking (through TypeScript).\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport React from 'react';\\nimport { cssMap } from '@compiled/react';\\n\\n// cssMap needs to be declared in the top-most scope.\\n// (not within a function, class, etc.)\\n\\nconst Foo = () => {\\n\\tconst bar = cssMap({\\n\\t\\tdanger: {\\n\\t\\t\\tcolor: 'red',\\n\\t\\t},\\n\\t});\\n};\\n```\\n\\n```tsx\\nimport React from 'react';\\nimport { cssMap } from '@compiled/react';\\nimport { importedVariable, importedFunction } from 'another-package';\\n\\n// Cannot use imported functions as values in cssMap.\\n\\nconst myVariable = importedFunction();\\n\\nconst styles = cssMap({\\n\\tdanger: {\\n\\t\\t// Both invalid because they rely on an imported function.\\n\\t\\tcolor: myVariable,\\n\\t\\tpadding: importedFunction(),\\n\\t},\\n});\\n```\\n\\n```tsx\\nimport React from 'react';\\nimport { cssMap } from '@compiled/react';\\n\\n// Cannot export usages of cssMap.\\n// Any usages of cssMap must be in the same file.\\n\\nexport const foo = cssMap({\\n\\tdanger: {\\n\\t\\tcolor: 'red',\\n\\t},\\n});\\n```\\n\\n```tsx\\nimport React from 'react';\\nimport { cssMap } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\n// Functions and object methods are not allowed as\\n// values in cssMap.\\n\\nconst styles = cssMap({\\n\\t// Object method\\n\\tget danger() {\\n\\t\\treturn { color: '#123456' };\\n\\t},\\n});\\n\\nconst styles2 = cssMap({\\n\\t// Arrow function\\n\\tdanger: () => {\\n\\t\\tcolor: '#123456';\\n\\t},\\n});\\n\\nfunction customFunction(...args) {\\n\\treturn arguments.join('');\\n}\\n\\nconst styles3 = cssMap({\\n\\tdanger: {\\n\\t\\t// Locally defined function\\n\\t\\tcolor: customFunction('red', 'blue'),\\n\\t\\tbackgroundColor: 'red',\\n\\t},\\n});\\n```\\n\\n```tsx\\nimport React from 'react';\\nimport { cssMap } from '@compiled/react';\\n\\n// Spread elements (\\\"...\\\") cannot be used in cssMap.\\n\\nconst base = {\\n\\tsuccess: {\\n\\t\\tcolor: 'green',\\n\\t},\\n};\\n\\nconst bar = cssMap({\\n\\t...base,\\n\\tdanger: {\\n\\t\\tcolor: 'red',\\n\\t},\\n});\\n```\\n\\n### Correct\\n\\n```tsx\\nimport React from 'react';\\nimport { cssMap } from '@compiled/react';\\n\\n// Literals (strings, numbers, etc.) are used as values\\n// in cssMap.\\n\\nconst styles = cssMap({\\n\\tdanger: {\\n\\t\\tcolor: 'red',\\n\\t\\tbackgroundColor: 'red',\\n\\t},\\n\\tsuccess: {\\n\\t\\tcolor: 'green',\\n\\t\\tbackgroundColor: 'green',\\n\\t},\\n});\\n```\\n\\n```tsx\\nimport React from 'react';\\nimport { cssMap } from '@compiled/react';\\n\\n// A statically evaluable variable (known at build time)\\n// is used here.\\n\\nconst bap = 'blue';\\n\\nconst styles = cssMap({\\n\\tdanger: {\\n\\t\\tcolor: bap,\\n\\t},\\n});\\n```\\n\\n### Options\\n\\n#### `allowedFunctionCalls`: [string, string][]\\n\\nNormally, this ESLint rule forbids all function calls from being used inside the `cssMap(...)`\\nfunction call. For example, this would be invalid using default settings:\\n\\n```tsx\\nimport React from 'react';\\nimport { cssMap } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst styles = cssMap({\\n\\tdanger: {\\n\\t\\tcolor: token('my-color'),\\n\\t\\tbackgroundColor: 'red',\\n\\t},\\n\\tsuccess: {\\n\\t\\tcolor: 'green',\\n\\t},\\n});\\n```\\n\\nIf you would like to whitelist certain functions (e.g. `token` from `@atlaskit/tokens`), you can\\ninclude the names of the functions as part of the `allowedFunctionCalls` argument. Each function\\nshould be represented as a two-element array, with the first element being the package the function\\nis from, and the second element being the name of the function.\\n\\nFor example, with the below configuration, the above code example would be okay.\\n\\n```tsx\\n// eslint.config.cjs\\n\\n// ...\\n      rules: {\\n        '@atlaskit/eslint-plugin-design-system/no-invalid-css-map': [\\n          'error',\\n          {\\n            allowedFunctionCalls: [\\n              ['@atlaskit/tokens', 'token'],\\n            ]\\n          },\\n        ],\\n        // ...\\n      },\\n// ...\\n```\\n\\nPlease note that this ESLint rule only supports whitelisting imports in the form\\n`import { myFunctionOrVariable } from 'my-package'`; we do not currently support whitelisting\\ndefault imports, so `import myFunctionOrVariable from 'my-package'` would always be invalid when\\nused in `cssMap`.\\n\"}",
   ruleName: 'no-invalid-css-map',
   description: 'Ensure that all usages of the `cssMap` API are valid, and enforces the format of the object that is'
 }, {
-  content: "# no-keyframes-tagged-template-expression\n\nDisallows any `keyframes` tagged template expressions that originate from a CSS-in-JS library,\nincluding `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.\n\nTagged template expressions are difficult to parse correctly (which can lead to more frequent build\nfailures or invalid CSS generation), have limited type safety, and lack syntax highlighting. These\nproblems can be avoided by using the preferred call expression syntax instead.\n\nThank you to the\n[Compiled team for their rule](https://github.com/atlassian-labs/compiled/tree/master/packages/eslint-plugin/src/rules/no-keyframes-tagged-template-expression)\nfrom which this was ported.\n\nThe `--fix` option on the command line automatically fixes problems reported by this rule.\n\n## Examples\n\n### Incorrect\n\n```js\nimport { keyframes } from '@compiled/react';\n\nkeyframes`to { opacity: 0 }`;\n\nconst fadeOut = keyframes`\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n`;\n```\n\n### Correct\n\n```js\nimport { keyframes } from '@compiled/react';\n\nkeyframes({ to: { opacity: 0 } });\n\nconst fadeOut = keyframes({\n\tfrom: {\n\t\topacity: 1,\n\t},\n\tto: {\n\t\topacity: 0,\n\t},\n});\n```\n\n## Options\n\n### importSources\n\nBy default, this rule will check `keyframes` 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 { keyframes } from 'other-lib';\n\n// Invalid!\nexport const animation = keyframes``;\n```\n\n## Limitations\n\n- Comments are not fixable\n",
+  content: '{"ruleName":"no-keyframes-tagged-template-expression","description":"Disallows any `keyframes` tagged template expressions that originate from a CSS-in-JS library,","content":"# no-keyframes-tagged-template-expression\\n\\nDisallows any `keyframes` tagged template expressions that originate from a CSS-in-JS library,\\nincluding `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.\\n\\nTagged template expressions are difficult to parse correctly (which can lead to more frequent build\\nfailures or invalid CSS generation), have limited type safety, and lack syntax highlighting. These\\nproblems can be avoided by using the preferred call expression syntax instead.\\n\\nThank you to the\\n[Compiled team for their rule](https://github.com/atlassian-labs/compiled/tree/master/packages/eslint-plugin/src/rules/no-keyframes-tagged-template-expression)\\nfrom which this was ported.\\n\\nThe `--fix` option on the command line automatically fixes problems reported by this rule.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```js\\nimport { keyframes } from \'@compiled/react\';\\n\\nkeyframes`to { opacity: 0 }`;\\n\\nconst fadeOut = keyframes`\\n  from {\\n    opacity: 1;\\n  }\\n  to {\\n    opacity: 0;\\n  }\\n`;\\n```\\n\\n### Correct\\n\\n```js\\nimport { keyframes } from \'@compiled/react\';\\n\\nkeyframes({ to: { opacity: 0 } });\\n\\nconst fadeOut = keyframes({\\n\\tfrom: {\\n\\t\\topacity: 1,\\n\\t},\\n\\tto: {\\n\\t\\topacity: 0,\\n\\t},\\n});\\n```\\n\\n## Options\\n\\n### importSources\\n\\nBy default, this rule will check `keyframes` 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 { keyframes } from \'other-lib\';\\n\\n// Invalid!\\nexport const animation = keyframes``;\\n```\\n\\n## Limitations\\n\\n- Comments are not fixable\\n"}',
   ruleName: 'no-keyframes-tagged-template-expression',
   description: 'Disallows any `keyframes` tagged template expressions that originate from a CSS-in-JS library,'
 }, {
-  content: '# no-legacy-icons\n\nIcons are being updated with new designs, a simplified set of available icons and sizes, as well as\nmore consistent padding and spacing.\n\nThe new icon components allows your components to align with the new visual language - either by\ndefault, or when enabled via a feature flag.\n\n## Examples\n\nThis rule identifies usages of legacy icons from `@atlaskit/icon/glyph` that aren\'t yet migrated to\nthe new icon API. Legacy icons are only permitted when passed into a new "core" or "utility" icon\nfrom `@atlaskit/icon`, `@atlaskit/icon-lab` or `@atlassian/icon-private`, via the\n`LEGACY_fallbackIcon` prop.\n\n### Incorrect\n\n```js\nimport ActivityIcon from \'@atlaskit/icon/glyph/activity\'\n                          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ legacy icon import\n\nimport { IconButton } from \'@atlaskit/button/new\'\n\n<ActivityIcon label="Activity">\n^^^^^^^^^^^^^^^^^^^^^^^ legacy icon\n\n<IconButton icon={ActivityIcon} label="Activity"/>\n                  ^^^^^^^^^^^^^ legacy icon\n```\n\n### Correct\n\n```js\nimport AddIcon from \'@atlaskit/icon/core/add\';\nimport { IconButton } from \'@atlaskit/button/new\';\n\n<AddIcon label="" />;\n<IconButton\n\ticon={(iconProps) => <AddIcon LEGACY_fallbackIcon={AddIconLegacy} {...iconProps} />}\n\tlabel="Add to Cart"\n/>;\n```\n\n## Options\n\nThis rule comes with options to configure which errors display and in what detail - as well as how\nicons should be migrated.\n\n### shouldErrorForAutoMigration\n\nEnables/disables errors for icons that are able to be automatically migrated. Defaults to `true`.\n\n### shouldErrorForManualMigration\n\nEnables/disables errors for icons that cannot be be automatically migrated and need manual review.\nDefaults to `true`.\n\n### shouldUseSafeMigrationMode\n\nWhen `true`, the autofixer will only attempt to migrate icons that are visually similar. Defaults to\n`false`.\n\n### shouldUseMigrationPath\n\nWhen `true`, the autofixer will use feature flagged migration entry-points,\n`@atlaskit/icon/core/migration/`. Defaults to `true`.\n\n### quiet\n\nWhen `true`, the rule will only provide one error per icon usage, stating if the icon can be\nautomatically migrated or not\n',
+  content: '{"ruleName":"no-legacy-icons","description":"Icons are being updated with new designs, a simplified set of available icons and sizes, as well as","content":"# no-legacy-icons\\n\\nIcons are being updated with new designs, a simplified set of available icons and sizes, as well as\\nmore consistent padding and spacing.\\n\\nThe new icon components allows your components to align with the new visual language - either by\\ndefault, or when enabled via a feature flag.\\n\\n## Examples\\n\\nThis rule identifies usages of legacy icons from `@atlaskit/icon/glyph` that aren\'t yet migrated to\\nthe new icon API. Legacy icons are only permitted when passed into a new \\"core\\" or \\"utility\\" icon\\nfrom `@atlaskit/icon`, `@atlaskit/icon-lab` or `@atlassian/icon-private`, via the\\n`LEGACY_fallbackIcon` prop.\\n\\n### Incorrect\\n\\n```js\\nimport ActivityIcon from \'@atlaskit/icon/glyph/activity\'\\n                          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ legacy icon import\\n\\nimport { IconButton } from \'@atlaskit/button/new\'\\n\\n<ActivityIcon label=\\"Activity\\">\\n^^^^^^^^^^^^^^^^^^^^^^^ legacy icon\\n\\n<IconButton icon={ActivityIcon} label=\\"Activity\\"/>\\n                  ^^^^^^^^^^^^^ legacy icon\\n```\\n\\n### Correct\\n\\n```js\\nimport AddIcon from \'@atlaskit/icon/core/add\';\\nimport { IconButton } from \'@atlaskit/button/new\';\\n\\n<AddIcon label=\\"\\" />;\\n<IconButton\\n\\ticon={(iconProps) => <AddIcon LEGACY_fallbackIcon={AddIconLegacy} {...iconProps} />}\\n\\tlabel=\\"Add to Cart\\"\\n/>;\\n```\\n\\n## Options\\n\\nThis rule comes with options to configure which errors display and in what detail - as well as how\\nicons should be migrated.\\n\\n### shouldErrorForAutoMigration\\n\\nEnables/disables errors for icons that are able to be automatically migrated. Defaults to `true`.\\n\\n### shouldErrorForManualMigration\\n\\nEnables/disables errors for icons that cannot be be automatically migrated and need manual review.\\nDefaults to `true`.\\n\\n### shouldUseSafeMigrationMode\\n\\nWhen `true`, the autofixer will only attempt to migrate icons that are visually similar. Defaults to\\n`false`.\\n\\n### shouldUseMigrationPath\\n\\nWhen `true`, the autofixer will use feature flagged migration entry-points,\\n`@atlaskit/icon/core/migration/`. Defaults to `true`.\\n\\n### quiet\\n\\nWhen `true`, the rule will only provide one error per icon usage, stating if the icon can be\\nautomatically migrated or not\\n"}',
   ruleName: 'no-legacy-icons',
   description: 'Icons are being updated with new designs, a simplified set of available icons and sizes, as well as'
 }, {
-  content: "# no-margin\n\nUsing margins to define spacing results in components that can't be readily reused in other contexts\nbreaking the composition model. Instead defining spacing in parents with flex and grid using the\n`gap` property will result in more resilient experiences.\n\n## Examples\n\nThis rule will mark all margin use as violations.\n\n### Incorrect\n\n```tsx\ncss({ margin: '10px' });\n```\n\n### Correct\n\n```tsx\ncss({ gap: token('spacing.100') });\n```\n",
+  content: '{"ruleName":"no-margin","description":"Using margins to define spacing results in components that can\'t be readily reused in other contexts","content":"# no-margin\\n\\nUsing margins to define spacing results in components that can\'t be readily reused in other contexts\\nbreaking the composition model. Instead defining spacing in parents with flex and grid using the\\n`gap` property will result in more resilient experiences.\\n\\n## Examples\\n\\nThis rule will mark all margin use as violations.\\n\\n### Incorrect\\n\\n```tsx\\ncss({ margin: \'10px\' });\\n```\\n\\n### Correct\\n\\n```tsx\\ncss({ gap: token(\'spacing.100\') });\\n```\\n"}',
   ruleName: 'no-margin',
   description: "Using margins to define spacing results in components that can't be readily reused in other contexts"
 }, {
-  content: "# no-nested-styles\n\nDisallows using nested styles. Nested styles can change unexpectedly when child markup changes and\nresult in duplicates when extracting to CSS.\n\n## Examples\n\nThis rule checks for nested styles inside `css` objects. This rule has no options.\n\n### Incorrect\n\n```js\ncss({\n\tdiv: {\n\t\tcolor: 'red',\n\t},\n});\n```\n\n```js\ncss({\n\t'@media (min-width: 480px)': {\n\t\tcolor: 'red',\n\t},\n});\n```\n\n### Correct\n\n```js\ncss({\n\tcolor: 'red',\n\t':hover': {\n\t\tcolor: 'black',\n\t},\n});\n```\n\n```js\nimport { media } from '@atlaskit/primitives';\n\ncss({\n\t[media.above.xs]: {\n\t\tcolor: 'red',\n\t},\n});\n```\n",
+  content: "{\"ruleName\":\"no-nested-styles\",\"description\":\"Disallows using nested styles. Nested styles can change unexpectedly when child markup changes and\",\"content\":\"# no-nested-styles\\n\\nDisallows using nested styles. Nested styles can change unexpectedly when child markup changes and\\nresult in duplicates when extracting to CSS.\\n\\n## Examples\\n\\nThis rule checks for nested styles inside `css` objects. This rule has no options.\\n\\n### Incorrect\\n\\n```js\\ncss({\\n\\tdiv: {\\n\\t\\tcolor: 'red',\\n\\t},\\n});\\n```\\n\\n```js\\ncss({\\n\\t'@media (min-width: 480px)': {\\n\\t\\tcolor: 'red',\\n\\t},\\n});\\n```\\n\\n### Correct\\n\\n```js\\ncss({\\n\\tcolor: 'red',\\n\\t':hover': {\\n\\t\\tcolor: 'black',\\n\\t},\\n});\\n```\\n\\n```js\\nimport { media } from '@atlaskit/primitives';\\n\\ncss({\\n\\t[media.above.xs]: {\\n\\t\\tcolor: 'red',\\n\\t},\\n});\\n```\\n\"}",
   ruleName: 'no-nested-styles',
   description: 'Disallows using nested styles. Nested styles can change unexpectedly when child markup changes and'
 }, {
-  content: "# no-physical-properties\n\nDisallows using physical properties. Physical properties prevent correct support for different\nreading modes and languages and should be avoided. Rule will autofix applicable physical properties\nto instead use\n[logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values).\n\n## Examples\n\nThis rule checks for physical property usage inside of `css` function calls.\n\n### Incorrect\n\n```js\ncss({\n\tleft: 0,\n\tright: 0,\n\ttop: 0,\n\tbottom: 0,\n});\n```\n\n```js\ncss({\n\tmarginLeft: 0,\n});\n```\n\n```js\ncss({\n\ttextAlign: 'left',\n});\n```\n\n### Correct\n\n```js\ncss({\n\tinset: 0,\n});\n```\n\n```js\ncss({\n\tmarginInlineStart: 0,\n});\n```\n\n```js\ncss({\n\ttextAlign: 'start',\n});\n```\n",
+  content: '{"ruleName":"no-physical-properties","description":"Disallows using physical properties. Physical properties prevent correct support for different","content":"# no-physical-properties\\n\\nDisallows using physical properties. Physical properties prevent correct support for different\\nreading modes and languages and should be avoided. Rule will autofix applicable physical properties\\nto instead use\\n[logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values).\\n\\n## Examples\\n\\nThis rule checks for physical property usage inside of `css` function calls.\\n\\n### Incorrect\\n\\n```js\\ncss({\\n\\tleft: 0,\\n\\tright: 0,\\n\\ttop: 0,\\n\\tbottom: 0,\\n});\\n```\\n\\n```js\\ncss({\\n\\tmarginLeft: 0,\\n});\\n```\\n\\n```js\\ncss({\\n\\ttextAlign: \'left\',\\n});\\n```\\n\\n### Correct\\n\\n```js\\ncss({\\n\\tinset: 0,\\n});\\n```\\n\\n```js\\ncss({\\n\\tmarginInlineStart: 0,\\n});\\n```\\n\\n```js\\ncss({\\n\\ttextAlign: \'start\',\\n});\\n```\\n"}',
   ruleName: 'no-physical-properties',
   description: 'Disallows using physical properties. Physical properties prevent correct support for different'
 }, {
-  content: '# no-placeholder\n\nPlaceholders are inherently inaccessible and should not be used. Instead, information about the type\nor formatting of a value should be included in a helper message that is associated to the input.\nThis can be done natively in Atlaskit forms using the form\'s field and messaging components, like\n[this example](https://atlassian.design/components/form/examples#building-a-form) in our form\'s\ndocumentation.\n\nAn exception to this rule is that placeholder text can be used in search fields if it’s accompanied\nby an icon and accessible label. This ensures that people using assistive technologies understand\nwhat type of field it is.\n\n## Examples\n\nThis rule will find violations for when a placeholder is used on an input element.\n\n### Incorrect\n\n```jsx\n<input id="name" name="username" type="text" placeholder="FooBarBaz" />\n                                             ^^^^^^^^^^^ `placeholder` prop should not be used\n```\n\n```jsx\nimport Textfield from \'@atlaskit/textfield\';\n\n<Textfield placeholder="FooBarBaz">\n           ^^^^^^^^^^^ `placeholder` prop should not be used\n```\n\n```jsx\nimport Form, { Field, FormFooter } from \'@atlaskit/form\';\nimport Textarea from \'@atlaskit/textarea\';\n\nexport default function Example(): React.JSX.Element {\n  return (\n    <Form onSubmit={(formState: unknown) => console.log(\'form submitted\', formState)}>\n      <Field label="Comments" name="comments">\n        {({ fieldProps }) => (\n          <Textfield\n            placeholder="Include any thoughts you have about the above blog post."\n            ^^^^^^^^^^^ `placeholder` prop should not be used\n            {...fieldProps}\n          />\n        )}\n      </Field>\n      <FormFooter>\n        <Button type="submit" appearance="primary">\n          Submit\n        </Button>\n      </FormFooter>\n    </Form>\n  );\n}\n```\n\n```jsx\nimport Form, { Field, FormFooter } from \'@atlaskit/form\';\nimport Textarea from \'@atlaskit/textarea\';\n\nexport default function Example(): React.JSX.Element {\n  return (\n    <Form onSubmit={(formState: unknown) => console.log(\'form submitted\', formState)}>\n      <Field\n        label="Comments"\n        name="comments"\n        component={({ fieldProps }) => (\n          <Textfield\n            placeholder="Include any thoughts you have about the above blog post."\n            ^^^^^^^^^^^ `placeholder` prop should not be used\n            {...fieldProps}\n          />\n        )}\n      />\n      <FormFooter>\n        <Button type="submit" appearance="primary">\n          Submit\n        </Button>\n      </FormFooter>\n    </Form>\n  );\n}\n```\n\n### Correct\n\n```jsx\n<input id="name" name="username" type="text" aria-describedby="name__helper" />\n<p id="name__helper">Usernames should be over 8 characters and include upper- and lower-case characters. For example, "FooBarBaz"</p>\n```\n\n```jsx\nimport Textfield from \'@atlaskit/textfield\';\n\n<Textfield id="name" name="username" aria-describedby="name__helper" />\n<p id="name__helper">Usernames should be over 8 characters and include upper- and lower-case characters. For example, "FooBarBaz"</p>\n```\n\n```jsx\nimport Form, { Field, FormFooter, HelperMessage, MessageWrapper } from \'@atlaskit/form\';\nimport Textarea from \'@atlaskit/textarea\';\n\nexport default function Example(): React.JSX.Element {\n  return (\n    <Form onSubmit={(formState: unknown) => console.log(\'form submitted\', formState)}>\n      <Field label="Comments" name="comments">\n        {({ fieldProps }) => (\n          <Fragment>\n            <Textfield {...fieldProps} />\n            <MessageWrapper>\n              <HelperMessage>Include any thoughts you have about the above blog post.</HelperMessage>\n            </MessageWrapper>\n          </Fragment>\n        )}\n      </Field>\n      <FormFooter>\n        <Button type="submit" appearance="primary">\n          Submit\n        </Button>\n      </FormFooter>\n    </Form>\n  );\n}\n```\n\n```jsx\nimport Form, { Field, FormFooter } from \'@atlaskit/form\';\nimport Textarea from \'@atlaskit/textarea\';\n\nexport default function Example(): React.JSX.Element {\n  return (\n    <Form onSubmit={(formState: unknown) => console.log(\'form submitted\', formState)}>\n      <Field\n        label="Comments"\n        name="comments"\n        component={({ fieldProps }) => (\n          <Textfield {...fieldProps} />\n        )}\n        helperMessage="Include any thoughts you have about the above blog post."\n      />\n      <FormFooter>\n        <Button type="submit" appearance="primary">\n          Submit\n        </Button>\n      </FormFooter>\n    </Form>\n  );\n}\n```\n',
+  content: '{"ruleName":"no-placeholder","description":"Placeholders are inherently inaccessible and should not be used. Instead, information about the type","content":"# no-placeholder\\n\\nPlaceholders are inherently inaccessible and should not be used. Instead, information about the type\\nor formatting of a value should be included in a helper message that is associated to the input.\\nThis can be done natively in Atlaskit forms using the form\'s field and messaging components, like\\n[this example](https://atlassian.design/components/form/examples#building-a-form) in our form\'s\\ndocumentation.\\n\\nAn exception to this rule is that placeholder text can be used in search fields if it’s accompanied\\nby an icon and accessible label. This ensures that people using assistive technologies understand\\nwhat type of field it is.\\n\\n## Examples\\n\\nThis rule will find violations for when a placeholder is used on an input element.\\n\\n### Incorrect\\n\\n```jsx\\n<input id=\\"name\\" name=\\"username\\" type=\\"text\\" placeholder=\\"FooBarBaz\\" />\\n                                             ^^^^^^^^^^^ `placeholder` prop should not be used\\n```\\n\\n```jsx\\nimport Textfield from \'@atlaskit/textfield\';\\n\\n<Textfield placeholder=\\"FooBarBaz\\">\\n           ^^^^^^^^^^^ `placeholder` prop should not be used\\n```\\n\\n```jsx\\nimport Form, { Field, FormFooter } from \'@atlaskit/form\';\\nimport Textarea from \'@atlaskit/textarea\';\\n\\nexport default function Example(): React.JSX.Element {\\n  return (\\n    <Form onSubmit={(formState: unknown) => console.log(\'form submitted\', formState)}>\\n      <Field label=\\"Comments\\" name=\\"comments\\">\\n        {({ fieldProps }) => (\\n          <Textfield\\n            placeholder=\\"Include any thoughts you have about the above blog post.\\"\\n            ^^^^^^^^^^^ `placeholder` prop should not be used\\n            {...fieldProps}\\n          />\\n        )}\\n      </Field>\\n      <FormFooter>\\n        <Button type=\\"submit\\" appearance=\\"primary\\">\\n          Submit\\n        </Button>\\n      </FormFooter>\\n    </Form>\\n  );\\n}\\n```\\n\\n```jsx\\nimport Form, { Field, FormFooter } from \'@atlaskit/form\';\\nimport Textarea from \'@atlaskit/textarea\';\\n\\nexport default function Example(): React.JSX.Element {\\n  return (\\n    <Form onSubmit={(formState: unknown) => console.log(\'form submitted\', formState)}>\\n      <Field\\n        label=\\"Comments\\"\\n        name=\\"comments\\"\\n        component={({ fieldProps }) => (\\n          <Textfield\\n            placeholder=\\"Include any thoughts you have about the above blog post.\\"\\n            ^^^^^^^^^^^ `placeholder` prop should not be used\\n            {...fieldProps}\\n          />\\n        )}\\n      />\\n      <FormFooter>\\n        <Button type=\\"submit\\" appearance=\\"primary\\">\\n          Submit\\n        </Button>\\n      </FormFooter>\\n    </Form>\\n  );\\n}\\n```\\n\\n### Correct\\n\\n```jsx\\n<input id=\\"name\\" name=\\"username\\" type=\\"text\\" aria-describedby=\\"name__helper\\" />\\n<p id=\\"name__helper\\">Usernames should be over 8 characters and include upper- and lower-case characters. For example, \\"FooBarBaz\\"</p>\\n```\\n\\n```jsx\\nimport Textfield from \'@atlaskit/textfield\';\\n\\n<Textfield id=\\"name\\" name=\\"username\\" aria-describedby=\\"name__helper\\" />\\n<p id=\\"name__helper\\">Usernames should be over 8 characters and include upper- and lower-case characters. For example, \\"FooBarBaz\\"</p>\\n```\\n\\n```jsx\\nimport Form, { Field, FormFooter, HelperMessage, MessageWrapper } from \'@atlaskit/form\';\\nimport Textarea from \'@atlaskit/textarea\';\\n\\nexport default function Example(): React.JSX.Element {\\n  return (\\n    <Form onSubmit={(formState: unknown) => console.log(\'form submitted\', formState)}>\\n      <Field label=\\"Comments\\" name=\\"comments\\">\\n        {({ fieldProps }) => (\\n          <Fragment>\\n            <Textfield {...fieldProps} />\\n            <MessageWrapper>\\n              <HelperMessage>Include any thoughts you have about the above blog post.</HelperMessage>\\n            </MessageWrapper>\\n          </Fragment>\\n        )}\\n      </Field>\\n      <FormFooter>\\n        <Button type=\\"submit\\" appearance=\\"primary\\">\\n          Submit\\n        </Button>\\n      </FormFooter>\\n    </Form>\\n  );\\n}\\n```\\n\\n```jsx\\nimport Form, { Field, FormFooter } from \'@atlaskit/form\';\\nimport Textarea from \'@atlaskit/textarea\';\\n\\nexport default function Example(): React.JSX.Element {\\n  return (\\n    <Form onSubmit={(formState: unknown) => console.log(\'form submitted\', formState)}>\\n      <Field\\n        label=\\"Comments\\"\\n        name=\\"comments\\"\\n        component={({ fieldProps }) => (\\n          <Textfield {...fieldProps} />\\n        )}\\n        helperMessage=\\"Include any thoughts you have about the above blog post.\\"\\n      />\\n      <FormFooter>\\n        <Button type=\\"submit\\" appearance=\\"primary\\">\\n          Submit\\n        </Button>\\n      </FormFooter>\\n    </Form>\\n  );\\n}\\n```\\n"}',
   ruleName: 'no-placeholder',
   description: 'Placeholders are inherently inaccessible and should not be used. Instead, information about the type'
 }, {
-  content: "# no-pseudo-class-in-select-styles\n\nThis ESlint rule disallows pseudo classes in the `styles` prop for `@atlaskit/select` component.\nInstead, developers should use the `components` API with `xcss` props for styling pseudo-states.\n\n### Incorrect\n\n```tsx\nimport Select from '@atlaskit/select';\n\n// ❌ Inline styles with pseudo-class\n<Select\n\tstyles={{\n\t\tcontrol: (base) => ({\n\t\t\t...base,\n\t\t\t':hover': { backgroundColor: 'blue' },\n\t\t}),\n\t}}\n/>;\n\n// ❌ Variable-defined styles with pseudo-class\nconst selectStyles = {\n\tcontrol: (base) => ({\n\t\t...base,\n\t\t':focus': { borderColor: 'red' },\n\t}),\n};\n<Select styles={selectStyles} />;\n\n// ❌ Pseudo class in spread operation\nconst styles = {\n\t':hover': { backgroundColor: 'green' },\n};\n\n<Select\n\tstyles={{\n\t\toption: (base) => ({\n\t\t\t...base,\n\t\t\t...styles,\n\t\t}),\n\t}}\n/>;\n```\n\n### Correct\n\n```tsx\n// ✅ Use normal CSS properties without pseudo-classes\nimport Select from '@atlaskit/select';\n\n<Select\n\tstyles={{\n\t\tcontrol: (base) => ({\n\t\t\t...base,\n\t\t\tbackgroundColor: 'white',\n\t\t\tborderColor: 'gray',\n\t\t}),\n\t}}\n/>;\n\n// ✅ Use components API with xcss prop\nimport { cssMap } from '@compiled/react';\nimport Select, { components } from '@atlaskit/select';\n\nconst controlStyles = cssMap({\n\troot: {\n\t\t'&:hover': {\n\t\t\tbackgroundColor: 'white',\n\t\t},\n\t},\n});\n\n<Select\n\tcomponents={{\n\t\tControl: (props) => <components.Control {...props} xcss={controlStyles.root} />,\n\t}}\n/>;\n```\n",
+  content: "{\"ruleName\":\"no-pseudo-class-in-select-styles\",\"description\":\"This ESlint rule disallows pseudo classes in the `styles` prop for `@atlaskit/select` component.\",\"content\":\"# no-pseudo-class-in-select-styles\\n\\nThis ESlint rule disallows pseudo classes in the `styles` prop for `@atlaskit/select` component.\\nInstead, developers should use the `components` API with `xcss` props for styling pseudo-states.\\n\\n### Incorrect\\n\\n```tsx\\nimport Select from '@atlaskit/select';\\n\\n// ❌ Inline styles with pseudo-class\\n<Select\\n\\tstyles={{\\n\\t\\tcontrol: (base) => ({\\n\\t\\t\\t...base,\\n\\t\\t\\t':hover': { backgroundColor: 'blue' },\\n\\t\\t}),\\n\\t}}\\n/>;\\n\\n// ❌ Variable-defined styles with pseudo-class\\nconst selectStyles = {\\n\\tcontrol: (base) => ({\\n\\t\\t...base,\\n\\t\\t':focus': { borderColor: 'red' },\\n\\t}),\\n};\\n<Select styles={selectStyles} />;\\n\\n// ❌ Pseudo class in spread operation\\nconst styles = {\\n\\t':hover': { backgroundColor: 'green' },\\n};\\n\\n<Select\\n\\tstyles={{\\n\\t\\toption: (base) => ({\\n\\t\\t\\t...base,\\n\\t\\t\\t...styles,\\n\\t\\t}),\\n\\t}}\\n/>;\\n```\\n\\n### Correct\\n\\n```tsx\\n// ✅ Use normal CSS properties without pseudo-classes\\nimport Select from '@atlaskit/select';\\n\\n<Select\\n\\tstyles={{\\n\\t\\tcontrol: (base) => ({\\n\\t\\t\\t...base,\\n\\t\\t\\tbackgroundColor: 'white',\\n\\t\\t\\tborderColor: 'gray',\\n\\t\\t}),\\n\\t}}\\n/>;\\n\\n// ✅ Use components API with xcss prop\\nimport { cssMap } from '@compiled/react';\\nimport Select, { components } from '@atlaskit/select';\\n\\nconst controlStyles = cssMap({\\n\\troot: {\\n\\t\\t'&:hover': {\\n\\t\\t\\tbackgroundColor: 'white',\\n\\t\\t},\\n\\t},\\n});\\n\\n<Select\\n\\tcomponents={{\\n\\t\\tControl: (props) => <components.Control {...props} xcss={controlStyles.root} />,\\n\\t}}\\n/>;\\n```\\n\"}",
   ruleName: 'no-pseudo-class-in-select-styles',
   description: 'This ESlint rule disallows pseudo classes in the `styles` prop for `@atlaskit/select` component.'
 }, {
-  content: '# no-separator-with-list-elements\n\n## No Separator with List Elements\n\nThis ESLint rule warns when the `separator` prop is used with `as="li"`, `as="ol"`, or `as="dl"` in\nthe `Inline` component from `@atlaskit/primitives`.\n\n### Examples\n\n#### Incorrect\n\n```tsx\n<Inline as="li" separator="/">Content</Inline>\n\t\t\t\t^^^^^^^^^^^^^ separator prop is used with `as="li"`, `as="ol"`, or `as="dl"` in the Inline component\n```\n\n## Correct\n\n```tsx\n<Inline as="li">Content</Inline>\n```\n',
+  content: '{"ruleName":"no-separator-with-list-elements","description":"This ESLint rule warns when the `separator` prop is used with `as=\\"li\\"`, `as=\\"ol\\"`, or `as=\\"dl\\"` in","content":"# no-separator-with-list-elements\\n\\n## No Separator with List Elements\\n\\nThis ESLint rule warns when the `separator` prop is used with `as=\\"li\\"`, `as=\\"ol\\"`, or `as=\\"dl\\"` in\\nthe `Inline` component from `@atlaskit/primitives`.\\n\\n### Examples\\n\\n#### Incorrect\\n\\n```tsx\\n<Inline as=\\"li\\" separator=\\"/\\">Content</Inline>\\n\\t\\t\\t\\t^^^^^^^^^^^^^ separator prop is used with `as=\\"li\\"`, `as=\\"ol\\"`, or `as=\\"dl\\"` in the Inline component\\n```\\n\\n## Correct\\n\\n```tsx\\n<Inline as=\\"li\\">Content</Inline>\\n```\\n"}',
   ruleName: 'no-separator-with-list-elements',
   description: 'This ESLint rule warns when the `separator` prop is used with `as="li"`, `as="ol"`, or `as="dl"` in'
 }, {
-  content: "# no-styled-tagged-template-expression\n\nDisallows any `styled` tagged template expressions that originate from a CSS-in-JS library,\nincluding `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.\n\nTagged template expressions are difficult to parse correctly (which can lead to more frequent build\nfailures or invalid CSS generation), have limited type safety, and lack syntax highlighting. These\nproblems can be avoided by using the preferred call expression syntax instead.\n\nThe `--fix` option on the command line automatically fixes problems reported by this rule.\n\n## Examples\n\n### Incorrect\n\n```js\nimport { styled } from '@compiled/react';\n\nconst InlinedStyles = styled.div`\n\tcolor: blue;\n`;\n\nconst MultilineStyles = styled.div`\n\tcolor: blue;\n\tfont-weight: 500;\n`;\n\nconst ComposedStyles = styled(InlinedStyles)`\n\tfont-weight: 500;\n`;\n\nconst DynamicStyles = styled.div`\n\tcolor: ${(props) => props.color};\n\t${(props) => (props.disabled ? 'opacity: 0.8' : 'opacity: 1')}\n`;\n```\n\n### Correct\n\n```js\nimport { styled } from '@compiled/react';\n\nconst InlinedStyles = styled.div({\n\tcolor: 'blue',\n});\n\nconst MultilineStyles = styled.div({\n\tcolor: 'blue',\n\tfontWeight: 500,\n});\n\nconst ComposedStyles = styled(InlinedStyles)({\n\tfontWeight: 500,\n});\n\nconst DynamicStyles = styled.div(\n\t{\n\t\tcolor: (props) => props.color,\n\t},\n\t(props) => (props.disabled ? 'opacity: 0.8' : 'opacity: 1'),\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\n## Limitations\n\n- Comments are not fixable.\n- Component selectors are not fixable for `styled-components`.\n\nDo not migrate to this object syntax manually, it is invalid `styled-components`.\n\n```tsx\nconst Button = styled.button``;\nconst Wrapper = styled.div({\n  color: 'red',\n  [`${Button}`]: {\n    color: 'blue',\n  },\n});\n<Wrapper><Button /><Wrapper>\n```\n\nInstead, style the button directly—make it clear that you're styling that button.\n\n```tsx\nconst buttonStyles = css({ color: 'blue' });\nconst Wrapper = styled.div({\n\tcolor: 'red',\n});\n\n<Wrapper>\n\t<button css={buttonStyles} />\n</Wrapper>;\n```\n\nIf that's not feasible, you can use data attributes, but these will result in failing the UI Styling\nStandard around nested styles, pushing the error down the road.\n\n```tsx\nconst Wrapper = styled.div({\n\tcolor: 'red',\n\t'[data-component-selector=\"my.button\"]': {\n\t\tcolor: 'blue',\n\t},\n});\n\n<Wrapper>\n\t<button data-component-selector=\"my.button\" />\n</Wrapper>;\n```\n",
+  content: "{\"ruleName\":\"no-styled-tagged-template-expression\",\"description\":\"Disallows any `styled` tagged template expressions that originate from a CSS-in-JS library,\",\"content\":\"# no-styled-tagged-template-expression\\n\\nDisallows any `styled` tagged template expressions that originate from a CSS-in-JS library,\\nincluding `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.\\n\\nTagged template expressions are difficult to parse correctly (which can lead to more frequent build\\nfailures or invalid CSS generation), have limited type safety, and lack syntax highlighting. These\\nproblems can be avoided by using the preferred call expression syntax instead.\\n\\nThe `--fix` option on the command line automatically fixes problems reported by this rule.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```js\\nimport { styled } from '@compiled/react';\\n\\nconst InlinedStyles = styled.div`\\n\\tcolor: blue;\\n`;\\n\\nconst MultilineStyles = styled.div`\\n\\tcolor: blue;\\n\\tfont-weight: 500;\\n`;\\n\\nconst ComposedStyles = styled(InlinedStyles)`\\n\\tfont-weight: 500;\\n`;\\n\\nconst DynamicStyles = styled.div`\\n\\tcolor: ${(props) => props.color};\\n\\t${(props) => (props.disabled ? 'opacity: 0.8' : 'opacity: 1')}\\n`;\\n```\\n\\n### Correct\\n\\n```js\\nimport { styled } from '@compiled/react';\\n\\nconst InlinedStyles = styled.div({\\n\\tcolor: 'blue',\\n});\\n\\nconst MultilineStyles = styled.div({\\n\\tcolor: 'blue',\\n\\tfontWeight: 500,\\n});\\n\\nconst ComposedStyles = styled(InlinedStyles)({\\n\\tfontWeight: 500,\\n});\\n\\nconst DynamicStyles = styled.div(\\n\\t{\\n\\t\\tcolor: (props) => props.color,\\n\\t},\\n\\t(props) => (props.disabled ? 'opacity: 0.8' : 'opacity: 1'),\\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\\n## Limitations\\n\\n- Comments are not fixable.\\n- Component selectors are not fixable for `styled-components`.\\n\\nDo not migrate to this object syntax manually, it is invalid `styled-components`.\\n\\n```tsx\\nconst Button = styled.button``;\\nconst Wrapper = styled.div({\\n  color: 'red',\\n  [`${Button}`]: {\\n    color: 'blue',\\n  },\\n});\\n<Wrapper><Button /><Wrapper>\\n```\\n\\nInstead, style the button directly—make it clear that you're styling that button.\\n\\n```tsx\\nconst buttonStyles = css({ color: 'blue' });\\nconst Wrapper = styled.div({\\n\\tcolor: 'red',\\n});\\n\\n<Wrapper>\\n\\t<button css={buttonStyles} />\\n</Wrapper>;\\n```\\n\\nIf that's not feasible, you can use data attributes, but these will result in failing the UI Styling\\nStandard around nested styles, pushing the error down the road.\\n\\n```tsx\\nconst Wrapper = styled.div({\\n\\tcolor: 'red',\\n\\t'[data-component-selector=\\\"my.button\\\"]': {\\n\\t\\tcolor: 'blue',\\n\\t},\\n});\\n\\n<Wrapper>\\n\\t<button data-component-selector=\\\"my.button\\\" />\\n</Wrapper>;\\n```\\n\"}",
   ruleName: 'no-styled-tagged-template-expression',
   description: 'Disallows any `styled` tagged template expressions that originate from a CSS-in-JS library,'
 }, {
-  content: "# no-to-match-snapshot\n\nThis rule disallows the use of `toMatchSnapshot()` in favor of `toMatchInlineSnapshot()`.\n\n## Examples\n\n### Incorrect\n\n```tsx\nexpect(container).toMatchSnapshot();\nexpect(container).toMatchSnapshot('snapshot-name');\nexpect(screen.getByTestId('test')).toMatchSnapshot();\n```\n\n### Correct\n\n```tsx\nexpect(container).toMatchInlineSnapshot(`<div>test</div>`);\nexpect(container).toMatchInlineSnapshot(`\n  <div>\n    <span>test</span>\n  </div>\n`);\n```\n\n## Rationale\n\nThe use of `toMatchSnapshot()` is being deprecated in favor of `toMatchInlineSnapshot()` as part of\n[DSTRFC-038](https://hello.atlassian.net/wiki/spaces/DST/pages/6105892000/DSTRFC-038+-+Removal+of+.toMatchSnapshot).\nInline snapshots provide several benefits:\n\n- They keep the snapshot value close to the test code, making it easier to review changes\n- They reduce the number of separate snapshot files that need to be maintained\n- They make it clearer what the expected output is when reading the test\n\n## When not to use it\n\nThis rule should be enabled for all test files to ensure consistent snapshot testing practices\nacross the codebase.\n",
+  content: '{"ruleName":"no-to-match-snapshot","description":"This rule disallows the use of `toMatchSnapshot()` in favor of `toMatchInlineSnapshot()`.","content":"# no-to-match-snapshot\\n\\nThis rule disallows the use of `toMatchSnapshot()` in favor of `toMatchInlineSnapshot()`.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nexpect(container).toMatchSnapshot();\\nexpect(container).toMatchSnapshot(\'snapshot-name\');\\nexpect(screen.getByTestId(\'test\')).toMatchSnapshot();\\n```\\n\\n### Correct\\n\\n```tsx\\nexpect(container).toMatchInlineSnapshot(`<div>test</div>`);\\nexpect(container).toMatchInlineSnapshot(`\\n  <div>\\n    <span>test</span>\\n  </div>\\n`);\\n```\\n\\n## Rationale\\n\\nThe use of `toMatchSnapshot()` is being deprecated in favor of `toMatchInlineSnapshot()` as part of\\n[DSTRFC-038](https://hello.atlassian.net/wiki/spaces/DST/pages/6105892000/DSTRFC-038+-+Removal+of+.toMatchSnapshot).\\nInline snapshots provide several benefits:\\n\\n- They keep the snapshot value close to the test code, making it easier to review changes\\n- They reduce the number of separate snapshot files that need to be maintained\\n- They make it clearer what the expected output is when reading the test\\n\\n## When not to use it\\n\\nThis rule should be enabled for all test files to ensure consistent snapshot testing practices\\nacross the codebase.\\n"}',
   ruleName: 'no-to-match-snapshot',
   description: 'This rule disallows the use of `toMatchSnapshot()` in favor of `toMatchInlineSnapshot()`.'
 }, {
-  content: "# no-unsafe-design-token-usage\n\nUsing design tokens in an unsafe way risks the health of the system and will effect how fast your\ncodebase can migrate between versions.\n\n## Examples\n\nThis rule will mark design token usage that is not statically and locally analyzable, as well as\ndesign tokens that are considered deleted.\n\n## Incorrect\n\n```js\nconst textColor = 'red';\n\ncss({ color: textColor });\n             ^^^^^^^^^ must be a string literal\n```\n\n```js\ncss({ boxShadow: '0px 1px 1px var(--ds-accent-subtleBlue)' });\n                              ^^^^^^^^^^^^^^^^^^^^^^^^^^ must use the token() function\n```\n\n## Correct\n\n```js\nimport { token } from '@atlaskit/tokens';\n\ncss({ boxShadow: token('elevation.shadow.card') });\n\ncss`\n\tcolor: ${(token('color.text.highemphasis'), N20)};\n`;\n```\n\n## Options\n\nThis rule comes with options to aid in migrating to design tokens.\n\n### fallbackUsage\n\n- `forced`: Fallback values must always be provided\n- `none`: Fallback values must never be provided. (Fixer will remove if provided)\n- `optional`: Fallbacks are optional\n\n### shouldEnforceFallbacks (deprecated)\n\nWhen `true` the rule will mark token function usage as violations when fallbacks aren't defined.\nWhen `false` the rule will mark token function usage as violations when fallbacks are defined.\n",
+  content: '{"ruleName":"no-unsafe-design-token-usage","description":"Using design tokens in an unsafe way risks the health of the system and will effect how fast your","content":"# no-unsafe-design-token-usage\\n\\nUsing design tokens in an unsafe way risks the health of the system and will effect how fast your\\ncodebase can migrate between versions.\\n\\n## Examples\\n\\nThis rule will mark design token usage that is not statically and locally analyzable, as well as\\ndesign tokens that are considered deleted.\\n\\n## Incorrect\\n\\n```js\\nconst textColor = \'red\';\\n\\ncss({ color: textColor });\\n             ^^^^^^^^^ must be a string literal\\n```\\n\\n```js\\ncss({ boxShadow: \'0px 1px 1px var(--ds-accent-subtleBlue)\' });\\n                              ^^^^^^^^^^^^^^^^^^^^^^^^^^ must use the token() function\\n```\\n\\n## Correct\\n\\n```js\\nimport { token } from \'@atlaskit/tokens\';\\n\\ncss({ boxShadow: token(\'elevation.shadow.card\') });\\n\\ncss`\\n\\tcolor: ${(token(\'color.text.highemphasis\'), N20)};\\n`;\\n```\\n\\n## Options\\n\\nThis rule comes with options to aid in migrating to design tokens.\\n\\n### fallbackUsage\\n\\n- `forced`: Fallback values must always be provided\\n- `none`: Fallback values must never be provided. (Fixer will remove if provided)\\n- `optional`: Fallbacks are optional\\n\\n### shouldEnforceFallbacks (deprecated)\\n\\nWhen `true` the rule will mark token function usage as violations when fallbacks aren\'t defined.\\nWhen `false` the rule will mark token function usage as violations when fallbacks are defined.\\n"}',
   ruleName: 'no-unsafe-design-token-usage',
   description: 'Using design tokens in an unsafe way risks the health of the system and will effect how fast your'
 }, {
-  content: '# no-unsafe-inline-snapshot\n\nThis rule enforces guardrails on `toMatchInlineSnapshot()` usage to prevent snapshots from becoming\ntoo large or containing internal implementation details.\n\n## Examples\n\n### Incorrect\n\n```tsx\n// Snapshot exceeds 100 lines\nexpect(container).toMatchInlineSnapshot(`\n  ${Array(101).fill(\'<div>line</div>\').join(\'\\n\')}\n`);\n\n// Contains className attribute\nexpect(container).toMatchInlineSnapshot(`<div className="my-class">test</div>`);\n\n// Contains style attribute\nexpect(container).toMatchInlineSnapshot(`<div style="color: red">test</div>`);\n\n// Contains style block\nexpect(container).toMatchInlineSnapshot(`\n  <div>\n    <style>.test { color: red; }</style>\n  </div>\n`);\n```\n\n### Correct\n\n```tsx\n// Small snapshot without internal details\nexpect(container).toMatchInlineSnapshot(`<div>test</div>`);\n\n// className marked as REDACTED\nexpect(container).toMatchInlineSnapshot(`<div className="REDACTED">test</div>`);\n\n// style marked as REDACTED\nexpect(container).toMatchInlineSnapshot(`<div style="REDACTED">test</div>`);\n\n// style block containing REDACTED\nexpect(container).toMatchInlineSnapshot(`\n  <div>\n    <style>REDACTED</style>\n  </div>\n`);\n```\n\n## Rationale\n\nInline snapshots should focus on testing the structure and content of components, not their internal\nimplementation details. This rule helps ensure that:\n\n1. **Snapshots remain maintainable**: By limiting snapshots to 100 lines, they stay readable and\n   easier to review\n2. **Implementation details are hidden**: className and style attributes are implementation details\n   that can change frequently and make snapshots brittle\n3. **Tests focus on behavior**: By excluding internal details, tests focus on what the component\n   renders, not how it\'s styled\n\nIf you need to include className or style information in a snapshot for testing purposes, mark them\nas `"REDACTED"` to indicate that these are intentionally excluded implementation details.\n\n## When not to use it\n\nThis rule should be enabled for all test files to ensure consistent snapshot testing practices\nacross the codebase.\n',
+  content: '{"ruleName":"no-unsafe-inline-snapshot","description":"This rule enforces guardrails on `toMatchInlineSnapshot()` usage to prevent snapshots from becoming","content":"# no-unsafe-inline-snapshot\\n\\nThis rule enforces guardrails on `toMatchInlineSnapshot()` usage to prevent snapshots from becoming\\ntoo large or containing internal implementation details.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\n// Snapshot exceeds 100 lines\\nexpect(container).toMatchInlineSnapshot(`\\n  ${Array(101).fill(\'<div>line</div>\').join(\'\\\\n\')}\\n`);\\n\\n// Contains className attribute\\nexpect(container).toMatchInlineSnapshot(`<div className=\\"my-class\\">test</div>`);\\n\\n// Contains style attribute\\nexpect(container).toMatchInlineSnapshot(`<div style=\\"color: red\\">test</div>`);\\n\\n// Contains style block\\nexpect(container).toMatchInlineSnapshot(`\\n  <div>\\n    <style>.test { color: red; }</style>\\n  </div>\\n`);\\n```\\n\\n### Correct\\n\\n```tsx\\n// Small snapshot without internal details\\nexpect(container).toMatchInlineSnapshot(`<div>test</div>`);\\n\\n// className marked as REDACTED\\nexpect(container).toMatchInlineSnapshot(`<div className=\\"REDACTED\\">test</div>`);\\n\\n// style marked as REDACTED\\nexpect(container).toMatchInlineSnapshot(`<div style=\\"REDACTED\\">test</div>`);\\n\\n// style block containing REDACTED\\nexpect(container).toMatchInlineSnapshot(`\\n  <div>\\n    <style>REDACTED</style>\\n  </div>\\n`);\\n```\\n\\n## Rationale\\n\\nInline snapshots should focus on testing the structure and content of components, not their internal\\nimplementation details. This rule helps ensure that:\\n\\n1. **Snapshots remain maintainable**: By limiting snapshots to 100 lines, they stay readable and\\n   easier to review\\n2. **Implementation details are hidden**: className and style attributes are implementation details\\n   that can change frequently and make snapshots brittle\\n3. **Tests focus on behavior**: By excluding internal details, tests focus on what the component\\n   renders, not how it\'s styled\\n\\nIf you need to include className or style information in a snapshot for testing purposes, mark them\\nas `\\"REDACTED\\"` to indicate that these are intentionally excluded implementation details.\\n\\n## When not to use it\\n\\nThis rule should be enabled for all test files to ensure consistent snapshot testing practices\\nacross the codebase.\\n"}',
   ruleName: 'no-unsafe-inline-snapshot',
   description: 'This rule enforces guardrails on `toMatchInlineSnapshot()` usage to prevent snapshots from becoming'
 }, {
-  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\';\\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"
 }, {
-  content: "# no-unsupported-drag-and-drop-libraries\n\nWe encourage the use of Pragmatic drag and drop to power all drag and drop experiences - from table\nto external files. Pragmatic drag and drop is a performance optimised drag and drop framework that\nhas been designed to power any drag and drop experience on any tech stack. Please avoid using\nalternative drag and drop libraries as it will lead to poorer performance, increased maintenance\ncosts, (likely) worse accessibility and fragmented user experiences. See\nhttps://staging.atlassian.design/components/pragmatic-drag-and-drop/\n\n## Examples\n\nLibraries such as `react-beautiful-dnd` and `@atlassian/jira-dnd` that are no longer supported, as\nwell as external libraries such as `react-dnd` and `react-sortable-hoc`.\n\n### Incorrect\n\n```ts\nimport { DraggableLocation } from 'react-beautiful-dnd';\n                                   ^^^^^^^^^^^^^^^^^^^\n\nimport { useDrag } from 'react-dnd'\n                         ^^^^^^^^^\n```\n",
+  content: '{"ruleName":"no-unsupported-drag-and-drop-libraries","description":"We encourage the use of Pragmatic drag and drop to power all drag and drop experiences - from table","content":"# no-unsupported-drag-and-drop-libraries\\n\\nWe encourage the use of Pragmatic drag and drop to power all drag and drop experiences - from table\\nto external files. Pragmatic drag and drop is a performance optimised drag and drop framework that\\nhas been designed to power any drag and drop experience on any tech stack. Please avoid using\\nalternative drag and drop libraries as it will lead to poorer performance, increased maintenance\\ncosts, (likely) worse accessibility and fragmented user experiences. See\\nhttps://staging.atlassian.design/components/pragmatic-drag-and-drop/\\n\\n## Examples\\n\\nLibraries such as `react-beautiful-dnd` and `@atlassian/jira-dnd` that are no longer supported, as\\nwell as external libraries such as `react-dnd` and `react-sortable-hoc`.\\n\\n### Incorrect\\n\\n```ts\\nimport { DraggableLocation } from \'react-beautiful-dnd\';\\n                                   ^^^^^^^^^^^^^^^^^^^\\n\\nimport { useDrag } from \'react-dnd\'\\n                         ^^^^^^^^^\\n```\\n"}',
   ruleName: 'no-unsupported-drag-and-drop-libraries',
   description: 'We encourage the use of Pragmatic drag and drop to power all drag and drop experiences - from table'
 }, {
-  content: "# no-unsupported-selectors-in-select-styles\n\nThis ESLint rule disallows unsupported CSS selectors in the `styles` prop for `@atlaskit/select`\ncomponent. This includes pseudo-classes, pseudo-elements, combinators, attribute selectors, and\nat-rules. Instead, developers should use the `components` API with `xcss` props for styling these\nadvanced selectors.\n\n## Unsupported Selectors\n\n- **Pseudo-classes/elements**: `:hover`, `:focus`, `:active`, `:disabled`, `:before`, `:after`, etc.\n- **Attribute selectors**: `[type=\"text\"]`, `[disabled]`, etc.\n- **Combinators**: `>` (child), `+` (adjacent sibling), `~` (general sibling), ` ` (descendant)\n- **Universal selector**: `*`\n- **ID selector**: `#myId`\n- **Class selector**: `.myClass`\n- **At-rules**: `@media`, `@supports`, etc.\n- **Parent selector**: `&`\n- **Namespace separator**: `|`\n- **Attribute operators**: `^=`, `$=`, `=`\n\n## Incorrect\n\n```tsx\nimport Select from '@atlaskit/select';\n\n// ❌ Pseudo-classes\n<Select\n\tstyles={{\n\t\tcontrol: (base) => ({\n\t\t\t...base,\n\t\t\t':hover': { backgroundColor: 'blue' },\n\t\t\t':focus': { borderColor: 'red' },\n\t\t}),\n\t}}\n/>;\n\n// ❌ Pseudo-elements\n<Select\n\tstyles={{\n\t\tcontrol: (base) => ({\n\t\t\t...base,\n\t\t\t':before': { content: '\"\"' },\n\t\t\t':after': { content: '\"*\"' },\n\t\t}),\n\t}}\n/>;\n\n// ❌ Attribute selectors\n<Select\n\tstyles={{\n\t\tinput: (base) => ({\n\t\t\t...base,\n\t\t\t'[disabled]': { opacity: 0.5 },\n\t\t}),\n\t}}\n/>;\n\n// ❌ Combinators\n<Select\n\tstyles={{\n\t\tcontrol: (base) => ({\n\t\t\t...base,\n\t\t\t'> div': { padding: '8px' },\n\t\t}),\n\t}}\n/>;\n\n// ❌ Variable-defined styles with unsupported selectors\nconst selectStyles = {\n\tcontrol: (base) => ({\n\t\t...base,\n\t\t':focus-visible': { outline: '2px solid blue' },\n\t}),\n};\n<Select styles={selectStyles} />;\n\n// ❌ Unsupported selectors in spread operation\nconst hoverStyles = {\n\t':hover': { backgroundColor: 'green' },\n};\n\n<Select\n\tstyles={{\n\t\toption: (base) => ({\n\t\t\t...base,\n\t\t\t...hoverStyles,\n\t\t}),\n\t}}\n/>;\n\n// ❌ Unsupported selectors in conditional expressions\n<Select\n\tstyles={{\n\t\toption: (base, { isFocused }) => ({\n\t\t\t...base,\n\t\t\t...(isFocused ? { ':hover': { backgroundColor: 'blue' } } : undefined),\n\t\t}),\n\t}}\n/>;\n```\n\n## Correct\n\n```tsx\n// ✅ Use normal CSS properties without unsupported selectors\nimport Select from '@atlaskit/select';\n\n<Select\n\tstyles={{\n\t\tcontrol: (base) => ({\n\t\t\t...base,\n\t\t\tbackgroundColor: 'white',\n\t\t\tborderColor: 'gray',\n\t\t\tpadding: '8px',\n\t\t}),\n\t}}\n/>;\n\n// ✅ Use components API with xcss prop for pseudo-classes\nimport { cssMap } from '@compiled/react';\nimport Select, { components } from '@atlaskit/select';\n\nconst controlStyles = cssMap({\n\troot: {\n\t\t'&:hover': {\n\t\t\tbackgroundColor: 'white',\n\t\t},\n\t\t'&:focus': {\n\t\t\tborderColor: 'blue',\n\t\t},\n\t},\n});\n\n<Select\n\tcomponents={{\n\t\tControl: (props) => <components.Control {...props} xcss={controlStyles.root} />,\n\t}}\n/>;\n\n// ✅ Use components API with xcss prop for pseudo-elements\nconst controlWithPseudoStyles = cssMap({\n\troot: {\n\t\t'&:before': {\n\t\t\tcontent: '\"\"',\n\t\t\tposition: 'absolute',\n\t\t},\n\t\t'&:after': {\n\t\t\tcontent: '\"*\"',\n\t\t\tcolor: 'red',\n\t\t},\n\t},\n});\n\n<Select\n\tcomponents={{\n\t\tControl: (props) => <components.Control {...props} xcss={controlWithPseudoStyles.root} />,\n\t}}\n/>;\n\n// ✅ Use components API with xcss prop for complex selectors\nconst complexStyles = cssMap({\n\troot: {\n\t\t'& > div': {\n\t\t\tpadding: '8px',\n\t\t},\n\t\t'&[disabled]': {\n\t\t\topacity: 0.5,\n\t\t},\n\t},\n});\n\n<Select\n\tcomponents={{\n\t\tControl: (props) => <components.Control {...props} xcss={complexStyles.root} />,\n\t}}\n/>;\n```\n",
+  content: "{\"ruleName\":\"no-unsupported-selectors-in-select-styles\",\"description\":\"This ESLint rule disallows unsupported CSS selectors in the `styles` prop for `@atlaskit/select`\",\"content\":\"# no-unsupported-selectors-in-select-styles\\n\\nThis ESLint rule disallows unsupported CSS selectors in the `styles` prop for `@atlaskit/select`\\ncomponent. This includes pseudo-classes, pseudo-elements, combinators, attribute selectors, and\\nat-rules. Instead, developers should use the `components` API with `xcss` props for styling these\\nadvanced selectors.\\n\\n## Unsupported Selectors\\n\\n- **Pseudo-classes/elements**: `:hover`, `:focus`, `:active`, `:disabled`, `:before`, `:after`, etc.\\n- **Attribute selectors**: `[type=\\\"text\\\"]`, `[disabled]`, etc.\\n- **Combinators**: `>` (child), `+` (adjacent sibling), `~` (general sibling), ` ` (descendant)\\n- **Universal selector**: `*`\\n- **ID selector**: `#myId`\\n- **Class selector**: `.myClass`\\n- **At-rules**: `@media`, `@supports`, etc.\\n- **Parent selector**: `&`\\n- **Namespace separator**: `|`\\n- **Attribute operators**: `^=`, `$=`, `=`\\n\\n## Incorrect\\n\\n```tsx\\nimport Select from '@atlaskit/select';\\n\\n// ❌ Pseudo-classes\\n<Select\\n\\tstyles={{\\n\\t\\tcontrol: (base) => ({\\n\\t\\t\\t...base,\\n\\t\\t\\t':hover': { backgroundColor: 'blue' },\\n\\t\\t\\t':focus': { borderColor: 'red' },\\n\\t\\t}),\\n\\t}}\\n/>;\\n\\n// ❌ Pseudo-elements\\n<Select\\n\\tstyles={{\\n\\t\\tcontrol: (base) => ({\\n\\t\\t\\t...base,\\n\\t\\t\\t':before': { content: '\\\"\\\"' },\\n\\t\\t\\t':after': { content: '\\\"*\\\"' },\\n\\t\\t}),\\n\\t}}\\n/>;\\n\\n// ❌ Attribute selectors\\n<Select\\n\\tstyles={{\\n\\t\\tinput: (base) => ({\\n\\t\\t\\t...base,\\n\\t\\t\\t'[disabled]': { opacity: 0.5 },\\n\\t\\t}),\\n\\t}}\\n/>;\\n\\n// ❌ Combinators\\n<Select\\n\\tstyles={{\\n\\t\\tcontrol: (base) => ({\\n\\t\\t\\t...base,\\n\\t\\t\\t'> div': { padding: '8px' },\\n\\t\\t}),\\n\\t}}\\n/>;\\n\\n// ❌ Variable-defined styles with unsupported selectors\\nconst selectStyles = {\\n\\tcontrol: (base) => ({\\n\\t\\t...base,\\n\\t\\t':focus-visible': { outline: '2px solid blue' },\\n\\t}),\\n};\\n<Select styles={selectStyles} />;\\n\\n// ❌ Unsupported selectors in spread operation\\nconst hoverStyles = {\\n\\t':hover': { backgroundColor: 'green' },\\n};\\n\\n<Select\\n\\tstyles={{\\n\\t\\toption: (base) => ({\\n\\t\\t\\t...base,\\n\\t\\t\\t...hoverStyles,\\n\\t\\t}),\\n\\t}}\\n/>;\\n\\n// ❌ Unsupported selectors in conditional expressions\\n<Select\\n\\tstyles={{\\n\\t\\toption: (base, { isFocused }) => ({\\n\\t\\t\\t...base,\\n\\t\\t\\t...(isFocused ? { ':hover': { backgroundColor: 'blue' } } : undefined),\\n\\t\\t}),\\n\\t}}\\n/>;\\n```\\n\\n## Correct\\n\\n```tsx\\n// ✅ Use normal CSS properties without unsupported selectors\\nimport Select from '@atlaskit/select';\\n\\n<Select\\n\\tstyles={{\\n\\t\\tcontrol: (base) => ({\\n\\t\\t\\t...base,\\n\\t\\t\\tbackgroundColor: 'white',\\n\\t\\t\\tborderColor: 'gray',\\n\\t\\t\\tpadding: '8px',\\n\\t\\t}),\\n\\t}}\\n/>;\\n\\n// ✅ Use components API with xcss prop for pseudo-classes\\nimport { cssMap } from '@compiled/react';\\nimport Select, { components } from '@atlaskit/select';\\n\\nconst controlStyles = cssMap({\\n\\troot: {\\n\\t\\t'&:hover': {\\n\\t\\t\\tbackgroundColor: 'white',\\n\\t\\t},\\n\\t\\t'&:focus': {\\n\\t\\t\\tborderColor: 'blue',\\n\\t\\t},\\n\\t},\\n});\\n\\n<Select\\n\\tcomponents={{\\n\\t\\tControl: (props) => <components.Control {...props} xcss={controlStyles.root} />,\\n\\t}}\\n/>;\\n\\n// ✅ Use components API with xcss prop for pseudo-elements\\nconst controlWithPseudoStyles = cssMap({\\n\\troot: {\\n\\t\\t'&:before': {\\n\\t\\t\\tcontent: '\\\"\\\"',\\n\\t\\t\\tposition: 'absolute',\\n\\t\\t},\\n\\t\\t'&:after': {\\n\\t\\t\\tcontent: '\\\"*\\\"',\\n\\t\\t\\tcolor: 'red',\\n\\t\\t},\\n\\t},\\n});\\n\\n<Select\\n\\tcomponents={{\\n\\t\\tControl: (props) => <components.Control {...props} xcss={controlWithPseudoStyles.root} />,\\n\\t}}\\n/>;\\n\\n// ✅ Use components API with xcss prop for complex selectors\\nconst complexStyles = cssMap({\\n\\troot: {\\n\\t\\t'& > div': {\\n\\t\\t\\tpadding: '8px',\\n\\t\\t},\\n\\t\\t'&[disabled]': {\\n\\t\\t\\topacity: 0.5,\\n\\t\\t},\\n\\t},\\n});\\n\\n<Select\\n\\tcomponents={{\\n\\t\\tControl: (props) => <components.Control {...props} xcss={complexStyles.root} />,\\n\\t}}\\n/>;\\n```\\n\"}",
   ruleName: 'no-unsupported-selectors-in-select-styles',
   description: 'This ESLint rule disallows unsupported CSS selectors in the `styles` prop for `@atlaskit/select`'
 }, {
-  content: "# no-unused-css-map\n\nDetects unused styles in cssMap objects to help maintain clean codebases by identifying style\nproperties that are defined but never referenced in the code. This prevents dead code accumulation\nand improves bundle size.\n\n## Examples\n\n### Incorrect\n\n```tsx\nimport { cssMap } from '@compiled/react';\nimport { Box } from '@atlaskit/primitives';\nimport { token } from '@atlaskit/tokens';\n\nconst styles = cssMap({\n\tdanger: { color: token('color.background.accent.red.subtle') },\n\tunused: { color: token('color.background.accent.gray.subtlest') }, // This style is never used\n});\n\nconst Component = () => <Box xcss={styles.danger}>Error</Box>;\n\n// All styles are unused\nconst otherStyles = cssMap({\n\tstyle1: { color: token('color.background.accent.red.subtle') },\n\tstyle2: { color: token('color.background.accent.blue.subtle') },\n});\n\nconst AnotherComponent = () => <div>Hello World</div>;\n```\n\n### Correct\n\n```tsx\nimport { cssMap } from '@compiled/react';\nimport { Box } from '@atlaskit/primitives';\nimport { token } from '@atlaskit/tokens';\n\nconst styles = cssMap({\n\tdanger: { color: token('color.background.accent.red.subtle') },\n\tsuccess: { color: token('color.background.accent.green.subtle') },\n});\n\nconst Component = () => (\n\t<div>\n\t\t<Box xcss={styles.danger}>Error</Box>\n\t\t<Box xcss={styles.success}>Success</Box>\n\t</div>\n);\n```\n\n#### Dynamic Access Handling\n\nThe rule is **conservative with dynamic access** to prevent false positives:\n\n```tsx\n// ✅ No errors reported - rule detects dynamic access\nconst styles = cssMap({\n\tred: { color: 'red' },\n\tblue: { color: 'blue' },\n\tgreen: { color: 'green' }, // Could be used via styles[color]\n});\n\nconst Component = ({ color }) => <Box xcss={styles[color]} />;\n```\n\nWhen any dynamic access is detected (`styles[variable]`, `styles['literal']`), the rule\nconservatively assumes all styles in the cssMap could be used and won't report any as unused.\n",
+  content: "{\"ruleName\":\"no-unused-css-map\",\"description\":\"Detects unused styles in cssMap objects to help maintain clean codebases by identifying style\",\"content\":\"# no-unused-css-map\\n\\nDetects unused styles in cssMap objects to help maintain clean codebases by identifying style\\nproperties that are defined but never referenced in the code. This prevents dead code accumulation\\nand improves bundle size.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { cssMap } from '@compiled/react';\\nimport { Box } from '@atlaskit/primitives';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst styles = cssMap({\\n\\tdanger: { color: token('color.background.accent.red.subtle') },\\n\\tunused: { color: token('color.background.accent.gray.subtlest') }, // This style is never used\\n});\\n\\nconst Component = () => <Box xcss={styles.danger}>Error</Box>;\\n\\n// All styles are unused\\nconst otherStyles = cssMap({\\n\\tstyle1: { color: token('color.background.accent.red.subtle') },\\n\\tstyle2: { color: token('color.background.accent.blue.subtle') },\\n});\\n\\nconst AnotherComponent = () => <div>Hello World</div>;\\n```\\n\\n### Correct\\n\\n```tsx\\nimport { cssMap } from '@compiled/react';\\nimport { Box } from '@atlaskit/primitives';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst styles = cssMap({\\n\\tdanger: { color: token('color.background.accent.red.subtle') },\\n\\tsuccess: { color: token('color.background.accent.green.subtle') },\\n});\\n\\nconst Component = () => (\\n\\t<div>\\n\\t\\t<Box xcss={styles.danger}>Error</Box>\\n\\t\\t<Box xcss={styles.success}>Success</Box>\\n\\t</div>\\n);\\n```\\n\\n#### Dynamic Access Handling\\n\\nThe rule is **conservative with dynamic access** to prevent false positives:\\n\\n```tsx\\n// ✅ No errors reported - rule detects dynamic access\\nconst styles = cssMap({\\n\\tred: { color: 'red' },\\n\\tblue: { color: 'blue' },\\n\\tgreen: { color: 'green' }, // Could be used via styles[color]\\n});\\n\\nconst Component = ({ color }) => <Box xcss={styles[color]} />;\\n```\\n\\nWhen any dynamic access is detected (`styles[variable]`, `styles['literal']`), the rule\\nconservatively assumes all styles in the cssMap could be used and won't report any as unused.\\n\"}",
   ruleName: 'no-unused-css-map',
   description: 'Detects unused styles in cssMap objects to help maintain clean codebases by identifying style'
 }, {
-  content: '# prefer-primitives\n\nUsing primitives allows you to delete bespoke component code and replace it with ready made\nsolutions made by the Atlassian Design System Team.\n\n## Examples\n\nThis rule marks code as violations when it may be able to be replaced with a primitive component.\n\n### Incorrect\n\n```js\n<div />\n^^^^^^^\n\n<Component>\n  <div css={someStyles}></div>\n  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n</Component>\n```\n\n### Correct\n\n```js\n<Box />\n```\n\n```js\n<Component>\n\t<Box xcss={someStyles}></Box>\n</Component>\n```\n',
+  content: '{"ruleName":"prefer-primitives","description":"Using primitives allows you to delete bespoke component code and replace it with ready made","content":"# prefer-primitives\\n\\nUsing primitives allows you to delete bespoke component code and replace it with ready made\\nsolutions made by the Atlassian Design System Team.\\n\\n## Examples\\n\\nThis rule marks code as violations when it may be able to be replaced with a primitive component.\\n\\n### Incorrect\\n\\n```js\\n<div />\\n^^^^^^^\\n\\n<Component>\\n  <div css={someStyles}></div>\\n  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^\\n</Component>\\n```\\n\\n### Correct\\n\\n```js\\n<Box />\\n```\\n\\n```js\\n<Component>\\n\\t<Box xcss={someStyles}></Box>\\n</Component>\\n```\\n"}',
   ruleName: 'prefer-primitives',
   description: 'Using primitives allows you to delete bespoke component code and replace it with ready made'
 }, {
-  content: '# use-button-group-label\n\nButtonGroup should have an accessible name or a reference to it, so that upon opening, users of\nassistive technologies could have contextual information of interaction with current element.\n\n## Examples\n\nThis rule will indicate user with warning to strongly recommend usage of either `label` or `titleId`\nprop.\n\n### Incorrect\n\n```tsx\n<ButtonGroup>\n ^^^^^^^^^^^ Missing either `label` or `titleId` prop.\n  <Button>Save</Button>\n  <Button>Edit</Button>\n  <Button>Delete</Button>\n</ButtonGroup>\n\n<ButtonGroup label="">\n             ^^^^^ `label` prop is missing accessible name value.\n  <Button>Save</Button>\n  <Button>Edit</Button>\n  <Button>Delete</Button>\n</ButtonGroup>\n\n<h2 id="button-group-title">ButtonGroup content title</hi>\n<ButtonGroup titleId="">\n             ^^^^^^^ `titleId` prop is missing reference value.\n  <Button>Save</Button>\n  <Button>Edit</Button>\n  <Button>Delete</Button>\n</ButtonGroup>\n\n<h2 id="button-group-title">ButtonGroup content title</h2>\n<ButtonGroup titleId="button-group-title" label="">\n             ^^^^^^^                      ^^^^^ Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.\n  <Button>Save</Button>\n  <Button>Edit</Button>\n  <Button>Delete</Button>\n</ButtonGroup>\n```\n\n### Correct\n\n```tsx\n<ButtonGroup label="ButtonGroup content title">\n  <Button>Save</Button>\n  <Button>Edit</Button>\n  <Button>Delete</Button>\n</ButtonGroup>\n\n<h2 id="button-group-title">ButtonGroup content title</h2>\n<ButtonGroup titleId="button-group-title">\n  <Button>Save</Button>\n  <Button>Edit</Button>\n  <Button>Delete</Button>\n</ButtonGroup>\n```\n',
+  content: '{"ruleName":"use-button-group-label","description":"ButtonGroup should have an accessible name or a reference to it, so that upon opening, users of","content":"# use-button-group-label\\n\\nButtonGroup should have an accessible name or a reference to it, so that upon opening, users of\\nassistive technologies could have contextual information of interaction with current element.\\n\\n## Examples\\n\\nThis rule will indicate user with warning to strongly recommend usage of either `label` or `titleId`\\nprop.\\n\\n### Incorrect\\n\\n```tsx\\n<ButtonGroup>\\n ^^^^^^^^^^^ Missing either `label` or `titleId` prop.\\n  <Button>Save</Button>\\n  <Button>Edit</Button>\\n  <Button>Delete</Button>\\n</ButtonGroup>\\n\\n<ButtonGroup label=\\"\\">\\n             ^^^^^ `label` prop is missing accessible name value.\\n  <Button>Save</Button>\\n  <Button>Edit</Button>\\n  <Button>Delete</Button>\\n</ButtonGroup>\\n\\n<h2 id=\\"button-group-title\\">ButtonGroup content title</hi>\\n<ButtonGroup titleId=\\"\\">\\n             ^^^^^^^ `titleId` prop is missing reference value.\\n  <Button>Save</Button>\\n  <Button>Edit</Button>\\n  <Button>Delete</Button>\\n</ButtonGroup>\\n\\n<h2 id=\\"button-group-title\\">ButtonGroup content title</h2>\\n<ButtonGroup titleId=\\"button-group-title\\" label=\\"\\">\\n             ^^^^^^^                      ^^^^^ Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.\\n  <Button>Save</Button>\\n  <Button>Edit</Button>\\n  <Button>Delete</Button>\\n</ButtonGroup>\\n```\\n\\n### Correct\\n\\n```tsx\\n<ButtonGroup label=\\"ButtonGroup content title\\">\\n  <Button>Save</Button>\\n  <Button>Edit</Button>\\n  <Button>Delete</Button>\\n</ButtonGroup>\\n\\n<h2 id=\\"button-group-title\\">ButtonGroup content title</h2>\\n<ButtonGroup titleId=\\"button-group-title\\">\\n  <Button>Save</Button>\\n  <Button>Edit</Button>\\n  <Button>Delete</Button>\\n</ButtonGroup>\\n```\\n"}',
   ruleName: 'use-button-group-label',
   description: 'ButtonGroup should have an accessible name or a reference to it, so that upon opening, users of'
 }, {
-  content: "# use-character-counter-field\n\nSuggests using `CharacterCounterField` or `CharacterCounter` from `@atlaskit/form` when `Textfield`\nor `Textarea` components are used with `maxLength` or `minLength` props.\n\n## Why is this important?\n\nWhen using character limits on text inputs, it's important to provide real-time feedback to users\nabout:\n\n- How many characters they can still enter\n- Whether they've met a minimum character requirement\n- Whether they're approaching or exceeding a maximum character limit\n\nThe `CharacterCounterField` and `CharacterCounter` components provide this accessibility benefit out\nof the box with:\n\n- Visual character count display\n- Screen reader announcements for character count changes\n- Clear indication of when limits are approaching or exceeded\n- Proper ARIA attributes for assistive technologies\n\n## Examples\n\n### Inside Form context\n\nUse `CharacterCounterField` when your input is within a Form.\n\n#### Incorrect ❌\n\n```tsx\nimport Form, { Field } from '@atlaskit/form';\nimport Textfield from '@atlaskit/textfield';\n\n<Form onSubmit={handleSubmit}>\n\t<Field name=\"name\" label=\"Name\">\n\t\t{({ fieldProps }) => <Textfield {...fieldProps} maxLength={50} />}\n\t</Field>\n</Form>;\n```\n\n#### Correct ✅\n\n```tsx\nimport Form, { CharacterCounterField } from '@atlaskit/form';\nimport Textfield from '@atlaskit/textfield';\n\n<Form onSubmit={handleSubmit}>\n\t<CharacterCounterField name=\"name\" label=\"Name\" maxCharacters={50}>\n\t\t{({ fieldProps }) => <Textfield {...fieldProps} />}\n\t</CharacterCounterField>\n</Form>;\n```\n\n### Outside Form context (standalone)\n\nUse `CharacterCounter` for custom implementations outside of Form context.\n\n#### Incorrect ❌\n\n```tsx\nimport Textfield from '@atlaskit/textfield';\n\n<Textfield label=\"Name\" maxLength={50} />;\n```\n\n#### Correct ✅\n\n```tsx\nimport { useState } from 'react';\nimport { CharacterCounter, Label } from '@atlaskit/form';\nimport Textfield from '@atlaskit/textfield';\n\nconst [value, setValue] = useState('');\nconst maxCharacters = 50;\nconst isTooLong = value.length > maxCharacters;\n\n<>\n\t<Label htmlFor=\"name-field\">Name</Label>\n\t<Textfield\n\t\tid=\"name-field\"\n\t\tvalue={value}\n\t\tonChange={(e) => setValue(e.currentTarget.value)}\n\t\taria-describedby=\"name-field-character-counter\"\n\t\tisInvalid={isTooLong}\n\t/>\n\t<CharacterCounter\n\t\tcurrentValue={value}\n\t\tmaxCharacters={maxCharacters}\n\t\tinputId=\"name-field\"\n\t\tshouldShowAsError={isTooLong}\n\t/>\n</>;\n```\n\n## Options\n\nThis rule has no options.\n\n## When Not To Use It\n\n- If you're not using character limits on your text inputs, this rule won't apply.\n\nIf you are using character limits, it's strongly recommended to use `CharacterCounterField` (within\nForm) or `CharacterCounter` (standalone) for better accessibility.\n\n## Related Rules\n\n- [use-correct-field](../use-correct-field/README.md)\n",
+  content: '{"ruleName":"use-character-counter-field","description":"Suggests using `CharacterCounterField` or `CharacterCounter` from `@atlaskit/form` when `Textfield`","content":"# use-character-counter-field\\n\\nSuggests using `CharacterCounterField` or `CharacterCounter` from `@atlaskit/form` when `Textfield`\\nor `Textarea` components are used with `maxLength` or `minLength` props.\\n\\n## Why is this important?\\n\\nWhen using character limits on text inputs, it\'s important to provide real-time feedback to users\\nabout:\\n\\n- How many characters they can still enter\\n- Whether they\'ve met a minimum character requirement\\n- Whether they\'re approaching or exceeding a maximum character limit\\n\\nThe `CharacterCounterField` and `CharacterCounter` components provide this accessibility benefit out\\nof the box with:\\n\\n- Visual character count display\\n- Screen reader announcements for character count changes\\n- Clear indication of when limits are approaching or exceeded\\n- Proper ARIA attributes for assistive technologies\\n\\n## Examples\\n\\n### Inside Form context\\n\\nUse `CharacterCounterField` when your input is within a Form.\\n\\n#### Incorrect ❌\\n\\n```tsx\\nimport Form, { Field } from \'@atlaskit/form\';\\nimport Textfield from \'@atlaskit/textfield\';\\n\\n<Form onSubmit={handleSubmit}>\\n\\t<Field name=\\"name\\" label=\\"Name\\">\\n\\t\\t{({ fieldProps }) => <Textfield {...fieldProps} maxLength={50} />}\\n\\t</Field>\\n</Form>;\\n```\\n\\n#### Correct ✅\\n\\n```tsx\\nimport Form, { CharacterCounterField } from \'@atlaskit/form\';\\nimport Textfield from \'@atlaskit/textfield\';\\n\\n<Form onSubmit={handleSubmit}>\\n\\t<CharacterCounterField name=\\"name\\" label=\\"Name\\" maxCharacters={50}>\\n\\t\\t{({ fieldProps }) => <Textfield {...fieldProps} />}\\n\\t</CharacterCounterField>\\n</Form>;\\n```\\n\\n### Outside Form context (standalone)\\n\\nUse `CharacterCounter` for custom implementations outside of Form context.\\n\\n#### Incorrect ❌\\n\\n```tsx\\nimport Textfield from \'@atlaskit/textfield\';\\n\\n<Textfield label=\\"Name\\" maxLength={50} />;\\n```\\n\\n#### Correct ✅\\n\\n```tsx\\nimport { useState } from \'react\';\\nimport { CharacterCounter, Label } from \'@atlaskit/form\';\\nimport Textfield from \'@atlaskit/textfield\';\\n\\nconst [value, setValue] = useState(\'\');\\nconst maxCharacters = 50;\\nconst isTooLong = value.length > maxCharacters;\\n\\n<>\\n\\t<Label htmlFor=\\"name-field\\">Name</Label>\\n\\t<Textfield\\n\\t\\tid=\\"name-field\\"\\n\\t\\tvalue={value}\\n\\t\\tonChange={(e) => setValue(e.currentTarget.value)}\\n\\t\\taria-describedby=\\"name-field-character-counter\\"\\n\\t\\tisInvalid={isTooLong}\\n\\t/>\\n\\t<CharacterCounter\\n\\t\\tcurrentValue={value}\\n\\t\\tmaxCharacters={maxCharacters}\\n\\t\\tinputId=\\"name-field\\"\\n\\t\\tshouldShowAsError={isTooLong}\\n\\t/>\\n</>;\\n```\\n\\n## Options\\n\\nThis rule has no options.\\n\\n## When Not To Use It\\n\\n- If you\'re not using character limits on your text inputs, this rule won\'t apply.\\n\\nIf you are using character limits, it\'s strongly recommended to use `CharacterCounterField` (within\\nForm) or `CharacterCounter` (standalone) for better accessibility.\\n\\n## Related Rules\\n\\n- [use-correct-field](../use-correct-field/README.md)\\n"}',
   ruleName: 'use-character-counter-field',
   description: 'Suggests using `CharacterCounterField` or `CharacterCounter` from `@atlaskit/form` when `Textfield`'
 }, {
-  content: "# use-correct-field\n\nThe correct field component should be used with certain components.\n\n## Examples\n\n### Incorrect\n\n```tsx\nimport { Field } from '@atlaskit/form';\nimport Checkbox from '@atlaskit/checkbox';\nimport Range from '@atlaskit/range';\nimport Toggle from '@atlaskit/toggle';\n\n<Field>\n\t{({ fieldProps }) => <Checkbox {...fieldProps} />}\n</Field>\n<Field>\n\t{({ fieldProps }) => <Range {...fieldProps} />}\n</Field>\n<Field>\n\t{({ fieldProps }) => <Toggle {...fieldProps} />}\n</Field>\n ^^^^^^^^\n```\n\n### Correct\n\n```tsx\nimport { CheckboxField, RangeField } from '@atlaskit/form';\nimport Checkbox from '@atlaskit/checkbox';\nimport Range from '@atlaskit/range';\nimport Toggle from '@atlaskit/toggle';\n\n<CheckboxField>{({ fieldProps }) => <Checkbox {...fieldProps} />}</CheckboxField>;\n<RangeField>{({ fieldProps }) => <Range {...fieldProps} />}</RangeField>;\n<CheckboxField>{({ fieldProps }) => <Toggle {...fieldProps} />}</CheckboxField>;\n```\n",
+  content: "{\"ruleName\":\"use-correct-field\",\"description\":\"The correct field component should be used with certain components.\",\"content\":\"# use-correct-field\\n\\nThe correct field component should be used with certain components.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { Field } from '@atlaskit/form';\\nimport Checkbox from '@atlaskit/checkbox';\\nimport Range from '@atlaskit/range';\\nimport Toggle from '@atlaskit/toggle';\\n\\n<Field>\\n\\t{({ fieldProps }) => <Checkbox {...fieldProps} />}\\n</Field>\\n<Field>\\n\\t{({ fieldProps }) => <Range {...fieldProps} />}\\n</Field>\\n<Field>\\n\\t{({ fieldProps }) => <Toggle {...fieldProps} />}\\n</Field>\\n ^^^^^^^^\\n```\\n\\n### Correct\\n\\n```tsx\\nimport { CheckboxField, RangeField } from '@atlaskit/form';\\nimport Checkbox from '@atlaskit/checkbox';\\nimport Range from '@atlaskit/range';\\nimport Toggle from '@atlaskit/toggle';\\n\\n<CheckboxField>{({ fieldProps }) => <Checkbox {...fieldProps} />}</CheckboxField>;\\n<RangeField>{({ fieldProps }) => <Range {...fieldProps} />}</RangeField>;\\n<CheckboxField>{({ fieldProps }) => <Toggle {...fieldProps} />}</CheckboxField>;\\n```\\n\"}",
   ruleName: 'use-correct-field',
   description: 'The correct field component should be used with certain components.'
 }, {
-  content: '# use-cx-function-in-xcss\n\nEnforces using the cx function when combining styles in an xcss prop to maintain correct typing.\n[Docs link](https://atlassian.design/components/css/overview#cx).\n\n## Examples\n\nThis rule checks for xcss props with multiple values and enforces using cx function in these.\n\n### Incorrect\n\n```js\n<Box xcss={[styles.root, styles.bordered]} />\n```\n\n### Correct\n\n```js\n<Box xcss={cx(styles.root, styles.bordered)} />\n```\n',
+  content: '{"ruleName":"use-cx-function-in-xcss","description":"Enforces using the cx function when combining styles in an xcss prop to maintain correct typing.","content":"# use-cx-function-in-xcss\\n\\nEnforces using the cx function when combining styles in an xcss prop to maintain correct typing.\\n[Docs link](https://atlassian.design/components/css/overview#cx).\\n\\n## Examples\\n\\nThis rule checks for xcss props with multiple values and enforces using cx function in these.\\n\\n### Incorrect\\n\\n```js\\n<Box xcss={[styles.root, styles.bordered]} />\\n```\\n\\n### Correct\\n\\n```js\\n<Box xcss={cx(styles.root, styles.bordered)} />\\n```\\n"}',
   ruleName: 'use-cx-function-in-xcss',
   description: 'Enforces using the cx function when combining styles in an xcss prop to maintain correct typing.'
 }, {
-  content: '# use-datetime-picker-calendar-button\n\nThe date picker and datetime picker should show the calendar button for users to ensure it is\naccessible for all users.\n\n## Examples\n\nThis rule will warn makers if the prop is not set to show the calendar button.\n\n### Incorrect\n\n```tsx\n<DatePicker />\n ^^^^^^^^^^ `shouldShowCalendarButton` should be set to `true` to make date picker accessible.\n\n<DatePicker shouldShowCalendarButton={false} />\n            ^^^^^^^^^^^^^^^^^^^^^^^^ `shouldShowCalendarButton` should be set to `true` to make date picker accessible.\n\n<DateTimePicker />\n ^^^^^^^^^^ `shouldShowCalendarButton` should be set to `true` to make date picker accessible.\n\n<DateTimePicker\n  datePickerProps={{\n\t\tshouldShowCalendarButton: false\n\t\t^^^^^^^^^^^^^^^^^^^^^^^^ `shouldShowCalendarButton` should be set to `true` to make date picker accessible.\n\t}}\n/>\n```\n\n### Correct\n\n```tsx\n<DatePicker shouldShowCalendarButton />\n\n<DateTimePicker datePickerProps={{\n\tshouldShowCalendarButton: true\n}} />\n```\n',
+  content: '{"ruleName":"use-datetime-picker-calendar-button","description":"The date picker and datetime picker should show the calendar button for users to ensure it is","content":"# use-datetime-picker-calendar-button\\n\\nThe date picker and datetime picker should show the calendar button for users to ensure it is\\naccessible for all users.\\n\\n## Examples\\n\\nThis rule will warn makers if the prop is not set to show the calendar button.\\n\\n### Incorrect\\n\\n```tsx\\n<DatePicker />\\n ^^^^^^^^^^ `shouldShowCalendarButton` should be set to `true` to make date picker accessible.\\n\\n<DatePicker shouldShowCalendarButton={false} />\\n            ^^^^^^^^^^^^^^^^^^^^^^^^ `shouldShowCalendarButton` should be set to `true` to make date picker accessible.\\n\\n<DateTimePicker />\\n ^^^^^^^^^^ `shouldShowCalendarButton` should be set to `true` to make date picker accessible.\\n\\n<DateTimePicker\\n  datePickerProps={{\\n\\t\\tshouldShowCalendarButton: false\\n\\t\\t^^^^^^^^^^^^^^^^^^^^^^^^ `shouldShowCalendarButton` should be set to `true` to make date picker accessible.\\n\\t}}\\n/>\\n```\\n\\n### Correct\\n\\n```tsx\\n<DatePicker shouldShowCalendarButton />\\n\\n<DateTimePicker datePickerProps={{\\n\\tshouldShowCalendarButton: true\\n}} />\\n```\\n"}',
   ruleName: 'use-datetime-picker-calendar-button',
   description: 'The date picker and datetime picker should show the calendar button for users to ensure it is'
 }, {
-  content: '# use-drawer-label\n\nDrawer should have an accessible name or a reference to it, so that upon opening, users of assistive\ntechnologies could have contextual information of interaction with current element.\n\n## Examples\n\nThis rule will indicate user with warning to strongly recommend usage of either `label` or `titleId`\nprop.\n\n### Incorrect\n\n```tsx\n<Drawer>\n ^^^^^^ Missing either `label` or `titleId` prop.\n  Drawer content\n</Drawer>\n\n<Drawer label>\n        ^^^^^ `label` prop is missing value.\n  Drawer content\n</Drawer>\n\n<Drawer label="">\n        ^^^^^ `label` prop is missing accessible name value.\n  Drawer content\n</Drawer>\n\n<Drawer titleId>\n        ^^^^^^^ `titleId` prop is missing reference value.\n  <h1 id="drawer-title">Drawer content title</hi>\n</Drawer>\n\n<Drawer titleId="">\n        ^^^^^^^ `titleId` prop is missing reference value.\n  <h1 id="drawer-title">Drawer content title</hi>\n</Drawer>\n\n<Drawer titleId="drawer-title" label="">\n        ^^^^^^^                ^^^^^ Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.\n  <h1 id="drawer-title">Drawer content title</hi>\n</Drawer>\n```\n\n### Correct\n\n```tsx\n<Drawer label="Drawer content title">\n  Drawer content\n</Drawer>\n\n<Drawer titleId="drawer-title">\n  <h1 id="drawer-title">Drawer content title</hi>\n</Drawer>\n```\n',
+  content: '{"ruleName":"use-drawer-label","description":"Drawer should have an accessible name or a reference to it, so that upon opening, users of assistive","content":"# use-drawer-label\\n\\nDrawer should have an accessible name or a reference to it, so that upon opening, users of assistive\\ntechnologies could have contextual information of interaction with current element.\\n\\n## Examples\\n\\nThis rule will indicate user with warning to strongly recommend usage of either `label` or `titleId`\\nprop.\\n\\n### Incorrect\\n\\n```tsx\\n<Drawer>\\n ^^^^^^ Missing either `label` or `titleId` prop.\\n  Drawer content\\n</Drawer>\\n\\n<Drawer label>\\n        ^^^^^ `label` prop is missing value.\\n  Drawer content\\n</Drawer>\\n\\n<Drawer label=\\"\\">\\n        ^^^^^ `label` prop is missing accessible name value.\\n  Drawer content\\n</Drawer>\\n\\n<Drawer titleId>\\n        ^^^^^^^ `titleId` prop is missing reference value.\\n  <h1 id=\\"drawer-title\\">Drawer content title</hi>\\n</Drawer>\\n\\n<Drawer titleId=\\"\\">\\n        ^^^^^^^ `titleId` prop is missing reference value.\\n  <h1 id=\\"drawer-title\\">Drawer content title</hi>\\n</Drawer>\\n\\n<Drawer titleId=\\"drawer-title\\" label=\\"\\">\\n        ^^^^^^^                ^^^^^ Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.\\n  <h1 id=\\"drawer-title\\">Drawer content title</hi>\\n</Drawer>\\n```\\n\\n### Correct\\n\\n```tsx\\n<Drawer label=\\"Drawer content title\\">\\n  Drawer content\\n</Drawer>\\n\\n<Drawer titleId=\\"drawer-title\\">\\n  <h1 id=\\"drawer-title\\">Drawer content title</hi>\\n</Drawer>\\n```\\n"}',
   ruleName: 'use-drawer-label',
   description: 'Drawer should have an accessible name or a reference to it, so that upon opening, users of assistive'
 }, {
-  content: '# use-field-message-wrapper\n\nMessaging components in the field from the form package must be wrapped using the message wrapper\ncomponent.\n\n## Examples\n\nThis rule marks code as violations when it finds form messaging components inside the field\ncomponent that are not wrapped by a message wrapper component.\n\n### Incorrect\n\n```jsx\nimport Form, { ErrorMessage, Field, HelperMessage, ValidMessage } from \'@atlaskit/form\';\nimport TextField from \'@atlaskit/textfield\';\n\n<Field\n\tname="password"\n\tlabel="Password"\n\tdefaultValue=""\n\tisRequired\n\tvalidate={(value) => (value && value.length < 8 ? \'TOO_SHORT\' : undefined)}\n>\n\t{({ fieldProps, error, valid, meta }) => (\n\t\t<Fragment>\n\t\t\t<TextField type="password" {...fieldProps} />\n\t\t\t{error && !valid && (\n\t\t\t\t<HelperMessage>\n\t\t\t\t\tUse 8 or more characters with a mix of letters, numbers & symbols.\n\t\t\t\t</HelperMessage>\n\t\t\t)}\n\t\t\t{error && <ErrorMessage>Enter a password that\'s longer than 8 characters.</ErrorMessage>}\n\t\t\t{valid && meta.dirty ? <ValidMessage>Awesome password!</ValidMessage> : null}\n\t\t</Fragment>\n\t)}\n</Field>;\n```\n\n### Correct\n\n```jsx\nimport Form, {\n\tErrorMessage,\n\tField,\n\tHelperMessage,\n\tMessageWrapper,\n\tValidMessage,\n} from \'@atlaskit/form\';\nimport TextField from \'@atlaskit/textfield\';\n\n<Field\n\tname="password"\n\tlabel="Password"\n\tdefaultValue=""\n\tisRequired\n\tvalidate={(value) => (value && value.length < 8 ? \'TOO_SHORT\' : undefined)}\n>\n\t{({ fieldProps, error, valid, meta }) => (\n\t\t<Fragment>\n\t\t\t<TextField type="password" {...fieldProps} />\n\t\t\t<MessageWrapper>\n\t\t\t\t{error && !valid && (\n\t\t\t\t\t<HelperMessage>\n\t\t\t\t\t\tUse 8 or more characters with a mix of letters, numbers & symbols.\n\t\t\t\t\t</HelperMessage>\n\t\t\t\t)}\n\t\t\t\t{error && <ErrorMessage>Enter a password that\'s longer than 8 characters.</ErrorMessage>}\n\t\t\t\t{valid && meta.dirty ? <ValidMessage>Awesome password!</ValidMessage> : null}\n\t\t\t</MessageWrapper>\n\t\t</Fragment>\n\t)}\n</Field>;\n```\n',
+  content: '{"ruleName":"use-field-message-wrapper","description":"Messaging components in the field from the form package must be wrapped using the message wrapper","content":"# use-field-message-wrapper\\n\\nMessaging components in the field from the form package must be wrapped using the message wrapper\\ncomponent.\\n\\n## Examples\\n\\nThis rule marks code as violations when it finds form messaging components inside the field\\ncomponent that are not wrapped by a message wrapper component.\\n\\n### Incorrect\\n\\n```jsx\\nimport Form, { ErrorMessage, Field, HelperMessage, ValidMessage } from \'@atlaskit/form\';\\nimport TextField from \'@atlaskit/textfield\';\\n\\n<Field\\n\\tname=\\"password\\"\\n\\tlabel=\\"Password\\"\\n\\tdefaultValue=\\"\\"\\n\\tisRequired\\n\\tvalidate={(value) => (value && value.length < 8 ? \'TOO_SHORT\' : undefined)}\\n>\\n\\t{({ fieldProps, error, valid, meta }) => (\\n\\t\\t<Fragment>\\n\\t\\t\\t<TextField type=\\"password\\" {...fieldProps} />\\n\\t\\t\\t{error && !valid && (\\n\\t\\t\\t\\t<HelperMessage>\\n\\t\\t\\t\\t\\tUse 8 or more characters with a mix of letters, numbers & symbols.\\n\\t\\t\\t\\t</HelperMessage>\\n\\t\\t\\t)}\\n\\t\\t\\t{error && <ErrorMessage>Enter a password that\'s longer than 8 characters.</ErrorMessage>}\\n\\t\\t\\t{valid && meta.dirty ? <ValidMessage>Awesome password!</ValidMessage> : null}\\n\\t\\t</Fragment>\\n\\t)}\\n</Field>;\\n```\\n\\n### Correct\\n\\n```jsx\\nimport Form, {\\n\\tErrorMessage,\\n\\tField,\\n\\tHelperMessage,\\n\\tMessageWrapper,\\n\\tValidMessage,\\n} from \'@atlaskit/form\';\\nimport TextField from \'@atlaskit/textfield\';\\n\\n<Field\\n\\tname=\\"password\\"\\n\\tlabel=\\"Password\\"\\n\\tdefaultValue=\\"\\"\\n\\tisRequired\\n\\tvalidate={(value) => (value && value.length < 8 ? \'TOO_SHORT\' : undefined)}\\n>\\n\\t{({ fieldProps, error, valid, meta }) => (\\n\\t\\t<Fragment>\\n\\t\\t\\t<TextField type=\\"password\\" {...fieldProps} />\\n\\t\\t\\t<MessageWrapper>\\n\\t\\t\\t\\t{error && !valid && (\\n\\t\\t\\t\\t\\t<HelperMessage>\\n\\t\\t\\t\\t\\t\\tUse 8 or more characters with a mix of letters, numbers & symbols.\\n\\t\\t\\t\\t\\t</HelperMessage>\\n\\t\\t\\t\\t)}\\n\\t\\t\\t\\t{error && <ErrorMessage>Enter a password that\'s longer than 8 characters.</ErrorMessage>}\\n\\t\\t\\t\\t{valid && meta.dirty ? <ValidMessage>Awesome password!</ValidMessage> : null}\\n\\t\\t\\t</MessageWrapper>\\n\\t\\t</Fragment>\\n\\t)}\\n</Field>;\\n```\\n"}',
   ruleName: 'use-field-message-wrapper',
   description: 'Messaging components in the field from the form package must be wrapped using the message wrapper'
 }, {
-  content: '# use-heading\n\nUsing primitives allows you to delete bespoke component code and replace it with ready made\nsolutions made by the Atlassian Design System Team.\n\n## Examples\n\nThis rule marks code as violations when it can be replaced 1:1 with a heading component.\n\n### Incorrect\n\n```jsx\n<div>\n  <h1>text</hi>\n  <p>content</p>\n</div>\n^^^^\n```\n\n### Correct\n\n```jsx\n<div>\n\t<Heading size="xlarge">text</Heading>\n\t<p>content</p>\n</div>\n```\n\nCurrently, the rule is extremely defensive, only reporting on `h1`, `h2`, `h3`, `h4`, `h5` and `h6`\nelements that don\'t have any props outside of `key`, `id` and `data-testid`. We\'re only targeting\ninstances that are the first child of their siblings.\n\n## Options\n\n`enableUnsafeAutofix`: Rule reports errors with autofixes instead of suggestions. Defaults to\n`false`.\n\n`enableUnsafeReport`: Rule reports errors for native elements that are not autofixable. Defaults to\n`true`.\n',
+  content: '{"ruleName":"use-heading","description":"Using primitives allows you to delete bespoke component code and replace it with ready made","content":"# use-heading\\n\\nUsing primitives allows you to delete bespoke component code and replace it with ready made\\nsolutions made by the Atlassian Design System Team.\\n\\n## Examples\\n\\nThis rule marks code as violations when it can be replaced 1:1 with a heading component.\\n\\n### Incorrect\\n\\n```jsx\\n<div>\\n  <h1>text</hi>\\n  <p>content</p>\\n</div>\\n^^^^\\n```\\n\\n### Correct\\n\\n```jsx\\n<div>\\n\\t<Heading size=\\"xlarge\\">text</Heading>\\n\\t<p>content</p>\\n</div>\\n```\\n\\nCurrently, the rule is extremely defensive, only reporting on `h1`, `h2`, `h3`, `h4`, `h5` and `h6`\\nelements that don\'t have any props outside of `key`, `id` and `data-testid`. We\'re only targeting\\ninstances that are the first child of their siblings.\\n\\n## Options\\n\\n`enableUnsafeAutofix`: Rule reports errors with autofixes instead of suggestions. Defaults to\\n`false`.\\n\\n`enableUnsafeReport`: Rule reports errors for native elements that are not autofixable. Defaults to\\n`true`.\\n"}',
   ruleName: 'use-heading',
   description: 'Using primitives allows you to delete bespoke component code and replace it with ready made'
 }, {
-  content: '# use-heading-level-in-spotlight-card\n\nThe `SpotlightCard` component in `@atlaskit/onboarding` will be requiring the `headingLevel` prop in\nfuture releases.\n\n## Examples\n\n### Incorrect\n\n```tsx\n<SpotlightCard heading="Heading">Spotlight card contents</SpotlightCard>\n ^^^^^^^^^^^^^\n```\n\n### Correct\n\n```tsx\n<SpotlightCard heading="Heading" headingLevel={2}>\n\tSpotlight card contents\n</SpotlightCard>\n```\n',
+  content: '{"ruleName":"use-heading-level-in-spotlight-card","description":"The `SpotlightCard` component in `@atlaskit/onboarding` will be requiring the `headingLevel` prop in","content":"# use-heading-level-in-spotlight-card\\n\\nThe `SpotlightCard` component in `@atlaskit/onboarding` will be requiring the `headingLevel` prop in\\nfuture releases.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\n<SpotlightCard heading=\\"Heading\\">Spotlight card contents</SpotlightCard>\\n ^^^^^^^^^^^^^\\n```\\n\\n### Correct\\n\\n```tsx\\n<SpotlightCard heading=\\"Heading\\" headingLevel={2}>\\n\\tSpotlight card contents\\n</SpotlightCard>\\n```\\n"}',
   ruleName: 'use-heading-level-in-spotlight-card',
   description: 'The `SpotlightCard` component in `@atlaskit/onboarding` will be requiring the `headingLevel` prop in'
 }, {
-  content: '# use-href-in-link-item\n\nThe `LinkItem` component in `@atlaskit/menu` will be requiring the `href` prop in future releases.\nIf no valid `href` prop is required, consider using the `ButtonItem` component.\n\n## Examples\n\n### Incorrect\n\n```tsx\n<LinkItem>Button</LinkItem>\n ^^^^^^^^\n```\n\n### Correct\n\n```tsx\n<LinkItem href="http://example.com">Link</LinkItem>\n```\n',
+  content: '{"ruleName":"use-href-in-link-item","description":"The `LinkItem` component in `@atlaskit/menu` will be requiring the `href` prop in future releases.","content":"# use-href-in-link-item\\n\\nThe `LinkItem` component in `@atlaskit/menu` will be requiring the `href` prop in future releases.\\nIf no valid `href` prop is required, consider using the `ButtonItem` component.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\n<LinkItem>Button</LinkItem>\\n ^^^^^^^^\\n```\\n\\n### Correct\\n\\n```tsx\\n<LinkItem href=\\"http://example.com\\">Link</LinkItem>\\n```\\n"}',
   ruleName: 'use-href-in-link-item',
   description: 'The `LinkItem` component in `@atlaskit/menu` will be requiring the `href` prop in future releases.'
 }, {
-  content: "# use-latest-xcss-syntax\n\n## Description\n\nSoon, non-token values for the following properties will raise TypeScript errors. This rule prevents\nnew violations from being written until blockers are resolved.\n\n## Examples\n\n### Incorrect\n\n```jsx\nconst someStyles = xcss({\n  margin: '8px';\n          ^^^^^\n})\n```\n\n### Correct\n\n```jsx\nconst someStyles = xcss({\n  margin: 'space.100';\n})\n```\n\nSee the list of available space tokens on the\n[ADS website](https://atlassian.design/foundations/spacing#space-tokens).\n\nFor Atlassians:\n\n- See [go/xcss-spacing](https://go.atlassian.com/xcss-spacing) for context on why this is happening,\n  and how you can prepare.\n",
+  content: '{"ruleName":"use-latest-xcss-syntax","description":"Soon, non-token values for the following properties will raise TypeScript errors. This rule prevents","content":"# use-latest-xcss-syntax\\n\\n## Description\\n\\nSoon, non-token values for the following properties will raise TypeScript errors. This rule prevents\\nnew violations from being written until blockers are resolved.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```jsx\\nconst someStyles = xcss({\\n  margin: \'8px\';\\n          ^^^^^\\n})\\n```\\n\\n### Correct\\n\\n```jsx\\nconst someStyles = xcss({\\n  margin: \'space.100\';\\n})\\n```\\n\\nSee the list of available space tokens on the\\n[ADS website](https://atlassian.design/foundations/spacing#space-tokens).\\n\\nFor Atlassians:\\n\\n- See [go/xcss-spacing](https://go.atlassian.com/xcss-spacing) for context on why this is happening,\\n  and how you can prepare.\\n"}',
   ruleName: 'use-latest-xcss-syntax',
   description: 'Soon, non-token values for the following properties will raise TypeScript errors. This rule prevents'
 }, {
-  content: "# use-latest-xcss-syntax-typography\n\n## Description\n\nSoon, applying `fontSize`, `lineHeight`, `fontWeight` with `xcss` will be deprecated. Please refrain\nfrom adding new usages, as you will need to remove them soon anyway. As an alternative, you can use\nthe `Text` and `Heading` primitives.\n\n## Examples\n\n### Incorrect\n\n```jsx\nconst myStyles = xcss({\n\tfontSize: '14px',\n\t^^^^^^^^^^^^^^^^\n\tlineHeight: '20px',\n\t^^^^^^^^^^^^^^^^^^\n\tfontWeight: 500,\n\t^^^^^^^^^^^^^^^\n});\n\n<Box as=\"p\" xcss={myStyles}>\n\t...\n</Box>;\n```\n\n### Correct\n\n```jsx\nimport { Text } from '@atlaskit/primitives';\n\n<Text weight=\"medium\">...</Text>;\n```\n",
+  content: '{"ruleName":"use-latest-xcss-syntax-typography","description":"Soon, applying `fontSize`, `lineHeight`, `fontWeight` with `xcss` will be deprecated. Please refrain","content":"# use-latest-xcss-syntax-typography\\n\\n## Description\\n\\nSoon, applying `fontSize`, `lineHeight`, `fontWeight` with `xcss` will be deprecated. Please refrain\\nfrom adding new usages, as you will need to remove them soon anyway. As an alternative, you can use\\nthe `Text` and `Heading` primitives.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```jsx\\nconst myStyles = xcss({\\n\\tfontSize: \'14px\',\\n\\t^^^^^^^^^^^^^^^^\\n\\tlineHeight: \'20px\',\\n\\t^^^^^^^^^^^^^^^^^^\\n\\tfontWeight: 500,\\n\\t^^^^^^^^^^^^^^^\\n});\\n\\n<Box as=\\"p\\" xcss={myStyles}>\\n\\t...\\n</Box>;\\n```\\n\\n### Correct\\n\\n```jsx\\nimport { Text } from \'@atlaskit/primitives\';\\n\\n<Text weight=\\"medium\\">...</Text>;\\n```\\n"}',
   ruleName: 'use-latest-xcss-syntax-typography',
   description: 'Soon, applying `fontSize`, `lineHeight`, `fontWeight` with `xcss` will be deprecated. Please refrain'
 }, {
-  content: '# use-menu-section-title\n\nSection should have an accessible title or a reference to it, so that users of assistive\ntechnologies could have contextual information of interaction with current element.\n\n## Examples\n\nThis rule will indicate user with warning to strongly recommend usage of either `title` or `titleId`\nprop.\n\n### Incorrect\n\n```tsx\n<Section>\n ^^^^^^ Missing either `title` or `titleId` prop.\n  Section content\n</Section>\n\n<Section title>\n         ^^^^^ `title` prop is missing value.\n  Section content\n</Section>\n\n<Section title="">\n         ^^^^^ `title` prop is missing accessible name value.\n  Section content\n</Section>\n\n<Section titleId>\n         ^^^^^^^ `titleId` prop is missing reference value.\n  <h1 id="section-title">Section content title</hi>\n</Section>\n\n<Section titleId="">\n         ^^^^^^^ `titleId` prop is missing reference value.\n  <h1 id="section-title">Section content title</hi>\n</Section>\n\n<Section titleId="section-title" title="Accessible title">\n         ^^^^^^^                 ^^^^^ Do not include both `titleId` and `title` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `title` to provide accessible name explicitly.\n  <h1 id="section-title">Section content title</hi>\n</Section>\n```\n\n### Correct\n\n```tsx\n<Section title="Section content title">\n  Section content\n</Section>\n\n<Section titleId="section-title">\n  <h1 id="section-title">Section content title</hi>\n</Section>\n```\n',
+  content: '{"ruleName":"use-menu-section-title","description":"Section should have an accessible title or a reference to it, so that users of assistive","content":"# use-menu-section-title\\n\\nSection should have an accessible title or a reference to it, so that users of assistive\\ntechnologies could have contextual information of interaction with current element.\\n\\n## Examples\\n\\nThis rule will indicate user with warning to strongly recommend usage of either `title` or `titleId`\\nprop.\\n\\n### Incorrect\\n\\n```tsx\\n<Section>\\n ^^^^^^ Missing either `title` or `titleId` prop.\\n  Section content\\n</Section>\\n\\n<Section title>\\n         ^^^^^ `title` prop is missing value.\\n  Section content\\n</Section>\\n\\n<Section title=\\"\\">\\n         ^^^^^ `title` prop is missing accessible name value.\\n  Section content\\n</Section>\\n\\n<Section titleId>\\n         ^^^^^^^ `titleId` prop is missing reference value.\\n  <h1 id=\\"section-title\\">Section content title</hi>\\n</Section>\\n\\n<Section titleId=\\"\\">\\n         ^^^^^^^ `titleId` prop is missing reference value.\\n  <h1 id=\\"section-title\\">Section content title</hi>\\n</Section>\\n\\n<Section titleId=\\"section-title\\" title=\\"Accessible title\\">\\n         ^^^^^^^                 ^^^^^ Do not include both `titleId` and `title` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `title` to provide accessible name explicitly.\\n  <h1 id=\\"section-title\\">Section content title</hi>\\n</Section>\\n```\\n\\n### Correct\\n\\n```tsx\\n<Section title=\\"Section content title\\">\\n  Section content\\n</Section>\\n\\n<Section titleId=\\"section-title\\">\\n  <h1 id=\\"section-title\\">Section content title</hi>\\n</Section>\\n```\\n"}',
   ruleName: 'use-menu-section-title',
   description: 'Section should have an accessible title or a reference to it, so that users of assistive'
 }, {
-  content: '# use-modal-dialog-close-button\n\nThe modal dialog should have a dedicated close button to ensure it is accessible for all users.\n\n## Examples\n\nThis rule will warn makers if the `hasCloseButton` prop is not set to `true` or if the `CloseButton`\ncomponent is not used.\n\n### Incorrect\n\n```tsx\n<ModalDialog>\n\t^^^^^^^^^^^ `hasCloseButton` on `ModalHeader` should be set to `true` or `CloseButton` component should be used to make modal dialog accessible.\n\t<div>\n\t\t<ModalTitle>Modal Title</ModalTitle>\n\t</div>\n</ModalDialog>\n\n<ModalDialog>\n\t^^^^^^^^^^^ `hasCloseButton` on `ModalHeader` should be set to `true` or `CloseButton` component should be used to make modal dialog accessible.\n\t<ModalHeader>\n\t\t<ModalTitle>Modal Title</ModalTitle>\n\t</ModalHeader>\n</ModalDialog>\n\n<ModalDialog>\n\t^^^^^^^^^^^ `hasCloseButton` on `ModalHeader` should be set to `true` or `CloseButton` component should be used to make modal dialog accessible.\n\t<ModalHeader hasCloseButton={false}>\n\t\t<ModalTitle>Modal Title</ModalTitle>\n\t</ModalHeader>\n</ModalDialog>\n```\n\n### Correct\n\n```tsx\n<ModalDialog>\n\t<ModalHeader hasCloseButton>\n\t\t<ModalTitle>Modal Title</ModalTitle>\n\t</ModalHeader>\n</ModalDialog>\n\n<ModalDialog>\n\t<ModalHeader>\n\t\t<Box>\n\t\t\t<ModalTitle>Modal Title</ModalTitle>\n\t\t\t<CloseButton onClick={onClose} />\n\t\t</Box>\n\t</ModalHeader>\n</ModalDialog>\n```\n',
+  content: '{"ruleName":"use-modal-dialog-close-button","description":"The modal dialog should have a dedicated close button to ensure it is accessible for all users.","content":"# use-modal-dialog-close-button\\n\\nThe modal dialog should have a dedicated close button to ensure it is accessible for all users.\\n\\n## Examples\\n\\nThis rule will warn makers if the `hasCloseButton` prop is not set to `true` or if the `CloseButton`\\ncomponent is not used.\\n\\n### Incorrect\\n\\n```tsx\\n<ModalDialog>\\n\\t^^^^^^^^^^^ `hasCloseButton` on `ModalHeader` should be set to `true` or `CloseButton` component should be used to make modal dialog accessible.\\n\\t<div>\\n\\t\\t<ModalTitle>Modal Title</ModalTitle>\\n\\t</div>\\n</ModalDialog>\\n\\n<ModalDialog>\\n\\t^^^^^^^^^^^ `hasCloseButton` on `ModalHeader` should be set to `true` or `CloseButton` component should be used to make modal dialog accessible.\\n\\t<ModalHeader>\\n\\t\\t<ModalTitle>Modal Title</ModalTitle>\\n\\t</ModalHeader>\\n</ModalDialog>\\n\\n<ModalDialog>\\n\\t^^^^^^^^^^^ `hasCloseButton` on `ModalHeader` should be set to `true` or `CloseButton` component should be used to make modal dialog accessible.\\n\\t<ModalHeader hasCloseButton={false}>\\n\\t\\t<ModalTitle>Modal Title</ModalTitle>\\n\\t</ModalHeader>\\n</ModalDialog>\\n```\\n\\n### Correct\\n\\n```tsx\\n<ModalDialog>\\n\\t<ModalHeader hasCloseButton>\\n\\t\\t<ModalTitle>Modal Title</ModalTitle>\\n\\t</ModalHeader>\\n</ModalDialog>\\n\\n<ModalDialog>\\n\\t<ModalHeader>\\n\\t\\t<Box>\\n\\t\\t\\t<ModalTitle>Modal Title</ModalTitle>\\n\\t\\t\\t<CloseButton onClick={onClose} />\\n\\t\\t</Box>\\n\\t</ModalHeader>\\n</ModalDialog>\\n```\\n"}',
   ruleName: 'use-modal-dialog-close-button',
   description: 'The modal dialog should have a dedicated close button to ensure it is accessible for all users.'
 }, {
-  content: '# use-onboarding-spotlight-label\n\nOnboarding spotlight dialog should have an accessible name or a reference to it, so that upon\nopening, users of assistive technologies could have contextual information of interaction with\ncurrent element.\n\n## Examples\n\nThis rule will indicate user with warning to strongly recommend usage of either `label` or `titleId`\nprop if spotlight dialog is missing `heading` prop value.\n\n### Incorrect\n\n```tsx\n<Spotlight>\n ^^^^^^^^^ Missing `heading`, `label` or `titleId` prop.\n\n</Spotlight>\n\n<Spotlight label="">\n           ^^^^^ `label` prop is missing accessible name value.\n\t<Lorem count={1} />\n</Spotlight>\n\n<Spotlight titleId="">\n           ^^^^^^^ `titleId` prop is missing reference value.\n\t<p id="spotlight-dialog-title">Spotlight accessible name</p>\n\t<Lorem count={1} />\n</Spotlight>\n\n<Spotlight heading="Spotlight dialog heading" titleId="spotlight-dialog-title" label="">\n           ^^^^^^^                            ^^^^^^^                          ^^^^^ Avoid using `heading`, `titleId` and `label` properties simultaneously. If the `heading` value is not specified or there is a requirement to reference another element in the DOM as accessible name, use `titleId`. Otherwise, use `label` to explicitly provide the accessible name.\n\t<p id="spotlight-dialog-label">Spotlight accessible name</p>\n\t<Lorem count={1} />\n</Spotlight>\n```\n\n### Correct\n\n```tsx\n\n<Spotlight heading="Spotlight dialog title">\n\t<Lorem count={1} />\n</Spotlight>\n\n\n<Spotlight titleId="spotlight-dialog-title">\n\t<p id="spotlight-dialog-title">Spotlight accessible name</p>\n\t<Lorem count={1} />\n</Spotlight>\n\n<Spotlight label="Spotlight content title">\n\t<Lorem count={1} />\n</Spotlight>\n```\n',
+  content: '{"ruleName":"use-onboarding-spotlight-label","description":"Onboarding spotlight dialog should have an accessible name or a reference to it, so that upon","content":"# use-onboarding-spotlight-label\\n\\nOnboarding spotlight dialog should have an accessible name or a reference to it, so that upon\\nopening, users of assistive technologies could have contextual information of interaction with\\ncurrent element.\\n\\n## Examples\\n\\nThis rule will indicate user with warning to strongly recommend usage of either `label` or `titleId`\\nprop if spotlight dialog is missing `heading` prop value.\\n\\n### Incorrect\\n\\n```tsx\\n<Spotlight>\\n ^^^^^^^^^ Missing `heading`, `label` or `titleId` prop.\\n\\n</Spotlight>\\n\\n<Spotlight label=\\"\\">\\n           ^^^^^ `label` prop is missing accessible name value.\\n\\t<Lorem count={1} />\\n</Spotlight>\\n\\n<Spotlight titleId=\\"\\">\\n           ^^^^^^^ `titleId` prop is missing reference value.\\n\\t<p id=\\"spotlight-dialog-title\\">Spotlight accessible name</p>\\n\\t<Lorem count={1} />\\n</Spotlight>\\n\\n<Spotlight heading=\\"Spotlight dialog heading\\" titleId=\\"spotlight-dialog-title\\" label=\\"\\">\\n           ^^^^^^^                            ^^^^^^^                          ^^^^^ Avoid using `heading`, `titleId` and `label` properties simultaneously. If the `heading` value is not specified or there is a requirement to reference another element in the DOM as accessible name, use `titleId`. Otherwise, use `label` to explicitly provide the accessible name.\\n\\t<p id=\\"spotlight-dialog-label\\">Spotlight accessible name</p>\\n\\t<Lorem count={1} />\\n</Spotlight>\\n```\\n\\n### Correct\\n\\n```tsx\\n\\n<Spotlight heading=\\"Spotlight dialog title\\">\\n\\t<Lorem count={1} />\\n</Spotlight>\\n\\n\\n<Spotlight titleId=\\"spotlight-dialog-title\\">\\n\\t<p id=\\"spotlight-dialog-title\\">Spotlight accessible name</p>\\n\\t<Lorem count={1} />\\n</Spotlight>\\n\\n<Spotlight label=\\"Spotlight content title\\">\\n\\t<Lorem count={1} />\\n</Spotlight>\\n```\\n"}',
   ruleName: 'use-onboarding-spotlight-label',
   description: 'Onboarding spotlight dialog should have an accessible name or a reference to it, so that upon'
 }, {
-  content: '# use-popup-label\n\nPopup should have an accessible name or a reference to it when `role="dialog"`, so that upon\nopening, users of assistive technologies could have contextual information of interaction with\ncurrent element.\n\n## Examples\n\nThis rule will indicate user with warning to strongly recommend usage of either `label` or `titleId`\nprop.\n\n### Incorrect\n\n```tsx\n<Popup role="dialog">\n ^^^^^^ Missing either `label` or `titleId` prop.\n  Popup content\n</Popup>\n\n<Popup role="dialog" label>\n                     ^^^^^ `label` prop is missing value.\n  Popup content\n</Popup>\n\n<Popup role="dialog" label="">\n                     ^^^^^ `label` prop is missing accessible name value.\n  Popup content\n</Popup>\n\n<Popup role="dialog" titleId>\n                     ^^^^^^^ `titleId` prop is missing reference value.\n  <h1 id="popup-title">Popup content title</hi>\n</Popup>\n\n<Popup role="dialog" titleId="">\n                     ^^^^^^^ `titleId` prop is missing reference value.\n  <h1 id="popup-title">Popup content title</hi>\n</Popup>\n\n<Popup role="dialog" titleId="popup-title" label="">\n                     ^^^^^^^               ^^^^^ Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.\n  <h1 id="popup-title">Popup content title</hi>\n</Popup>\n```\n\n### Correct\n\n```tsx\n<Popup role="dialog" label="Popup content title">\n  Popup content\n</Popup>\n\n<Popup role="dialog" titleId="popup-title">\n  <h1 id="popup-title">Popup content title</hi>\n</Popup>\n```\n',
+  content: '{"ruleName":"use-popup-label","description":"Popup should have an accessible name or a reference to it when `role=\\"dialog\\"`, so that upon","content":"# use-popup-label\\n\\nPopup should have an accessible name or a reference to it when `role=\\"dialog\\"`, so that upon\\nopening, users of assistive technologies could have contextual information of interaction with\\ncurrent element.\\n\\n## Examples\\n\\nThis rule will indicate user with warning to strongly recommend usage of either `label` or `titleId`\\nprop.\\n\\n### Incorrect\\n\\n```tsx\\n<Popup role=\\"dialog\\">\\n ^^^^^^ Missing either `label` or `titleId` prop.\\n  Popup content\\n</Popup>\\n\\n<Popup role=\\"dialog\\" label>\\n                     ^^^^^ `label` prop is missing value.\\n  Popup content\\n</Popup>\\n\\n<Popup role=\\"dialog\\" label=\\"\\">\\n                     ^^^^^ `label` prop is missing accessible name value.\\n  Popup content\\n</Popup>\\n\\n<Popup role=\\"dialog\\" titleId>\\n                     ^^^^^^^ `titleId` prop is missing reference value.\\n  <h1 id=\\"popup-title\\">Popup content title</hi>\\n</Popup>\\n\\n<Popup role=\\"dialog\\" titleId=\\"\\">\\n                     ^^^^^^^ `titleId` prop is missing reference value.\\n  <h1 id=\\"popup-title\\">Popup content title</hi>\\n</Popup>\\n\\n<Popup role=\\"dialog\\" titleId=\\"popup-title\\" label=\\"\\">\\n                     ^^^^^^^               ^^^^^ Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.\\n  <h1 id=\\"popup-title\\">Popup content title</hi>\\n</Popup>\\n```\\n\\n### Correct\\n\\n```tsx\\n<Popup role=\\"dialog\\" label=\\"Popup content title\\">\\n  Popup content\\n</Popup>\\n\\n<Popup role=\\"dialog\\" titleId=\\"popup-title\\">\\n  <h1 id=\\"popup-title\\">Popup content title</hi>\\n</Popup>\\n```\\n"}',
   ruleName: 'use-popup-label',
   description: 'Popup should have an accessible name or a reference to it when `role="dialog"`, so that upon'
 }, {
-  content: "# use-primitives\n\nUsing primitives allows you to delete bespoke component code and replace it with ready made\nsolutions made by the Atlassian Design System Team.\n\n## Examples\n\nThis rule marks code as violations when it can be replaced 1:1 with a primitive component.\n\n### Incorrect\n\n```jsx\nconst someStyles = css({\n  padding: '8px';\n})\n\n<div css={someStyles}>\n^^^^^^^^^^^^^^^^^^^^^^\n  // ...\n</div>\n```\n\n### Correct\n\n```jsx\nconst someStyles = xcss({\n  padding: 'space.100';\n})\n\n<Box xcss={someStyles}>\n  // ...\n</Box>\n```\n\nCurrently, the rule is extremely defensive, only reporting on `css` styles that contain:\n\n- one, and only one, style property from this list:\n  - padding\n  - paddingBlock\n  - paddingBlockEnd\n  - paddingBlockStart\n  - paddingBottom\n  - paddingInline\n  - paddingInlineEnd\n  - paddingInlineStart\n  - paddingLeft\n  - paddingRight\n  - paddingTop\n  - margin\n  - marginBlock\n  - marginBlockEnd\n  - marginBlockStart\n  - marginBottom\n  - marginInline\n  - marginInlineEnd\n  - marginInlineStart\n  - marginLeft\n  - marginRight\n  - marginTop\n\n- and where the style value is one of:\n  - 0px\n  - 2px\n  - 4px\n  - 6px\n  - 8px\n  - 12px\n  - 16px\n  - 20px\n  - 24px\n  - 32px\n  - 40px\n  - 48px\n  - 64px\n  - 80px\n\nIf these conditions are not met, then no violation will be reported.\n",
+  content: '{"ruleName":"use-primitives","description":"Using primitives allows you to delete bespoke component code and replace it with ready made","content":"# use-primitives\\n\\nUsing primitives allows you to delete bespoke component code and replace it with ready made\\nsolutions made by the Atlassian Design System Team.\\n\\n## Examples\\n\\nThis rule marks code as violations when it can be replaced 1:1 with a primitive component.\\n\\n### Incorrect\\n\\n```jsx\\nconst someStyles = css({\\n  padding: \'8px\';\\n})\\n\\n<div css={someStyles}>\\n^^^^^^^^^^^^^^^^^^^^^^\\n  // ...\\n</div>\\n```\\n\\n### Correct\\n\\n```jsx\\nconst someStyles = xcss({\\n  padding: \'space.100\';\\n})\\n\\n<Box xcss={someStyles}>\\n  // ...\\n</Box>\\n```\\n\\nCurrently, the rule is extremely defensive, only reporting on `css` styles that contain:\\n\\n- one, and only one, style property from this list:\\n  - padding\\n  - paddingBlock\\n  - paddingBlockEnd\\n  - paddingBlockStart\\n  - paddingBottom\\n  - paddingInline\\n  - paddingInlineEnd\\n  - paddingInlineStart\\n  - paddingLeft\\n  - paddingRight\\n  - paddingTop\\n  - margin\\n  - marginBlock\\n  - marginBlockEnd\\n  - marginBlockStart\\n  - marginBottom\\n  - marginInline\\n  - marginInlineEnd\\n  - marginInlineStart\\n  - marginLeft\\n  - marginRight\\n  - marginTop\\n\\n- and where the style value is one of:\\n  - 0px\\n  - 2px\\n  - 4px\\n  - 6px\\n  - 8px\\n  - 12px\\n  - 16px\\n  - 20px\\n  - 24px\\n  - 32px\\n  - 40px\\n  - 48px\\n  - 64px\\n  - 80px\\n\\nIf these conditions are not met, then no violation will be reported.\\n"}',
   ruleName: 'use-primitives',
   description: 'Using primitives allows you to delete bespoke component code and replace it with ready made'
 }, {
-  content: '# use-primitives-text\n\nUsing primitives allows you to delete bespoke component code and replace it with ready made\nsolutions made by the Atlassian Design System Team.\n\n## Examples\n\nThis rule marks code as violations when it can be replaced 1:1 with one or multiple primitive\ncomponents.\n\n### Incorrect\n\n```jsx\n<span>text</span>\n^^^^^^\n<p>text</p>\n^^^\n<strong>text</strong>\n^^^^^^^^\n<em>text</em>\n^^^^\n```\n\n### Correct\n\n```jsx\n<Text>text</Text>\n<Text as="p">text</Text>\n<Text as="strong">text</Text>\n<Text as="em">text</Text>\n```\n\nCurrently, the rule is extremely defensive, only reporting on `span`, `p`, `strong` and `em`\nelements that don\'t have any props outside of `key`, `id` and `data-testid`. For `span` elements\nwe\'re only targeting instances that almost certainly only have text as children.\n\n## Options\n\n`enableUnsafeAutofix`: Rule creates errors with autofixes instead of suggestions. Defaults to\n`false`.\n\n`enableUnsafeReport`: Rule reports errors for native elements that are not autofixable. Defaults to\n`true`.\n',
+  content: '{"ruleName":"use-primitives-text","description":"Using primitives allows you to delete bespoke component code and replace it with ready made","content":"# use-primitives-text\\n\\nUsing primitives allows you to delete bespoke component code and replace it with ready made\\nsolutions made by the Atlassian Design System Team.\\n\\n## Examples\\n\\nThis rule marks code as violations when it can be replaced 1:1 with one or multiple primitive\\ncomponents.\\n\\n### Incorrect\\n\\n```jsx\\n<span>text</span>\\n^^^^^^\\n<p>text</p>\\n^^^\\n<strong>text</strong>\\n^^^^^^^^\\n<em>text</em>\\n^^^^\\n```\\n\\n### Correct\\n\\n```jsx\\n<Text>text</Text>\\n<Text as=\\"p\\">text</Text>\\n<Text as=\\"strong\\">text</Text>\\n<Text as=\\"em\\">text</Text>\\n```\\n\\nCurrently, the rule is extremely defensive, only reporting on `span`, `p`, `strong` and `em`\\nelements that don\'t have any props outside of `key`, `id` and `data-testid`. For `span` elements\\nwe\'re only targeting instances that almost certainly only have text as children.\\n\\n## Options\\n\\n`enableUnsafeAutofix`: Rule creates errors with autofixes instead of suggestions. Defaults to\\n`false`.\\n\\n`enableUnsafeReport`: Rule reports errors for native elements that are not autofixable. Defaults to\\n`true`.\\n"}',
   ruleName: 'use-primitives-text',
   description: 'Using primitives allows you to delete bespoke component code and replace it with ready made'
 }, {
-  content: '# use-should-render-to-parent\n\nPopups and dropdown menus render to portals by default. This puts their content outside of the\nstandard DOM order which creates accessibility issues for users.\n\n## Examples\n\nThis rule will indicate user with a recommendation to use the `shouldRenderToParent` prop set to\n`true`.\n\n### Incorrect\n\n```tsx\n<Popup>\n ^^^^^ The default value of `shouldRenderToParent` is `false`. Setting the `shouldRenderToParent` prop to anything other than `true` causes accessibility issues. Only set to `false` as a last resort.\n  Popup content\n</Popup>\n\n<DropdownMenu>\n ^^^^^^^^^^^^ The default value of `shouldRenderToParent` is `false`. Setting the `shouldRenderToParent` prop to anything other than `true` causes accessibility issues. Only set to `false` as a last resort.\n  Dropdown content\n</DropdownMenu>\n\n<Popup shouldRenderToParent={false}>\n       ^^^^^^^^^^^^^^^^^^^^ Setting the `shouldRenderToParent` prop to anything other than `true` causes accessibility issues. Only set to `false` as a last resort.\n  Popup content\n</Popup>\n```\n\n### Correct\n\n```tsx\n<Popup shouldRenderToParent>\n  Popup content\n</Popup>\n\n<DropdownMenu shouldRenderToParent>\n  Dropdown content\n</DropdownMenu>\n```\n',
+  content: '{"ruleName":"use-should-render-to-parent","description":"Popups and dropdown menus render to portals by default. This puts their content outside of the","content":"# use-should-render-to-parent\\n\\nPopups and dropdown menus render to portals by default. This puts their content outside of the\\nstandard DOM order which creates accessibility issues for users.\\n\\n## Examples\\n\\nThis rule will indicate user with a recommendation to use the `shouldRenderToParent` prop set to\\n`true`.\\n\\n### Incorrect\\n\\n```tsx\\n<Popup>\\n ^^^^^ The default value of `shouldRenderToParent` is `false`. Setting the `shouldRenderToParent` prop to anything other than `true` causes accessibility issues. Only set to `false` as a last resort.\\n  Popup content\\n</Popup>\\n\\n<DropdownMenu>\\n ^^^^^^^^^^^^ The default value of `shouldRenderToParent` is `false`. Setting the `shouldRenderToParent` prop to anything other than `true` causes accessibility issues. Only set to `false` as a last resort.\\n  Dropdown content\\n</DropdownMenu>\\n\\n<Popup shouldRenderToParent={false}>\\n       ^^^^^^^^^^^^^^^^^^^^ Setting the `shouldRenderToParent` prop to anything other than `true` causes accessibility issues. Only set to `false` as a last resort.\\n  Popup content\\n</Popup>\\n```\\n\\n### Correct\\n\\n```tsx\\n<Popup shouldRenderToParent>\\n  Popup content\\n</Popup>\\n\\n<DropdownMenu shouldRenderToParent>\\n  Dropdown content\\n</DropdownMenu>\\n```\\n"}',
   ruleName: 'use-should-render-to-parent',
   description: 'Popups and dropdown menus render to portals by default. This puts their content outside of the'
 }, {
-  content: '# use-simple-field\n\nSimple field implementations should be used when extended features or complex implementations are\nnot needed.\n\n## Examples\n\nThis rule marks code as a violation when it finds Design System field components that have:\n\n- no render props or there’s only fieldProps\n- no messaging components.\n\n### Incorrect\n\n```jsx\nimport { Field } from \'@atlaskit/form\';\nimport TextField from \'@atlaskit/textfield\';\n\n<Field name="username" label="Username">\n\t{({ fieldProps }) => <TextField {...fieldProps} />}\n</Field>;\n```\n\n### Correct\n\n```jsx\nimport { Field } from \'@atlaskit/form\';\nimport TextField from \'@atlaskit/textfield\';\n\n<Field\n\tname="username"\n\tlabel="Username"\n\tcomponent={({ fieldProps }) => <TextField {...fieldProps} />}\n/>;\n```\n',
+  content: "{\"ruleName\":\"use-side-nav-items-package\",\"description\":\"This rule raises a violation for usages of `@atlaskit/navigation-system/side-nav-items/*` or for\",\"content\":\"# use-side-nav-items-package\\n\\n## Examples\\n\\nThis rule raises a violation for usages of `@atlaskit/navigation-system/side-nav-items/*` or for\\nimporting side-nav item names from the root `@atlaskit/navigation-system` barrel. This is to assist\\nwith the migration to the dedicated package `@atlaskit/side-nav-items`.\\n\\n### Incorrect\\n\\n```jsx\\nimport { ButtonMenuItem } from '@atlaskit/navigation-system/side-nav-items/button-menu-item';\\nimport { MenuList } from '@atlaskit/navigation-system/side-nav-items/menu-list';\\nimport { ButtonMenuItem, MenuList } from '@atlaskit/navigation-system';\\n```\\n\\n### Correct\\n\\n```jsx\\nimport { ButtonMenuItem } from '@atlaskit/side-nav-items/button-menu-item';\\nimport { MenuList } from '@atlaskit/side-nav-items/menu-list';\\nimport { Main, Root } from '@atlaskit/navigation-system';\\nimport { ButtonMenuItem, MenuList } from '@atlaskit/side-nav-items/button-menu-item';\\nimport { MenuList } from '@atlaskit/side-nav-items/menu-list';\\n```\\n\"}",
+  ruleName: 'use-side-nav-items-package',
+  description: 'This rule raises a violation for usages of `@atlaskit/navigation-system/side-nav-items/*` or for'
+}, {
+  content: '{"ruleName":"use-simple-field","description":"Simple field implementations should be used when extended features or complex implementations are","content":"# use-simple-field\\n\\nSimple field implementations should be used when extended features or complex implementations are\\nnot needed.\\n\\n## Examples\\n\\nThis rule marks code as a violation when it finds Design System field components that have:\\n\\n- no render props or there’s only fieldProps\\n- no messaging components.\\n\\n### Incorrect\\n\\n```jsx\\nimport { Field } from \'@atlaskit/form\';\\nimport TextField from \'@atlaskit/textfield\';\\n\\n<Field name=\\"username\\" label=\\"Username\\">\\n\\t{({ fieldProps }) => <TextField {...fieldProps} />}\\n</Field>;\\n```\\n\\n### Correct\\n\\n```jsx\\nimport { Field } from \'@atlaskit/form\';\\nimport TextField from \'@atlaskit/textfield\';\\n\\n<Field\\n\\tname=\\"username\\"\\n\\tlabel=\\"Username\\"\\n\\tcomponent={({ fieldProps }) => <TextField {...fieldProps} />}\\n/>;\\n```\\n"}',
   ruleName: 'use-simple-field',
   description: 'Simple field implementations should be used when extended features or complex implementations are'
 }, {
-  content: '# use-simple-form\n\nSimple form implementations should be used when extended features or complex implementations are not\nnecessary.\n\n## Examples\n\nThis rule marks code as a violation when it finds Design System form components that don’t use\nrender props or only use the `formProps` render prop.\n\n### Incorrect\n\n```jsx\nimport { Field, Form } from \'@atlaskit/form\';\n\n<Form\n\tonSubmit={() => {\n\t\t/* ... */\n\t}}\n>\n\t{({ formProps }) => (\n\t\t<form {...formProps}>\n\t\t\t<Field name="username" component={({fieldProps}) => <input {...fieldProps} />}>\n\t\t</form>\n\t\t)}\n</Form>;\n```\n\n```jsx\nimport { Field, Form } from \'@atlaskit/form\';\n\n<Form\n\tonSubmit={() => {\n\t\t/* ... */\n\t}}\n>\n\t{({ formProps }) => (\n\t\t<form {...formProps} name="form" data-testid="testId" data-foo="bar">\n\t\t\t<Field name="username" component={({fieldProps}) => <input {...fieldProps} />}>\n\t\t</form>\n\t\t)}\n</Form>;\n```\n\n### Correct\n\n```jsx\nimport { Field, Form } from \'@atlaskit/form\';\n\n<Form\n\tonSubmit={() => {\n\t\t/* ... */\n\t}}\n>\n\t<Field name="username" component={({fieldProps}) => <input {...fieldProps} />}>\n</Form>;\n```\n\n```jsx\nimport { Field, Form } from \'@atlaskit/form\';\n\n<Form\n\tonSubmit={() => {\n\t\t/* ... */\n\t}}\n\tname="form"\n\ttestId="testId"\n\tformProps={{\n\t\t\'data-foo\': "bar"\n\t}}\n>\n\t<Field name="username" component={({fieldProps}) => <input {...fieldProps} />}>\n</Form>;\n```\n',
+  content: '{"ruleName":"use-simple-form","description":"Simple form implementations should be used when extended features or complex implementations are not","content":"# use-simple-form\\n\\nSimple form implementations should be used when extended features or complex implementations are not\\nnecessary.\\n\\n## Examples\\n\\nThis rule marks code as a violation when it finds Design System form components that don’t use\\nrender props or only use the `formProps` render prop.\\n\\n### Incorrect\\n\\n```jsx\\nimport { Field, Form } from \'@atlaskit/form\';\\n\\n<Form\\n\\tonSubmit={() => {\\n\\t\\t/* ... */\\n\\t}}\\n>\\n\\t{({ formProps }) => (\\n\\t\\t<form {...formProps}>\\n\\t\\t\\t<Field name=\\"username\\" component={({fieldProps}) => <input {...fieldProps} />}>\\n\\t\\t</form>\\n\\t\\t)}\\n</Form>;\\n```\\n\\n```jsx\\nimport { Field, Form } from \'@atlaskit/form\';\\n\\n<Form\\n\\tonSubmit={() => {\\n\\t\\t/* ... */\\n\\t}}\\n>\\n\\t{({ formProps }) => (\\n\\t\\t<form {...formProps} name=\\"form\\" data-testid=\\"testId\\" data-foo=\\"bar\\">\\n\\t\\t\\t<Field name=\\"username\\" component={({fieldProps}) => <input {...fieldProps} />}>\\n\\t\\t</form>\\n\\t\\t)}\\n</Form>;\\n```\\n\\n### Correct\\n\\n```jsx\\nimport { Field, Form } from \'@atlaskit/form\';\\n\\n<Form\\n\\tonSubmit={() => {\\n\\t\\t/* ... */\\n\\t}}\\n>\\n\\t<Field name=\\"username\\" component={({fieldProps}) => <input {...fieldProps} />}>\\n</Form>;\\n```\\n\\n```jsx\\nimport { Field, Form } from \'@atlaskit/form\';\\n\\n<Form\\n\\tonSubmit={() => {\\n\\t\\t/* ... */\\n\\t}}\\n\\tname=\\"form\\"\\n\\ttestId=\\"testId\\"\\n\\tformProps={{\\n\\t\\t\'data-foo\': \\"bar\\"\\n\\t}}\\n>\\n\\t<Field name=\\"username\\" component={({fieldProps}) => <input {...fieldProps} />}>\\n</Form>;\\n```\\n"}',
   ruleName: 'use-simple-form',
   description: 'Simple form implementations should be used when extended features or complex implementations are not'
 }, {
-  content: "# use-spotlight-package\n\n## Examples\n\nThis rule raises a violation for usages of `@atlaskit/onboarding`. This is to assist with the\nmigration to `@atlaskit/spotlight`.\n\n### Incorrect\n\n```jsx\nimport { Spotlight } from '@atlaskit/onboarding';\n```\n\n### Correct\n\n```jsx\nimport { Spotlight } from '@atlaskit/spotlight';\n```\n",
+  content: '{"ruleName":"use-spotlight-package","description":"This rule raises a violation for usages of `@atlaskit/onboarding`. This is to assist with the","content":"# use-spotlight-package\\n\\n## Examples\\n\\nThis rule raises a violation for usages of `@atlaskit/onboarding`. This is to assist with the\\nmigration to `@atlaskit/spotlight`.\\n\\n### Incorrect\\n\\n```jsx\\nimport { Spotlight } from \'@atlaskit/onboarding\';\\n```\\n\\n### Correct\\n\\n```jsx\\nimport { Spotlight } from \'@atlaskit/spotlight\';\\n```\\n"}',
   ruleName: 'use-spotlight-package',
   description: 'This rule raises a violation for usages of `@atlaskit/onboarding`. This is to assist with the'
 }, {
-  content: '# use-tag-group-label\n\nTagGroup should have an accessible name or a reference to it, so that upon opening, users of\nassistive technologies could have contextual information of interaction with current element.\n\n## Examples\n\nThis rule will indicate user with warning to strongly recommend usage of either `label` or `titleId`\nprop.\n\n### Incorrect\n\n```tsx\n<TagGroup>\n ^^^^^^^^ Missing either `label` or `titleId` prop.\n  <Tag text="Jira">\n  <Tag text="Confluence">\n  <Tag text="Platform">\n</TagGroup>\n\n<TagGroup label="">\n          ^^^^^ `label` prop is missing accessible name value.\n  <Tag text="Jira">\n  <Tag text="Confluence">\n  <Tag text="Platform">\n</TagGroup>\n\n<h2 id="tag-group-title">TagGroup content title</hi>\n<TagGroup titleId="">\n          ^^^^^^^ `titleId` prop is missing reference value.\n  <Tag text="Jira">\n  <Tag text="Confluence">\n  <Tag text="Platform">\n</TagGroup>\n\n<h2 id="tag-group-title">TagGroup content title</h2>\n<TagGroup titleId="tag-group-title" label="">\n          ^^^^^^^                   ^^^^^ Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.\n  <Tag text="Jira">\n  <Tag text="Confluence">\n  <Tag text="Platform">\n</TagGroup>\n```\n\n### Correct\n\n```tsx\n<TagGroup label="TagGroup content title">\n  <Tag text="Jira">\n  <Tag text="Confluence">\n  <Tag text="Platform">\n</TagGroup>\n\n<h2 id="tag-group-title">TagGroup content title</h2>\n<TagGroup titleId="tag-group-title">\n  <Tag text="Jira">\n  <Tag text="Confluence">\n  <Tag text="Platform">\n</TagGroup>\n```\n',
+  content: '{"ruleName":"use-tag-group-label","description":"TagGroup should have an accessible name or a reference to it, so that upon opening, users of","content":"# use-tag-group-label\\n\\nTagGroup should have an accessible name or a reference to it, so that upon opening, users of\\nassistive technologies could have contextual information of interaction with current element.\\n\\n## Examples\\n\\nThis rule will indicate user with warning to strongly recommend usage of either `label` or `titleId`\\nprop.\\n\\n### Incorrect\\n\\n```tsx\\n<TagGroup>\\n ^^^^^^^^ Missing either `label` or `titleId` prop.\\n  <Tag text=\\"Jira\\">\\n  <Tag text=\\"Confluence\\">\\n  <Tag text=\\"Platform\\">\\n</TagGroup>\\n\\n<TagGroup label=\\"\\">\\n          ^^^^^ `label` prop is missing accessible name value.\\n  <Tag text=\\"Jira\\">\\n  <Tag text=\\"Confluence\\">\\n  <Tag text=\\"Platform\\">\\n</TagGroup>\\n\\n<h2 id=\\"tag-group-title\\">TagGroup content title</hi>\\n<TagGroup titleId=\\"\\">\\n          ^^^^^^^ `titleId` prop is missing reference value.\\n  <Tag text=\\"Jira\\">\\n  <Tag text=\\"Confluence\\">\\n  <Tag text=\\"Platform\\">\\n</TagGroup>\\n\\n<h2 id=\\"tag-group-title\\">TagGroup content title</h2>\\n<TagGroup titleId=\\"tag-group-title\\" label=\\"\\">\\n          ^^^^^^^                   ^^^^^ Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.\\n  <Tag text=\\"Jira\\">\\n  <Tag text=\\"Confluence\\">\\n  <Tag text=\\"Platform\\">\\n</TagGroup>\\n```\\n\\n### Correct\\n\\n```tsx\\n<TagGroup label=\\"TagGroup content title\\">\\n  <Tag text=\\"Jira\\">\\n  <Tag text=\\"Confluence\\">\\n  <Tag text=\\"Platform\\">\\n</TagGroup>\\n\\n<h2 id=\\"tag-group-title\\">TagGroup content title</h2>\\n<TagGroup titleId=\\"tag-group-title\\">\\n  <Tag text=\\"Jira\\">\\n  <Tag text=\\"Confluence\\">\\n  <Tag text=\\"Platform\\">\\n</TagGroup>\\n```\\n"}',
   ruleName: 'use-tag-group-label',
   description: 'TagGroup should have an accessible name or a reference to it, so that upon opening, users of'
 }, {
-  content: "# use-tokens-shape\n\n## Examples\n\nThis rule marks code as violations when a shape token should be used. It will auto-fix values that\ncan be mapped 1:1 with an ADS shape token. Values that can't be mapped to a token will still be\nreported, however no auto-fix will happen.\n\n### Incorrect\n\n```jsx\nconst someStyles = css({\n  borderRadius: '3px';\n           \t\t\t^^^^^\n  borderWidth: '2px';\n           \t\t ^^^^^\n})\n```\n\n### Correct\n\n```jsx\nimport { token } from '@atlaskit/tokens'\n\nconst someStyles = css({\n  borderRadius: token('radius.small');\n  borderRadius: token('border.width.outline');\n})\n```\n\nSee the list of available shape tokens on the\n[ADS website](https://atlassian.design/components/tokens/all-tokens).\n",
+  content: '{"ruleName":"use-tokens-shape","description":"This rule marks code as violations when a shape token should be used. It will auto-fix values that","content":"# use-tokens-shape\\n\\n## Examples\\n\\nThis rule marks code as violations when a shape token should be used. It will auto-fix values that\\ncan be mapped 1:1 with an ADS shape token. Values that can\'t be mapped to a token will still be\\nreported, however no auto-fix will happen.\\n\\n### Incorrect\\n\\n```jsx\\nconst someStyles = css({\\n  borderRadius: \'3px\';\\n           \\t\\t\\t^^^^^\\n  borderWidth: \'2px\';\\n           \\t\\t ^^^^^\\n})\\n```\\n\\n### Correct\\n\\n```jsx\\nimport { token } from \'@atlaskit/tokens\'\\n\\nconst someStyles = css({\\n  borderRadius: token(\'radius.small\');\\n  borderRadius: token(\'border.width.outline\');\\n})\\n```\\n\\nSee the list of available shape tokens on the\\n[ADS website](https://atlassian.design/components/tokens/all-tokens).\\n"}',
   ruleName: 'use-tokens-shape',
   description: 'This rule marks code as violations when a shape token should be used. It will auto-fix values that'
 }, {
-  content: "# use-tokens-space\n\n## Examples\n\nThis rule marks code as violations when a space token should be used. It will auto-fix values that\ncan be mapped 1:1 with an ADS space token. Values that can't be mapped to a token will still be\nreported, however no auto-fix will happen.\n\n### Incorrect\n\n```jsx\nconst someStyles = css({\n  padding: '8px';\n           ^^^^^\n})\n```\n\n### Correct\n\n```jsx\nimport { token } from '@atlaskit/tokens'\n\nconst someStyles = css({\n  padding: token('space.100');\n})\n```\n\nSee the list of available space tokens on the\n[ADS website](https://atlassian.design/foundations/spacing#space-tokens).\n\nFor Atlassians:\n\n- See the [Token Migration Guide](https://go.atlassian.com/space-token-migration) for instructions\n  on how to migrate to tokens when a suggestion is not provided by the ESLint rule.\n",
+  content: '{"ruleName":"use-tokens-space","description":"This rule marks code as violations when a space token should be used. It will auto-fix values that","content":"# use-tokens-space\\n\\n## Examples\\n\\nThis rule marks code as violations when a space token should be used. It will auto-fix values that\\ncan be mapped 1:1 with an ADS space token. Values that can\'t be mapped to a token will still be\\nreported, however no auto-fix will happen.\\n\\n### Incorrect\\n\\n```jsx\\nconst someStyles = css({\\n  padding: \'8px\';\\n           ^^^^^\\n})\\n```\\n\\n### Correct\\n\\n```jsx\\nimport { token } from \'@atlaskit/tokens\'\\n\\nconst someStyles = css({\\n  padding: token(\'space.100\');\\n})\\n```\\n\\nSee the list of available space tokens on the\\n[ADS website](https://atlassian.design/foundations/spacing#space-tokens).\\n\\nFor Atlassians:\\n\\n- See the [Token Migration Guide](https://go.atlassian.com/space-token-migration) for instructions\\n  on how to migrate to tokens when a suggestion is not provided by the ESLint rule.\\n"}',
   ruleName: 'use-tokens-space',
   description: 'This rule marks code as violations when a space token should be used. It will auto-fix values that'
 }, {
-  content: "# use-tokens-typography\n\nEnforces the use of design tokens for typography properties.\n\nUsing design tokens results in a harmonious experience for end users whilst providing theming and\nconsistency. Typography tokens are strongly recommended to further align our experiences and make\nfuture changes easier.\n\nNote: This rule is fairly defensive when it comes to replacing values with tokens. It will only run\nover style blocks that contain a fontSize property. It will then attempt to match that font size to\na token. If multiple matching tokens are found it then tries to match on font weight. If a token can\nbe found to match the font size but not font weight, the token is applied and then a font weight\ntoken override is applied to ensure the tokenised styles match the original. One main exception is\nline height - **this rule will match against tokens that have a different line height**. Letter\nspacing values are also ignored.\n\n## Examples\n\nUsing anything other than design tokens such as hardcoded values or legacy theme constants will be\nconsidered violations.\n\n### Incorrect\n\n```js\nimport { fontSize } from '@atlaskit/theme/constants';\n\ncss({ fontSize: fontSize() });\n                ^^^^^^^^^^\n\ncss({ fontSize: '14px' });\n                ^^^^^^\n\ncss({\n  fontSize: '14px',\n            ^^^^^^\n  lineHeight: '20px',\n  fontWeight: 600\n});\n\n```\n\n### Correct\n\n```js\nimport { token } from '@atlaskit/tokens';\n\ncss({ font: token('font.heading.large') });\n\ncss({ font: token('font.body') });\n```\n\n## Options\n\n`shouldEnforceFallbacks`: Set to `true` to ensure token fallback values are added. Defaults to\n`false`.\n\n`enableUnsafeAutofix`: Rule creates errors with autofixes instead of suggestions. Defaults to\n`false`.\n\n`patterns`: Array of patterns to enable, new patterns will gradually be rolled out behind this\nconfig option. Available patterns `style-object`, `font-weight`, `font-family`, `banned-properties`,\n`restricted-capitalisation`. Defaults to enabling all patterns.\n",
+  content: "{\"ruleName\":\"use-tokens-typography\",\"description\":\"Enforces the use of design tokens for typography properties.\",\"content\":\"# use-tokens-typography\\n\\nEnforces the use of design tokens for typography properties.\\n\\nUsing design tokens results in a harmonious experience for end users whilst providing theming and\\nconsistency. Typography tokens are strongly recommended to further align our experiences and make\\nfuture changes easier.\\n\\nNote: This rule is fairly defensive when it comes to replacing values with tokens. It will only run\\nover style blocks that contain a fontSize property. It will then attempt to match that font size to\\na token. If multiple matching tokens are found it then tries to match on font weight. If a token can\\nbe found to match the font size but not font weight, the token is applied and then a font weight\\ntoken override is applied to ensure the tokenised styles match the original. One main exception is\\nline height - **this rule will match against tokens that have a different line height**. Letter\\nspacing values are also ignored.\\n\\n## Examples\\n\\nUsing anything other than design tokens such as hardcoded values or legacy theme constants will be\\nconsidered violations.\\n\\n### Incorrect\\n\\n```js\\nimport { fontSize } from '@atlaskit/theme/constants';\\n\\ncss({ fontSize: fontSize() });\\n                ^^^^^^^^^^\\n\\ncss({ fontSize: '14px' });\\n                ^^^^^^\\n\\ncss({\\n  fontSize: '14px',\\n            ^^^^^^\\n  lineHeight: '20px',\\n  fontWeight: 600\\n});\\n\\n```\\n\\n### Correct\\n\\n```js\\nimport { token } from '@atlaskit/tokens';\\n\\ncss({ font: token('font.heading.large') });\\n\\ncss({ font: token('font.body') });\\n```\\n\\n## Options\\n\\n`shouldEnforceFallbacks`: Set to `true` to ensure token fallback values are added. Defaults to\\n`false`.\\n\\n`enableUnsafeAutofix`: Rule creates errors with autofixes instead of suggestions. Defaults to\\n`false`.\\n\\n`patterns`: Array of patterns to enable, new patterns will gradually be rolled out behind this\\nconfig option. Available patterns `style-object`, `font-weight`, `font-family`, `banned-properties`,\\n`restricted-capitalisation`. Defaults to enabling all patterns.\\n\"}",
   ruleName: 'use-tokens-typography',
   description: 'Enforces the use of design tokens for typography properties.'
 }, {
-  content: "# use-visually-hidden\n\nUsing the visually hidden component allows you to delete bespoke or legacy theme code and replace it\nwith a ready made solution by the Atlassian Design System Team.\n\n## Examples\n\nThis rule marks code as violations when it can be replaced 1:1 with the visually hidden component.\n\n### Incorrect\n\n```js\nimport { css } from '@emotion/core';\nimport { visuallyHidden } from '@atlaskit/theme/constants';\n\nconst visuallyHiddenStyles = css({\n  width: '1px',\n  height: '1px',\n  padding: '0',\n  position: 'absolute',\n  border: '0',\n  clip: 'rect(1px, 1px, 1px, 1px)',\n  overflow: 'hidden',\n  whiteSpace: 'nowrap',\n});\n\nconst VisuallyHidden = styled.span`${visuallyHidden()}`;\n                                     ^^^^^^^^^^^^^^\n```\n\n### Correct\n\n```js\nimport VisuallyHidden from '@atlaskit/visually-hidden';\n```\n",
+  content: "{\"ruleName\":\"use-visually-hidden\",\"description\":\"Using the visually hidden component allows you to delete bespoke or legacy theme code and replace it\",\"content\":\"# use-visually-hidden\\n\\nUsing the visually hidden component allows you to delete bespoke or legacy theme code and replace it\\nwith a ready made solution by the Atlassian Design System Team.\\n\\n## Examples\\n\\nThis rule marks code as violations when it can be replaced 1:1 with the visually hidden component.\\n\\n### Incorrect\\n\\n```js\\nimport { css } from '@emotion/core';\\nimport { visuallyHidden } from '@atlaskit/theme/constants';\\n\\nconst visuallyHiddenStyles = css({\\n  width: '1px',\\n  height: '1px',\\n  padding: '0',\\n  position: 'absolute',\\n  border: '0',\\n  clip: 'rect(1px, 1px, 1px, 1px)',\\n  overflow: 'hidden',\\n  whiteSpace: 'nowrap',\\n});\\n\\nconst VisuallyHidden = styled.span`${visuallyHidden()}`;\\n                                     ^^^^^^^^^^^^^^\\n```\\n\\n### Correct\\n\\n```js\\nimport VisuallyHidden from '@atlaskit/visually-hidden';\\n```\\n\"}",
   ruleName: 'use-visually-hidden',
   description: 'Using the visually hidden component allows you to delete bespoke or legacy theme code and replace it'
 }];