@atlaskit/ads-mcp 0.17.2 → 0.17.3

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

@@ -9,7 +9,7 @@ exports.lintRulesMcpStructuredContent = void 0;
  *
  * Structured content for MCP (JSON) for ESLint rule docs from constellation.
  *
- * @codegen <<SignedSource::a2a44589058cd6aac45502ef8b3ba132>>
+ * @codegen <<SignedSource::44f41e29fce7b92fa79b280b7485ac56>>
  * @codegenCommand yarn build structured-docs
  */
 /* eslint-disable no-template-curly-in-string */
@@ -350,4 +350,108 @@ var lintRulesMcpStructuredContent = exports.lintRulesMcpStructuredContent = [{
   content: "{\"ruleName\":\"use-visually-hidden\",\"description\":\"Using the visually hidden component allows you to delete bespoke or legacy theme code and replace it\",\"content\":\"# use-visually-hidden\\n\\nUsing the visually hidden component allows you to delete bespoke or legacy theme code and replace it\\nwith a ready made solution by the Atlassian Design System Team.\\n\\n## Examples\\n\\nThis rule marks code as violations when it can be replaced 1:1 with the visually hidden component.\\n\\n### Incorrect\\n\\n```js\\nimport { css } from '@emotion/core';\\nimport { visuallyHidden } from '@atlaskit/theme/constants';\\n\\nconst visuallyHiddenStyles = css({\\n  width: '1px',\\n  height: '1px',\\n  padding: '0',\\n  position: 'absolute',\\n  border: '0',\\n  clip: 'rect(1px, 1px, 1px, 1px)',\\n  overflow: 'hidden',\\n  whiteSpace: 'nowrap',\\n});\\n\\nconst VisuallyHidden = styled.span`${visuallyHidden()}`;\\n                                     ^^^^^^^^^^^^^^\\n```\\n\\n### Correct\\n\\n```js\\nimport VisuallyHidden from '@atlaskit/visually-hidden';\\n```\\n\"}",
   ruleName: 'use-visually-hidden',
   description: 'Using the visually hidden component allows you to delete bespoke or legacy theme code and replace it'
+}, {
+  content: "{\"ruleName\":\"atlaskit-theme\",\"description\":\"Blocks legacy `@atlaskit/theme` mixins that `@compiled/react` cannot compile. This includes the\",\"content\":\"# atlaskit-theme\\n\\nBlocks legacy `@atlaskit/theme` mixins that `@compiled/react` cannot compile. This includes the\\n`typography`, `elevation` and `skeletonShimmer` mixins.\\n\\n## Examples\\n\\n### Typography\\n\\nDon't use `typography` mixins.\\n\\nUse [typography tokens](https://atlassian.design/foundations/typography-beta/applying-typography) or\\nthe [Heading](https://atlassian.design/components/heading) and\\n[Text](https://atlassian.design/components/primitives/text) components.\\n\\n#### Incorrect\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { typography } from '@atlaskit/theme';\\n\\nconst titleStyles = css(typography.h700());\\n```\\n\\n#### Correct\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst titleStyles = css({\\n\\tfont: token('font.heading.large'),\\n});\\n\\nconst paragraphStyles = css({\\n\\tfont: token('font.body.large'),\\n});\\n```\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport Heading from '@atlaskit/heading';\\nimport { Stack, Text } from '@atlaskit/primitives';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst Component = () => (\\n\\t<Stack>\\n\\t\\t<Heading size=\\\"large\\\">Title</Heading>\\n\\t\\t<Text size=\\\"large\\\">Lorem ipsum</Text>\\n\\t</Stack>\\n);\\n```\\n\\n### Elevation\\n\\nDon't use `elevation` mixins.\\n\\nUse [elevation tokens](https://atlassian.design/foundations/elevation) instead.\\n\\n#### Incorrect\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { elevation } from '@atlaskit/theme';\\n\\nconst cardStyles = css(elevation.e100());\\n```\\n\\n#### Correct\\n\\n```tsx\\nimport { styled } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst cardStyles = css({\\n\\tbackgroundColor: token('elevation.surface.raised'),\\n\\tboxShadow: token('elevation.shadow.raised'),\\n});\\n```\\n\\n### Skeleton Shimmer\\n\\nDon't use the `skeletonShimmer` mixin.\\n\\nPreview our [Skeleton](https://staging.atlassian.design/components/skeleton/examples) component\\n(internal Atlassians only).\\n\\nOtherwise:\\n\\n- Use the `color.skeleton` and `color.skeleton.subtle` tokens to make your own component.\\n- Use `@atlassian/jira-skeletons` when working on Jira (internal Atlassians only).\\n\\n#### Incorrect\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { skeletonShimmer } from '@atlaskit/theme/constants';\\n\\nconst skeletonStyles = css(skeletonShimmer());\\n```\\n\\n#### Correct\\n\\n```tsx\\nimport Skeleton from '@atlaskit/skeleton';\\n\\n<Skeleton width=\\\"200px\\\" height=\\\"16px\\\" isShimmering />;\\n```\\n\\n```tsx\\nimport { css, keyframes } from '@compiled/react';\\n\\nconst shimmer = keyframes({\\n\\tfrom: { backgroundColor: token('color.skeleton') },\\n\\tto: { backgroundColor: token('color.skeleton.subtle') },\\n});\\n\\nconst skeletonStyles = css({\\n\\tbackgroundColor: token('color.skeleton'),\\n\\tanimationName: shimmer,\\n\\tanimationDuration: '1.5s',\\n\\tanimationIterationCount: 'infinite',\\n\\tanimationTimingFunction: 'linear',\\n\\tanimationDirection: 'alternate',\\n});\\n```\\n\\n```tsx\\nimport { ListSkeleton } from '@atlassian/jira-skeletons';\\n\\n<ListSkeleton numOfRows={3} />;\\n```\\n\"}",
+  ruleName: 'atlaskit-theme',
+  description: 'Blocks legacy `@atlaskit/theme` mixins that `@compiled/react` cannot compile. This includes the'
+}, {
+  content: '{"ruleName":"consistent-css-prop-usage","description":"Ensures consistency with all `css` and `xcss` prop usages.","content":"# @atlaskit/design-system/consistent-css-prop-usage\\n\\nEnsures consistency with all `css` and `xcss` prop usages.\\n\\nThis rule is maintained by another package and configured here; refer to\\nhttps://atlassian.design/components/eslint-plugin-design-system/consistent-css-prop-usage/usage for\\nmore details.\\n"}',
+  ruleName: 'consistent-css-prop-usage',
+  description: 'Ensures consistency with all `css` and `xcss` prop usages.'
+}, {
+  content: '{"ruleName":"convert-props-syntax","description":"Blocks dynamic styling syntax that is unsupported by `styled-components@<4` and `@emotion/styled`,","content":"# convert-props-syntax\\n\\nBlocks dynamic styling syntax that is unsupported by `styled-components@<4` and `@emotion/styled`,\\nand provides an autofix for converting to a supported syntax.\\n\\nUse this rule alongside `no-styled-tagged-template-expression`, which can output the unsupported\\ndynamic styling syntax.\\n\\nThis rule applies only to `styled` usages from `styled-components` and `@emotion/styled`.\\n\\n## Autofix\\n\\nThe autofix will find style object values that are arrow functions,\\n\\n```tsx\\nstyled.div({\\n\\tcolor: ({ myColor }) => myColor,\\n\\tbackgroundColor: (props) => props.someColor,\\n});\\n```\\n\\nHowever, refactoring the arrow function so that it is the argument to `styled.div` will fix the\\nissue:\\n\\n```tsx\\nstyled.div((props) => ({\\n\\tcolor: props.myColor,\\n\\tbackgroundColor: props.someColor,\\n}));\\n```\\n\\nThis ESLint rule will only run on usages of the `styled` API when imported from libraries that are\\nknown to have this problem.\\n\\n## About the autofixer\\n\\nThis rule has an autofixer that will automatically perform the above arrow function refactoring for\\nthe majority of cases, including for nested selectors and any props used in template literal values.\\n\\nHowever, there are a few situations where the autofixer will not be run. For these, you will need to\\nmanually fix the output, or migrate the code to `@compiled/react`.\\n\\n### Type annotations\\n\\nType annotations in the arrow function are not supported; you will need to remediate the lint error\\nmanually. For example:\\n\\n```tsx\\ntype Props = {\\n\\tmyColor: string;\\n\\tsomeColor: string;\\n};\\n\\nstyled.div({\\n\\tcolor: ({ myColor }: Props) => myColor,\\n\\tbackgroundColor: (props: Props) => props.someColor,\\n});\\n```\\n\\ncould be refactored as\\n\\n```tsx\\ntype Props = {\\n\\tmyColor: string;\\n\\tsomeColor: string;\\n};\\n\\nstyled.div((props: Props) => ({\\n\\tcolor: props.myColor,\\n\\tbackgroundColor: props.someColor,\\n}));\\n```\\n\\n### Special syntax in function parameters\\n\\nRest elements, default values, and so on in the parameter of an arrow function will need to be\\nremediated manually. For example:\\n\\n```tsx\\nstyled.div({\\n\\tcolor: ({ myColor = \'#fff\' }) => myColor,\\n\\tbackgroundColor: ({ myColor = \'#aaa\' }) => myColor,\\n});\\n```\\n\\ncould be refactored as\\n\\n```tsx\\nstyled.div((props) => ({\\n\\tcolor: myColor ?? \'#fff\',\\n\\tbackgroundColor: myColor ?? \'#aaa\',\\n}));\\n```\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport styled from \'styled-components\';\\n\\nstyled.div({\\n\\tcolor: ({ myColor }) => myColor,\\n\\tbackgroundColor: (props) => props.someColor,\\n});\\n\\nstyled.div({\\n\\tcolor: `url(/tmp/${({ coolProp }) => coolProp}.png)`,\\n});\\n```\\n\\n### Correct\\n\\n```tsx\\nimport styled from \'@emotion/styled\';\\n\\nstyled.div((props) => ({\\n\\tcolor: props.myColor,\\n\\tbackgroundColor: props.someColor,\\n}));\\n\\nstyled.div((props) => ({\\n\\tcolor: url(`/tmp/${coolProp}.png`),\\n}));\\n```\\n\\n## When not to use it\\n\\nYou do not need this rule if you are not using a codebase that has a violating library as it will\\nnever do anything.\\n"}',
+  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"}',
+  ruleName: 'enforce-style-prop',
+  description: 'Blocks providing static values through the `style` prop, which should only be used to provide'
+}, {
+  content: "{\"ruleName\":\"local-cx-xcss\",\"description\":\"Blocks the `cx()` function from being used outside of the `xcss` prop. This aids tracking which\",\"content\":\"# local-cx-xcss\\n\\nBlocks the `cx()` function from being used outside of the `xcss` prop. This aids tracking which\\nstyles are applied.\\n\\nUse the `cx()` function when passing multiple styles to the `xcss` prop. This provides more robust\\ntype checking than the conventional array syntax:\\n\\n```tsx\\nimport { cssMap, cx } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\nimport { Component } from 'some-package';\\n\\nconst styles = cssMap({\\n\\ttext: { color: token('color.text') },\\n\\tprimary: { color: token('color.text.brand') },\\n});\\n\\n<Component xcss={cx(isPrimary && styles.text, !isPrimary && styles.primary)} />;\\n```\\n\\nThe `cx()` function is only checked when imported from `@compiled/react` or `@atlaskit/css`.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { cssMap, cx } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst styles = cssMap({\\n\\ttext: { color: token('color.text') },\\n\\tbg: { background: token('color.background.neutral') },\\n});\\n\\nconst joinedStyles = cx(styles.text, styles.bg);\\n\\n<Button xcss={joinedStyles} />;\\n```\\n\\n### Correct\\n\\n```tsx\\nimport { cssMap, cx } from '@compiled/react';\\n\\nconst styles = cssMap({\\n\\ttext: { color: token('color.text') },\\n\\tbg: { background: token('color.background.neutral') },\\n});\\n\\n<Button xcss={cx(styles.text, styles.bg)} />;\\n```\\n\"}",
+  ruleName: 'local-cx-xcss',
+  description: 'Blocks the `cx()` function from being used outside of the `xcss` prop. This aids tracking which'
+}, {
+  content: '{"ruleName":"no-array-arguments","description":"Blocks passing array arguments to style declaration functions.","content":"# no-array-arguments\\n\\nBlocks passing array arguments to style declaration functions.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { css } from \'@compiled/react\';\\n\\nconst styles = css([{ width: 100 }, { height: 100 }]);\\n```\\n\\n```tsx\\nimport { styled } from \'@compiled/react\';\\n\\nconst styles = css([{ width: 100 }, ...items]);\\n```\\n\\n### Correct\\n\\n```tsx\\nimport { css } from \'@compiled/react\';\\n\\nconst styles = css({ width: 100 }, { height: 100 });\\n```\\n\\n```tsx\\nimport { css } from \'@compiled/react\';\\n\\nconst styles = css({ width: 100 }, ...items);\\n```\\n\\n## Options\\n\\n### `importSources: string[]`\\n\\nBy default, this rule will check styles using:\\n\\n- `@atlaskit/css`\\n- `@atlaskit/primitives`\\n- `@compiled/react`\\n- `@emotion/react`\\n- `@emotion/core`\\n- `@emotion/styled`\\n- `styled-components`\\n\\nOverride this list with the `importSources` option, which accepts an array of package names.\\n"}',
+  ruleName: 'no-array-arguments',
+  description: 'Blocks passing array arguments to style declaration functions.'
+}, {
+  content: "{\"ruleName\":\"no-classname-prop\",\"description\":\"Blocks the `className` prop, which encourages unsafe global styles and cannot be statically\",\"content\":\"# no-classname-prop\\n\\nBlocks the `className` prop, which encourages unsafe global styles and cannot be statically\\nresolved.\\n\\nUse the `css` prop for styling, with props for configuration and `xcss` for bounded overrides.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\n<div className=\\\"my-class\\\">\\n```\\n\\n```tsx\\n<MyComponent className={isDisabled ? 'disabled' : undefined} />\\n```\\n\\n### Correct\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst myStyles = css({ padding: token('space.100') });\\n\\n<div css={myStyles} />;\\n```\\n\\n```tsx\\n<MyComponent isDisabled={isDisabled} />\\n```\\n\\n```tsx\\nimport { Checkbox } from '@atlaskit/checkbox';\\n\\n<Checkbox xcss={{ alignItems: 'center' }} />;\\n```\\n\\nPass-through `props.xcss` are allowed, expecting this to be typed, refer to\\n[@atlaskit/css](https://atlassian.design/components/css/overview#building-reusable-components)\\n\\n```tsx\\nimport { StrictXCSSProp } from '@atlaskit/css';\\n\\nconst Component = (props: { xcss?: StrictXCSSProp<'color', never> }) => (\\n\\t<div className={props.xcss} />\\n);\\n```\\n\\n## FAQ\\n\\n### What if I'm using `className` to target elements with JavaScript?\\n\\nThere are some cases where a selector is required to integrate with a 3rd party library, such as\\nlegacy code using jQuery.\\n\\nUse a `ref` if possible. Otherwise, if you _must_ have a selector, use a `data-*` attribute that\\ngives enough context and is unique enough, for example `data-editor-table-target=\\\"true\\\"`.\\n\"}",
+  ruleName: 'no-classname-prop',
+  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\"}",
+  ruleName: 'no-container-queries',
+  description: 'Blocks `@container` at-rules'
+}, {
+  content: '{"ruleName":"no-css-tagged-template-expression","description":"Disallows any `css` tagged template expressions that originate from a CSS-in-JS library, including","content":"# @atlaskit/design-system/no-css-tagged-template-expression\\n\\nDisallows any `css` tagged template expressions that originate from a CSS-in-JS library, including\\n`@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.\\n\\nThis rule is maintained by another package and configured here; refer to\\nhttps://atlassian.design/components/eslint-plugin-design-system/no-css-tagged-template-expression/usage\\nfor more details.\\n"}',
+  ruleName: 'no-css-tagged-template-expression',
+  description: 'Disallows any `css` tagged template expressions that originate from a CSS-in-JS library, including'
+}, {
+  content: "{\"ruleName\":\"no-dynamic-styles\",\"description\":\"Blocks dynamic styles (function expressions) in style declarations.\",\"content\":\"# no-dynamic-styles\\n\\nBlocks dynamic styles (function expressions) in style declarations.\\n\\nThis ensures that style declarations:\\n\\n- are statically analyzable\\n- can be efficiently extracted into atomic CSS\\n- are more readable and deterministic, thus easier to maintain\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { styled } from '@compiled/react';\\n\\nconst Component = styled.div<{ width: number }>((props) => ({\\n\\twidth: props.width,\\n}));\\n```\\n\\n```tsx\\nimport styled from 'styled-components';\\n\\nconst Component = styled.div<{ width: number }>({\\n\\twidth: (props) => props.width,\\n});\\n```\\n\\n```tsx\\nimport styled from 'styled-components';\\n\\nconst Container = styled.div<{ hasPadding: boolean }>({\\n\\tpadding: ({ hasPadding }) => (hasPadding ? token('space.100', '8px') : token('space.0', '0px')),\\n});\\n```\\n\\nThe following example shows the code leading to a bug. In this scenario Compiled transforms the\\nwhole function into the result of its first `return` statement (static string\\n`'0 0 0 1px magenta'`):\\n\\n```tsx\\nimport { styled } from '@compiled/react';\\n\\nconst Component = styled.li({\\n\\tboxShadow: (props) => {\\n\\t\\tif (props.isSelected) {\\n\\t\\t\\treturn '0 0 0 1px magenta';\\n\\t\\t}\\n\\n\\t\\treturn '0 0 0 1px green';\\n\\t},\\n});\\n```\\n\\nSee more about this issue\\n[here](https://compiledcssinjs.com/docs/limitations#returning-static-values-from-a-dynamic-property).\\n\\n### Correct\\n\\nDefine all styles statically, and dynamically apply them using the `css` prop. Use the `style` prop\\nfor values that are only known at runtime.\\n\\nFor further guidance, consult our\\n[migration guide](https://atlassian.design/components/eslint-plugin-ui-styling-standard/migration-guide).\\n\\n#### Flags\\n\\nIf you have a style that is on/off depending on a prop, use the `css` prop to conditionally apply\\nit.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nconst baseStyles = css({ padding: token('space.0') });\\nconst hasPaddingStyles = css({ padding: token('space.100') });\\n\\nconst Container = ({ hasPadding = false }: { hasPadding?: boolean }) => {\\n\\treturn <div css={[baseStyles, hasPadding && hasPaddingStyles]} />;\\n};\\n```\\n\\n#### Variants\\n\\nIf you have variants which are known ahead of time, use `cssMap` to define them and the `css` prop\\nto conditionally apply it.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nconst baseStyles = css({ width: 100 });\\nconst stylesMap = cssMap({\\n  primary: {\\n    background: token('color.background.brand.bold'),\\n    '&:hover': { background: token('color.background.brand.bold.hovered') },\\n  },\\n  error: {\\n    background: token('color.background.warning.bold'),\\n    '&:hover': { background: token('color.background.warning.bold.hovered') },\\n  }\\n});\\n\\nconst Wrapper = ({ appearance = 'primary' }: { appearance?: 'primary' | 'error' }) => (\\n  <div css={[baseStyles, stylesMap[appearance]} />\\n);\\n```\\n\\n#### Dynamic values\\n\\nIf you have styles which are truly dynamic, use the `style` prop.\\n\\nThis approach should be used as a last resort.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nconst Component = ({ width }: { width: number }) => {\\n\\treturn <div style={{ width }} />;\\n};\\n```\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nconst containerStyles = css({\\n\\t'&::before': {\\n\\t\\twidth: 'var(--ak-example-width)',\\n\\t},\\n});\\n\\nfunction Example({ width }: { width: number }) {\\n\\treturn <div css={containerStyles} style={{ '--ak-example-width': `${width}px` }} />;\\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-dynamic-styles',
+  description: 'Blocks dynamic styles (function expressions) in style declarations.'
+}, {
+  content: '{"ruleName":"no-empty-styled-expression","description":"Forbids any styled expression to be used when passing empty arguments to styled.div() (or other JSX","content":"# @atlaskit/design-system/no-empty-styled-expression\\n\\nForbids any styled expression to be used when passing empty arguments to styled.div() (or other JSX\\nelements).\\n\\nThis rule is maintained by another package and configured here; refer to\\nhttps://atlassian.design/components/eslint-plugin-design-system/no-empty-styled-expression/usage for\\nmore details.\\n"}',
+  ruleName: 'no-empty-styled-expression',
+  description: 'Forbids any styled expression to be used when passing empty arguments to styled.div() (or other JSX'
+}, {
+  content: '{"ruleName":"no-exported-css","description":"Forbid exporting `css` function calls. Exporting `css` function calls can result in unexpected","content":"# @atlaskit/design-system/no-exported-css\\n\\nForbid exporting `css` 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-css/usage for more\\ndetails.\\n"}',
+  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"}',
+  ruleName: 'no-exported-keyframes',
+  description: 'Forbid exporting `keyframes` function calls. Exporting `css` function calls can result in unexpected'
+}, {
+  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',
+  description: 'Blocks exports of `css`, `cssMap`, `keyframes`, `styled`, `xcss` styles, which are unsafe.'
+}, {
+  content: '{"ruleName":"no-global-styles","description":"Blocks global styles through CSS-in-JS and CSS module imports.","content":"# no-global-styles\\n\\nBlocks global styles through CSS-in-JS and CSS module imports.\\n\\nUse local styles so that style dependencies are statically resolvable.\\n\\nThe only global styling that should be used is `@atlaskit/css-reset`.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { Global } from \'@emotion/react\';\\n\\n<Global\\n\\tstyles={{\\n\\t\\t\'.some-class\': {\\n\\t\\t\\tfontSize: 50,\\n\\t\\t\\ttextAlign: \'center\',\\n\\t\\t},\\n\\t}}\\n/>;\\n```\\n\\n```tsx\\nimport { createGlobalStyle } from \'styled-components\';\\n\\nconst GlobalStyle = createGlobalStyle({\\n\\tbody: {\\n\\t\\tmargin: 0,\\n\\t},\\n});\\n```\\n\\n```tsx\\nimport { injectGlobal } from \'styled-components\';\\n\\ninjectGlobal({\\n\\tbody: {\\n\\t\\tmargin: 0,\\n\\t},\\n});\\n```\\n\\n```tsx\\n<style>\\n\\t{`\\n    .some-class {\\n      color: red;\\n    }\\n  `}\\n</style>\\n```\\n\\n### Correct\\n\\n```tsx\\nimport \'@atlaskit/css-reset\';\\n```\\n"}',
+  ruleName: 'no-global-styles',
+  description: 'Blocks global styles through CSS-in-JS and CSS module imports.'
+}, {
+  content: '{"ruleName":"no-important-styles","description":"Blocks the `!important` flag in style declarations.","content":"# no-important-styles\\n\\nBlocks the `!important` flag in style declarations.\\n\\nProperly composed styles will never need an `!important` flag. It is used to override specificity\\nwhen working across different scopes, and the UI Styling Standard enforces styles with minimal\\nscope.\\n\\nThe use of `!important` is a code smell and greatly impacts readability and determinism.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```js\\nimport { css } from \'@compiled/react\';\\nimport { token } from \'@atlaskit/tokens\';\\n\\nconst styles = css({\\n\\tcolor: `${token(\'color.text.danger\')}!important`,\\n});\\n```\\n\\n### Correct\\n\\n```js\\nimport { css } from \'@compiled/react\';\\nimport { token } from \'@atlaskit/tokens\';\\n\\nconst styles = css({\\n\\tcolor: token(\'color.text.danger\'),\\n});\\n```\\n"}',
+  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\"}",
+  ruleName: 'no-imported-style-values',
+  description: 'Blocks imported style values in `css`, `cssMap`, `styled`, `keyframes` and `xcss` calls.'
+}, {
+  content: '{"ruleName":"no-invalid-css-map","description":"Ensure that all usages of the cssMap API are valid, and enforces the format of the object that is","content":"# @atlaskit/design-system/no-invalid-css-map\\n\\nEnsure that all usages of the cssMap API are valid, and enforces the format of the object that is\\npassed to cssMap. This is intended to be used alongside TypeScript\'s type-checking.\\n\\nThis rule is maintained by another package and configured here; refer to\\nhttps://atlassian.design/components/eslint-plugin-design-system/no-invalid-css-map/usage for more\\ndetails.\\n"}',
+  ruleName: 'no-invalid-css-map',
+  description: 'Ensure that all usages of the cssMap API are valid, and enforces the format of the object that is'
+}, {
+  content: '{"ruleName":"no-keyframes-tagged-template-expression","description":"Disallows any `keyframes` tagged template expressions that originate from a CSS-in-JS library,","content":"# @atlaskit/design-system/no-keyframes-tagged-template-expression\\n\\nDisallows any `keyframes` tagged template expressions that originate from a CSS-in-JS library,\\nincluding `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.\\n\\nThis rule is maintained by another package and configured here; refer to\\nhttps://atlassian.design/components/eslint-plugin-design-system/no-keyframes-tagged-template-expression/usage\\nfor more details.\\n"}',
+  ruleName: 'no-keyframes-tagged-template-expression',
+  description: 'Disallows any `keyframes` tagged template expressions that originate from a CSS-in-JS library,'
+}, {
+  content: "{\"ruleName\":\"no-nested-selectors\",\"description\":\"Blocks nested selectors in style declarations.\",\"content\":\"# no-nested-selectors\\n\\nBlocks nested selectors in style declarations.\\n\\nUse styles which do not require context from other elements.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst styles = css({\\n\\th2: {\\n\\t\\tfont: token('font.heading.large'),\\n\\t},\\n});\\n\\nconst Component = () => (\\n\\t<div css={styles}>\\n\\t\\t<h2>Heading</h2>\\n\\t</div>\\n);\\n```\\n\\n```tsx\\nimport { styled } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst Table = styled.table({\\n\\tborder: `1px solid ${token('color.border')}`,\\n\\ttd: {\\n\\t\\tpadding: token('space.100'),\\n\\t},\\n});\\n```\\n\\n```tsx\\nimport { styled } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst Component = styled.div({\\n\\t'.myclass': {\\n\\t\\tpadding: token('space.100'),\\n\\t},\\n});\\n```\\n\\n### Correct\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst headingStyles = css({\\n\\tfont: token('font.heading.large'),\\n});\\n\\nconst Component = () => (\\n\\t<div>\\n\\t\\t<h2 css={headingStyles}>Heading</h2>\\n\\t</div>\\n);\\n```\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst tableStyles = css({\\n\\tborder: `1px solid ${token('color.border')}`,\\n});\\n\\nconst tdStyles = css({\\n\\tpadding: token('space.100'),\\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-nested-selectors',
+  description: 'Blocks nested selectors in style declarations.'
+}, {
+  content: "{\"ruleName\":\"no-styled\",\"description\":\"Blocks the `styled` API, which creates unnecessary indirection.\",\"content\":\"# no-styled\\n\\nBlocks the `styled` API, which creates unnecessary indirection.\\n\\nThis indirection:\\n\\n- obfuscates which tag is being rendered\\n- adds linting complexity\\n- promotes exported styles\\n- can complicate refactoring\\n\\nUse the `css` API instead. It has better performance and clarity.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport styled from 'styled-components';\\n\\nconst Component = styled.div`\\n\\tcolor: red;\\n`;\\nexport default styled.div({ color: 'red' });\\n```\\n\\n```tsx\\nimport styled2 from '@emotion/styled';\\n\\nexport const Component = styled2('div')`…`;\\n```\\n\\n```tsx\\nimport styled from 'styled-components';\\nimport { styled as styled3 } from '@compiled/react';\\n\\nconst Component = styled.div`color: red;`\\nexport const ComponentTwo = styled3(Component)({ … });\\n```\\n\\n```tsx\\nimport styled from 'styled-components';\\n\\nexport default styled.div.attrs((props) => ({ 'data-testid': props.testId }))({\\n\\tcolor: 'red',\\n});\\n```\\n\\n```tsx\\nimport styled from 'styled-components';\\n\\nexport default styled.div.attrs((props) => ({ 'data-testid': props.testId }))`\\n\\tcolor: red;\\n`;\\n```\\n\\n### Correct\\n\\n```tsx\\nimport { css, jsx } from '@emotion/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst styles = css({ color: token('color.text.subtlest') });\\n\\nconst Component = ({ children }) => {\\n\\treturn <div css={styles}>{children}</div>;\\n};\\n```\\n\\n```tsx\\nimport { Box, xcss } from '@atlaskit/primitives';\\n\\nconst styles = xcss({\\n\\tcolor: 'color.text.subtlest',\\n});\\n\\nconst Component = ({ children }) => {\\n\\treturn <Box xcss={styles}>{children}</Box>;\\n};\\n```\\n\\n## FAQ\\n\\n### How will I extend like `styled(Button)`?\\n\\nDon't modify the styles of components you don't own, unless they provide an explicit bounded\\ninterface for doing so — such as the `xcss` prop.\\n\\nUse props (excluding `className` which is prohibited) to modify component styles instead.\\n\\nThe Atlassian Design System, for example, no longer supports `styled(Button)` because it is unsafe\\nfor us to evolve the system with.\\n\"}",
+  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"}',
+  ruleName: 'no-styled-tagged-template-expression',
+  description: 'Disallows any `styled` tagged template expressions that originate from 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\"}",
+  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\"}",
+  ruleName: 'no-unsafe-values',
+  description: 'Blocks styles that are difficult or impossible to statically analyze.'
+}, {
+  content: "{\"ruleName\":\"no-unused-cssmap-properties\",\"description\":\"Detects unused properties in `cssMap` style objects that are not exported. This helps maintain clean\",\"content\":\"# no-unused-cssmap-properties\\n\\nDetects unused properties in `cssMap` style objects that are not exported. This helps maintain clean\\ncode by identifying style variants that are defined but never used in the component.\\n\\nWhen using `cssMap` from `@compiled/react` or `@atlaskit/css`, it's common to define multiple style\\nvariants. Over time, some variants may become unused as code evolves. This rule identifies those\\nunused properties to help keep your codebase clean and maintainable.\\n\\nThe rule only applies to non-exported `cssMap` objects, since exported styles may be used by other\\nmodules.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { cssMap } from '@compiled/react';\\n\\nconst styles = cssMap({\\n\\troot: { color: 'red' },\\n\\tunused: { background: 'blue' }, // Error: unused property\\n});\\n\\n<div css={styles.root} />;\\n```\\n\\n```tsx\\nimport { cssMap } from '@atlaskit/css';\\n\\nconst boxStyles = cssMap({\\n\\troot: { borderWidth: '1px' },\\n\\tactive: { borderColor: 'blue' },\\n\\tdisabled: { opacity: 0.5 }, // Error: unused property\\n});\\n\\n<Box css={boxStyles.root}>\\n\\t<Box css={boxStyles.active}>Content</Box>\\n</Box>;\\n```\\n\\n### Correct\\n\\n```tsx\\nimport { cssMap } from '@compiled/react';\\n\\nconst styles = cssMap({\\n\\troot: { color: 'red' },\\n\\tactive: { background: 'blue' },\\n});\\n\\n<div css={styles.root} />;\\n<div css={styles.active} />;\\n```\\n\\n```tsx\\nimport { cssMap } from '@atlaskit/css';\\n\\n// Exported styles are not checked (may be used in other files)\\nexport const styles = cssMap({\\n\\troot: { color: 'red' },\\n\\tunused: { background: 'blue' },\\n});\\n```\\n\\n```tsx\\nimport { cssMap } from '@compiled/react';\\n\\nconst styles = cssMap({\\n\\troot: { color: 'red' },\\n\\tactive: { background: 'blue' },\\n});\\n\\n// Using the entire object marks all properties as used\\nconst allStyles = { ...styles };\\n```\\n\\n## Options\\n\\nThis rule has no configuration options.\\n\"}",
+  ruleName: 'no-unused-cssmap-properties',
+  description: 'Detects unused properties in `cssMap` style objects that are not exported. This helps maintain clean'
+}, {
+  content: "{\"ruleName\":\"use-compiled\",\"description\":\"Blocks CSS-in-JS libraries other than `@compiled/react`, including Emotion and styled-components.\",\"content\":\"# use-compiled\\n\\nBlocks CSS-in-JS libraries other than `@compiled/react`, including Emotion and styled-components.\\n\\n**WARNING** It may be unsafe to mix usages of `@compiled/react` with other CSS-in-JS libraries on\\nthe same component. When converting to `@compiled/react` verify ALL changes. For this reason, the\\nautofixer has been disabled by default, but it may be useful to enable to empower a migration.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\n/**\\n * @jsxRuntime classic\\n * @jsx jsx\\n */\\nimport { css } from '@emotion/core';\\nimport { jsx } from '@emotion/react';\\nimport styled from '@emotion/styled';\\n```\\n\\n```tsx\\nimport styled, { css } from 'styled-components';\\n```\\n\\n### Correct\\n\\nWe expect usage of `xcss` with `@atlaskit/primitives` when working with Primitives, and `css` with\\n`@compiled/react` when working with custom or native code.\\n\\n```tsx\\n/**\\n * @jsxRuntime classic\\n * @jsx jsx\\n */\\nimport { jsx, css, styled } from '@compiled/react';\\n\\nconst styles = css({ color: 'var(--ds-color-text)' });\\nexport default () => <div css={styles}>…</div>;\\n```\\n\\n```tsx\\nimport { xcss, Box } from '@atlaskit/primitives';\\n\\nconst styles = xcss({ color: 'color.text' });\\nexport default () => <Box xcss={styles}>…</Box>;\\n```\\n\\n## Options\\n\\n### `canAutoFix: boolean`\\n\\nDetermines whether or not the autofixer is enabled.\\n\\nDefaults to `false` due to safety concerns when mixing Compiled and other CSS-in-JS libraries on the\\nsame component.\\n\\nEven when enabled, the autofixer will only convert usages that are deemed safe. Currently this is\\nlimited to purely static styles where all keys and values are simple literals.\\n\"}",
+  ruleName: 'use-compiled',
+  description: 'Blocks CSS-in-JS libraries other than `@compiled/react`, including Emotion and styled-components.'
 }];

