@atlaskit/ads-mcp 1.10.6 → 1.10.8

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

@@ -3,7 +3,7 @@
  *
  * Structured content for MCP (JSON) for ESLint rule docs from constellation.
  *
- * @codegen <<SignedSource::6ba7bf9098b6455f755c4d8debdf36ae>>
+ * @codegen <<SignedSource::8f3c18de23b372ad464e27e04a839f06>>
  * @codegenCommand yarn build structured-docs
  */
 /* eslint-disable no-template-curly-in-string */
@@ -13,7 +13,7 @@ export var lintRulesMcpStructuredContent = [{
   ruleName: 'badge-appearance-semantic-migration',
   description: 'This rule enforces migration of Badge component `appearance` prop values to new semantic values.'
 }, {
-  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\"}",
+  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\\n`css={...}` JSX 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.'
 }, {
@@ -49,7 +49,7 @@ export var lintRulesMcpStructuredContent = [{
   ruleName: 'icon-label',
   description: 'Icon labels are used to describe what the icon is so the visually impaired can be described what the'
 }, {
-  content: '{"ruleName":"index","description":"---","content":"---\\norder: 0\\n---\\n\\nThis plugin contains rules that should be used when working with the\\n[Atlassian Design System](https://atlassian.design).\\n\\n## Rules\\n\\n<!-- START_RULE_TABLE_CODEGEN -->\\n<!-- @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen -->\\n\\n| Rule                                                                                                                                                  | Description                                                                                                                                                                                                                                                                                                         | Recommended | Fixable | Suggestions |\\n| ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------- | ----------- |\\n| <a href=\\"/components/eslint-plugin-design-system/consistent-css-prop-usage/usage\\">consistent-css-prop-usage</a>                                       | Ensures consistency with `css` and `xcss` prop usages                                                                                                                                                                                                                                                               | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/enforce-inline-styles-in-select/usage\\">enforce-inline-styles-in-select</a>                           | Disallow unsupported CSS selectors in styles prop for @atlaskit/select and require inline styles only                                                                                                                                                                                                               |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-avatar-tag-avatar-props/usage\\">ensure-avatar-tag-avatar-props</a>                             | Ensures AvatarTag avatar prop does not include controlled props (size, borderColor, appearance) which are managed internally.                                                                                                                                                                                       | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-design-token-usage/usage\\">ensure-design-token-usage</a>                                       | Enforces usage of design tokens rather than hard-coded values.                                                                                                                                                                                                                                                      | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-design-token-usage-preview/usage\\">ensure-design-token-usage/preview</a>                       | Enforces usage of pre-release design tokens rather than hard-coded values.                                                                                                                                                                                                                                          |             | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-icon-color/usage\\">ensure-icon-color</a>                                                       | Enforces that upcoming icon components have a color prop set, to enable a migration of the default value.                                                                                                                                                                                                           |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-proper-xcss-usage/usage\\">ensure-proper-xcss-usage</a>                                         | Enforces proper xcss usage: migrate from xcss() to cssMap() and use cssMap objects with specific keys.                                                                                                                                                                                                              |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/expand-motion-shorthand/usage\\">expand-motion-shorthand</a>                                           | Expands `transition` and `animation` CSS shorthand properties into their individual sub-properties, so individual values can be replaced with motion tokens.                                                                                                                                                        |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/icon-label/usage\\">icon-label</a>                                                                     | Enforces accessible usage of icon labels when composed with Atlassian Design System components.                                                                                                                                                                                                                     | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/lozenge-badge-tag-labelling-system-migration/usage\\">lozenge-badge-tag-labelling-system-migration</a> | Helps migrate Lozenge isBold prop, Badge appearance values, and SimpleTag/RemovableTag components as part of the Labelling System Phase 1 migration.                                                                                                                                                                |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-banned-imports/usage\\">no-banned-imports</a>                                                       | Disallow importing banned modules.                                                                                                                                                                                                                                                                                  | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-css-map-scoped/usage\\">no-css-map-scoped</a>                                                       | Disallows usage of the experimental `cssMapScoped` API from `@compiled/react`. This API is internal and is not part of the public Compiled CSS-in-JS interface.                                                                                                                                                     | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-css-tagged-template-expression/usage\\">no-css-tagged-template-expression</a>                       | Disallows any `css` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                          |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-dark-theme-vr-tests/usage\\">no-dark-theme-vr-tests</a>                                             | Disallow using dark colorScheme in VR tests.                                                                                                                                                                                                                                                                        |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-deprecated-apis/usage\\">no-deprecated-apis</a>                                                     | Disallow using deprecated APIs.                                                                                                                                                                                                                                                                                     | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-deprecated-design-token-usage/usage\\">no-deprecated-design-token-usage</a>                         | Disallow using deprecated design tokens.                                                                                                                                                                                                                                                                            | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-deprecated-imports/usage\\">no-deprecated-imports</a>                                               | Disallow importing deprecated modules.                                                                                                                                                                                                                                                                              | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-direct-use-of-web-platform-drag-and-drop/usage\\">no-direct-use-of-web-platform-drag-and-drop</a>   | Disallow using direct use of native drag and drop (please use Pragmatic drag and drop)                                                                                                                                                                                                                              | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-emotion-primitives/usage\\">no-emotion-primitives</a>                                               | Ensures usage of Compiled Primitives import instead of Emotion entrypoint.                                                                                                                                                                                                                                          |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-empty-styled-expression/usage\\">no-empty-styled-expression</a>                                     | Forbids any styled expression to be used when passing empty arguments to styled.div() (or other JSX elements).                                                                                                                                                                                                      |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-exported-css/usage\\">no-exported-css</a>                                                           | Forbid exporting `css` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable.                                                                                                                                                              |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-exported-keyframes/usage\\">no-exported-keyframes</a>                                               | Forbid exporting `keyframes` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable.                                                                                                                                                        |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-anchor/usage\\">no-html-anchor</a>                                                             | Discourage direct usage of HTML anchor elements in favor of Atlassian Design System link components.                                                                                                                                                                                                                | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-button/usage\\">no-html-button</a>                                                             | Discourage direct usage of HTML button elements in favor of Atlassian Design System button components.                                                                                                                                                                                                              | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-checkbox/usage\\">no-html-checkbox</a>                                                         | Discourage direct usage of HTML checkbox elements in favor of the Atlassian Design System checkbox component.                                                                                                                                                                                                       | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-code/usage\\">no-html-code</a>                                                                 | Discourage direct usage of HTML code elements in favor of the Atlassian Design System code component.                                                                                                                                                                                                               | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-heading/usage\\">no-html-heading</a>                                                           | Discourage direct usage of HTML heading elements in favor of Atlassian Design System heading components.                                                                                                                                                                                                            | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-image/usage\\">no-html-image</a>                                                               | Discourage direct usage of HTML image elements in favor of the Atlassian Design System image component.                                                                                                                                                                                                             | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-radio/usage\\">no-html-radio</a>                                                               | Discourage direct usage of HTML radio elements in favor of the Atlassian Design System radio component.                                                                                                                                                                                                             | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-range/usage\\">no-html-range</a>                                                               | Discourage direct usage of HTML range elements in favor of the Atlassian Design System range component.                                                                                                                                                                                                             | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-select/usage\\">no-html-select</a>                                                             | Discourage direct usage of HTML select elements in favor of the Atlassian Design System select component.                                                                                                                                                                                                           | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-text-input/usage\\">no-html-text-input</a>                                                     | Discourage direct usage of HTML text input elements in favor of the Atlassian Design System textfield component.                                                                                                                                                                                                    | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-textarea/usage\\">no-html-textarea</a>                                                         | Discourage direct usage of HTML textarea elements in favor of the Atlassian Design System textarea component.                                                                                                                                                                                                       | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-icon-spacing-prop/usage\\">no-icon-spacing-prop</a>                                                 | Disallows usage of the deprecated spacing prop on new icons. Use Flex with cssMap for spacing instead.                                                                                                                                                                                                              | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-invalid-css-map/usage\\">no-invalid-css-map</a>                                                     | Checks the validity of a CSS map created through cssMap. This is intended to be used alongside TypeScript\'s type-checking.                                                                                                                                                                                          | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-keyframes-tagged-template-expression/usage\\">no-keyframes-tagged-template-expression</a>           | Disallows any `keyframe` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                     |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-margin/usage\\">no-margin</a>                                                                       | Disallow using the margin CSS property.                                                                                                                                                                                                                                                                             |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-modal-label/usage\\">no-modal-label</a>                                                             | Disallows usage of the `label` prop on Atlassian Design System modal dialog and modal entry-point triggers.                                                                                                                                                                                                         | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-nested-styles/usage\\">no-nested-styles</a>                                                         | Disallows use of nested styles in `css` functions.                                                                                                                                                                                                                                                                  | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-physical-properties/usage\\">no-physical-properties</a>                                             | Disallow physical properties and values in `css` and `cssMap` function calls.                                                                                                                                                                                                                                       |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-placeholder/usage\\">no-placeholder</a>                                                             | Placeholders should not be used. If information should be given to the user about the proper type or formatting of a value, this should be included using a helper message that is associated to the input instead.                                                                                                 | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-readonly-or-disabled-inputs/usage\\">no-readonly-or-disabled-inputs</a>                             | Inputs should almost always be interactive. Disabled and read-only inputs can usually be replaced by a more user-friendly design pattern.                                                                                                                                                                           | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-separator-with-list-elements/usage\\">no-separator-with-list-elements</a>                           | Warn when the `separator` prop is used with `as=\\"li\\"`, `as=\\"ol\\"`, or `as=\\"dl\\"` in the Inline component.                                                                                                                                                                                                             | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-styled-tagged-template-expression/usage\\">no-styled-tagged-template-expression</a>                 | Disallows any `styled` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                       |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-to-match-snapshot/usage\\">no-to-match-snapshot</a>                                                 | Disallow using toMatchSnapshot() 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.                                                                                                                                                                                                |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-button-group-label/usage\\">use-button-group-label</a>                                             | Ensures button groups are described to assistive technology by a direct label or by another element.                                                                                                                                                                                                                | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-character-counter-field/usage\\">use-character-counter-field</a>                                   | Suggests using CharacterCounterField or CharacterCounter when Textfield or Textarea components have maxLength or minLength props.                                                                                                                                                                                   | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-correct-field/usage\\">use-correct-field</a>                                                       | Ensure makers use appropriate field component for their respective form elements.                                                                                                                                                                                                                                   | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-cx-function-in-xcss/usage\\">use-cx-function-in-xcss</a>                                           | Enforces cx function use to combine styles in xcss.                                                                                                                                                                                                                                                                 | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-datetime-picker-calendar-button/usage\\">use-datetime-picker-calendar-button</a>                   | Encourages makers to use calendar button in Atlassian Design System\'s date picker and datetime picker components.                                                                                                                                                                                                   | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-drawer-label/usage\\">use-drawer-label</a>                                                         | Encourages to provide accessible name for Atlassian Design System Drawer component.                                                                                                                                                                                                                                 | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-field-message-wrapper/usage\\">use-field-message-wrapper</a>                                       | Encourage use of message wrapper component when using form message components.                                                                                                                                                                                                                                      | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-heading/usage\\">use-heading</a>                                                                   | Encourage the usage of heading components.                                                                                                                                                                                                                                                                          | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-heading-level-in-section-message/usage\\">use-heading-level-in-section-message</a>                 | The `SectionMessage` component in `@atlaskit/section-message` needs to be the correct level within the document flow. This is not something that can be automated and requires contextual knowledge of what is present in the experience.                                                                           | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-heading-level-in-spotlight-card/usage\\">use-heading-level-in-spotlight-card</a>                   | Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context.                                                                                                                              | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-href-in-link-item/usage\\">use-href-in-link-item</a>                                               | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-latest-xcss-syntax/usage\\">use-latest-xcss-syntax</a>                                             | Enforces usage of space design tokens rather than hard-coded values in xcss.                                                                                                                                                                                                                                        | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-latest-xcss-syntax-typography/usage\\">use-latest-xcss-syntax-typography</a>                       | Prohibits use of unsafe styling properties in xcss. Please use Text/Heading primitives instead.                                                                                                                                                                                                                     | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-menu-section-title/usage\\">use-menu-section-title</a>                                             | Encourages makers to provide accessible title for Atlassian Design System Menu Section component.                                                                                                                                                                                                                   | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-modal-dialog-close-button/usage\\">use-modal-dialog-close-button</a>                               | Encourages makers to use close button in Atlassian Design System\'s modal dialog component.                                                                                                                                                                                                                          | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-modal-title/usage\\">use-modal-title</a>                                                           | Encourages makers to include `ModalTitle` within `ModalHeader` when using Atlassian Design System modal dialog.                                                                                                                                                                                                     | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-onboarding-spotlight-label/usage\\">use-onboarding-spotlight-label</a>                             | Ensures onboarding spotlight dialogs are described to assistive technology by a direct label or by another element.                                                                                                                                                                                                 | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-popup-label/usage\\">use-popup-label</a>                                                           | Encourages to provide accessible name for Atlassian Design System Popup component.                                                                                                                                                                                                                                  | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-pressable-motion/usage\\">use-pressable-motion</a>                                                 | Suggests semantic motion tokens when Pressable or native buttons change interactive colours through local static styles.                                                                                                                                                                                            |             |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-primitives-text/usage\\">use-primitives-text</a>                                                   | Encourage the usage of text components.                                                                                                                                                                                                                                                                             | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-should-render-to-parent/usage\\">use-should-render-to-parent</a>                                   | Encourages makers to use the `shouldRenderToParent` where possible in Atlassian Design System `Popup` and `DropdownMenu` components.                                                                                                                                                                                | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-simple-field/usage\\">use-simple-field</a>                                                         | Encourage use of simple field for better developer experience and accessibility.                                                                                                                                                                                                                                    | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-simple-form/usage\\">use-simple-form</a>                                                           | Encourage use of simple form for better developer experience and accessibility.                                                                                                                                                                                                                                     | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-spotlight-package/usage\\">use-spotlight-package</a>                                               | Discourage the use of @atlaskit/onboarding in favor of @atlaskit/spotlight.                                                                                                                                                                                                                                         |             | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tag-group-label/usage\\">use-tag-group-label</a>                                                   | Ensures tag groups are described to assistive technology by a direct label or by another element.                                                                                                                                                                                                                   | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-textfield-autocomplete/usage\\">use-textfield-autocomplete</a>                                     | Enforce that Textfield components with type=\\"email\\", \\"tel\\", or \\"url\\" have an appropriate autocomplete value for WCAG 2.2 SC 1.3.5 compliance (Identify Input Purpose).                                                                                                                                              | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tokens-motion/usage\\">use-tokens-motion</a>                                                       | Enforces usage of motion design tokens rather than hard-coded duration and easing values.                                                                                                                                                                                                                           |             |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tokens-shape/usage\\">use-tokens-shape</a>                                                         | Enforces usage of shape design tokens rather than hard-coded values.                                                                                                                                                                                                                                                |             | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tokens-space/usage\\">use-tokens-space</a>                                                         | Enforces usage of space design tokens rather than hard-coded values.                                                                                                                                                                                                                                                |             | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tokens-typography/usage\\">use-tokens-typography</a>                                               | Enforces usage of design tokens for typography properties rather than hard-coded values.                                                                                                                                                                                                                            | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-visually-hidden/usage\\">use-visually-hidden</a>                                                   | Enforce usage of the visually hidden component.                                                                                                                                                                                                                                                                     | Yes         | Yes     |             |\\n\\n<!-- END_RULE_TABLE_CODEGEN -->\\n\\n\\n## Props\\n\\nUse the recommended config to get reasonable defaults recommended by the Atlassian Design System:\\n\\n```diff\\nmodule.exports = {\\n  extends: [\\n+    \'plugin:@atlaskit/design-system/recommended\',\\n  ],\\n};\\n```\\n\\nWe don\'t recommended maintaining your own configuration. If you do not use our config you will need\\nto specify individual rules and configuration. Add the plugin to your `eslint.config.cjs` file.\\n\\n```diff\\nmodule.exports = {\\n  plugins: [\\n+    \'@atlaskit/design-system\',\\n  ],\\n};\\n```\\n\\nEnable the rules that you would like to use.\\n\\n```diff\\nmodule.exports = {\\n  rules: [\\n+    \'@atlaskit/design-system/no-deprecated-apis\': \'error\',\\n  ],\\n};\\n```\\n"}',
+  content: '{"ruleName":"index","description":"---","content":"---\\norder: 0\\n---\\n\\nThis plugin contains rules that should be used when working with the\\n[Atlassian Design System](https://atlassian.design).\\n\\n## Rules\\n\\n<!-- START_RULE_TABLE_CODEGEN -->\\n<!-- @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen -->\\n\\n| Rule                                                                                                                                                  | Description                                                                                                                                                                                                                                                                                                         | Recommended | Fixable | Suggestions |\\n| ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------- | ----------- |\\n| <a href=\\"/components/eslint-plugin-design-system/consistent-css-prop-usage/usage\\">consistent-css-prop-usage</a>                                       | Ensures consistency with `css` and `xcss` prop usages                                                                                                                                                                                                                                                               | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/enforce-inline-styles-in-select/usage\\">enforce-inline-styles-in-select</a>                           | Disallow unsupported CSS selectors in styles prop for @atlaskit/select and require inline styles only                                                                                                                                                                                                               |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-avatar-tag-avatar-props/usage\\">ensure-avatar-tag-avatar-props</a>                             | Ensures AvatarTag avatar prop does not include controlled props (size, borderColor, appearance) which are managed internally.                                                                                                                                                                                       | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-design-token-usage/usage\\">ensure-design-token-usage</a>                                       | Enforces usage of design tokens rather than hard-coded values.                                                                                                                                                                                                                                                      | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-design-token-usage-preview/usage\\">ensure-design-token-usage/preview</a>                       | Enforces usage of pre-release design tokens rather than hard-coded values.                                                                                                                                                                                                                                          |             | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-icon-color/usage\\">ensure-icon-color</a>                                                       | Enforces that upcoming icon components have a color prop set, to enable a migration of the default value.                                                                                                                                                                                                           |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-proper-xcss-usage/usage\\">ensure-proper-xcss-usage</a>                                         | Enforces proper xcss usage: migrate from xcss() to cssMap() and use cssMap objects with specific keys.                                                                                                                                                                                                              |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/expand-motion-shorthand/usage\\">expand-motion-shorthand</a>                                           | Expands `transition` and `animation` CSS shorthand properties into their individual sub-properties, so individual values can be replaced with motion tokens.                                                                                                                                                        |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/icon-label/usage\\">icon-label</a>                                                                     | Enforces accessible usage of icon labels when composed with Atlassian Design System components.                                                                                                                                                                                                                     | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/lozenge-badge-tag-labelling-system-migration/usage\\">lozenge-badge-tag-labelling-system-migration</a> | Helps migrate Lozenge isBold prop, Badge appearance values, and SimpleTag/RemovableTag components as part of the Labelling System Phase 1 migration.                                                                                                                                                                |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-banned-imports/usage\\">no-banned-imports</a>                                                       | Disallow importing banned modules.                                                                                                                                                                                                                                                                                  | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-css-map-scoped/usage\\">no-css-map-scoped</a>                                                       | Disallows usage of the experimental `cssMapScoped` API from `@compiled/react`. This API is internal and is not part of the public Compiled CSS-in-JS interface.                                                                                                                                                     | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-css-tagged-template-expression/usage\\">no-css-tagged-template-expression</a>                       | Disallows any `css` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                          |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-dark-theme-vr-tests/usage\\">no-dark-theme-vr-tests</a>                                             | Disallow using dark colorScheme in VR tests.                                                                                                                                                                                                                                                                        |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-deprecated-apis/usage\\">no-deprecated-apis</a>                                                     | Disallow using deprecated APIs.                                                                                                                                                                                                                                                                                     | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-deprecated-design-token-usage/usage\\">no-deprecated-design-token-usage</a>                         | Disallow using deprecated design tokens.                                                                                                                                                                                                                                                                            | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-deprecated-imports/usage\\">no-deprecated-imports</a>                                               | Disallow importing deprecated modules.                                                                                                                                                                                                                                                                              | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-direct-use-of-web-platform-drag-and-drop/usage\\">no-direct-use-of-web-platform-drag-and-drop</a>   | Disallow using direct use of native drag and drop (please use Pragmatic drag and drop)                                                                                                                                                                                                                              | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-emotion-primitives/usage\\">no-emotion-primitives</a>                                               | Ensures usage of Compiled Primitives import instead of Emotion entrypoint.                                                                                                                                                                                                                                          |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-empty-styled-expression/usage\\">no-empty-styled-expression</a>                                     | Forbids any styled expression to be used when passing empty arguments to styled.div() (or other JSX elements).                                                                                                                                                                                                      |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-exported-css/usage\\">no-exported-css</a>                                                           | Forbid exporting `css` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable.                                                                                                                                                              |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-exported-keyframes/usage\\">no-exported-keyframes</a>                                               | Forbid exporting `keyframes` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable.                                                                                                                                                        |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-anchor/usage\\">no-html-anchor</a>                                                             | Discourage direct usage of HTML anchor elements in favor of Atlassian Design System link components.                                                                                                                                                                                                                | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-button/usage\\">no-html-button</a>                                                             | Discourage direct usage of HTML button elements in favor of Atlassian Design System button components.                                                                                                                                                                                                              | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-checkbox/usage\\">no-html-checkbox</a>                                                         | Discourage direct usage of HTML checkbox elements in favor of the Atlassian Design System checkbox component.                                                                                                                                                                                                       | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-code/usage\\">no-html-code</a>                                                                 | Discourage direct usage of HTML code elements in favor of the Atlassian Design System code component.                                                                                                                                                                                                               | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-heading/usage\\">no-html-heading</a>                                                           | Discourage direct usage of HTML heading elements in favor of Atlassian Design System heading components.                                                                                                                                                                                                            | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-image/usage\\">no-html-image</a>                                                               | Discourage direct usage of HTML image elements in favor of the Atlassian Design System image component.                                                                                                                                                                                                             | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-radio/usage\\">no-html-radio</a>                                                               | Discourage direct usage of HTML radio elements in favor of the Atlassian Design System radio component.                                                                                                                                                                                                             | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-range/usage\\">no-html-range</a>                                                               | Discourage direct usage of HTML range elements in favor of the Atlassian Design System range component.                                                                                                                                                                                                             | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-select/usage\\">no-html-select</a>                                                             | Discourage direct usage of HTML select elements in favor of the Atlassian Design System select component.                                                                                                                                                                                                           | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-text-input/usage\\">no-html-text-input</a>                                                     | Discourage direct usage of HTML text input elements in favor of the Atlassian Design System textfield component.                                                                                                                                                                                                    | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-textarea/usage\\">no-html-textarea</a>                                                         | Discourage direct usage of HTML textarea elements in favor of the Atlassian Design System textarea component.                                                                                                                                                                                                       | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-icon-spacing-prop/usage\\">no-icon-spacing-prop</a>                                                 | Disallows usage of the deprecated spacing prop on new icons. Use Flex with cssMap for spacing instead.                                                                                                                                                                                                              | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/no-invalid-css-map/usage\\">no-invalid-css-map</a>                                                     | Checks the validity of a CSS map created through cssMap. This is intended to be used alongside TypeScript\'s type-checking.                                                                                                                                                                                          | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-keyframes-tagged-template-expression/usage\\">no-keyframes-tagged-template-expression</a>           | Disallows any `keyframe` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                     |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-margin/usage\\">no-margin</a>                                                                       | Disallow using the margin CSS property.                                                                                                                                                                                                                                                                             |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-modal-label/usage\\">no-modal-label</a>                                                             | Disallows usage of the `label` prop on Atlassian Design System modal dialog and modal entry-point triggers.                                                                                                                                                                                                         | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-nested-styles/usage\\">no-nested-styles</a>                                                         | Disallows use of nested styles in `css` functions.                                                                                                                                                                                                                                                                  | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-physical-properties/usage\\">no-physical-properties</a>                                             | Disallow physical properties and values in `css` and `cssMap` function calls.                                                                                                                                                                                                                                       |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-placeholder/usage\\">no-placeholder</a>                                                             | Placeholders should not be used. If information should be given to the user about the proper type or formatting of a value, this should be included using a helper message that is associated to the input instead.                                                                                                 | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-readonly-or-disabled-inputs/usage\\">no-readonly-or-disabled-inputs</a>                             | Inputs should almost always be interactive. Disabled and read-only inputs can usually be replaced by a more user-friendly design pattern.                                                                                                                                                                           | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-separator-with-list-elements/usage\\">no-separator-with-list-elements</a>                           | Warn when the `separator` prop is used with `as=\\"li\\"`, `as=\\"ol\\"`, or `as=\\"dl\\"` in the Inline component.                                                                                                                                                                                                             | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-styled-tagged-template-expression/usage\\">no-styled-tagged-template-expression</a>                 | Disallows any `styled` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                       |             | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-to-match-snapshot/usage\\">no-to-match-snapshot</a>                                                 | Disallow using toMatchSnapshot() and toMatchInlineSnapshot() in unit tests. Snapshot assertions should be replaced with explicit assertions.                                                                                                                                                                        |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unsafe-design-token-usage/usage\\">no-unsafe-design-token-usage</a>                                 | Enforces design token usage is statically and locally analyzable.                                                                                                                                                                                                                                                   | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unsafe-inline-snapshot/usage\\">no-unsafe-inline-snapshot</a>                                       | Enforce guardrails on toMatchInlineSnapshot usage: snapshots must not exceed 100 lines and must not contain internal implementation details like className or style attributes.                                                                                                                                     |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unsafe-style-overrides/usage\\">no-unsafe-style-overrides</a>                                       | Discourage usage of unsafe style overrides used against the Atlassian Design System.                                                                                                                                                                                                                                | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unsupported-drag-and-drop-libraries/usage\\">no-unsupported-drag-and-drop-libraries</a>             | Disallow importing unsupported drag and drop modules.                                                                                                                                                                                                                                                               | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unused-css-map/usage\\">no-unused-css-map</a>                                                       | Detects unused styles in cssMap objects to help keep code clean.                                                                                                                                                                                                                                                    | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/prefer-primitives/usage\\">prefer-primitives</a>                                                       | Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability.                                                                                                                                                                                                |             |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-button-group-label/usage\\">use-button-group-label</a>                                             | Ensures button groups are described to assistive technology by a direct label or by another element.                                                                                                                                                                                                                | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-character-counter-field/usage\\">use-character-counter-field</a>                                   | Suggests using CharacterCounterField or CharacterCounter when Textfield or Textarea components have maxLength or minLength props.                                                                                                                                                                                   | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-correct-field/usage\\">use-correct-field</a>                                                       | Ensure makers use appropriate field component for their respective form elements.                                                                                                                                                                                                                                   | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-cx-function-in-xcss/usage\\">use-cx-function-in-xcss</a>                                           | Enforces cx function use to combine styles in xcss.                                                                                                                                                                                                                                                                 | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-datetime-picker-calendar-button/usage\\">use-datetime-picker-calendar-button</a>                   | Encourages makers to use calendar button in Atlassian Design System\'s date picker and datetime picker components.                                                                                                                                                                                                   | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-drawer-label/usage\\">use-drawer-label</a>                                                         | Encourages to provide accessible name for Atlassian Design System Drawer component.                                                                                                                                                                                                                                 | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-field-message-wrapper/usage\\">use-field-message-wrapper</a>                                       | Encourage use of message wrapper component when using form message components.                                                                                                                                                                                                                                      | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-heading/usage\\">use-heading</a>                                                                   | Encourage the usage of heading components.                                                                                                                                                                                                                                                                          | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-heading-level-in-section-message/usage\\">use-heading-level-in-section-message</a>                 | The `SectionMessage` component in `@atlaskit/section-message` needs to be the correct level within the document flow. This is not something that can be automated and requires contextual knowledge of what is present in the experience.                                                                           | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-heading-level-in-spotlight-card/usage\\">use-heading-level-in-spotlight-card</a>                   | Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context.                                                                                                                              | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-href-in-link-item/usage\\">use-href-in-link-item</a>                                               | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-latest-xcss-syntax/usage\\">use-latest-xcss-syntax</a>                                             | Enforces usage of space design tokens rather than hard-coded values in xcss.                                                                                                                                                                                                                                        | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-latest-xcss-syntax-typography/usage\\">use-latest-xcss-syntax-typography</a>                       | Prohibits use of unsafe styling properties in xcss. Please use Text/Heading primitives instead.                                                                                                                                                                                                                     | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-menu-section-title/usage\\">use-menu-section-title</a>                                             | Encourages makers to provide accessible title for Atlassian Design System Menu Section component.                                                                                                                                                                                                                   | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-modal-dialog-close-button/usage\\">use-modal-dialog-close-button</a>                               | Encourages makers to use close button in Atlassian Design System\'s modal dialog component.                                                                                                                                                                                                                          | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-modal-title/usage\\">use-modal-title</a>                                                           | Encourages makers to include `ModalTitle` within `ModalHeader` when using Atlassian Design System modal dialog.                                                                                                                                                                                                     | Yes         |         |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-onboarding-spotlight-label/usage\\">use-onboarding-spotlight-label</a>                             | Ensures onboarding spotlight dialogs are described to assistive technology by a direct label or by another element.                                                                                                                                                                                                 | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-popup-label/usage\\">use-popup-label</a>                                                           | Encourages to provide accessible name for Atlassian Design System Popup component.                                                                                                                                                                                                                                  | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-pressable-motion/usage\\">use-pressable-motion</a>                                                 | Suggests semantic motion tokens when Pressable or native buttons change interactive colours through local static styles.                                                                                                                                                                                            |             |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-primitives-text/usage\\">use-primitives-text</a>                                                   | Encourage the usage of text components.                                                                                                                                                                                                                                                                             | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-should-render-to-parent/usage\\">use-should-render-to-parent</a>                                   | Encourages makers to use the `shouldRenderToParent` where possible in Atlassian Design System `Popup` and `DropdownMenu` components.                                                                                                                                                                                | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-simple-field/usage\\">use-simple-field</a>                                                         | Encourage use of simple field for better developer experience and accessibility.                                                                                                                                                                                                                                    | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-simple-form/usage\\">use-simple-form</a>                                                           | Encourage use of simple form for better developer experience and accessibility.                                                                                                                                                                                                                                     | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-spotlight-package/usage\\">use-spotlight-package</a>                                               | Discourage the use of @atlaskit/onboarding in favor of @atlaskit/spotlight.                                                                                                                                                                                                                                         |             | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tag-group-label/usage\\">use-tag-group-label</a>                                                   | Ensures tag groups are described to assistive technology by a direct label or by another element.                                                                                                                                                                                                                   | Yes         |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-textfield-autocomplete/usage\\">use-textfield-autocomplete</a>                                     | Enforce that Textfield components with type=\\"email\\", \\"tel\\", or \\"url\\" have an appropriate autocomplete value for WCAG 2.2 SC 1.3.5 compliance (Identify Input Purpose).                                                                                                                                              | Yes         | Yes     |             |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tokens-motion/usage\\">use-tokens-motion</a>                                                       | Enforces usage of motion design tokens rather than hard-coded duration and easing values.                                                                                                                                                                                                                           |             |         | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tokens-shape/usage\\">use-tokens-shape</a>                                                         | Enforces usage of shape design tokens rather than hard-coded values.                                                                                                                                                                                                                                                |             | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tokens-space/usage\\">use-tokens-space</a>                                                         | Enforces usage of space design tokens rather than hard-coded values.                                                                                                                                                                                                                                                |             | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tokens-typography/usage\\">use-tokens-typography</a>                                               | Enforces usage of design tokens for typography properties rather than hard-coded values.                                                                                                                                                                                                                            | Yes         | Yes     | Yes         |\\n| <a href=\\"/components/eslint-plugin-design-system/use-visually-hidden/usage\\">use-visually-hidden</a>                                                   | Enforce usage of the visually hidden component.                                                                                                                                                                                                                                                                     | Yes         | Yes     |             |\\n\\n<!-- END_RULE_TABLE_CODEGEN -->\\n\\n\\n## Props\\n\\nUse the recommended config to get reasonable defaults recommended by the Atlassian Design System:\\n\\n```diff\\nmodule.exports = {\\n  extends: [\\n+    \'plugin:@atlaskit/design-system/recommended\',\\n  ],\\n};\\n```\\n\\nWe don\'t recommended maintaining your own configuration. If you do not use our config you will need\\nto specify individual rules and configuration. Add the plugin to your `eslint.config.cjs` file.\\n\\n```diff\\nmodule.exports = {\\n  plugins: [\\n+    \'@atlaskit/design-system\',\\n  ],\\n};\\n```\\n\\nEnable the rules that you would like to use.\\n\\n```diff\\nmodule.exports = {\\n  rules: [\\n+    \'@atlaskit/design-system/no-deprecated-apis\': \'error\',\\n  ],\\n};\\n```\\n"}',
   ruleName: 'index',
   description: '---'
 }, {
@@ -85,19 +85,19 @@ export var lintRulesMcpStructuredContent = [{
   ruleName: 'no-dark-theme-vr-tests',
   description: 'Dark theme VR tests are redundant. See'
 }, {
-  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"}',
+  content: '{"ruleName":"no-deprecated-apis","description":"Props across the Atlassian Design System can be deprecated when they are no longer fit for purpose","content":"# no-deprecated-apis\\n\\nProps across the Atlassian Design System can be deprecated when they are no longer fit for purpose\\nor when their use at scale poses a risk.\\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'
+  description: 'Props across the Atlassian Design System can be deprecated when they are no longer fit for purpose'
 }, {
   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: '{"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"}',
+  content: '{"ruleName":"no-deprecated-imports","description":"Packages across the Atlassian Design System can be deprecated when they are no longer fit for","content":"# no-deprecated-imports\\n\\nPackages across the Atlassian Design System can be deprecated when they are no longer fit for\\npurpose or when their use at scale poses a risk.\\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'
+  description: 'Packages across the Atlassian Design System can be deprecated when they are no longer fit for'
 }, {
-  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\"}",
+  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 its 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.'
 }, {
@@ -141,7 +141,7 @@ export var lintRulesMcpStructuredContent = [{
   ruleName: 'no-html-image',
   description: "Don't use native HTML images. The Atlassian Design System provides a ready-made image component that"
 }, {
-  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"}',
+  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</fieldset>\\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"
 }, {
@@ -153,11 +153,11 @@ export var lintRulesMcpStructuredContent = [{
   ruleName: 'no-html-select',
   description: "Don't use native HTML selects. The Atlassian Design System provides a ready-made select component"
 }, {
-  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"}',
+  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 text input 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: '{"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"}',
+  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 textarea 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"
 }, {
@@ -181,7 +181,7 @@ export var lintRulesMcpStructuredContent = [{
   ruleName: 'no-modal-label',
   description: 'Do not use the `label` prop on the Atlassian Design System modal dialog default import.'
 }, {
-  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\"}",
+  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\\nUse canonical typed media-query keys:\\n\\n```tsx\\nimport { css } from '@atlaskit/css';\\nimport type MediaAboveXs from '@atlaskit/css/at-rules/media-above-xs';\\n\\ncss({\\n\\t['@media (min-width: 30rem)' satisfies MediaAboveXs]: {\\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'
 }, {
@@ -193,9 +193,9 @@ export var lintRulesMcpStructuredContent = [{
   ruleName: 'no-placeholder',
   description: 'Placeholders are inherently inaccessible and should not be used. Instead, information about the type'
 }, {
-  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\"}",
+  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.'
+  description: 'This ESLint rule disallows pseudo classes in the `styles` prop for `@atlaskit/select` component.'
 }, {
   content: '{"ruleName":"no-readonly-or-disabled-inputs","description":"Inputs should almost always be interactive. Disabled and read-only inputs can usually be replaced by","content":"# no-readonly-or-disabled-inputs\\n\\nInputs should almost always be interactive. Disabled and read-only inputs can usually be replaced by\\na more user-friendly design pattern. Before using them, consider these alternatives:\\n\\n- Instead of disabling an input, consider removing it altogether, as it cannot be used anyway. Use a\\n  well labeled and described input with clear error, valid, and/or helper messages.\\n- Instead of making an input read-only, consider making it normal text. Read-only inputs do the same\\n  thing as normal text but appear as interactive elements and add themselves to the tab-order, which\\n  can be confusing for users.\\n\\nThere are instances where these attributes are contextually appropriate, like disabling inputs\\nduring loading or asynchronous validation. Consult your accessibility team if you want to know how\\nyou can improve your experience and keep it accessible.\\n\\n## Examples\\n\\nThis rule will find violations for when an input has a disabled or read-only attribute.\\n\\n### Incorrect\\n\\n```jsx\\n<input\\n  id=\\"name\\"\\n  name=\\"username\\"\\n  type=\\"text\\"\\n  value=\\"Jane Doe\\"\\n  disabled\\n  ^^^^^^^^ Input should not be disabled.\\n/>\\n\\n<input\\n  id=\\"name\\"\\n  name=\\"username\\"\\n  type=\\"text\\"\\n  value=\\"Jane Doe\\"\\n  readonly\\n  ^^^^^^^^ Input should not be read-only.\\n/>\\n```\\n\\n```jsx\\nimport Textfield from \'@atlaskit/textfield\';\\n\\n<Textfield defaultValue=\\"Jane Doe\\" isDisabled />\\n                                   ^^^^^^^^^^ Input should not be disabled.\\n<Textfield defaultValue=\\"Jane Doe\\" isReadOnly />\\n                                   ^^^^^^^^^^ Input should not be read-only.\\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          <Textarea\\n            defaultValue=\\"I love this restaurant.\\"\\n            isDisabled\\n            ^^^^^^^^^^ Input should not be disabled.\\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```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          <Textarea\\n            defaultValue=\\"I love this restaurant.\\"\\n            isReadOnly\\n            ^^^^^^^^^^ Input should not be read-only.\\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\\" value=\\"Jane Doe\\" />\\n\\n<p>The current user\'s username is Jane Doe.</p>\\n```\\n\\n```jsx\\nimport Textfield from \'@atlaskit/textfield\';\\nimport { Text } from \'@atlaskit/primitives\';\\n\\n<Textfield value=\\"Jane Doe\\" />\\n\\n<Text>The current user\'s username is Jane Doe.</Text>\\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        defaultValue=\\"I love this restaurant.\\"\\n        component={({ fieldProps }) => <Textarea {...fieldProps} />}\\n      />\\n      <FormFooter>\\n        <Button type=\\"submit\\" appearance=\\"primary\\">\\n          Submit\\n        </Button>\\n      </FormFooter>\\n    </Form>\\n  );\\n}\\n```\\n"}',
   ruleName: 'no-readonly-or-disabled-inputs',
@@ -209,13 +209,13 @@ export var lintRulesMcpStructuredContent = [{
   ruleName: 'no-styled-tagged-template-expression',
   description: 'Disallows any `styled` tagged template expressions that originate from a CSS-in-JS library,'
 }, {
-  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"}',
+  content: '{"ruleName":"no-to-match-snapshot","description":"This rule disallows the use of Jest snapshot matchers in unit tests:","content":"# no-to-match-snapshot\\n\\nThis rule disallows the use of Jest snapshot matchers in unit tests:\\n\\n- `toMatchSnapshot()`\\n- `toMatchInlineSnapshot()`\\n\\nUse explicit assertions instead (for example `toEqual`, `toMatchObject`, `toContain`, or Testing\\nLibrary assertions like `toHaveTextContent`).\\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).toEqual(expect.any(HTMLElement));\\nexpect(container.querySelector(\'span\')).not.toBeNull();\\n\\n// Testing Library examples\\nexpect(screen.getByText(\'test\')).toBeInTheDocument();\\nexpect(screen.getByTestId(\'my-thing\')).toHaveTextContent(\'test\');\\n```\\n\\n## Rationale\\n\\nSnapshot matchers are intentionally disallowed in unit tests to avoid brittle, hard-to-review\\nbaselines.\\n\\nInstead of snapshots, assert on the specific behavior you care about (text, attributes, structure,\\nand key style properties) using explicit assertions.\\n\\nIf you’re migrating an existing snapshot-based test, a good approach is:\\n\\n- replace snapshots with focused `toEqual` / `toMatchObject` assertions for data objects\\n- prefer Testing Library queries/assertions for UI behavior\\n- if you need to validate styles, assert on specific resolved style properties rather than a whole\\n  serialized blob\\n\\n## When not to use it\\n\\nThis rule should be enabled for unit test files to enforce the snapshot-ban policy across the\\ncodebase.\\n\\n> Note: ESLint rule fixture tests may still include snapshot matcher examples because they exist to\\n> validate the lint rule behavior.\\n"}',
   ruleName: 'no-to-match-snapshot',
-  description: 'This rule disallows the use of `toMatchSnapshot()` in favor of `toMatchInlineSnapshot()`.'
+  description: 'This rule disallows the use of Jest snapshot matchers in unit tests:'
 }, {
-  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"}',
+  content: '{"ruleName":"no-unsafe-design-token-usage","description":"Using design tokens in an unsafe way risks the health of the system and will affect 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 affect 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'
+  description: 'Using design tokens in an unsafe way risks the health of the system and will affect how fast your'
 }, {
   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',
@@ -241,7 +241,7 @@ export var lintRulesMcpStructuredContent = [{
   ruleName: 'prefer-primitives',
   description: 'Using primitives allows you to delete bespoke component code and replace it with ready made'
 }, {
-  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"}',
+  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</h2>\\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'
 }, {
@@ -261,7 +261,7 @@ export var lintRulesMcpStructuredContent = [{
   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: '{"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"}',
+  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</h1>\\n</Drawer>\\n\\n<Drawer titleId=\\"\\">\\n        ^^^^^^^ `titleId` prop is missing reference value.\\n  <h1 id=\\"drawer-title\\">Drawer content title</h1>\\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</h1>\\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</h1>\\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'
 }, {
@@ -269,7 +269,7 @@ export var lintRulesMcpStructuredContent = [{
   ruleName: 'use-field-message-wrapper',
   description: 'Messaging components in the field from the form package must be wrapped using the message wrapper'
 }, {
-  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"}',
+  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</h1>\\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'
 }, {
@@ -293,7 +293,7 @@ export var lintRulesMcpStructuredContent = [{
   ruleName: 'use-latest-xcss-syntax-typography',
   description: 'Soon, applying `fontSize`, `lineHeight`, `fontWeight` with `xcss` will be deprecated. Please refrain'
 }, {
-  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"}',
+  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</h1>\\n</Section>\\n\\n<Section titleId=\\"\\">\\n         ^^^^^^^ `titleId` prop is missing reference value.\\n  <h1 id=\\"section-title\\">Section content title</h1>\\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</h1>\\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</h1>\\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'
 }, {
@@ -309,7 +309,7 @@ export var lintRulesMcpStructuredContent = [{
   ruleName: 'use-onboarding-spotlight-label',
   description: 'Onboarding spotlight dialog should have an accessible name or a reference to it, so that upon'
 }, {
-  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"}',
+  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</h1>\\n</Popup>\\n\\n<Popup role=\\"dialog\\" titleId=\\"\\">\\n                     ^^^^^^^ `titleId` prop is missing reference value.\\n  <h1 id=\\"popup-title\\">Popup content title</h1>\\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</h1>\\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</h1>\\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'
 }, {
@@ -337,7 +337,7 @@ export var lintRulesMcpStructuredContent = [{
   ruleName: 'use-spotlight-package',
   description: 'This rule raises a violation for usages of `@atlaskit/onboarding`. This is to assist with the'
 }, {
-  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"}',
+  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</h2>\\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'
 }, {
@@ -377,7 +377,7 @@ export var lintRulesMcpStructuredContent = [{
   ruleName: 'convert-props-syntax',
   description: 'Blocks dynamic styling syntax that is unsupported by `styled-components@<4` and `@emotion/styled`,'
 }, {
-  content: '{"ruleName":"enforce-style-prop","description":"Blocks providing static values through the `style` prop, which should only be used to provide","content":"# enforce-style-prop\\n\\nBlocks providing static values through the `style` prop, which should only be used to provide\\ndynamic values (values unknown at build time).\\n\\nUse the `css` prop for providing static values instead.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { token } from \'@atlaskit/tokens\';\\n\\nconst Component = () => (\\n\\t<div\\n\\t\\tstyle={{\\n\\t\\t\\tmargin: 0,\\n\\t\\t\\tcolor: token(\'color.text.danger\'),\\n\\t\\t}}\\n\\t/>\\n);\\n```\\n\\n### Correct\\n\\nAlthough `token` is a function call, it is statically resolvable by Compiled and should not be used\\nin the `style` prop.\\n\\n```tsx\\nimport { css } from \'@compiled/react\';\\nimport { token } from \'@atlaskit/tokens\';\\n\\ntype Props = { width: string };\\n\\nconst baseStyles = css({ margin: 0, color: token(\'color.text.danger\') });\\n\\nconst Component = ({ width }: Props) => (\\n\\t<div\\n\\t\\tcss={baseStyles}\\n\\t\\tstyle={{\\n\\t\\t\\twidth: props.width,\\n\\t\\t\\t\'--my-nested-width\': props.width,\\n\\t\\t}}\\n\\t/>\\n);\\n```\\n"}',
+  content: '{"ruleName":"enforce-style-prop","description":"Blocks providing static values through the `style` prop, which should only be used to provide","content":"# enforce-style-prop\\n\\nBlocks providing static values through the `style` prop, which should only be used to provide\\ndynamic values (values unknown at build time).\\n\\nUse the `css` prop for providing static values instead.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { token } from \'@atlaskit/tokens\';\\n\\nconst Component = () => (\\n\\t<div\\n\\t\\tstyle={{\\n\\t\\t\\tmargin: 0,\\n\\t\\t\\tcolor: token(\'color.text.danger\'),\\n\\t\\t}}\\n\\t/>\\n);\\n```\\n\\n### Correct\\n\\nAlthough `token` is a function call, it is statically resolvable by Compiled and should not be used\\nin the `style` prop.\\n\\n```tsx\\nimport { css } from \'@compiled/react\';\\nimport { token } from \'@atlaskit/tokens\';\\n\\ntype Props = { width: string };\\n\\nconst baseStyles = css({ margin: 0, color: token(\'color.text.danger\') });\\n\\nconst Component = ({ width }: Props) => (\\n\\t<div\\n\\t\\tcss={baseStyles}\\n\\t\\tstyle={{\\n\\t\\t\\twidth,\\n\\t\\t\\t\'--my-nested-width\': width,\\n\\t\\t}}\\n\\t/>\\n);\\n```\\n"}',
   ruleName: 'enforce-style-prop',
   description: 'Blocks providing static values through the `style` prop, which should only be used to provide'
 }, {
@@ -393,7 +393,7 @@ export var lintRulesMcpStructuredContent = [{
   ruleName: 'no-classname-prop',
   description: 'Blocks the `className` prop, which encourages unsafe global styles and cannot be statically'
 }, {
-  content: "{\"ruleName\":\"no-container-queries\",\"description\":\"Blocks `@container` at-rules\",\"content\":\"# no-container-queries\\n\\nBlocks `@container` at-rules\\n([container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/@container)), which are\\nunsafe.\\n\\nContainer queries are unsafe because they:\\n\\n- break the rules of scope\\n- aren't deterministic\\n- aren't type-safe\\n- aren't fully supported across our frontend tech stacks\\n\\nUse [media queries](https://atlassian.design/components/primitives/responsive/breakpoints/examples),\\na\\n[WidthObserver](https://atlaskit.atlassian.com/packages/design-system/width-detector/docs/migration-guide),\\nor a custom [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)\\ninstead.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst headingStyles = css({\\n\\t'@container (width > 400px)': {\\n\\t\\tfont: token('font.heading.large'),\\n\\t},\\n});\\n```\\n\\n### Correct\\n\\n#### Media queries\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { media } from '@atlaskit/primitives/responsive';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst headingStyles = css({\\n\\t[media.above.sm]: {\\n\\t\\tfont: token('font.heading.large'),\\n\\t},\\n});\\n```\\n\\n#### WidthObserver\\n\\n```tsx\\nimport { useState } from 'react';\\nimport { css, cssMap } from '@compiled/react';\\nimport throttle from 'lodash/throttle';\\nimport { WidthObserver } from '@atlaskit/width-detector';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst containerStyles = css({\\n\\t// Required for the `WidthObserver`, which is absolutely positioned\\n\\tposition: 'relative',\\n});\\n\\nconst headingStyles = cssMap({\\n\\tsmall: {\\n\\t\\tfont: token('font.heading.small'),\\n\\t},\\n\\tlarge: {\\n\\t\\tfont: token('font.heading.large'),\\n\\t},\\n});\\n\\nconst ResponsiveH2 = () => {\\n\\tconst [width = 0, setWidth] = useState<number | undefined>(undefined);\\n\\tconst throttledSetWidth = throttle(setWidth, 50);\\n\\n\\treturn (\\n\\t\\t<div css={containerStyles}>\\n\\t\\t\\t<WidthObserver setWidth={throttledSetWidth} />\\n\\t\\t\\t<h2 css={width < 400 ? headingStyles.small : headingStyles.large}>Title</h2>\\n\\t\\t</div>\\n\\t);\\n};\\n```\\n\\n## Options\\n\\n### `importSources: string[]`\\n\\nBy default, this rule will check styles using:\\n\\n- `@atlaskit/css`\\n- `@atlaskit/primitives`\\n- `@compiled/react`\\n- `@emotion/react`\\n- `@emotion/core`\\n- `@emotion/styled`\\n- `styled-components`\\n\\nOverride this list with the `importSources` option, which accepts an array of package names.\\n\"}",
+  content: "{\"ruleName\":\"no-container-queries\",\"description\":\"Blocks `@container` at-rules\",\"content\":\"# no-container-queries\\n\\nBlocks `@container` at-rules\\n([container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/@container)) by default. The\\nrule allows a narrowly-scoped exception when the named container is declared in the same file and\\nthe query is dimension-based (width/height or a range). Style queries, unnamed queries, and IDs\\nshared across files remain blocked.\\n\\nContainer queries are unsafe because they:\\n\\n- break the rules of scope\\n- aren't deterministic\\n- aren't type-safe\\n- aren't fully supported across our frontend tech stacks\\n\\nUse [typed media queries](https://atlassian.design/components/css/overview), a\\n[WidthObserver](https://atlaskit.atlassian.com/packages/design-system/width-detector/docs/migration-guide),\\nor a custom [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)\\ninstead.\\n\\nApproved queries must use `satisfies` with the default type import from\\n`@atlaskit/css/at-rules/container`, and the name after `@container` must match the local\\n`containerName` declaration:\\n\\n```tsx\\nimport { cssMap } from '@atlaskit/css';\\nimport type ContainerQuery from '@atlaskit/css/at-rules/container';\\n\\nconst styles = cssMap({\\n\\troot: { containerName: 'sidebar', containerType: 'inline-size' },\\n\\tcontent: {\\n\\t\\t['@container sidebar (width > 300px)' satisfies ContainerQuery]: {},\\n\\t},\\n});\\n\\nexport const Card = () => (\\n\\t<div css={styles.root}>\\n\\t\\t<div css={styles.content}>Card content</div>\\n\\t</div>\\n);\\n```\\n\\nTest approved responsive states at 400% zoom and 270–320px widths. Do not use style queries such as\\n`@container sidebar style(--density: compact)`.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst headingStyles = css({\\n\\t'@container (width > 400px)': {\\n\\t\\tfont: token('font.heading.large'),\\n\\t},\\n});\\n```\\n\\n### Correct\\n\\n#### Media queries\\n\\n```tsx\\nimport { css } from '@atlaskit/css';\\nimport type MediaAboveSm from '@atlaskit/css/at-rules/media-above-sm';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst headingStyles = css({\\n\\t['@media (min-width: 48rem)' satisfies MediaAboveSm]: {\\n\\t\\tfont: token('font.heading.large'),\\n\\t},\\n});\\n```\\n\\n#### WidthObserver\\n\\n```tsx\\nimport { useState } from 'react';\\nimport { css, cssMap } from '@compiled/react';\\nimport throttle from 'lodash/throttle';\\nimport { WidthObserver } from '@atlaskit/width-detector';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst containerStyles = css({\\n\\t// Required for the `WidthObserver`, which is absolutely positioned\\n\\tposition: 'relative',\\n});\\n\\nconst headingStyles = cssMap({\\n\\tsmall: {\\n\\t\\tfont: token('font.heading.small'),\\n\\t},\\n\\tlarge: {\\n\\t\\tfont: token('font.heading.large'),\\n\\t},\\n});\\n\\nconst ResponsiveH2 = () => {\\n\\tconst [width = 0, setWidth] = useState<number | undefined>(undefined);\\n\\tconst throttledSetWidth = throttle(setWidth, 50);\\n\\n\\treturn (\\n\\t\\t<div css={containerStyles}>\\n\\t\\t\\t<WidthObserver setWidth={throttledSetWidth} />\\n\\t\\t\\t<h2 css={width < 400 ? headingStyles.small : headingStyles.large}>Title</h2>\\n\\t\\t</div>\\n\\t);\\n};\\n```\\n\\n## Options\\n\\n### `importSources: string[]`\\n\\nBy default, this rule will check styles using:\\n\\n- `@atlaskit/css`\\n- `@atlaskit/primitives`\\n- `@compiled/react`\\n- `@emotion/react`\\n- `@emotion/core`\\n- `@emotion/styled`\\n- `styled-components`\\n\\nOverride this list with the `importSources` option, which accepts an array of package names.\\n\"}",
   ruleName: 'no-container-queries',
   description: 'Blocks `@container` at-rules'
 }, {
@@ -417,9 +417,9 @@ export var lintRulesMcpStructuredContent = [{
   ruleName: 'no-exported-css',
   description: 'Forbid exporting `css` function calls. Exporting `css` function calls can result in unexpected'
 }, {
-  content: '{"ruleName":"no-exported-keyframes","description":"Forbid exporting `keyframes` function calls. Exporting `css` function calls can result in unexpected","content":"# @atlaskit/design-system/no-exported-keyframes\\n\\nForbid exporting `keyframes` function calls. Exporting `css` function calls can result in unexpected\\nbehaviour at runtime, and is not statically analysable.\\n\\nThis rule is maintained by another package and configured here; refer to\\nhttps://atlassian.design/components/eslint-plugin-design-system/no-exported-keyframes/usage for more\\ndetails.\\n"}',
+  content: '{"ruleName":"no-exported-keyframes","description":"Forbid exporting `keyframes` function calls. Exporting `keyframes` function calls can result in","content":"# @atlaskit/design-system/no-exported-keyframes\\n\\nForbid exporting `keyframes` function calls. Exporting `keyframes` function calls can result in\\nunexpected behaviour at runtime, and is not statically analysable.\\n\\nThis rule is maintained by another package and configured here; refer to\\nhttps://atlassian.design/components/eslint-plugin-design-system/no-exported-keyframes/usage for more\\ndetails.\\n"}',
   ruleName: 'no-exported-keyframes',
-  description: 'Forbid exporting `keyframes` function calls. Exporting `css` function calls can result in unexpected'
+  description: 'Forbid exporting `keyframes` function calls. Exporting `keyframes` function calls can result in'
 }, {
   content: "{\"ruleName\":\"no-exported-styles\",\"description\":\"Blocks exports of `css`, `cssMap`, `keyframes`, `styled`, `xcss` styles, which are unsafe.\",\"content\":\"# no-exported-styles\\n\\nBlocks exports of `css`, `cssMap`, `keyframes`, `styled`, `xcss` styles, which are unsafe.\\n\\nUse alongside `no-imported-style-values` which blocks consumption of imported styles.\\n\\nCompiled style declarations are null at runtime, so using imported styles will cause unexpected\\nerrors.\\n\\nCo-locate style definitions with their usage instead. This will also improve code readability,\\nmaintainability 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```tsx\\nimport { keyframes } from '@compiled/react';\\n\\nexport const animation = keyframes({});\\n\\nexport default keyframes({});\\n```\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst colorStyles = css({\\n\\tcolor: token('color.text'),\\n});\\n\\nconst styles = {\\n\\tprimary: {\\n\\t\\ttext: {\\n\\t\\t\\tcolor,\\n\\t\\t},\\n\\t},\\n};\\n\\nexport default styles.primary.text.color;\\n```\\n\\n### Correct\\n\\nCo-locate styles with components to improve code readability, linting, and build performance.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nconst styles = css({});\\n\\nexport const Component = () => <div css={styles} />;\\n```\\n\\n```tsx\\nimport { css, keyframes } from '@compiled/react';\\n\\nconst animation = keyframes({});\\nconst styles = css({ animate: `${animation} 1s ease-in` });\\n\\nexport const Component = () => <div css={styles} />;\\n```\\n\\n## Options\\n\\n### `importSources: string[]`\\n\\nBy default, this rule will check styles using:\\n\\n- `@atlaskit/css`\\n- `@atlaskit/primitives`\\n- `@compiled/react`\\n- `@emotion/react`\\n- `@emotion/core`\\n- `@emotion/styled`\\n- `styled-components`\\n\\nOverride this list with the `importSources` option, which accepts an array of package names.\\n\"}",
   ruleName: 'no-exported-styles',
@@ -433,7 +433,7 @@ export var lintRulesMcpStructuredContent = [{
   ruleName: 'no-important-styles',
   description: 'Blocks the `!important` flag in style declarations.'
 }, {
-  content: "{\"ruleName\":\"no-imported-style-values\",\"description\":\"Blocks imported style values in `css`, `cssMap`, `styled`, `keyframes` and `xcss` calls.\",\"content\":\"# no-imported-style-values\\n\\nBlocks imported style values in `css`, `cssMap`, `styled`, `keyframes` and `xcss` calls.\\n\\nUse alongside `no-exported-styles` which blocks exporting styles.\\n\\nCompiled style declarations are null at runtime, so using imported styles will cause unexpected\\nerrors.\\n\\nCo-locate style definitions with their usage instead. This will also improve code readability and\\nbuild performance.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { colors, getColor } from '../shared';\\n\\nconst styles = css({\\n\\tcolor: getColor('red'),\\n\\tbackgroundColor: colors['red'],\\n});\\n```\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { ff } from '@atlaskit/ff';\\nimport { buttonStyles, cssShared, HEIGHT, colorKey } from '../shared';\\n\\nconst sharedObject = { padding: 0 };\\n\\nconst styles = css({\\n\\t...cssShared,\\n\\t...sharedObject,\\n\\theight: `${HEIGHT}px`,\\n\\twidth: ff('…') ? `${HEIGHT}px` : undefined,\\n});\\n```\\n\\nImporting styles to use in style composition is not allowed.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\nimport { buttonStyles } from '../shared';\\n\\nconst styles = css({\\n\\tcolor: token('color.text'),\\n});\\n\\nconst Component = () => <div css={[styles, buttonStyles]} />;\\n```\\n\\nImporting styles to pass to the style prop is also not allowed.\\n\\n```tsx\\nimport { importedWidth } from '../shared';\\n\\nconst Component = () => <div style={{ width: importedWidth }} />;\\n```\\n\\n### Correct\\n\\nCo-locate styles with components to improve code readability, linting, and build performance.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst styles = css({\\n\\tcolor: token('color.text'),\\n\\tpadding: token('space.150'),\\n});\\n\\nconst Component = () => <div css={styles} />;\\n```\\n\\n```tsx\\nimport { keyframes } from '@compiled/react';\\n\\nconst animation = keyframes({});\\nconst styles = css({ animate: `${animation} 1s ease-in` });\\n\\nconst Component = () => <div css={styles} />;\\n```\\n\\n## Options\\n\\n### `allowedDynamicKeys: [string, string][]`\\n\\nUse this to allow specified imports as dynamic keys, in addition to the built-in allow-list.\\n\\nEach value should be a two-element array. The first item is the entrypoint, and the second item is a\\nnamed export.\\n\\nDefault imports are not supported.\\n\\n```tsx\\n// eslint.config.cjs\\n\\n// ...\\n      rules: {\\n        '@atlaskit/eslint-plugin-ui-styling-standard/no-unsafe-values': [\\n          'error',\\n          {\\n            allowedDynamicKeys: [\\n              ['@atlaskit/primitives/responsive', 'media'],\\n            ]\\n          },\\n        ],\\n        // ...\\n      },\\n// ...\\n```\\n\\n### `allowedFunctionCalls: [string, string][]`\\n\\nUse this to allow specific functions to be called, in addition to the built-in allow-list.\\n\\nEach value should be a two-element array. The first item is the entrypoint, and the second item is a\\nnamed export.\\n\\nDefault imports are not currently supported.\\n\\n```tsx\\n// eslint.config.cjs\\n\\n// ...\\n      rules: {\\n        '@atlaskit/eslint-plugin-ui-styling-standard/no-unsafe-values': [\\n          'error',\\n          {\\n            allowedFunctionCalls: [\\n              ['@atlaskit/tokens', 'token'],\\n            ]\\n          },\\n        ],\\n        // ...\\n      },\\n// ...\\n```\\n\\n### `importSources: string[]`\\n\\nBy default, this rule will check styles using:\\n\\n- `@atlaskit/css`\\n- `@atlaskit/primitives`\\n- `@compiled/react`\\n- `@emotion/react`\\n- `@emotion/core`\\n- `@emotion/styled`\\n- `styled-components`\\n\\nOverride this list with the `importSources` option, which accepts an array of package names.\\n\"}",
+  content: "{\"ruleName\":\"no-imported-style-values\",\"description\":\"Blocks imported style values in `css`, `cssMap`, `styled`, `keyframes` and `xcss` calls.\",\"content\":\"# no-imported-style-values\\n\\nBlocks imported style values in `css`, `cssMap`, `styled`, `keyframes` and `xcss` calls.\\n\\nUse alongside `no-exported-styles` which blocks exporting styles.\\n\\nCompiled style declarations are null at runtime, so using imported styles will cause unexpected\\nerrors.\\n\\nCo-locate style definitions with their usage instead. This will also improve code readability and\\nbuild performance.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { colors, getColor } from '../shared';\\n\\nconst styles = css({\\n\\tcolor: getColor('red'),\\n\\tbackgroundColor: colors['red'],\\n});\\n```\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { ff } from '@atlaskit/ff';\\nimport { buttonStyles, cssShared, HEIGHT, colorKey } from '../shared';\\n\\nconst sharedObject = { padding: 0 };\\n\\nconst styles = css({\\n\\t...cssShared,\\n\\t...sharedObject,\\n\\theight: `${HEIGHT}px`,\\n\\twidth: ff('…') ? `${HEIGHT}px` : undefined,\\n});\\n```\\n\\nImporting styles to use in style composition is not allowed.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\nimport { buttonStyles } from '../shared';\\n\\nconst styles = css({\\n\\tcolor: token('color.text'),\\n});\\n\\nconst Component = () => <div css={[styles, buttonStyles]} />;\\n```\\n\\nImporting styles to pass to the style prop is also not allowed.\\n\\n```tsx\\nimport { importedWidth } from '../shared';\\n\\nconst Component = () => <div style={{ width: importedWidth }} />;\\n```\\n\\nType-only imports used by `satisfies` annotations are not style values and are allowed:\\n\\n```tsx\\nimport { css } from '@atlaskit/css';\\nimport type MediaAboveSm from '@atlaskit/css/at-rules/media-above-sm';\\n\\nconst styles = css({\\n\\t['@media (min-width: 48rem)' satisfies MediaAboveSm]: {\\n\\t\\tpadding: '8px',\\n\\t},\\n});\\n```\\n\\n### Correct\\n\\nCo-locate styles with components to improve code readability, linting, and build performance.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst styles = css({\\n\\tcolor: token('color.text'),\\n\\tpadding: token('space.150'),\\n});\\n\\nconst Component = () => <div css={styles} />;\\n```\\n\\n```tsx\\nimport { keyframes } from '@compiled/react';\\n\\nconst animation = keyframes({});\\nconst styles = css({ animate: `${animation} 1s ease-in` });\\n\\nconst Component = () => <div css={styles} />;\\n```\\n\\n## Options\\n\\n### `allowedDynamicKeys: [string, string][]`\\n\\nUse this to allow specified imports as dynamic keys, in addition to the built-in allow-list.\\n\\nEach value should be a two-element array. The first item is the entrypoint, and the second item is a\\nnamed export.\\n\\nDefault imports are not supported.\\n\\n```tsx\\n// eslint.config.cjs\\n\\n// ...\\n      rules: {\\n        '@atlaskit/eslint-plugin-ui-styling-standard/no-unsafe-values': [\\n          'error',\\n          {\\n            allowedDynamicKeys: [\\n              ['@atlaskit/primitives/responsive', 'media'],\\n            ]\\n          },\\n        ],\\n        // ...\\n      },\\n// ...\\n```\\n\\n### `allowedFunctionCalls: [string, string][]`\\n\\nUse this to allow specific functions to be called, in addition to the built-in allow-list.\\n\\nEach value should be a two-element array. The first item is the entrypoint, and the second item is a\\nnamed export.\\n\\nDefault imports are not currently supported.\\n\\n```tsx\\n// eslint.config.cjs\\n\\n// ...\\n      rules: {\\n        '@atlaskit/eslint-plugin-ui-styling-standard/no-unsafe-values': [\\n          'error',\\n          {\\n            allowedFunctionCalls: [\\n              ['@atlaskit/tokens', 'token'],\\n            ]\\n          },\\n        ],\\n        // ...\\n      },\\n// ...\\n```\\n\\n### `importSources: string[]`\\n\\nBy default, this rule will check styles using:\\n\\n- `@atlaskit/css`\\n- `@atlaskit/primitives`\\n- `@compiled/react`\\n- `@emotion/react`\\n- `@emotion/core`\\n- `@emotion/styled`\\n- `styled-components`\\n\\nOverride this list with the `importSources` option, which accepts an array of package names.\\n\"}",
   ruleName: 'no-imported-style-values',
   description: 'Blocks imported style values in `css`, `cssMap`, `styled`, `keyframes` and `xcss` calls.'
 }, {
@@ -453,15 +453,15 @@ export var lintRulesMcpStructuredContent = [{
   ruleName: 'no-styled',
   description: 'Blocks the `styled` API, which creates unnecessary indirection.'
 }, {
-  content: '{"ruleName":"no-styled-tagged-template-expression","description":"Disallows any `styled` tagged template expressions that originate from from a CSS-in-JS library,","content":"# @atlaskit/design-system/no-styled-tagged-template-expression\\n\\nDisallows any `styled` tagged template expressions that originate from from a CSS-in-JS library,\\nincluding `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.\\n\\nThis rule is maintained by another package and configured here; refer to\\nhttps://atlassian.design/components/eslint-plugin-design-system/no-styled-tagged-template-expression/usage\\nfor more details.\\n"}',
+  content: '{"ruleName":"no-styled-tagged-template-expression","description":"Disallows any `styled` tagged template expressions that originate from a CSS-in-JS library,","content":"# @atlaskit/design-system/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\\nThis rule is maintained by another package and configured here; refer to\\nhttps://atlassian.design/components/eslint-plugin-design-system/no-styled-tagged-template-expression/usage\\nfor more details.\\n"}',
   ruleName: 'no-styled-tagged-template-expression',
-  description: 'Disallows any `styled` tagged template expressions that originate from from a CSS-in-JS library,'
+  description: 'Disallows any `styled` tagged template expressions that originate from a CSS-in-JS library,'
 }, {
-  content: "{\"ruleName\":\"no-unsafe-selectors\",\"description\":\"Blocks unsafe CSS selectors.\",\"content\":\"# no-unsafe-selectors\\n\\nBlocks unsafe CSS selectors.\\n\\nUse alongside\\n[no-nested-selectors](https://atlassian.design/components/eslint-plugin-ui-styling-standard/no-nested-selectors/usage)\\nwhich blocks nested CSS selectors.\\n\\nBlocking unsafe selectors enables static analysis and also prevents regressions and incidents when\\nmigrating styles at scale.\\n\\n## Examples\\n\\n### Keyframes\\n\\n#### Incorrect\\n\\nDon't use `@keyframes` at-rules in styles.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\ncss({\\n\\t'@keyframes fadeIn': {\\n\\t\\tfrom: {\\n\\t\\t\\topacity: 0,\\n\\t\\t},\\n\\t\\tto: {\\n\\t\\t\\topacity: 1,\\n\\t\\t},\\n\\t},\\n\\tanimation: '1s ease-in fadeIn',\\n});\\n```\\n\\n#### Correct\\n\\nUse the `keyframes` API.\\n\\n```tsx\\nimport { css, keyframes } from '@compiled/react';\\n\\nconst fadeIn = keyframes({\\n\\tfrom: {\\n\\t\\topacity: 0,\\n\\t},\\n\\tto: {\\n\\t\\topacity: 1,\\n\\t},\\n});\\n\\ncss({\\n\\tanimation: `1s ease-in ${fadeIn}`,\\n});\\n```\\n\\n### Legacy pseudo-element syntax\\n\\n#### Incorrect\\n\\nDon't use the legacy single colon syntax for pseudo-elements.\\n\\nThis issue is autofixable.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\ncss({\\n\\t'&:after': {\\n\\t\\tcontent: '\\\"\\\"',\\n\\t},\\n});\\n```\\n\\n#### Correct\\n\\nUse the double colon syntax for pseudo-elements.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\ncss({\\n\\t'&::after': {\\n\\t\\tcontent: '\\\"\\\"',\\n\\t},\\n});\\n```\\n\\n### Increased specificity selectors\\n\\n#### Incorrect\\n\\nDon't use the nesting selector to increase specificity of styles.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\ncss({\\n\\t'&&': {\\n\\t\\tcolor: token('color.text'),\\n\\t},\\n});\\n```\\n\\n#### Correct\\n\\nUse styles that do not require increased specificity.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\ncss({\\n\\tcolor: token('color.text'),\\n});\\n```\\n\\n### At-rules\\n\\n#### Incorrect\\n\\nDon't use at-rules in styles (see **Correct** below for exceptions).\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\ncss({\\n\\t'@scope (.article-body) to (figure)': {\\n\\t\\timg: {\\n\\t\\t\\tdisplay: 'block',\\n\\t\\t},\\n\\t},\\n});\\n```\\n\\n#### Correct\\n\\nUse only allowed at-rules:\\n\\n- `@media` (through our\\n  [breakpoints](https://atlassian.design/components/primitives/responsive/breakpoints/examples))\\n- `@property`\\n- `@supports`\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { media } from '@atlaskit/primitives/responsive';\\n\\ncss({\\n\\t[media.above.sm]: {\\n\\t\\tdisplay: 'block',\\n\\t},\\n});\\n```\\n\\n### Restricted pseudo-selectors\\n\\n#### Incorrect\\n\\nDon't use pseudo-classes which take arguments or implicitly rely on external context.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\ncss({\\n\\t'&:hover': {\\n\\t\\tbackgroundColor: token('color.background.neutral.hovered'),\\n\\t},\\n\\t'&:not(:hover)': {\\n\\t\\tbackgroundColor: token('color.background.neutral'),\\n\\t}\\n\\t'&:first-child': {\\n\\t\\tfontWeight: token('font.weight.bold'),\\n\\t},\\n});\\n```\\n\\n#### Correct\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\ntype Props = { isFirstChild: boolean };\\n\\nconst baseStyles = css({\\n\\tbackgroundColor: token('color.background.neutral'),\\n\\t'&:hover': {\\n\\t\\tbackgroundColor: token('color.background.neutral.hovered'),\\n\\t},\\n});\\n\\nconst firstChildStyles = css({\\n\\tfontWeight: token('font.weight.bold'),\\n});\\n\\nconst Component = ({ isFirstChild }: Props) => (\\n\\t<div css={[baseStyles, isFirstChild && firstChildStyles]} />\\n);\\n```\\n\\n### Ambiguous pseudo-selectors\\n\\n#### Incorrect\\n\\nDon't use pseudo-selectors without a leading selector, as they are ambiguous and interpreted\\ndifferently between contexts.\\n\\nFor example some contexts will treat `:hover` as `&:hover` while others will treat it as `& :hover`\\n(which targets descendants).\\n\\nThis issue is autofixable. By default a nesting selector `&` is added unless the\\n`shouldAlwaysInsertNestingSelectorForAmbiguousPseudos` option is disabled.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\ncss({\\n\\t/**\\n\\t * This pseudo-class has no leading selector and is ambiguous.\\n\\t */\\n\\t':hover': {},\\n\\n\\t/**\\n\\t * In some contexts the above is treated as implicitly containing a nesting selector.\\n\\t */\\n\\t'&:hover': {},\\n\\n\\t/**\\n\\t * In other contexts it is treated as a descendant selector.\\n\\t *\\n\\t * (The selectors below are equivalent.)\\n\\t */\\n\\t'*:hover': {},\\n\\t'& :hover': {},\\n\\t'& *:hover': {},\\n});\\n```\\n\\n#### Correct\\n\\nUse explicit selectors. Do not rely on implicit or undefined behavior for pseudo-selectors.\\n\\n```tsx\\n\\n```\\n\\n### Grouped at-rules\\n\\n#### Incorrect\\n\\nDon't group at-rules with the `cssMap` API.\\n\\n````tsx\\nimport { cssMap } from '@compiled/react';\\n\\n```tsx\\ncssMap({\\n\\tsuccess: {\\n\\t\\t'@media': {\\n\\t\\t\\t'(min-width: 900px)': {},\\n\\t\\t\\t'(min-width: 1200px)': {},\\n\\t\\t},\\n\\t},\\n});\\n````\\n\\n#### Correct\\n\\nWrite flattened at-rules instead.\\n\\n```tsx\\ncssMap({\\n\\tsuccess: {\\n\\t\\tselectors: {\\n\\t\\t\\t'&:not(:active)': {\\n\\t\\t\\t\\tbackgroundColor: 'white',\\n\\t\\t\\t},\\n\\t\\t},\\n\\t},\\n});\\n```\\n\\n### Correct\\n\\n```tsx\\nconst fadeIn = keyframes({\\n\\tfrom: {\\n\\t\\topacity: 0,\\n\\t},\\n\\tto: {\\n\\t\\topacity: 1,\\n\\t},\\n});\\n\\ncss({\\n\\tanimationName: fadeIn,\\n});\\n```\\n\\n```tsx\\ncss({\\n\\t'::after': {\\n\\t\\tcontent: '\\\"\\\"',\\n\\t\\twidth: 100,\\n\\t\\theight: 100,\\n\\t\\tbackgroundColor: 'red',\\n\\t},\\n});\\n```\\n\\n```tsx\\ncss({\\n\\t'&:first-of-type': {\\n\\t\\twidth: 100,\\n\\t},\\n});\\n```\\n\\n```tsx\\ncss({\\n\\t'&:hover': {},\\n});\\n```\\n\\n```tsx\\ncssMap({\\n\\tsuccess: {\\n\\t\\t'@media (min-width: 900px)': {},\\n\\t\\t'@media (min-width: 1200px)': {},\\n\\t},\\n});\\n```\\n\\n```tsx\\ncssMap({\\n\\tsuccess: {\\n\\t\\tbackgroundColor: 'white',\\n\\t\\t'&:active': {\\n\\t\\t\\tbackgroundColor: 'green',\\n\\t\\t},\\n\\t},\\n});\\n```\\n\\n## Options\\n\\n### `importSources: string[]`\\n\\nBy default, this rule will check styles using:\\n\\n- `@atlaskit/css`\\n- `@atlaskit/primitives`\\n- `@compiled/react`\\n- `@emotion/react`\\n- `@emotion/core`\\n- `@emotion/styled`\\n- `styled-components`\\n\\nOverride this list with the `importSources` option, which accepts an array of package names.\\n\\n### `shouldAlwaysInsertNestingSelectorForAmbiguousPseudos: boolean`\\n\\nBy default this rule will always fix ambiguous pseudo-selectors by inserting a leading `&` (nesting\\nselector).\\n\\nSet `shouldAlwaysInsertNestingSelectorForAmbiguousPseudos` to `false` to disable this auto-fix. When\\ndisabled, a suggestion will be provided instead of an auto-fix.\\n\"}",
+  content: "{\"ruleName\":\"no-unsafe-selectors\",\"description\":\"Blocks unsafe CSS selectors.\",\"content\":\"# no-unsafe-selectors\\n\\nBlocks unsafe CSS selectors.\\n\\nUse alongside\\n[no-nested-selectors](https://atlassian.design/components/eslint-plugin-ui-styling-standard/no-nested-selectors/usage)\\nwhich blocks nested CSS selectors.\\n\\nBlocking unsafe selectors enables static analysis and also prevents regressions and incidents when\\nmigrating styles at scale.\\n\\n## Examples\\n\\n### Keyframes\\n\\n#### Incorrect\\n\\nDon't use `@keyframes` at-rules in styles.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\ncss({\\n\\t'@keyframes fadeIn': {\\n\\t\\tfrom: {\\n\\t\\t\\topacity: 0,\\n\\t\\t},\\n\\t\\tto: {\\n\\t\\t\\topacity: 1,\\n\\t\\t},\\n\\t},\\n\\tanimation: '1s ease-in fadeIn',\\n});\\n```\\n\\n#### Correct\\n\\nUse the `keyframes` API.\\n\\n```tsx\\nimport { css, keyframes } from '@compiled/react';\\n\\nconst fadeIn = keyframes({\\n\\tfrom: {\\n\\t\\topacity: 0,\\n\\t},\\n\\tto: {\\n\\t\\topacity: 1,\\n\\t},\\n});\\n\\ncss({\\n\\tanimation: `1s ease-in ${fadeIn}`,\\n});\\n```\\n\\n### Legacy pseudo-element syntax\\n\\n#### Incorrect\\n\\nDon't use the legacy single colon syntax for pseudo-elements.\\n\\nThis issue is autofixable.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\ncss({\\n\\t'&:after': {\\n\\t\\tcontent: '\\\"\\\"',\\n\\t},\\n});\\n```\\n\\n#### Correct\\n\\nUse the double colon syntax for pseudo-elements.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\ncss({\\n\\t'&::after': {\\n\\t\\tcontent: '\\\"\\\"',\\n\\t},\\n});\\n```\\n\\n### Increased specificity selectors\\n\\n#### Incorrect\\n\\nDon't use the nesting selector to increase specificity of styles.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\ncss({\\n\\t'&&': {\\n\\t\\tcolor: token('color.text'),\\n\\t},\\n});\\n```\\n\\n#### Correct\\n\\nUse styles that do not require increased specificity.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\ncss({\\n\\tcolor: token('color.text'),\\n});\\n```\\n\\n### At-rules\\n\\n#### Incorrect\\n\\nDon't use at-rules in styles (see **Correct** below for exceptions).\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\ncss({\\n\\t'@scope (.article-body) to (figure)': {\\n\\t\\timg: {\\n\\t\\t\\tdisplay: 'block',\\n\\t\\t},\\n\\t},\\n});\\n```\\n\\n#### Correct\\n\\nUse supported at-rules:\\n\\n- `@media`, including canonical typed queries from granular\\n  [`@atlaskit/css/at-rules/*`](https://atlassian.design/components/css/overview#media-queries)\\n- `@property`\\n- `@supports`\\n\\n```tsx\\nimport { css } from '@atlaskit/css';\\nimport type MediaAboveSm from '@atlaskit/css/at-rules/media-above-sm';\\n\\ncss({\\n\\t['@media (min-width: 48rem)' satisfies MediaAboveSm]: {\\n\\t\\tdisplay: 'block',\\n\\t},\\n});\\n```\\n\\n### Restricted pseudo-selectors\\n\\n#### Incorrect\\n\\nDon't use pseudo-classes which take arguments or implicitly rely on external context.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\ncss({\\n\\t'&:hover': {\\n\\t\\tbackgroundColor: token('color.background.neutral.hovered'),\\n\\t},\\n\\t'&:not(:hover)': {\\n\\t\\tbackgroundColor: token('color.background.neutral'),\\n\\t}\\n\\t'&:first-child': {\\n\\t\\tfontWeight: token('font.weight.bold'),\\n\\t},\\n});\\n```\\n\\n#### Correct\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\ntype Props = { isFirstChild: boolean };\\n\\nconst baseStyles = css({\\n\\tbackgroundColor: token('color.background.neutral'),\\n\\t'&:hover': {\\n\\t\\tbackgroundColor: token('color.background.neutral.hovered'),\\n\\t},\\n});\\n\\nconst firstChildStyles = css({\\n\\tfontWeight: token('font.weight.bold'),\\n});\\n\\nconst Component = ({ isFirstChild }: Props) => (\\n\\t<div css={[baseStyles, isFirstChild && firstChildStyles]} />\\n);\\n```\\n\\n### Ambiguous pseudo-selectors\\n\\n#### Incorrect\\n\\nDon't use pseudo-selectors without a leading selector, as they are ambiguous and interpreted\\ndifferently between contexts.\\n\\nFor example some contexts will treat `:hover` as `&:hover` while others will treat it as `& :hover`\\n(which targets descendants).\\n\\nThis issue is autofixable. By default a nesting selector `&` is added unless the\\n`shouldAlwaysInsertNestingSelectorForAmbiguousPseudos` option is disabled.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\ncss({\\n\\t/**\\n\\t * This pseudo-class has no leading selector and is ambiguous.\\n\\t */\\n\\t':hover': {},\\n\\n\\t/**\\n\\t * In some contexts the above is treated as implicitly containing a nesting selector.\\n\\t */\\n\\t'&:hover': {},\\n\\n\\t/**\\n\\t * In other contexts it is treated as a descendant selector.\\n\\t *\\n\\t * (The selectors below are equivalent.)\\n\\t */\\n\\t'*:hover': {},\\n\\t'& :hover': {},\\n\\t'& *:hover': {},\\n});\\n```\\n\\n#### Correct\\n\\nUse explicit selectors. Do not rely on implicit or undefined behavior for pseudo-selectors.\\n\\n```tsx\\n\\n```\\n\\n### Grouped at-rules\\n\\n#### Incorrect\\n\\nDon't group at-rules with the `cssMap` API.\\n\\n````tsx\\nimport { cssMap } from '@compiled/react';\\n\\n```tsx\\ncssMap({\\n\\tsuccess: {\\n\\t\\t'@media': {\\n\\t\\t\\t'(min-width: 900px)': {},\\n\\t\\t\\t'(min-width: 1200px)': {},\\n\\t\\t},\\n\\t},\\n});\\n````\\n\\n#### Correct\\n\\nWrite flattened at-rules instead.\\n\\n```tsx\\ncssMap({\\n\\tsuccess: {\\n\\t\\tselectors: {\\n\\t\\t\\t'&:not(:active)': {\\n\\t\\t\\t\\tbackgroundColor: 'white',\\n\\t\\t\\t},\\n\\t\\t},\\n\\t},\\n});\\n```\\n\\n### Correct\\n\\n```tsx\\nconst fadeIn = keyframes({\\n\\tfrom: {\\n\\t\\topacity: 0,\\n\\t},\\n\\tto: {\\n\\t\\topacity: 1,\\n\\t},\\n});\\n\\ncss({\\n\\tanimationName: fadeIn,\\n});\\n```\\n\\n```tsx\\ncss({\\n\\t'::after': {\\n\\t\\tcontent: '\\\"\\\"',\\n\\t\\twidth: 100,\\n\\t\\theight: 100,\\n\\t\\tbackgroundColor: 'red',\\n\\t},\\n});\\n```\\n\\n```tsx\\ncss({\\n\\t'&:first-of-type': {\\n\\t\\twidth: 100,\\n\\t},\\n});\\n```\\n\\n```tsx\\ncss({\\n\\t'&:hover': {},\\n});\\n```\\n\\n```tsx\\ncssMap({\\n\\tsuccess: {\\n\\t\\t'@media (min-width: 900px)': {},\\n\\t\\t'@media (min-width: 1200px)': {},\\n\\t},\\n});\\n```\\n\\n```tsx\\ncssMap({\\n\\tsuccess: {\\n\\t\\tbackgroundColor: 'white',\\n\\t\\t'&:active': {\\n\\t\\t\\tbackgroundColor: 'green',\\n\\t\\t},\\n\\t},\\n});\\n```\\n\\n## Options\\n\\n### `importSources: string[]`\\n\\nBy default, this rule will check styles using:\\n\\n- `@atlaskit/css`\\n- `@atlaskit/primitives`\\n- `@compiled/react`\\n- `@emotion/react`\\n- `@emotion/core`\\n- `@emotion/styled`\\n- `styled-components`\\n\\nOverride this list with the `importSources` option, which accepts an array of package names.\\n\\n### `shouldAlwaysInsertNestingSelectorForAmbiguousPseudos: boolean`\\n\\nBy default this rule will always fix ambiguous pseudo-selectors by inserting a leading `&` (nesting\\nselector).\\n\\nSet `shouldAlwaysInsertNestingSelectorForAmbiguousPseudos` to `false` to disable this auto-fix. When\\ndisabled, a suggestion will be provided instead of an auto-fix.\\n\"}",
   ruleName: 'no-unsafe-selectors',
   description: 'Blocks unsafe CSS selectors.'
 }, {
-  content: "{\"ruleName\":\"no-unsafe-values\",\"description\":\"Blocks styles that are difficult or impossible to statically analyze.\",\"content\":\"# no-unsafe-values\\n\\nBlocks styles that are difficult or impossible to statically analyze.\\n\\n## Examples\\n\\n### Function calls\\n\\n#### Incorrect\\n\\nFunction calls are blocked as arguments or as values, unless they are specified in\\n`allowedFunctionCalls` (or in the default list).\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nfunction getStyles() {\\n\\treturn { width: 100 };\\n}\\n\\nconst styles = css(getStyles());\\n```\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nfunction getWidth() {\\n\\treturn 100;\\n}\\n\\nconst styles = css({\\n\\twidth: getWidth(),\\n});\\n```\\n\\n#### Correct\\n\\nUse inline literals for static values.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nconst styles = css({ width: 100 });\\n```\\n\\nUse the `style` prop for dynamic values.\\n\\n```tsx\\nconst Component = ({ width }) => <div style={{ width }} />;\\n```\\n\\nSome functions such as `tokens()` are allowed.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst styles = css({ padding: token('space.100') });\\n```\\n\\n### Dynamic keys\\n\\n#### Incorrect\\n\\nDynamic keys are blocked, unless they are specified in `allowedDynamicKeys` (or in the default\\nlist).\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nconst HOVER_SELECTOR = '&:hover';\\nconst MARGIN = 'margin';\\n\\nconst styles = css({\\n\\t[HOVER_SELECTOR]: {\\n\\t\\t[MARGIN]: 0,\\n\\t},\\n\\t[`${HOVER_SELECTOR} > p`]: {\\n\\t\\twidth: 100,\\n\\t},\\n});\\n```\\n\\n#### Correct\\n\\nUse literal values for pseudo-states and property names.\\n\\nDon't use nested selectors, apply styles directly instead.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nconst styles = css({\\n\\t'&:hover': {\\n\\t\\tmargin: 0,\\n\\t},\\n});\\n\\nconst paragraphStyles = css({\\n\\twidth: 100,\\n});\\n```\\n\\n### Variables\\n\\n#### Incorrect\\n\\nVariables are only allowed as values if they:\\n\\n- have a simple, static value\\n- are defined in the same file\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { HEIGHT } from '../shared';\\n\\nconst styles = css({\\n\\theight: HEIGHT,\\n});\\n```\\n\\n#### Correct\\n\\nUse inlined values.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nconst styles = css({\\n\\theight: '32px',\\n});\\n```\\n\\nAlternatively, define variables in the same file.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nconst HEIGHT = '32px';\\n\\nconst styles = css({\\n\\theight: HEIGHT,\\n});\\n```\\n\\n### Object access\\n\\n#### Incorrect\\n\\nDon't access object members in values.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst colors = {\\n\\ttext: token('color.text'),\\n};\\n\\nconst styles = css({\\n\\tcolor: colors.text,\\n});\\n```\\n\\n#### Correct\\n\\nUse inlined values.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst styles = css({\\n\\tcolor: token('color.text'),\\n});\\n```\\n\\n### Spread elements\\n\\n#### Incorrect\\n\\nDon't use the spread operator in styles.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst subtleTextStyles = {\\n\\tcolor: token('color.text.subtle'),\\n};\\n\\nconst styles = css({\\n\\t...subtleTextStyles,\\n\\tmargin: 0,\\n});\\n```\\n\\n#### Correct\\n\\nUse the `css` prop to compose styles.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst subtleTextStyles = {\\n\\tcolor: token('color.text.subtle'),\\n};\\n\\nconst styles = css({\\n\\tmargin: 0,\\n});\\n\\nconst Component = () => <div css={[subtleTextStyles, styles]} />;\\n```\\n\\n### Array values\\n\\n#### Incorrect\\n\\nDon't use array values. This syntax is not supported by Compiled, or most other CSS-in-JS libraries.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst boldMixin = { fontWeight: token('font.weight.bold') };\\n\\nconst styles = css({\\n\\t'&::before': [boldMixin, { color: token('color.text.danger') }],\\n});\\n```\\n\\n#### Correct\\n\\nUse a single object with inlined styles.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst styles = css({\\n\\t'&::before': {\\n\\t\\tfontWeight: token('font.weight.bold'),\\n\\t\\tcolor: token('color.text.danger'),\\n\\t},\\n});\\n```\\n\\n## Options\\n\\n### `allowedDynamicKeys: [string, string][]`\\n\\nUse this to allow specified imports as dynamic keys, in addition to the built-in allow-list.\\n\\nEach value should be a two-element array. The first item is the entrypoint, and the second item is a\\nnamed export.\\n\\nDefault imports are not supported.\\n\\n```tsx\\n// eslint.config.cjs\\n\\n// ...\\n      rules: {\\n        '@atlaskit/eslint-plugin-ui-styling-standard/no-unsafe-values': [\\n          'error',\\n          {\\n            allowedDynamicKeys: [\\n              ['@atlaskit/primitives/responsive', 'media'],\\n            ]\\n          },\\n        ],\\n        // ...\\n      },\\n// ...\\n```\\n\\n### `allowedFunctionCalls: [string, string][]`\\n\\nUse this to allow specific functions to be called, in addition to the built-in allow-list.\\n\\nEach value should be a two-element array. The first item is the entrypoint, and the second item is a\\nnamed export.\\n\\nDefault imports are not currently supported.\\n\\n```tsx\\n// eslint.config.cjs\\n\\n// ...\\n      rules: {\\n        '@atlaskit/eslint-plugin-ui-styling-standard/no-unsafe-values': [\\n          'error',\\n          {\\n            allowedFunctionCalls: [\\n              ['@atlaskit/tokens', 'token'],\\n            ]\\n          },\\n        ],\\n        // ...\\n      },\\n// ...\\n```\\n\\n### `importSources: string[]`\\n\\nBy default, this rule will check styles using:\\n\\n- `@atlaskit/css`\\n- `@atlaskit/primitives`\\n- `@compiled/react`\\n- `@emotion/react`\\n- `@emotion/core`\\n- `@emotion/styled`\\n- `styled-components`\\n\\nOverride this list with the `importSources` option, which accepts an array of package names.\\n\"}",
+  content: "{\"ruleName\":\"no-unsafe-values\",\"description\":\"Blocks styles that are difficult or impossible to statically analyze.\",\"content\":\"# no-unsafe-values\\n\\nBlocks styles that are difficult or impossible to statically analyze.\\n\\n## Examples\\n\\n### Function calls\\n\\n#### Incorrect\\n\\nFunction calls are blocked as arguments or as values, unless they are specified in\\n`allowedFunctionCalls` (or in the default list).\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nfunction getStyles() {\\n\\treturn { width: 100 };\\n}\\n\\nconst styles = css(getStyles());\\n```\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nfunction getWidth() {\\n\\treturn 100;\\n}\\n\\nconst styles = css({\\n\\twidth: getWidth(),\\n});\\n```\\n\\n#### Correct\\n\\nUse inline literals for static values.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nconst styles = css({ width: 100 });\\n```\\n\\nUse the `style` prop for dynamic values.\\n\\n```tsx\\nconst Component = ({ width }) => <div style={{ width }} />;\\n```\\n\\nSome functions such as `tokens()` are allowed.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst styles = css({ padding: token('space.100') });\\n```\\n\\n### Dynamic keys\\n\\n#### Incorrect\\n\\nDynamic keys are blocked, unless they are specified in `allowedDynamicKeys` (or in the default\\nlist).\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nconst HOVER_SELECTOR = '&:hover';\\nconst MARGIN = 'margin';\\n\\nconst styles = css({\\n\\t[HOVER_SELECTOR]: {\\n\\t\\t[MARGIN]: 0,\\n\\t},\\n\\t[`${HOVER_SELECTOR} > p`]: {\\n\\t\\twidth: 100,\\n\\t},\\n});\\n```\\n\\n#### Correct\\n\\nUse literal values for pseudo-states and property names.\\n\\nDon't use nested selectors, apply styles directly instead.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nconst styles = css({\\n\\t'&:hover': {\\n\\t\\tmargin: 0,\\n\\t},\\n});\\n\\nconst paragraphStyles = css({\\n\\twidth: 100,\\n});\\n```\\n\\nStatically written CSS at-rule keys may be annotated with a type-only `satisfies` expression. The\\nannotation is erased at runtime, so it does not make the key unsafe:\\n\\n```tsx\\nimport { css } from '@atlaskit/css';\\nimport type MediaAboveSm from '@atlaskit/css/at-rules/media-above-sm';\\n\\nconst styles = css({\\n\\t['@media (min-width: 48rem)' satisfies MediaAboveSm]: {\\n\\t\\tpadding: '8px',\\n\\t},\\n});\\n```\\n\\n### Variables\\n\\n#### Incorrect\\n\\nVariables are only allowed as values if they:\\n\\n- have a simple, static value\\n- are defined in the same file\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { HEIGHT } from '../shared';\\n\\nconst styles = css({\\n\\theight: HEIGHT,\\n});\\n```\\n\\n#### Correct\\n\\nUse inlined values.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nconst styles = css({\\n\\theight: '32px',\\n});\\n```\\n\\nAlternatively, define variables in the same file.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nconst HEIGHT = '32px';\\n\\nconst styles = css({\\n\\theight: HEIGHT,\\n});\\n```\\n\\n### Object access\\n\\n#### Incorrect\\n\\nDon't access object members in values.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst colors = {\\n\\ttext: token('color.text'),\\n};\\n\\nconst styles = css({\\n\\tcolor: colors.text,\\n});\\n```\\n\\n#### Correct\\n\\nUse inlined values.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst styles = css({\\n\\tcolor: token('color.text'),\\n});\\n```\\n\\n### Spread elements\\n\\n#### Incorrect\\n\\nDon't use the spread operator in styles.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst subtleTextStyles = {\\n\\tcolor: token('color.text.subtle'),\\n};\\n\\nconst styles = css({\\n\\t...subtleTextStyles,\\n\\tmargin: 0,\\n});\\n```\\n\\n#### Correct\\n\\nUse the `css` prop to compose styles.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst subtleTextStyles = {\\n\\tcolor: token('color.text.subtle'),\\n};\\n\\nconst styles = css({\\n\\tmargin: 0,\\n});\\n\\nconst Component = () => <div css={[subtleTextStyles, styles]} />;\\n```\\n\\n### Array values\\n\\n#### Incorrect\\n\\nDon't use array values. This syntax is not supported by Compiled, or most other CSS-in-JS libraries.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst boldMixin = { fontWeight: token('font.weight.bold') };\\n\\nconst styles = css({\\n\\t'&::before': [boldMixin, { color: token('color.text.danger') }],\\n});\\n```\\n\\n#### Correct\\n\\nUse a single object with inlined styles.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst styles = css({\\n\\t'&::before': {\\n\\t\\tfontWeight: token('font.weight.bold'),\\n\\t\\tcolor: token('color.text.danger'),\\n\\t},\\n});\\n```\\n\\n## Options\\n\\n### `allowedDynamicKeys: [string, string][]`\\n\\nUse this to allow specified imports as dynamic keys, in addition to the built-in allow-list.\\n\\nEach value should be a two-element array. The first item is the entrypoint, and the second item is a\\nnamed export.\\n\\nDefault imports are not supported.\\n\\n```tsx\\n// eslint.config.cjs\\n\\n// ...\\n      rules: {\\n        '@atlaskit/eslint-plugin-ui-styling-standard/no-unsafe-values': [\\n          'error',\\n          {\\n            allowedDynamicKeys: [\\n              ['@atlaskit/primitives/responsive', 'media'],\\n            ]\\n          },\\n        ],\\n        // ...\\n      },\\n// ...\\n```\\n\\n### `allowedFunctionCalls: [string, string][]`\\n\\nUse this to allow specific functions to be called, in addition to the built-in allow-list.\\n\\nEach value should be a two-element array. The first item is the entrypoint, and the second item is a\\nnamed export.\\n\\nDefault imports are not currently supported.\\n\\n```tsx\\n// eslint.config.cjs\\n\\n// ...\\n      rules: {\\n        '@atlaskit/eslint-plugin-ui-styling-standard/no-unsafe-values': [\\n          'error',\\n          {\\n            allowedFunctionCalls: [\\n              ['@atlaskit/tokens', 'token'],\\n            ]\\n          },\\n        ],\\n        // ...\\n      },\\n// ...\\n```\\n\\n### `importSources: string[]`\\n\\nBy default, this rule will check styles using:\\n\\n- `@atlaskit/css`\\n- `@atlaskit/primitives`\\n- `@compiled/react`\\n- `@emotion/react`\\n- `@emotion/core`\\n- `@emotion/styled`\\n- `styled-components`\\n\\nOverride this list with the `importSources` option, which accepts an array of package names.\\n\"}",
   ruleName: 'no-unsafe-values',
   description: 'Blocks styles that are difficult or impossible to statically analyze.'
 }, {