@atlaskit/eslint-plugin-design-system 10.5.0 → 10.6.1

package/dist/es2019/rules/use-latest-xcss-syntax/transformers/style-property/index.js

@@ -32,7 +32,16 @@ export const StyleProperty = {
         ref: undefined
       };
     }
-    const importDeclarations = ast.Root.findImportsByModule(context.sourceCode.ast.body, '@atlaskit/primitives');
+    const importDeclarations = ast.Root.findImportsByModule(
+    /**
+     * `context.getSourceCode()` is deprecated in favour of `context.sourceCode`.
+     * However, `context.sourceCode` returns undefined for some usages. This may be a bug
+     * in the `eslint` package. So, use `getSourceCode()` instead.
+     *
+     * Note: `context.sourceCode` works in testing environments. So, it is hard to validate whether it
+     * will work in the wild. Even if the tests pass, don't assume it will work in production.
+     */
+    context.getSourceCode().ast.body, '@atlaskit/primitives');
     const isXcssImported = importDeclarations.some(importDeclaration => {
       return ast.Import.containsNamedSpecifier(importDeclaration, 'xcss');
     });

package/dist/es2019/rules/use-menu-section-title/index.js

@@ -0,0 +1,79 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+const elementsAccessibleNameProps = ['title', 'titleId'];
+const rule = createLintRule({
+  meta: {
+    name: 'use-menu-section-title',
+    type: 'suggestion',
+    docs: {
+      description: 'Encourages makers to provide accessible title for Atlassian Design System Menu Section component.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      missingTitleProp: 'Missing accessible title. If there is no visible content to associate use `title` prop, otherwise pass id of element to `titleId` prop to be associated as label.',
+      titlePropShouldHaveContents: 'Define the string that labels the interactive element.',
+      titleIdShouldHaveValue: '`titleId` should reference the id of the element that defines the accessible name.',
+      noBothPropsUsage: 'Do not include both `titleId` and `title` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `title` to provide accessible name explicitly.'
+    },
+    hasSuggestions: true
+  },
+  create(context) {
+    const contextLocalIdentifier = [];
+    return {
+      ImportDeclaration(node) {
+        var _node$specifiers;
+        const menuSectionIdentifier = (_node$specifiers = node.specifiers) === null || _node$specifiers === void 0 ? void 0 : _node$specifiers.filter(spec => {
+          if (node.source.value === '@atlaskit/menu') {
+            var _spec$imported;
+            return spec.type === 'ImportSpecifier' && ((_spec$imported = spec.imported) === null || _spec$imported === void 0 ? void 0 : _spec$imported.name) === 'Section';
+          } else if (node.source.value === '@atlaskit/menu/section') {
+            return spec.type === 'ImportDefaultSpecifier';
+          }
+        });
+        if (menuSectionIdentifier !== null && menuSectionIdentifier !== void 0 && menuSectionIdentifier.length) {
+          const {
+            local
+          } = menuSectionIdentifier[0];
+          contextLocalIdentifier.push(local.name);
+        }
+      },
+      JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        const name = node.openingElement.name.name;
+        if (contextLocalIdentifier.includes(name)) {
+          const componentLabelProps = node.openingElement.attributes.filter(attr => isNodeOfType(attr, 'JSXAttribute') && isNodeOfType(attr.name, 'JSXIdentifier') && elementsAccessibleNameProps.includes(attr.name.name));
+          if (componentLabelProps.length === 1) {
+            const prop = componentLabelProps[0];
+            if ('value' in prop && prop.value) {
+              if (isNodeOfType(prop.value, 'Literal') && !prop.value.value || isNodeOfType(prop.value, 'JSXExpressionContainer') && !prop.value.expression) {
+                context.report({
+                  node: prop,
+                  messageId: prop.name.name === 'title' ? 'titlePropShouldHaveContents' : 'titleIdShouldHaveValue'
+                });
+              }
+            }
+          } else if (componentLabelProps.length > 1) {
+            context.report({
+              node: node.openingElement,
+              messageId: 'noBothPropsUsage'
+            });
+          } else {
+            context.report({
+              node: node.openingElement,
+              messageId: 'missingTitleProp'
+            });
+          }
+        }
+      }
+    };
+  }
+});
+export default rule;

package/dist/esm/common/token-maps.partial.js

@@ -3,7 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::30c84f908843af1f250860b6f3deeea0>>
+ * @codegen <<SignedSource::a9fbd091c8b53fd9515afc7cdd793c6b>>
  * @codegenId spacing
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen-token-maps
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::55622b91aca9b3afac4bce440f222b71>>

