@atlaskit/editor-plugin-selection-toolbar 2.0.9 → 2.1.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-plugin-selection-toolbar
 
+## 2.1.1
+
+### Patch Changes
+
+- [#127441](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/127441)
+  [`f2f4b5971e0b2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2f4b5971e0b2) -
+  [ux] Updates Text Formatting toolbar separators, active option style and removes range selection
+  when the toolbar is docked to top.
+- Updated dependencies
+
+## 2.1.0
+
+### Minor Changes
+
+- [#126588](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/126588)
+  [`d4160d5f8b246`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d4160d5f8b246) -
+  ED-26876 implement editor api for user preference
+
+### Patch Changes
+
+- [#126588](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/126588)
+  [`d4160d5f8b246`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d4160d5f8b246) -
+  ED-26876 add tests for selectionToolbarPlugin
+- Updated dependencies
+
 ## 2.0.9
 
 ### Patch Changes

package/dist/cjs/pm-plugins/commands.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.toggleToolbar = exports.setToolbarDocking = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _pluginKey = require("./plugin-key");
 var toggleToolbar = exports.toggleToolbar = function toggleToolbar(_ref) {
   var hide = _ref.hide;
@@ -16,12 +17,19 @@ var toggleToolbar = exports.toggleToolbar = function toggleToolbar(_ref) {
   };
 };
 var setToolbarDocking = exports.setToolbarDocking = function setToolbarDocking(_ref3) {
-  var toolbarDocking = _ref3.toolbarDocking;
+  var toolbarDocking = _ref3.toolbarDocking,
+    userPreferencesProvider = _ref3.userPreferencesProvider;
   return function (_ref4) {
     var tr = _ref4.tr;
+    // We currently ignore any update failures, need to confirm this is the desired behaviour
+    userPreferencesProvider === null || userPreferencesProvider === void 0 || userPreferencesProvider.updatePreference('toolbarDockingInitialPosition', toolbarDocking);
     tr.setMeta(_pluginKey.selectionToolbarPluginKey, {
       toolbarDocking: toolbarDocking
     });
+    if (toolbarDocking === 'top') {
+      // Remove the selection if the toolbar is docked to the top
+      tr.setSelection(_state.TextSelection.create(tr.doc, tr.selection.head));
+    }
     return tr;
   };
 };

package/dist/cjs/selectionToolbarPlugin.js

@@ -24,6 +24,7 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
     config = _ref.config;
   var __selectionToolbarHandlers = [];
   var primaryToolbarComponent;
+  var userPreferencesProvider = config.userPreferencesProvider;
   if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
     exposure: true
   })) {
@@ -62,7 +63,8 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
       setToolbarDocking: function setToolbarDocking(toolbarDocking) {
         var _api$core$actions$exe3;
         return (_api$core$actions$exe3 = api === null || api === void 0 ? void 0 : api.core.actions.execute((0, _commands.setToolbarDocking)({
-          toolbarDocking: toolbarDocking
+          toolbarDocking: toolbarDocking,
+          userPreferencesProvider: userPreferencesProvider
         }))) !== null && _api$core$actions$exe3 !== void 0 ? _api$core$actions$exe3 : false;
       }
     },
@@ -83,10 +85,14 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
             key: _pluginKey.selectionToolbarPluginKey,
             state: {
               init: function init() {
+                var toolbarDocking = 'top';
+                if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+                  toolbarDocking = (userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) || 'none';
+                }
                 return {
                   selectionStable: false,
                   hide: false,
-                  toolbarDocking: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? 'none' : 'top'
+                  toolbarDocking: toolbarDocking
                 };
               },
               apply: function apply(tr, pluginState) {
@@ -188,15 +194,22 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
             items.push.apply(items, (0, _toConsumableArray2.default)(resolved[i].items));
           }
           if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
-            var shouldNotAddSeparator = false;
             if (resolved[i] && resolved[i + 1]) {
-              var _resolved$i2, _resolved, _resolved$i3, _resolved2;
-              shouldNotAddSeparator = ((_resolved$i2 = resolved[i]) === null || _resolved$i2 === void 0 ? void 0 : _resolved$i2.pluginName) === 'textColor' && ((_resolved = resolved[i + 1]) === null || _resolved === void 0 ? void 0 : _resolved.pluginName) === 'highlight' || ((_resolved$i3 = resolved[i]) === null || _resolved$i3 === void 0 ? void 0 : _resolved$i3.pluginName) === 'alignment' && ((_resolved2 = resolved[i + 1]) === null || _resolved2 === void 0 ? void 0 : _resolved2.pluginName) === 'toolbarListsIndentation';
-            }
-            if (i !== resolved.length - 1 && !shouldNotAddSeparator) {
-              items.push({
-                type: 'separator'
-              });
+              var _resolved$i2, _resolved, _resolved$i3, _resolved2, _resolved3;
+              var shouldNotAddSeparator = ((_resolved$i2 = resolved[i]) === null || _resolved$i2 === void 0 ? void 0 : _resolved$i2.pluginName) === 'textColor' && ((_resolved = resolved[i + 1]) === null || _resolved === void 0 ? void 0 : _resolved.pluginName) === 'highlight' || ((_resolved$i3 = resolved[i]) === null || _resolved$i3 === void 0 ? void 0 : _resolved$i3.pluginName) === 'alignment' && ((_resolved2 = resolved[i + 1]) === null || _resolved2 === void 0 ? void 0 : _resolved2.pluginName) === 'toolbarListsIndentation';
+              if (((_resolved3 = resolved[i + 1]) === null || _resolved3 === void 0 ? void 0 : _resolved3.pluginName) === 'annotation') {
+                items.push({
+                  type: 'separator',
+                  fullHeight: true
+                });
+              } else {
+                if (i !== resolved.length - 1 && !shouldNotAddSeparator) {
+                  items.push({
+                    type: 'separator',
+                    fullHeight: false
+                  });
+                }
+              }
             }
           } else {
             if (i !== resolved.length - 1) {

package/dist/cjs/types/index.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/ui/overflow-toolbar-config.js

@@ -75,7 +75,8 @@ var getOverflowFloatingToolbarConfig = exports.getOverflowFloatingToolbarConfig
     });
   }
   return [{
-    type: 'separator'
+    type: 'separator',
+    fullHeight: true
   }, {
     type: 'overflow-dropdown',
     dropdownWidth: 240,

package/dist/es2019/pm-plugins/commands.js

@@ -1,3 +1,4 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { selectionToolbarPluginKey } from './plugin-key';
 export const toggleToolbar = ({
   hide
@@ -10,12 +11,19 @@ export const toggleToolbar = ({
   return tr;
 };
 export const setToolbarDocking = ({
-  toolbarDocking
+  toolbarDocking,
+  userPreferencesProvider
 }) => ({
   tr
 }) => {
+  // We currently ignore any update failures, need to confirm this is the desired behaviour
+  userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.updatePreference('toolbarDockingInitialPosition', toolbarDocking);
   tr.setMeta(selectionToolbarPluginKey, {
     toolbarDocking
   });
+  if (toolbarDocking === 'top') {
+    // Remove the selection if the toolbar is docked to the top
+    tr.setSelection(TextSelection.create(tr.doc, tr.selection.head));
+  }
   return tr;
 };

package/dist/es2019/selectionToolbarPlugin.js

@@ -14,6 +14,9 @@ export const selectionToolbarPlugin = ({
 }) => {
   const __selectionToolbarHandlers = [];
   let primaryToolbarComponent;
+  const {
+    userPreferencesProvider
+  } = config;
   if (editorExperiment('platform_editor_controls', 'variant1', {
     exposure: true
   })) {
@@ -51,7 +54,8 @@ export const selectionToolbarPlugin = ({
       setToolbarDocking: toolbarDocking => {
         var _api$core$actions$exe3;
         return (_api$core$actions$exe3 = api === null || api === void 0 ? void 0 : api.core.actions.execute(setToolbarDocking({
-          toolbarDocking
+          toolbarDocking,
+          userPreferencesProvider
         }))) !== null && _api$core$actions$exe3 !== void 0 ? _api$core$actions$exe3 : false;
       }
     },
@@ -72,10 +76,14 @@ export const selectionToolbarPlugin = ({
             key: selectionToolbarPluginKey,
             state: {
               init() {
+                let toolbarDocking = 'top';
+                if (editorExperiment('platform_editor_controls', 'variant1')) {
+                  toolbarDocking = (userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) || 'none';
+                }
                 return {
                   selectionStable: false,
                   hide: false,
-                  toolbarDocking: editorExperiment('platform_editor_controls', 'variant1') ? 'none' : 'top'
+                  toolbarDocking
                 };
               },
               apply(tr, pluginState) {
@@ -177,15 +185,22 @@ export const selectionToolbarPlugin = ({
             items.push(...resolved[i].items);
           }
           if (editorExperiment('platform_editor_controls', 'variant1')) {
-            let shouldNotAddSeparator = false;
             if (resolved[i] && resolved[i + 1]) {
-              var _resolved$i2, _resolved, _resolved$i3, _resolved2;
-              shouldNotAddSeparator = ((_resolved$i2 = resolved[i]) === null || _resolved$i2 === void 0 ? void 0 : _resolved$i2.pluginName) === 'textColor' && ((_resolved = resolved[i + 1]) === null || _resolved === void 0 ? void 0 : _resolved.pluginName) === 'highlight' || ((_resolved$i3 = resolved[i]) === null || _resolved$i3 === void 0 ? void 0 : _resolved$i3.pluginName) === 'alignment' && ((_resolved2 = resolved[i + 1]) === null || _resolved2 === void 0 ? void 0 : _resolved2.pluginName) === 'toolbarListsIndentation';
-            }
-            if (i !== resolved.length - 1 && !shouldNotAddSeparator) {
-              items.push({
-                type: 'separator'
-              });
+              var _resolved$i2, _resolved, _resolved$i3, _resolved2, _resolved3;
+              const shouldNotAddSeparator = ((_resolved$i2 = resolved[i]) === null || _resolved$i2 === void 0 ? void 0 : _resolved$i2.pluginName) === 'textColor' && ((_resolved = resolved[i + 1]) === null || _resolved === void 0 ? void 0 : _resolved.pluginName) === 'highlight' || ((_resolved$i3 = resolved[i]) === null || _resolved$i3 === void 0 ? void 0 : _resolved$i3.pluginName) === 'alignment' && ((_resolved2 = resolved[i + 1]) === null || _resolved2 === void 0 ? void 0 : _resolved2.pluginName) === 'toolbarListsIndentation';
+              if (((_resolved3 = resolved[i + 1]) === null || _resolved3 === void 0 ? void 0 : _resolved3.pluginName) === 'annotation') {
+                items.push({
+                  type: 'separator',
+                  fullHeight: true
+                });
+              } else {
+                if (i !== resolved.length - 1 && !shouldNotAddSeparator) {
+                  items.push({
+                    type: 'separator',
+                    fullHeight: false
+                  });
+                }
+              }
             }
           } else {
             if (i !== resolved.length - 1) {

package/dist/es2019/types/index.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui/overflow-toolbar-config.js

@@ -68,7 +68,8 @@ export const getOverflowFloatingToolbarConfig = ({
     });
   }
   return [{
-    type: 'separator'
+    type: 'separator',
+    fullHeight: true
   }, {
     type: 'overflow-dropdown',
     dropdownWidth: 240,

package/dist/esm/pm-plugins/commands.js

@@ -1,3 +1,4 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { selectionToolbarPluginKey } from './plugin-key';
 export var toggleToolbar = function toggleToolbar(_ref) {
   var hide = _ref.hide;
@@ -10,12 +11,19 @@ export var toggleToolbar = function toggleToolbar(_ref) {
   };
 };
 export var setToolbarDocking = function setToolbarDocking(_ref3) {
-  var toolbarDocking = _ref3.toolbarDocking;
+  var toolbarDocking = _ref3.toolbarDocking,
+    userPreferencesProvider = _ref3.userPreferencesProvider;
   return function (_ref4) {
     var tr = _ref4.tr;
+    // We currently ignore any update failures, need to confirm this is the desired behaviour
+    userPreferencesProvider === null || userPreferencesProvider === void 0 || userPreferencesProvider.updatePreference('toolbarDockingInitialPosition', toolbarDocking);
     tr.setMeta(selectionToolbarPluginKey, {
       toolbarDocking: toolbarDocking
     });
+    if (toolbarDocking === 'top') {
+      // Remove the selection if the toolbar is docked to the top
+      tr.setSelection(TextSelection.create(tr.doc, tr.selection.head));
+    }
     return tr;
   };
 };

package/dist/esm/selectionToolbarPlugin.js

@@ -17,6 +17,7 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
     config = _ref.config;
   var __selectionToolbarHandlers = [];
   var primaryToolbarComponent;
+  var userPreferencesProvider = config.userPreferencesProvider;
   if (editorExperiment('platform_editor_controls', 'variant1', {
     exposure: true
   })) {
@@ -55,7 +56,8 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
       setToolbarDocking: function setToolbarDocking(toolbarDocking) {
         var _api$core$actions$exe3;
         return (_api$core$actions$exe3 = api === null || api === void 0 ? void 0 : api.core.actions.execute(_setToolbarDocking({
-          toolbarDocking: toolbarDocking
+          toolbarDocking: toolbarDocking,
+          userPreferencesProvider: userPreferencesProvider
         }))) !== null && _api$core$actions$exe3 !== void 0 ? _api$core$actions$exe3 : false;
       }
     },
@@ -76,10 +78,14 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
             key: selectionToolbarPluginKey,
             state: {
               init: function init() {
+                var toolbarDocking = 'top';
+                if (editorExperiment('platform_editor_controls', 'variant1')) {
+                  toolbarDocking = (userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) || 'none';
+                }
                 return {
                   selectionStable: false,
                   hide: false,
-                  toolbarDocking: editorExperiment('platform_editor_controls', 'variant1') ? 'none' : 'top'
+                  toolbarDocking: toolbarDocking
                 };
               },
               apply: function apply(tr, pluginState) {
@@ -181,15 +187,22 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
             items.push.apply(items, _toConsumableArray(resolved[i].items));
           }
           if (editorExperiment('platform_editor_controls', 'variant1')) {
-            var shouldNotAddSeparator = false;
             if (resolved[i] && resolved[i + 1]) {
-              var _resolved$i2, _resolved, _resolved$i3, _resolved2;
-              shouldNotAddSeparator = ((_resolved$i2 = resolved[i]) === null || _resolved$i2 === void 0 ? void 0 : _resolved$i2.pluginName) === 'textColor' && ((_resolved = resolved[i + 1]) === null || _resolved === void 0 ? void 0 : _resolved.pluginName) === 'highlight' || ((_resolved$i3 = resolved[i]) === null || _resolved$i3 === void 0 ? void 0 : _resolved$i3.pluginName) === 'alignment' && ((_resolved2 = resolved[i + 1]) === null || _resolved2 === void 0 ? void 0 : _resolved2.pluginName) === 'toolbarListsIndentation';
-            }
-            if (i !== resolved.length - 1 && !shouldNotAddSeparator) {
-              items.push({
-                type: 'separator'
-              });
+              var _resolved$i2, _resolved, _resolved$i3, _resolved2, _resolved3;
+              var shouldNotAddSeparator = ((_resolved$i2 = resolved[i]) === null || _resolved$i2 === void 0 ? void 0 : _resolved$i2.pluginName) === 'textColor' && ((_resolved = resolved[i + 1]) === null || _resolved === void 0 ? void 0 : _resolved.pluginName) === 'highlight' || ((_resolved$i3 = resolved[i]) === null || _resolved$i3 === void 0 ? void 0 : _resolved$i3.pluginName) === 'alignment' && ((_resolved2 = resolved[i + 1]) === null || _resolved2 === void 0 ? void 0 : _resolved2.pluginName) === 'toolbarListsIndentation';
+              if (((_resolved3 = resolved[i + 1]) === null || _resolved3 === void 0 ? void 0 : _resolved3.pluginName) === 'annotation') {
+                items.push({
+                  type: 'separator',
+                  fullHeight: true
+                });
+              } else {
+                if (i !== resolved.length - 1 && !shouldNotAddSeparator) {
+                  items.push({
+                    type: 'separator',
+                    fullHeight: false
+                  });
+                }
+              }
             }
           } else {
             if (i !== resolved.length - 1) {

package/dist/esm/types/index.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ui/overflow-toolbar-config.js

@@ -67,7 +67,8 @@ export var getOverflowFloatingToolbarConfig = function getOverflowFloatingToolba
     });
   }
   return [{
-    type: 'separator'
+    type: 'separator',
+    fullHeight: true
   }, {
     type: 'overflow-dropdown',
     dropdownWidth: 240,

package/dist/types/pm-plugins/commands.d.ts

@@ -1,8 +1,9 @@
-import type { EditorCommand } from '@atlaskit/editor-common/types';
+import type { EditorCommand, UserPreferencesProvider } from '@atlaskit/editor-common/types';
 import type { ToolbarDocking } from '../types';
 export declare const toggleToolbar: ({ hide }: {
     hide: boolean;
 }) => EditorCommand;
-export declare const setToolbarDocking: ({ toolbarDocking }: {
+export declare const setToolbarDocking: ({ toolbarDocking, userPreferencesProvider, }: {
     toolbarDocking: ToolbarDocking;
+    userPreferencesProvider?: UserPreferencesProvider | undefined;
 }) => EditorCommand;

package/dist/types/selectionToolbarPluginType.d.ts

@@ -1,4 +1,4 @@
-import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { NextEditorPlugin, OptionalPlugin, UserPreferencesProvider } from '@atlaskit/editor-common/types';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { ToolbarDocking } from './types';
@@ -11,6 +11,7 @@ export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
          * Defaults to false
          */
         preferenceToolbarAboveSelection?: boolean;
+        userPreferencesProvider?: UserPreferencesProvider;
     };
     dependencies: [OptionalPlugin<EditorViewModePlugin>, OptionalPlugin<PrimaryToolbarPlugin>];
     actions?: {

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

@@ -1,7 +1,8 @@
+import { UserPreferences } from '@atlaskit/editor-common/types';
 export type SelectionToolbarPluginOptions = {
     /**
      * When set to true, placing the toolbar above the selection will be preferenced.
      */
     preferenceToolbarAboveSelection?: boolean;
 };
-export type ToolbarDocking = 'top' | 'none';
+export type ToolbarDocking = NonNullable<UserPreferences['toolbarDockingInitialPosition']>;

package/dist/types-ts4.5/pm-plugins/commands.d.ts

@@ -1,8 +1,9 @@
-import type { EditorCommand } from '@atlaskit/editor-common/types';
+import type { EditorCommand, UserPreferencesProvider } from '@atlaskit/editor-common/types';
 import type { ToolbarDocking } from '../types';
 export declare const toggleToolbar: ({ hide }: {
     hide: boolean;
 }) => EditorCommand;
-export declare const setToolbarDocking: ({ toolbarDocking }: {
+export declare const setToolbarDocking: ({ toolbarDocking, userPreferencesProvider, }: {
     toolbarDocking: ToolbarDocking;
+    userPreferencesProvider?: UserPreferencesProvider | undefined;
 }) => EditorCommand;

package/dist/types-ts4.5/selectionToolbarPluginType.d.ts

@@ -1,4 +1,4 @@
-import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { NextEditorPlugin, OptionalPlugin, UserPreferencesProvider } from '@atlaskit/editor-common/types';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { ToolbarDocking } from './types';
@@ -11,6 +11,7 @@ export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
          * Defaults to false
          */
         preferenceToolbarAboveSelection?: boolean;
+        userPreferencesProvider?: UserPreferencesProvider;
     };
     dependencies: [
         OptionalPlugin<EditorViewModePlugin>,

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

@@ -1,7 +1,8 @@
+import { UserPreferences } from '@atlaskit/editor-common/types';
 export type SelectionToolbarPluginOptions = {
     /**
      * When set to true, placing the toolbar above the selection will be preferenced.
      */
     preferenceToolbarAboveSelection?: boolean;
 };
-export type ToolbarDocking = 'top' | 'none';
+export type ToolbarDocking = NonNullable<UserPreferences['toolbarDockingInitialPosition']>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-selection-toolbar",
-	"version": "2.0.9",
+	"version": "2.1.1",
 	"description": "@atlaskit/editor-plugin-selection-toolbar for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,14 +33,14 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/editor-common": "^102.8.0",
+		"@atlaskit/editor-common": "^102.10.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/icon": "^25.0.0",
 		"@atlaskit/menu": "^3.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^4.0.0",
+		"@atlaskit/tmp-editor-statsig": "^4.1.0",
 		"@atlaskit/tokens": "^4.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",