package/dist/es2019/index.js

@@ -2,7 +2,6 @@
 import { Server } from '@modelcontextprotocol/sdk/server/index.js';
 import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
 import { CallToolRequestSchema, ListToolsRequestSchema, McpError } from '@modelcontextprotocol/sdk/types.js';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { sendOperationalEvent } from './helpers/analytics';
 import { validateToolArguments } from './helpers/validation';
 import { instructions } from './instructions';
@@ -109,28 +108,23 @@ export const getToolRegistry = () => {
       handler: getGuidelinesTool,
       inputSchema: getGuidelinesInputSchema,
       tool: listGetGuidelinesTool
-    }
-  };
-
-  // Conditionally add token and icon tools based on feature flag
-  if (fg('design_system_mcp_structured_content')) {
-    baseTools[listGetLintRulesTool.name] = {
-      handler: getLintRulesTool,
-      inputSchema: getLintRulesInputSchema,
-      tool: listGetLintRulesTool
-    };
-  } else {
-    baseTools[listGetAllTokensTool.name] = {
+    },
+    [listGetAllTokensTool.name]: {
       handler: getAllTokensTool,
       inputSchema: null,
       tool: listGetAllTokensTool
-    };
-    baseTools[listGetAllIconsTool.name] = {
+    },
+    [listGetAllIconsTool.name]: {
       handler: getAllIconsTool,
       inputSchema: null,
       tool: listGetAllIconsTool
-    };
-  }
+    },
+    [listGetLintRulesTool.name]: {
+      handler: getLintRulesTool,
+      inputSchema: getLintRulesInputSchema,
+      tool: listGetLintRulesTool
+    }
+  };
   return baseTools;
 };
 server.setRequestHandler(ListToolsRequestSchema, async (request, extra) => {