package/dist/esm/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::45da5525f92249d3a5b5049a95fc2fc5>>
+ * @codegen <<SignedSource::837556032f39113ae86785a120bb9ccb>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -38,6 +38,7 @@ export default {
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
     '@atlaskit/design-system/use-latest-xcss-syntax': 'error',
+    '@atlaskit/design-system/use-menu-section-title': 'warn',
     '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-primitives-text': 'warn',

package/dist/esm/presets/recommended.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::f5a2e39689cb7db642a65999cdc6f03a>>
+ * @codegen <<SignedSource::b7ed527a03208f0bc68f9d34e4ef2260>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -28,6 +28,7 @@ export default {
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
     '@atlaskit/design-system/use-latest-xcss-syntax': 'error',
+    '@atlaskit/design-system/use-menu-section-title': 'warn',
     '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }

package/dist/esm/rules/index.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::37cb0f5dfe6f5b8391203fdb1cf7cabe>>
+ * @codegen <<SignedSource::287628b11d396c2bcbcf6f4a175a3d3a>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -35,6 +35,7 @@ import useHeading from './use-heading';
 import useHeadingLevelInSpotlightCard from './use-heading-level-in-spotlight-card';
 import useHrefInLinkItem from './use-href-in-link-item';
 import useLatestXcssSyntax from './use-latest-xcss-syntax';
+import useMenuSectionTitle from './use-menu-section-title';
 import usePopupLabel from './use-popup-label';
 import usePrimitives from './use-primitives';
 import usePrimitivesText from './use-primitives-text';
@@ -74,6 +75,7 @@ export default {
   'use-heading-level-in-spotlight-card': useHeadingLevelInSpotlightCard,
   'use-href-in-link-item': useHrefInLinkItem,
   'use-latest-xcss-syntax': useLatestXcssSyntax,
+  'use-menu-section-title': useMenuSectionTitle,
   'use-popup-label': usePopupLabel,
   'use-primitives': usePrimitives,
   'use-primitives-text': usePrimitivesText,

package/dist/esm/rules/use-latest-xcss-syntax/transformers/style-property/index.js

@@ -29,7 +29,16 @@ export var StyleProperty = {
         ref: undefined
       };
     }
-    var importDeclarations = ast.Root.findImportsByModule(context.sourceCode.ast.body, '@atlaskit/primitives');
+    var importDeclarations = ast.Root.findImportsByModule(
+    /**
+     * `context.getSourceCode()` is deprecated in favour of `context.sourceCode`.
+     * However, `context.sourceCode` returns undefined for some usages. This may be a bug
+     * in the `eslint` package. So, use `getSourceCode()` instead.
+     *
+     * Note: `context.sourceCode` works in testing environments. So, it is hard to validate whether it
+     * will work in the wild. Even if the tests pass, don't assume it will work in production.
+     */
+    context.getSourceCode().ast.body, '@atlaskit/primitives');
     var isXcssImported = importDeclarations.some(function (importDeclaration) {
       return ast.Import.containsNamedSpecifier(importDeclaration, 'xcss');
     });

package/dist/esm/rules/use-menu-section-title/index.js

@@ -0,0 +1,79 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+var elementsAccessibleNameProps = ['title', 'titleId'];
+var rule = createLintRule({
+  meta: {
+    name: 'use-menu-section-title',
+    type: 'suggestion',
+    docs: {
+      description: 'Encourages makers to provide accessible title for Atlassian Design System Menu Section component.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      missingTitleProp: 'Missing accessible title. If there is no visible content to associate use `title` prop, otherwise pass id of element to `titleId` prop to be associated as label.',
+      titlePropShouldHaveContents: 'Define the string that labels the interactive element.',
+      titleIdShouldHaveValue: '`titleId` should reference the id of the element that defines the accessible name.',
+      noBothPropsUsage: 'Do not include both `titleId` and `title` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `title` to provide accessible name explicitly.'
+    },
+    hasSuggestions: true
+  },
+  create: function create(context) {
+    var contextLocalIdentifier = [];
+    return {
+      ImportDeclaration: function ImportDeclaration(node) {
+        var _node$specifiers;
+        var menuSectionIdentifier = (_node$specifiers = node.specifiers) === null || _node$specifiers === void 0 ? void 0 : _node$specifiers.filter(function (spec) {
+          if (node.source.value === '@atlaskit/menu') {
+            var _spec$imported;
+            return spec.type === 'ImportSpecifier' && ((_spec$imported = spec.imported) === null || _spec$imported === void 0 ? void 0 : _spec$imported.name) === 'Section';
+          } else if (node.source.value === '@atlaskit/menu/section') {
+            return spec.type === 'ImportDefaultSpecifier';
+          }
+        });
+        if (menuSectionIdentifier !== null && menuSectionIdentifier !== void 0 && menuSectionIdentifier.length) {
+          var local = menuSectionIdentifier[0].local;
+          contextLocalIdentifier.push(local.name);
+        }
+      },
+      JSXElement: function JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        var name = node.openingElement.name.name;
+        if (contextLocalIdentifier.includes(name)) {
+          var componentLabelProps = node.openingElement.attributes.filter(function (attr) {
+            return isNodeOfType(attr, 'JSXAttribute') && isNodeOfType(attr.name, 'JSXIdentifier') && elementsAccessibleNameProps.includes(attr.name.name);
+          });
+          if (componentLabelProps.length === 1) {
+            var prop = componentLabelProps[0];
+            if ('value' in prop && prop.value) {
+              if (isNodeOfType(prop.value, 'Literal') && !prop.value.value || isNodeOfType(prop.value, 'JSXExpressionContainer') && !prop.value.expression) {
+                context.report({
+                  node: prop,
+                  messageId: prop.name.name === 'title' ? 'titlePropShouldHaveContents' : 'titleIdShouldHaveValue'
+                });
+              }
+            }
+          } else if (componentLabelProps.length > 1) {
+            context.report({
+              node: node.openingElement,
+              messageId: 'noBothPropsUsage'
+            });
+          } else {
+            context.report({
+              node: node.openingElement,
+              messageId: 'missingTitleProp'
+            });
+          }
+        }
+      }
+    };
+  }
+});
+export default rule;

package/dist/types/common/token-maps.partial.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::30c84f908843af1f250860b6f3deeea0>>
+ * @codegen <<SignedSource::a9fbd091c8b53fd9515afc7cdd793c6b>>
  * @codegenId spacing
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen-token-maps
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::55622b91aca9b3afac4bce440f222b71>>

package/dist/types/index.codegen.d.ts

@@ -35,6 +35,7 @@ export declare const configs: {
             '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
             '@atlaskit/design-system/use-href-in-link-item': string;
             '@atlaskit/design-system/use-latest-xcss-syntax': string;
+            '@atlaskit/design-system/use-menu-section-title': string;
             '@atlaskit/design-system/use-popup-label': string;
             '@atlaskit/design-system/use-primitives': string;
             '@atlaskit/design-system/use-primitives-text': string;
@@ -68,6 +69,7 @@ export declare const configs: {
             '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
             '@atlaskit/design-system/use-href-in-link-item': string;
             '@atlaskit/design-system/use-latest-xcss-syntax': string;
+            '@atlaskit/design-system/use-menu-section-title': string;
             '@atlaskit/design-system/use-popup-label': string;
             '@atlaskit/design-system/use-visually-hidden': string;
         };

package/dist/types/presets/all.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::45da5525f92249d3a5b5049a95fc2fc5>>
+ * @codegen <<SignedSource::837556032f39113ae86785a120bb9ccb>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -38,6 +38,7 @@ declare const _default: {
         '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
         '@atlaskit/design-system/use-href-in-link-item': string;
         '@atlaskit/design-system/use-latest-xcss-syntax': string;
+        '@atlaskit/design-system/use-menu-section-title': string;
         '@atlaskit/design-system/use-popup-label': string;
         '@atlaskit/design-system/use-primitives': string;
         '@atlaskit/design-system/use-primitives-text': string;

package/dist/types/presets/recommended.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::f5a2e39689cb7db642a65999cdc6f03a>>
+ * @codegen <<SignedSource::b7ed527a03208f0bc68f9d34e4ef2260>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -28,6 +28,7 @@ declare const _default: {
         '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
         '@atlaskit/design-system/use-href-in-link-item': string;
         '@atlaskit/design-system/use-latest-xcss-syntax': string;
+        '@atlaskit/design-system/use-menu-section-title': string;
         '@atlaskit/design-system/use-popup-label': string;
         '@atlaskit/design-system/use-visually-hidden': string;
     };

package/dist/types/rules/index.codegen.d.ts

@@ -35,6 +35,7 @@ declare const _default: {
     'use-heading-level-in-spotlight-card': import("eslint").Rule.RuleModule;
     'use-href-in-link-item': import("eslint").Rule.RuleModule;
     'use-latest-xcss-syntax': import("eslint").Rule.RuleModule;
+    'use-menu-section-title': import("eslint").Rule.RuleModule;
     'use-popup-label': import("eslint").Rule.RuleModule;
     'use-primitives': import("eslint").Rule.RuleModule;
     'use-primitives-text': import("eslint").Rule.RuleModule;

package/dist/types/rules/use-menu-section-title/index.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

package/dist/types/rules/use-primitives/transformers/index.d.ts

@@ -1,3 +1,3 @@
-export { cssToXcssTransformer, supportedStylesMap, spaceTokenMap, } from './css-to-xcss';
+export { cssToXcssTransformer, supportedStylesMap, spaceTokenMap } from './css-to-xcss';
 export { CompiledStyled } from './compiled-styled';
 export { EmotionCSS } from './emotion-css';

package/dist/types-ts4.5/common/token-maps.partial.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::30c84f908843af1f250860b6f3deeea0>>
+ * @codegen <<SignedSource::a9fbd091c8b53fd9515afc7cdd793c6b>>
  * @codegenId spacing
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen-token-maps
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::55622b91aca9b3afac4bce440f222b71>>

package/dist/types-ts4.5/index.codegen.d.ts

@@ -35,6 +35,7 @@ export declare const configs: {
             '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
             '@atlaskit/design-system/use-href-in-link-item': string;
             '@atlaskit/design-system/use-latest-xcss-syntax': string;
+            '@atlaskit/design-system/use-menu-section-title': string;
             '@atlaskit/design-system/use-popup-label': string;
             '@atlaskit/design-system/use-primitives': string;
             '@atlaskit/design-system/use-primitives-text': string;
@@ -68,6 +69,7 @@ export declare const configs: {
             '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
             '@atlaskit/design-system/use-href-in-link-item': string;
             '@atlaskit/design-system/use-latest-xcss-syntax': string;
+            '@atlaskit/design-system/use-menu-section-title': string;
             '@atlaskit/design-system/use-popup-label': string;
             '@atlaskit/design-system/use-visually-hidden': string;
         };

package/dist/types-ts4.5/presets/all.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::45da5525f92249d3a5b5049a95fc2fc5>>
+ * @codegen <<SignedSource::837556032f39113ae86785a120bb9ccb>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -38,6 +38,7 @@ declare const _default: {
         '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
         '@atlaskit/design-system/use-href-in-link-item': string;
         '@atlaskit/design-system/use-latest-xcss-syntax': string;
+        '@atlaskit/design-system/use-menu-section-title': string;
         '@atlaskit/design-system/use-popup-label': string;
         '@atlaskit/design-system/use-primitives': string;
         '@atlaskit/design-system/use-primitives-text': string;

package/dist/types-ts4.5/presets/recommended.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::f5a2e39689cb7db642a65999cdc6f03a>>
+ * @codegen <<SignedSource::b7ed527a03208f0bc68f9d34e4ef2260>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -28,6 +28,7 @@ declare const _default: {
         '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
         '@atlaskit/design-system/use-href-in-link-item': string;
         '@atlaskit/design-system/use-latest-xcss-syntax': string;
+        '@atlaskit/design-system/use-menu-section-title': string;
         '@atlaskit/design-system/use-popup-label': string;
         '@atlaskit/design-system/use-visually-hidden': string;
     };

package/dist/types-ts4.5/rules/index.codegen.d.ts

@@ -39,6 +39,7 @@ declare const _default: {
     'use-heading-level-in-spotlight-card': import("eslint").Rule.RuleModule;
     'use-href-in-link-item': import("eslint").Rule.RuleModule;
     'use-latest-xcss-syntax': import("eslint").Rule.RuleModule;
+    'use-menu-section-title': import("eslint").Rule.RuleModule;
     'use-popup-label': import("eslint").Rule.RuleModule;
     'use-primitives': import("eslint").Rule.RuleModule;
     'use-primitives-text': import("eslint").Rule.RuleModule;

package/dist/types-ts4.5/rules/use-menu-section-title/index.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

package/dist/types-ts4.5/rules/use-primitives/transformers/index.d.ts

@@ -1,3 +1,3 @@
-export { cssToXcssTransformer, supportedStylesMap, spaceTokenMap, } from './css-to-xcss';
+export { cssToXcssTransformer, supportedStylesMap, spaceTokenMap } from './css-to-xcss';
 export { CompiledStyled } from './compiled-styled';
 export { EmotionCSS } from './emotion-css';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/eslint-plugin-design-system",
   "description": "The essential plugin for use with the Atlassian Design System.",
-  "version": "10.5.0",
+  "version": "10.6.1",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "publishConfig": {
@@ -55,7 +55,7 @@
   "devDependencies": {
     "@af/formatting": "*",
     "@atlaskit/ds-lib": "^2.3.0",
-    "@atlaskit/theme": "^12.8.0",
+    "@atlaskit/theme": "^12.9.0",
     "@atlassian/codegen": "*",
     "@atlassian/eslint-utils": "^0.5.0",
     "@emotion/react": "^11.7.1",