npm - @atlaskit/eslint-plugin-design-system - Versions diffs - 8.26.0 → 8.28.0 - Mend

@atlaskit/eslint-plugin-design-system 8.26.0 → 8.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (112) hide show

package/constellation/index/usage.mdx CHANGED Viewed

@@ -2,8 +2,6 @@
 order: 0
 ---
-import SectionMessage from '@atlaskit/section-message';
 This plugin contains rules that should be used when working with the [Atlassian Design System](https://atlassian.design).
 ## Rules
@@ -11,1477 +9,36 @@ This plugin contains rules that should be used when working with the [Atlassian
 <!-- START_RULE_TABLE_CODEGEN -->
 <!-- @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen -->
-| Rule                                                                                         | Description                                                                                                                                                                                                                                                                                                         | Recommended | Fixable | Suggestions |
-| -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------- | ----------- |
-| <a href="#consistent-css-prop-usage">consistent-css-prop-usage</a>                           | Ensures consistency with `css` and `xcss` prop usages                                                                                                                                                                                                                                                               | Yes         | Yes     |             |
-| <a href="#ensure-design-token-usage">ensure-design-token-usage</a>                           | Enforces usage of design tokens rather than hard-coded values.                                                                                                                                                                                                                                                      | Yes         | Yes     | Yes         |
-| <a href="#ensure-design-token-usage-preview">ensure-design-token-usage/preview</a>           | Enforces usage of pre-release design tokens rather than hard-coded values.                                                                                                                                                                                                                                          |             | Yes     | Yes         |
-| <a href="#icon-label">icon-label</a>                                                         | Enforces accessible usage of icon labels when composed with Atlassian Design System components.                                                                                                                                                                                                                     | Yes         | Yes     |             |
-| <a href="#local-cx-xcss">local-cx-xcss</a>                                                   | Ensures the cx() function, which is part of the XCSS API, is only used within the xcss prop. This aids tracking what styles are applied to a jsx element.                                                                                                                                                           | Yes         |         |             |
-| <a href="#no-banned-imports">no-banned-imports</a>                                           | Disallow importing banned modules.                                                                                                                                                                                                                                                                                  | Yes         |         |             |
-| <a href="#no-css-tagged-template-expression">no-css-tagged-template-expression</a>           | Disallows any `css` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                          |             | Yes     |             |
-| <a href="#no-deprecated-apis">no-deprecated-apis</a>                                         | Disallow using deprecated APIs.                                                                                                                                                                                                                                                                                     | Yes         |         |             |
-| <a href="#no-deprecated-design-token-usage">no-deprecated-design-token-usage</a>             | Disallow using deprecated design tokens.                                                                                                                                                                                                                                                                            | Yes         | Yes     |             |
-| <a href="#no-deprecated-imports">no-deprecated-imports</a>                                   | Disallow importing deprecated modules.                                                                                                                                                                                                                                                                              | Yes         |         |             |
-| <a href="#no-empty-styled-expression">no-empty-styled-expression</a>                         | Forbids any styled expression to be used when passing empty arguments to styled.div() (or other JSX elements).                                                                                                                                                                                                      | Yes         |         |             |
-| <a href="#no-exported-css">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.                                                                                                                                                              | Yes         |         |             |
-| <a href="#no-exported-keyframes">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.                                                                                                                                                        | Yes         |         |             |
-| <a href="#no-invalid-css-map">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         |         |             |
-| <a href="#no-margin">no-margin</a>                                                           | Disallow using the margin CSS property.                                                                                                                                                                                                                                                                             |             |         |             |
-| <a href="#no-nested-styles">no-nested-styles</a>                                             | Disallows use of nested styles in `css` functions.                                                                                                                                                                                                                                                                  | Yes         |         |             |
-| <a href="#no-physical-properties">no-physical-properties</a>                                 | Disallow physical properties and values in `css` function calls.                                                                                                                                                                                                                                                    |             | Yes     |             |
-| <a href="#no-unsafe-design-token-usage">no-unsafe-design-token-usage</a>                     | Enforces design token usage is statically and locally analyzable.                                                                                                                                                                                                                                                   | Yes         | Yes     |             |
-| <a href="#no-unsafe-style-overrides">no-unsafe-style-overrides</a>                           | Discourage usage of unsafe style overrides used against the Atlassian Design System.                                                                                                                                                                                                                                | Yes         |         |             |
-| <a href="#no-unsupported-drag-and-drop-libraries">no-unsupported-drag-and-drop-libraries</a> | Disallow importing unsupported drag and drop modules.                                                                                                                                                                                                                                                               | Yes         |         |             |
-| <a href="#prefer-primitives">prefer-primitives</a>                                           | Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability. To enforce usage please refer to the `use-primitives` rule.                                                                                                                                    |             |         |             |
-| <a href="#use-button-group-label">use-button-group-label</a>                                 | Ensures button groups are described to assistive technology by a direct label or by another element.                                                                                                                                                                                                                | Yes         |         | Yes         |
-| <a href="#use-drawer-label">use-drawer-label</a>                                             | Encourages to provide accessible name for Atlassian Design System Drawer component.                                                                                                                                                                                                                                 | Yes         |         | Yes         |
-| <a href="#use-heading-level-in-spotlight-card">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     |             |
-| <a href="#use-href-in-link-item">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         |
-| <a href="#use-primitives">use-primitives</a>                                                 | Encourage the usage of primitives components.                                                                                                                                                                                                                                                                       |             | Yes     | Yes         |
-| <a href="#use-visually-hidden">use-visually-hidden</a>                                       | Enforce usage of the visually hidden component.                                                                                                                                                                                                                                                                     | Yes         | Yes     |             |
+| Rule                                                                                                | Description                                                                                                                                                                                                                                                                                                         | Recommended | Fixable | Suggestions |
+| --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------- | ----------- |
+| <a href="consistent-css-prop-usage/usage">consistent-css-prop-usage</a>                             | Ensures consistency with `css` and `xcss` prop usages                                                                                                                                                                                                                                                               | Yes         | Yes     |             |
+| <a href="ensure-design-token-usage/usage">ensure-design-token-usage</a>                             | Enforces usage of design tokens rather than hard-coded values.                                                                                                                                                                                                                                                      | Yes         | Yes     | Yes         |
+| <a href="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         |
+| <a href="icon-label/usage">icon-label</a>                                                           | Enforces accessible usage of icon labels when composed with Atlassian Design System components.                                                                                                                                                                                                                     | Yes         | Yes     |             |
+| <a href="local-cx-xcss/usage">local-cx-xcss</a>                                                     | Ensures the cx() function, which is part of the XCSS API, is only used within the xcss prop. This aids tracking what styles are applied to a jsx element.                                                                                                                                                           | Yes         |         |             |
+| <a href="no-banned-imports/usage">no-banned-imports</a>                                             | Disallow importing banned modules.                                                                                                                                                                                                                                                                                  | Yes         |         |             |
+| <a href="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     |             |
+| <a href="no-deprecated-apis/usage">no-deprecated-apis</a>                                           | Disallow using deprecated APIs.                                                                                                                                                                                                                                                                                     | Yes         |         |             |
+| <a href="no-deprecated-design-token-usage/usage">no-deprecated-design-token-usage</a>               | Disallow using deprecated design tokens.                                                                                                                                                                                                                                                                            | Yes         | Yes     |             |
+| <a href="no-deprecated-imports/usage">no-deprecated-imports</a>                                     | Disallow importing deprecated modules.                                                                                                                                                                                                                                                                              | Yes         |         |             |
+| <a href="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).                                                                                                                                                                                                      | Yes         |         |             |
+| <a href="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.                                                                                                                                                              | Yes         |         |             |
+| <a href="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.                                                                                                                                                        | Yes         |         |             |
+| <a href="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         |         |             |
+| <a href="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     |             |
+| <a href="no-margin/usage">no-margin</a>                                                             | Disallow using the margin CSS property.                                                                                                                                                                                                                                                                             |             |         |             |
+| <a href="no-nested-styles/usage">no-nested-styles</a>                                               | Disallows use of nested styles in `css` functions.                                                                                                                                                                                                                                                                  | Yes         |         |             |
+| <a href="no-physical-properties/usage">no-physical-properties</a>                                   | Disallow physical properties and values in `css` function calls.                                                                                                                                                                                                                                                    |             | Yes     |             |
+| <a href="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     |             |
+| <a href="no-unsafe-design-token-usage/usage">no-unsafe-design-token-usage</a>                       | Enforces design token usage is statically and locally analyzable.                                                                                                                                                                                                                                                   | Yes         | Yes     |             |
+| <a href="no-unsafe-style-overrides/usage">no-unsafe-style-overrides</a>                             | Discourage usage of unsafe style overrides used against the Atlassian Design System.                                                                                                                                                                                                                                | Yes         |         |             |
+| <a href="no-unsupported-drag-and-drop-libraries/usage">no-unsupported-drag-and-drop-libraries</a>   | Disallow importing unsupported drag and drop modules.                                                                                                                                                                                                                                                               | Yes         |         |             |
+| <a href="prefer-primitives/usage">prefer-primitives</a>                                             | Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability. To enforce usage please refer to the `use-primitives` rule.                                                                                                                                    |             |         |             |
+| <a href="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         |
+| <a href="use-drawer-label/usage">use-drawer-label</a>                                               | Encourages to provide accessible name for Atlassian Design System Drawer component.                                                                                                                                                                                                                                 | Yes         |         | Yes         |
+| <a href="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     |             |
+| <a href="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         |
+| <a href="use-primitives/usage">use-primitives</a>                                                   | Encourage the usage of primitives components.                                                                                                                                                                                                                                                                       |             | Yes     | Yes         |
+| <a href="use-visually-hidden/usage">use-visually-hidden</a>                                         | Enforce usage of the visually hidden component.                                                                                                                                                                                                                                                                     | Yes         | Yes     |             |
 <!-- END_RULE_TABLE_CODEGEN -->
-<!-- START_RULE_CONTENT_CODEGEN -->
-<!-- @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen -->
-## consistent-css-prop-usage
-> Ensures consistency with CSS prop usage.
-<h3>Rationale</h3>
-Every product should be defining styles in the same way, using the same tools, enforced by the same linting rules, which we can then all evolve and scale together.
-<h3>How the rule works</h3>
-This rule checks for the following cases:
-- When styles are defined inline.
-- When styles are not using `css` object api.
-- When styles are coming from outside of the module i.e. using imports.
-- When styles are spread inside another styles and not using array composition.
-All the above can also work for custom `css` functions, such as `xcss` (https://atlassian.design/components/primitives/xcss/).
-This rule has options - see below.
-<h3>Examples</h3>
-👎 Example of **incorrect** code for this rule:
-**Calling a css/xcss function or direct objects inside the JSX attribute.**
-```js
-function Button({ children }) {
-  return <div css={css({...})}>{children}</div>;
-                   ^^^^^^^ css function call used inline (performance issue)
-}
-```
-**Inserting a non css-function based object identifier into a css JSX attribute.**
-```js
-const container = {
-      ^^^^^^^^^ should be a css function call
-  zIndex: 10,
-};
-function Button({ children }) {
-  return <button css={container}>{children}</button>;
-}
-```
-**Importing styles from another file.**
-```js
-import { container } from './styles';
-         ^^^^^^^^^ styles should be local, not shared
-function Button({ children }) {
-  return <button css={container}>{children}</button>;
-}
-```
-**Nesting styles with objects instead of arrays.**
-```js
-const baseContainerStyles = css({
-  zIndex: 5,
-});
-const containerStyles = css({
-  ...baseContainerStyles,
-  ^^^^^^^^^^^^^^^^^^^^^^ compose styles by providing an array to the css call instead (see example below)
-  zIndex: 7,
-});
-function Button({ children }) {
-  return <button css={containerStyles}>{children}</button>;
-}
-```
-👍 Example of **correct** code for this rule:
-**Using the css() function to create a style object that follows the naming convention (ends in Styles) and passing it as a variable into the css={...} JSX attribute.**
-With the following options turned on:
-- cssFunctions = ['css']
-- stylesPlacement = 'top'
-```js
-const containerStyles = css({
-  zIndex: 1,
-});
-function Button({ children }) {
-  return <button css={containerStyles}>{children}</button>;
-}
-```
-**Technically correct usage of the cssMap function.**
-With the following options turned on:
-- cssFunctions = ['css']
-- stylesPlacement = 'top'
-```js
-const borderStyles = cssMap({
-  'solid': '1px solid';
-  'none': '0px';
-})
-function Button({ children }) {
-  return <button css={borderStyles[solid]}>{children}</button>;
-}
-```
-**Create composite styles with arrays, not objects.**
-With the following options turned on:
-- cssFunctions = ['css']
-- stylesPlacement = 'bottom'
-```js
-function Button({ children }) {
-  return (
-    <button css={[baseContainerStyles, containerStyles]}>{children}</button>
-  );
-}
-const baseContainerStyles = css({
-  zIndex: 5,
-});
-const containerStyles = css({
-  zIndex: 7,
-});
-```
-**Ternaries can be used inline**
-```js
-const baseStyles = css({ color: token('color.text.primary') });
-const disabledStyles = css({ color: token('color.text.disabled') });
-<div css={props.disabled ? disabledStyles : baseStyles}></div>;
-```
-<h3>Options</h3>
-This rule comes with options to support different repository configurations.
-#### cssFunctions
-An array of function names the linting rule should target. Defaults to `['css', 'xcss']`. Functionality of cssMap will be linted regardless of the configuration of `cssFunctions` as it can be used with either attribute.
-#### stylesPlacement
-The rule prevents inline styles from being created. This option defines what the error message should say: "(...) styles at the top (...)" or "(...) styles at the bottom (...)".
-Defaults to `top`.
-## ensure-design-token-usage
-Using design tokens results in a harmonious experience for end users whilst providing theming and consistency.
-All experiences must use color tokens otherwise when switching between themes, unexpected incidents can occur where not all of the UI is themed.
-Space, typography, and shape tokens are strongly recommended to further align our experiences and make future changes easier.
-<h3>Examples</h3>
-Using anything other than design tokens such as hardcoded values or legacy theme colors will be considered violations.
-#### Incorrect
-```js
-import { e100 } from '@atlaskit/theme/elevation';
-import { B100 } from '@atlaskit/theme/colors';
-css({ color: 'red' });
-              ^^^
-css({ boxShadow: '0px 1px 1px #161A1D32' });
-                              ^^^^^^^^^
-css`${e100};`;
-      ^^^^
-css({ color: B100 });
-             ^^^^
-```
-#### Correct
-```js
-import { token } from '@atlaskit/tokens';
-css({ color: token('color.text.danger') });
-css({ boxShadow: token('elevation.shadow.card') });
-```
-#### Incorrect
-```js
-css({ padding: '16px' });
-                ^^^
-css({ margin: gridSize() });
-              ^^^^^^^^^^
-```
-#### Correct
-```js
-import { token } from '@atlaskit/tokens';
-css({ padding: token('space.100') });
-```
-<h3>Options</h3>
-This rule comes with options to aid in migrating to design tokens.
-#### domains
-An array specifiying which token domains to lint against (`color`, `spacing`, `typography`, `shape`). Defaults to [`'color'`] if not provided.
-#### applyImport
-When `true`, the rule when automatically add imports to the `@atlaskit/tokens` package where tokens are auto-fixed. Defaults to `true` if not provided.
-#### shouldEnforceFallbacks
-When `true` the rule will add in stub fallbacks when choosing a suggestion in your IDE. Defaults to `false` if not provided.
-#### exceptions
-An array specifying strings to ingore when linting.
-## ensure-design-token-usage/preview
-This rule is a clone of `ensure-design-token-usage` and is intended to allow you to set some domains to `warn` before they are set to `error` in the main rule.
-See `ensure-design-token-usage` for full usage documentation.
-## icon-label
-Icon labels are used to describe what the icon is so the visually impaired can be described what the UI element is.
-There are cases where icons should have labels as well as cases where they shouldn't be labelled.
-<h3>Examples</h3>
-This rule will find violations for when an icon label is or isn't needed when composed with other Design System components.
-#### Incorrect
-```js
-import ActivityIcon from '@atlaskit/icon/glyph/activity'
-<ActivityIcon>
-^^^^^^^^^^^^^^ missing `label` prop
-<Button iconLeft={<ActivityIcon label="">} />
-                                ^^^^^ label should be defined
-<ButtonItem iconBefore={<ActivityIcon label="">}>
-                                      ^^^^^ label should not be defined
-  My activity
-</ButtonItem>
-```
-#### Correct
-```js
-import ActivityIcon from '@atlaskit/icon/glyph/activity'
-<ActivityIcon label="Activity">
-<Button iconLeft={<ActivityIcon label="Activity">} />
-<ButtonItem iconBefore={<ActivityIcon label="">}>
-  My activity
-</ButtonItem>
-```
-## local-cx-xcss
-This rule ensures the `cx()` function is only used within the `xcss` prop. This aids tracking what styles are applied to a jsx element.
-The `cx` function is checked only if it is imported from `@compiled/react` or `@atlaskit/css`.
-Passing arguments to the `cx()` function is how you compose styles (combine more than one set of styles together) with XCSS. This is a workaround for the more conventional array syntax (e.g. [in Emotion](https://emotion.sh/docs/composition)) `<div xcss={[style1, style2]} />` not giving robust enough type checking.
-<h3>Examples</h3>
-#### Incorrect
-```js
-import { cx, cssMap } from '@compiled/react';
-const styles = cssMap({
-  text: { color: 'red' },
-  bg: { background: 'blue' },
-});
-const joinedStyles = cx(styles.text, styles.bg);
-<Button xcss={joinedStyles} />;
-```
-#### Correct
-```js
-import { cx, cssMap } from '@compiled/react';
-const styles = cssMap({
-  text: { color: 'red' },
-  bg: { background: 'blue' },
-});
-<Button xcss={cx(styles.text, styles.bg)} />;
-```
-## no-banned-imports
-Using private or experimental packages is dangerous as they are not supported across major versions meaning you will not be able to migrate easily causing friction for yourself and the Atlassian Design System team.
-<h3>Examples</h3>
-Anything that is considered private or experimental will be marked as violations.
-#### Incorrect
-```ts
-import noop from '@atlaskit/ds-lib/noop';
-                  ^^^^^^^^^^^^^^^^^^^^^
-import { Text } from '@atlaskit/ds-explorations';
-                      ^^^^^^^^^^^^^^^^^^^^^^^^^
-```
-## no-css-tagged-template-expression
-Disallows any `css` tagged template expressions that originate from `@emotion/react`, `@emotion/core`, `compiled/react` or `styled-components`.
-Tagged template expressions cannot be type safe and are difficult to parse correctly. Will auto fix ` css`` ` to the preferred `css({})` call expression syntax.
-Thank you to the [Compiled team for their rule](https://github.com/atlassian-labs/compiled/tree/master/packages/eslint-plugin/src/rules/no-css-tagged-template-expression) from which this was ported.
-<h3>Incorrect</h3>
-```js
-import { css } from '@emotion/react';
-css`
-  color: blue;
-`;
-const styles = css`
-  color: blue;
-  font-weight: 500;
-`;
-```
-<h3>Correct</h3>
-```js
-import { css } from '@emotion/react';
-css({ color: 'blue' });
-const styles = css({
-  color: 'blue',
-  fontWeight: 500,
-});
-```
-<h3>Limitations</h3>
-- Comments are not auto-fixable. You will need to manually convert usages containing functions.
-## no-deprecated-apis
-Props across the Atlassian Design System can be deprecated when they are deemed no-longer fit for purporse or dangerous and risk effective use at scale.
-<h3>Examples</h3>
-Anything that can be used as props from Atlassian Design System components can be violations when marked as deprecated.
-#### Incorrect
-```tsx
-<ButtonItem cssFn={cssFn()} />
-            ^^^^
-<Drawer overrides={overrides} />
-        ^^^^^^^^^
-```
-<h3>Options</h3>
-The rule can take one option: `deprecatedConfig`,
-if not provided the rule will use an internal config.
-If provided the rule will use the passed in config instead.
-#### deprecatedConfig
-The following fields can be defined in the config:
-- `deprecatedProp`, which is the deprecated props. Each prop has the following fields:
-  - `moduleSpecifier`, which is the module specifier of the package in which the prop was deprecated. For example: `@atlaskit/button`.
-  - `namedSpecifier` **(optional)**, which is an array of named specifiers of the package in which the prop was deprecated. For example: `Button`.
-  - `actionableVersion` **(optional)**, which is the version of the package in which the prop can be actioned on. For example: `1.0.0`.
-```json
-{
-  "cssFn": [
-    {
-      "moduleSpecifier": "@atlaskit/menu"
-    }
-  ]
-}
-```
-```js
-import { configs } from '@atlaskit/eslint-plugin-design-system';
-module.exports = {
-  rules: {
-    '@atlaskit/design-system/no-deprecated-api': [
-      'error',
-      {
-        deprecatedConfig: {
-          cssFn: [
-            {
-              moduleSpecifier: '@atlaskit/menu',
-            },
-          ],
-        },
-      },
-    ],
-  },
-};
-```
-The plugin also provides a `filterActionableDeprecations` util function that accepts the `deprecated APIs config` and your root `package.json` as params and will filter the default deprecated APIs config based on the package versions installed.
-```js
-import { configs, filterActionableDeprecations } from '@atlaskit/eslint-plugin-design-system';
-import packageJson from './package.json';
-rules: {
-  '@atlaskit/design-system/no-deprecated-api': ['error', {
-    'deprecatedConfig': filterActionableDeprecations(configs.deprecatedConfig, packageJson),
-  }]
-}
-```
-## no-deprecated-design-token-usage
-Using deprecated design tokens is dangerous as they will eventually be deleted after the sunset period.
-This rule helps you move to non-deprecated design tokens.
-<h3>Examples</h3>
-This rule will mark usage of deprecated design tokens as violations.
-<h3>Incorrect</h3>
-```js
-import { token } from '@atlaskit/tokens';
-css({ color: token('i.am.deprecated') });
-                    ^^^^^^^^^^^^^^^
-css({ color: token('i.am.a.token') });
-                    ^^^^^^^^^^^^^
-```
-<h3>Options</h3>
-It's recommended to set this rule to "warn" to allow for new and old tokens to exist side-by-side for the duration of the deprecation period and avoid big-bang migrations.
-Once the deprecation period is over for a design token it will be moved into `deleted` state at which point the counterpart of this rule `no-unsafe-design-token-usage` will mark violations as errors.
-Running `eslint --fix` will automatically apply replacement tokens if present.
-## no-deprecated-imports
-Packages across the Atlassian Design System can be deprecated when they are deemed no-longer fit for purporse or dangerous and risk effective use at scale.
-<h3>Examples</h3>
-This rule will mark usage of deprecated modules as violations.
-#### Incorrect
-```ts
-import Item from '@atlaskit/item';
-                  ^^^^^^^^^^^^^^
-import GlobalNav from '@atlaskit/global-navigation';
-                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-```
-<h3>Options</h3>
-The rule can take one option: `deprecatedConfig`,
-if not provided the rule will use an internal config.
-If provided the rule will use the passed in config instead.
-#### deprecatedConfig
-The following fields can be defined in the config:
-- `packagePath`, which is the name of the package. For example: `@atlaskit/navigation-next` and `@atlaskit/navigation`.
-  With the package path as the key, you can either provide the values as:
-  - `message` **(optional)**, the message to display when the deprecated packages path is used. For example: `multi-select is deprecated. Please use '@atlaskit/select' instead.`
-    Or as:
-  - `imports`, which is an array of named imports to be deprecated. Each named import has the following fields:
-    - `importName`, which is the name of the import to be deprecated. For example: `assistive` and `visuallyHidden`.
-    - `message` **(optional)**, which is the message to display when the deprecated import is used. For example: `The assistive mixin is deprecated. Please use `@atlaskit/visually-hidden` instead.`.
-```json
-{
-  "@atlaskit/navigation-next": {
-    "message": "navigation-next is deprecated. Please use '@atlaskit/atlassian-navigation' instead."
-  }
-}
-```
-```js
-import packageJson from './package.json';
-module.exports = {
-  rules: {
-    '@atlaskit/design-system/no-deprecated-imports': [
-      'error',
-      {
-        deprecatedConfig: {
-          '@atlaskit/navigation-next': {
-            message:
-              "navigation-next is deprecated. Please use '@atlaskit/atlassian-navigation' instead.",
-          },
-        },
-      },
-    ],
-  },
-};
-```
-## no-empty-styled-expression
-Disallows/discourages passing empty arguments to any `styled` expression when using `@compiled/react`, as well as any other CSS-in-JS library defined through the `importSources` option.
-If Compiled is used in the file, passing an empty object or no object at all causes Compiled to build extra `div/span` elements, as opposed to simply using a `div`. This leads to reduced performance and is greatly discouraged. If a wrapper is necessary, opt to use a `div` or wrap it in the empty React fragment `<> <YourComponentHere></YourComponentHere> </>`.
-<h3>Examples</h3>
-#### Incorrect
-```tsx
-const EmptyStyledExpression = styled.div();
-const EmptyStyledExpressionArgument = styled.div({});
-const EmptyStyledExpressionArgument = styled.div([]);
-```
-#### Correct
-```tsx
-const Wrapper = styled.div({
-  backgroundColor: 'red',
-  MyComponent: {
-    backgroundColor: 'green',
-  },
-});
-```
-<h3>What to do instead?</h3>
-#### Use elements directly
-```diff
-- const Wrapper = styled.div({});
-   function App() {
--    return <Wrapper>hello world</Wrapper>;
-+    return <div>hello world</div>;
-  }
-```
-#### Use a React fragment
-```diff
-- const Wrapper = styled.div({});
-   function App() {
--    return <Wrapper>hello world</Wrapper>;
-+    return <>hello world</>;
-  }
-```
-<h3>Options</h3>
-#### importSources
-By default, this rule will check `styled` usages from `@compiled/react`. To check `styled` usages from other CSS-in-JS libraries, you can add the library's package name to `importSources`.
-`importSources` accepts an array of package names (strings). `styled` usages from `@compiled/react` will always be checked, regardless of the value of `importSources`.
-```tsx
-// [{ importSources: ['styled-components'] }]
-import styled from 'styled-components';
-// Invalid!
-const styles = styled({});
-```
-## no-exported-css
-Disallows `css` export declarations that originate from `@compiled/react` and `@atlaskit/css`, as well as any other CSS-in-JS library defined through the `importSources` option.
-In Compiled, exporting css declarations may result in unexpected errors when imported, because its value will be `null` at runtime. Additionally, co-locating css definitions with their usage is considered best practice in order to improve code readability and build performance.
-<h3>Examples</h3>
-#### Incorrect
-```tsx
-import { css } from '@compiled/react';
-export const styles = css({});
-export default css({});
-```
-#### Correct
-```tsx
-import { css } from '@compiled/react';
-const styles = css({});
-```
-<h3>Options</h3>
-#### importSources
-By default, this rule will check `css` usages from `@compiled/react` and `@atlaskit/css`. To check `css` usages from other CSS-in-JS libraries, you can add the library's package name to `importSources`.
-`importSources` accepts an array of package names (strings). `css` usages from `@compiled/react` and `@atlaskit/css` will always be checked, regardless of the value of `importSources`.
-```tsx
-// [{ importSources: ['@emotion/css'] }]
-import { css } from '@emotion/css';
-// Invalid!
-export const styles = css({});
-```
-## no-exported-keyframes
-Disallows `keyframes` export declarations that originate from `@compiled/react`, as well as any other CSS-in-JS library defined through the `importSources` option.
-In Compiled, exporting keyframes declarations may result in unexpected errors when imported, because its value will be `null` at runtime. Additionally, co-locating keyframes definitions with their usage is considered best practice in order to improve code readability and build performance.
-<h3>Examples</h3>
-<!-- To fill out -- tell us when this rule will mark violations. -->
-#### Incorrect
-```tsx
-import { keyframes } from '@compiled/react';
-export const animation = keyframes({});
-export default keyframes({});
-```
-#### Correct
-```tsx
-import { keyframes } from '@compiled/react';
-const animation = keyframes({});
-```
-<h3>Options</h3>
-#### importSources
-By default, this rule will check `keyframes` usages from `@compiled/react`. To check `keyframes` usages from other CSS-in-JS libraries, you can add the library's package name to `importSources`.
-`importSources` accepts an array of package names (strings). `keyframes` usages from `@compiled/react` will always be checked, regardless of the value of `importSources`.
-```tsx
-// [{ importSources: ['@emotion/css'] }]
-import { keyframes } from '@emotion/css';
-// Invalid!
-export const styles = keyframes({});
-```
-## no-invalid-css-map
-Ensure that all usages of the `cssMap` API are valid, and enforces the format of the object that is passed to `cssMap`.
-Please refer to the [Compiled documentation](https://compiledcssinjs.com/docs/api-cssmap) for more details and some examples.
-Note that this version of the `no-invalid-css-map` rule differs from `@compiled/eslint-plugin/no-invalid-css-map` in that this will apply to both `@compiled/react` and `@atlaskit/css`.
-This is intended to be used in conjunction with type checking (through TypeScript).
-<h3>Examples</h3>
-#### Incorrect
-```tsx
-import React from 'react';
-import { cssMap } from '@compiled/react';
-// cssMap needs to be declared in the top-most scope.
-// (not within a function, class, etc.)
-const Foo = () => {
-  const bar = cssMap({
-    danger: {
-      color: 'red',
-    },
-  });
-};
-```
-```tsx
-import React from 'react';
-import { cssMap } from '@compiled/react';
-import { importedVariable, importedFunction } from 'another-package';
-// Cannot use imported functions as values in cssMap.
-const myVariable = importedFunction();
-const styles = cssMap({
-  danger: {
-    // Both invalid because they rely on an imported function.
-    color: myVariable,
-    padding: importedFunction(),
-  },
-});
-```
-```tsx
-import React from 'react';
-import { cssMap } from '@compiled/react';
-// Cannot export usages of cssMap.
-// Any usages of cssMap must be in the same file.
-export const foo = cssMap({
-  danger: {
-    color: 'red',
-  },
-});
-```
-```tsx
-import React from 'react';
-import { cssMap } from '@compiled/react';
-import { token } from '@atlaskit/tokens';
-// Functions and object methods are not allowed as
-// values in cssMap.
-const styles = cssMap({
-  // Object method
-  get danger() {
-    return { color: '#123456' };
-  },
-});
-const styles2 = cssMap({
-  // Arrow function
-  danger: () => {
-    color: '#123456';
-  },
-});
-function customFunction(...args) {
-  return arguments.join('');
-}
-const styles3 = cssMap({
-  danger: {
-    // Locally defined function
-    color: customFunction('red', 'blue'),
-    backgroundColor: 'red',
-  },
-});
-```
-```tsx
-import React from 'react';
-import { cssMap } from '@compiled/react';
-// Spread elements ("...") cannot be used in cssMap.
-const base = {
-  success: {
-    color: 'green',
-  },
-};
-const bar = cssMap({
-  ...base,
-  danger: {
-    color: 'red',
-  },
-});
-```
-#### Correct
-```tsx
-import React from 'react';
-import { cssMap } from '@compiled/react';
-// Literals (strings, numbers, etc.) are used as values
-// in cssMap.
-const styles = cssMap({
-  danger: {
-    color: 'red',
-    backgroundColor: 'red',
-  },
-  success: {
-    color: 'green',
-    backgroundColor: 'green',
-  },
-});
-```
-```tsx
-import React from 'react';
-import { cssMap } from '@compiled/react';
-// A statically evaluable variable (known at build time)
-// is used here.
-const bap = 'blue';
-const styles = cssMap({
-  danger: {
-    color: bap,
-  },
-});
-```
-#### Options
-##### `allowedFunctionCalls`: [string, string][]
-Normally, this ESLint rule forbids all function calls from being used inside the `cssMap(...)` function call. For example, this would be invalid using default settings:
-```tsx
-import React from 'react';
-import { cssMap } from '@compiled/react';
-import { token } from '@atlaskit/tokens';
-const styles = cssMap({
-  danger: {
-    color: token('my-color'),
-    backgroundColor: 'red',
-  },
-  success: {
-    color: 'green',
-  },
-});
-```
-If you would like to whitelist certain functions (e.g. `token` from `@atlaskit/tokens`), you can include the names of the functions as part of the `allowedFunctionCalls` argument. Each function should be represented as a two-element array, with the first element being the package the function is from, and the second element being the name of the function.
-For example, with the below configuration, the above code example would be okay.
-```tsx
-// .eslintrc.js
-// ...
-      rules: {
-        '@atlaskit/eslint-plugin-design-system/no-invalid-css-map': [
-          'error',
-          {
-            allowedFunctionCalls: [
-              ['@atlaskit/tokens', 'token'],
-            ]
-          },
-        ],
-        // ...
-      },
-// ...
-```
-Please note that this ESLint rule only supports whitelisting imports in the form `import { myFunctionOrVariable } from 'my-package'`; we do not currently support whitelisting default imports, so `import myFunctionOrVariable from 'my-package'` would always be invalid when used in `cssMap`.
-## no-margin
-Using margins to define spacing results in components that can't be readily reused in other contexts breaking the composition model.
-Instead defining spacing in parents with flex and grid using the `gap` property will result in more resilient experiences.
-<h3>Examples</h3>
-This rule will mark all margin use as violations.
-#### Incorrect
-```tsx
-css({ margin: '10px' });
-```
-#### Correct
-```tsx
-css({ gap: token('spacing.100') });
-```
-## no-nested-styles
-Disallows using nested styles. Nested styles can change unexpectedly when child markup changes and result in duplicates when extracting to CSS.
-<h3>Examples</h3>
-This rule checks for nested styles inside `css` objects.
-This rule has no options.
-#### Incorrect
-```js
-css({
-  div: {
-    color: 'red',
-  },
-});
-```
-```js
-css({
-  '@media (min-width: 480px)': {
-    color: 'red',
-  },
-});
-```
-#### Correct
-```js
-css({
-  color: 'red',
-  ':hover': {
-    color: 'black',
-  },
-});
-```
-```js
-import { media } from '@atlaskit/primitives';
-css({
-  [media.above.xs]: {
-    color: 'red',
-  },
-});
-```
-## no-physical-properties
-Disallows using physical properties. Physical properties
-prevent correct support for different reading modes and languages and
-should be avoided. Rule will autofix applicable physical properties
-to instead use [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values).
-<h3>Examples</h3>
-This rule checks for physical property usage inside of `css` function calls.
-#### Incorrect
-```js
-css({
-  left: 0,
-  right: 0,
-  top: 0,
-  bottom: 0,
-});
-```
-```js
-css({
-  marginLeft: 0,
-});
-```
-```js
-css({
-  textAlign: 'left',
-});
-```
-#### Correct
-```js
-css({
-  inset: 0,
-});
-```
-```js
-css({
-  marginInlineStart: 0,
-});
-```
-```js
-css({
-  textAlign: 'start',
-});
-```
-## no-unsafe-design-token-usage
-Using design tokens in an unsafe way risks the health of the system and will effect how fast your codebase can migrate between versions.
-<h3>Examples</h3>
-This rule will mark design token usage that is not statically and locally analyzable,
-as well as design tokens that are considered deleted.
-<h3>Incorrect</h3>
-```js
-const textColor = 'red';
-css({ color: textColor });
-             ^^^^^^^^^ must be a string literal
-```
-```js
-css({ boxShadow: '0px 1px 1px var(--ds-accent-subtleBlue)' });
-                              ^^^^^^^^^^^^^^^^^^^^^^^^^^ must use the token() function
-```
-<h3>Correct</h3>
-```js
-import { token } from '@atlaskit/tokens';
-css({ boxShadow: token('elevation.shadow.card') });
-css`
-  color: ${(token('color.text.highemphasis'), N20)};
-`;
-```
-<h3>Options</h3>
-This rule comes with options to aid in migrating to design tokens.
-#### fallbackUsage
-- `forced`: Fallback values must always be provided
-- `none`: Fallback values must never be provided. (Fixer will remove is provided)
-- `optional`: Fallbacks are optional
-#### shouldEnforceFallbacks (deprecated)
-When `true` the rule will mark token function usage as violations when fallbacks aren't defined.
-When `false` the rule will mark token function usage as violations when fallbacks are defined.
-## no-unsafe-style-overrides
-Unsafe style overrides cause friction and incidents when internals of the component you're overriding change. They're inherently unbounded and everything is API that can change at a moments notice.
-Instead, lean on composition, primitive components, and safe style overrides via the `xcss` prop where component authors declare what styles they want to support.
-<h3>Examples</h3>
-#### Incorrect
-```tsx
-import Button from '@atlaskit/button';
-<Button css={{ fontWeight: 500 }}>foo</Button>;
-        ^^^
-```
-```tsx
-import { LinkItem } from '@atlaskit/menu';
-<LinkItem cssFn={() => ({ '> div > div': { padding: 2 } })} />;
-          ^^^^^
-```
-```tsx
-import { ButtonItem } from '@atlaskit/side-navigation';
-<ButtonItem className="text-neutral-400" />;
-            ^^^^^^^^^
-```
-#### Correct
-```tsx
-<Button>
-  <strong>foo</strong>
-</Button>
-```
-```tsx
-const styles = css({ padding: 'var(--ds-space-100)' });
-<Box as="a" xcss={styles}>
-  <Stack>
-    <Inline />
-    <Inline />
-  </Stack>
-</Box>;
-```
-## no-unsupported-drag-and-drop-libraries
-We encourage the use of Pragmatic drag and drop to power all drag and drop experiences - from table to external files. Pragmatic drag and drop is a performance optimised drag and drop framework that has been designed to power any drag and drop experience on any tech stack. Please avoid using alternative drag and drop libraries as it will lead to poorer performance, increased maintenance costs, (likely) worse accessibility and fragmented user experiences. See https://staging.atlassian.design/components/pragmatic-drag-and-drop/
-<h3>Examples</h3>
-Libraries such as `react-beautiful-dnd` and `@atlassian/jira-dnd` that are no longer supported, as well as external libraries such as `react-dnd` and `react-sortable-hoc`.
-#### Incorrect
-```ts
-import { DraggableLocation } from 'react-beautiful-dnd';
-                                   ^^^^^^^^^^^^^^^^^^^
-import { useDrag } from 'react-dnd'
-                         ^^^^^^^^^
-```
-## prefer-primitives
-Using primitives allows you to delete bespoke component code and replace it with ready made solutions made by the Atlassian Design System Team.
-<h3>Examples</h3>
-This rule marks code as violations when it may be able to be replaced with a primitive component.
-#### Incorrect
-```js
-<div />
-^^^^^^^
-<Component>
-  <div css={someStyles}></div>
-  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-</Component>
-```
-#### Correct
-```js
-<Box />
-```
-```js
-<Component>
-  <Box xcss={someStyles}></Box>
-</Component>
-```
-## use-button-group-label
-ButtonGroup should have an accessible name or a reference to it, so that upon opening, users of assistive technologies could have contextual information of interaction with current element.
-<h3>Examples</h3>
-This rule will indicate user with warning to strongly recommend usage of either `label` or `titleId` prop.
-#### Incorrect
-```tsx
-<ButtonGroup>
- ^^^^^^^^^^^ Missing either `label` or `titleId` prop.
-  <Button>Save</Button>
-  <Button>Edit</Button>
-  <Button>Delete</Button>
-</ButtonGroup>
-<ButtonGroup label="">
-             ^^^^^ `label` prop is missing accessible name value.
-  <Button>Save</Button>
-  <Button>Edit</Button>
-  <Button>Delete</Button>
-</ButtonGroup>
-<h2 id="button-group-title">ButtonGroup content title</hi>
-<ButtonGroup titleId="">
-             ^^^^^^^ `titleId` prop is missing reference value.
-  <Button>Save</Button>
-  <Button>Edit</Button>
-  <Button>Delete</Button>
-</ButtonGroup>
-<h2 id="button-group-title">ButtonGroup content title</h2>
-<ButtonGroup titleId="button-group-title" label="">
-             ^^^^^^^                      ^^^^^ 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.
-  <Button>Save</Button>
-  <Button>Edit</Button>
-  <Button>Delete</Button>
-</ButtonGroup>
-```
-#### Correct
-```tsx
-<ButtonGroup label="ButtonGroup content title">
-  <Button>Save</Button>
-  <Button>Edit</Button>
-  <Button>Delete</Button>
-</ButtonGroup>
-<h2 id="button-group-title">ButtonGroup content title</h2>
-<ButtonGroup titleId="button-group-title">
-  <Button>Save</Button>
-  <Button>Edit</Button>
-  <Button>Delete</Button>
-</ButtonGroup>
-```
-## use-drawer-label
-Drawer should have an accessible name or a reference to it, so that upon opening, users of assistive technologies could have contextual information of interaction with current element.
-<h3>Examples</h3>
-This rule will indicate user with warning to strongly recommend usage of either `label` or `titleId` prop.
-#### Incorrect
-```tsx
-<Drawer>
- ^^^^^^ Missing either `label` or `titleId` prop.
-  Drawer content
-</Drawer>
-<Drawer label>
-        ^^^^^ `label` prop is missing value.
-  Drawer content
-</Drawer>
-<Drawer label="">
-        ^^^^^ `label` prop is missing accessible name value.
-  Drawer content
-</Drawer>
-<Drawer titleId>
-        ^^^^^^^ `titleId` prop is missing reference value.
-  <h1 id="drawer-title">Drawer content title</hi>
-</Drawer>
-<Drawer titleId="">
-        ^^^^^^^ `titleId` prop is missing reference value.
-  <h1 id="drawer-title">Drawer content title</hi>
-</Drawer>
-<Drawer titleId="drawer-title" label="">
-        ^^^^^^^                ^^^^^ 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.
-  <h1 id="drawer-title">Drawer content title</hi>
-</Drawer>
-```
-#### Correct
-```tsx
-<Drawer label="Drawer content title">
-  Drawer content
-</Drawer>
-<Drawer titleId="drawer-title">
-  <h1 id="drawer-title">Drawer content title</hi>
-</Drawer>
-```
-## use-heading-level-in-spotlight-card
-The `SpotlightCard` component in `@atlaskit/onboarding` will be requiring the `headingLevel` prop in future releases.
-<h3>Examples</h3>
-#### Incorrect
-```tsx
-<SpotlightCard heading="Heading">Spotlight card contents</SpotlightCard>
- ^^^^^^^^^^^^^
-```
-#### Correct
-```tsx
-<SpotlightCard heading="Heading" headingLevel={2}>
-  Spotlight card contents
-</SpotlightCard>
-```
-## use-href-in-link-item
-The `LinkItem` component in `@atlaskit/menu` will be requiring the `href` prop in future releases. If no valid `href` prop is required, consider using the `ButtonItem` component.
-<h3>Examples</h3>
-#### Incorrect
-```tsx
-<LinkItem>Button</LinkItem>
- ^^^^^^^^
-```
-#### Correct
-```tsx
-<LinkItem href="http://example.com">Link</LinkItem>
-```
-## use-primitives
-Using primitives allows you to delete bespoke component code and replace it with ready made solutions made by the Atlassian Design System Team.
-<h3>Examples</h3>
-This rule marks code as violations when it can be replaced 1:1 with a primitive component.
-#### Incorrect
-```jsx
-const someStyles = css({
-  padding: '8px';
-})
-<div css={someStyles}>
-^^^^^^^^^^^^^^^^^^^^^^
-  // ...
-</div>
-```
-#### Correct
-```jsx
-const someStyles = xcss({
-  padding: 'space.100';
-})
-<Box xcss={someStyles}>
-  // ...
-</Box>
-```
-Currently, the rule is extremely defensive, only reporting on `css` styles that contain:
-- one, and only one, style property from this list:
-  - padding
-  - paddingBlock
-  - paddingBlockEnd
-  - paddingBlockStart
-  - paddingBottom
-  - paddingInline
-  - paddingInlineEnd
-  - paddingInlineStart
-  - paddingLeft
-  - paddingRight
-  - paddingTop
-  - margin
-  - marginBlock
-  - marginBlockEnd
-  - marginBlockStart
-  - marginBottom
-  - marginInline
-  - marginInlineEnd
-  - marginInlineStart
-  - marginLeft
-  - marginRight
-  - marginTop
-- and where the style value is one of:
-  - 0px
-  - 2px
-  - 4px
-  - 6px
-  - 8px
-  - 12px
-  - 16px
-  - 20px
-  - 24px
-  - 32px
-  - 40px
-  - 48px
-  - 64px
-  - 80px
-If these conditions are not met, then no violation will be reported.
-## use-visually-hidden
-Using the visually hidden component allows you to delete bespoke or legacy theme code and replace it with a ready made solution by the Atlassian Design System Team.
-<h3>Examples</h3>
-This rule marks code as violations when it can be replaced 1:1 with the visually hidden component.
-#### Incorrect
-```js
-import { css } from '@emotion/core';
-import { visuallyHidden } from '@atlaskit/theme/constants';
-const visuallyHiddenStyles = css({
-  width: '1px',
-  height: '1px',
-  padding: '0',
-  position: 'absolute',
-  border: '0',
-  clip: 'rect(1px, 1px, 1px, 1px)',
-  overflow: 'hidden',
-  whiteSpace: 'nowrap',
-});
-const VisuallyHidden = styled.span`${visuallyHidden()}`;
-                                     ^^^^^^^^^^^^^^
-```
-#### Correct
-```js
-import VisuallyHidden from '@atlaskit/visually-hidden';
-```
-<!-- END_RULE_CONTENT_CODEGEN -->