@atlaskit/task-decision 17.10.4 → 17.11.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/task-decision
 
+## 17.11.0
+
+### Minor Changes
+
+- [#144209](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/144209)
+  [`8a016767c9e26`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8a016767c9e26) -
+  [ux] Enable new icons behind a feature flag.
+
+## 17.10.5
+
+### Patch Changes
+
+- [#142911](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/142911)
+  [`f661df7842ec7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f661df7842ec7) -
+  [ux] [ED-24772] create request to edit component under feature toggle
+
 ## 17.10.4
 
 ### Patch Changes

package/dist/cjs/components/DecisionItem.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("@emotion/react");
-var _decision = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/decision"));
+var _decisionEditorDecision = _interopRequireDefault(require("@atlaskit/icon/core/migration/decision--editor-decision"));
 var _Item = _interopRequireDefault(require("./Item"));
 /**
  * @jsxRuntime classic
@@ -23,10 +23,9 @@ var iconStyles = function iconStyles(showPlaceholder) {
     margin: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-150, 12px)", " 0 0"),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     color: showPlaceholder ? "var(--ds-icon-subtle, #626F86)" : "var(--ds-icon-success, #22A06B)",
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '> span': {
-      margin: "var(--ds-space-negative-100, -8px)"
-    }
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
   });
 };
 var DecisionItem = function DecisionItem(_ref) {
@@ -41,9 +40,11 @@ var DecisionItem = function DecisionItem(_ref) {
   (0, _react.jsx)("span", {
     contentEditable: false,
     css: iconStyles(showPlaceholder)
-  }, (0, _react.jsx)(_decision.default, {
+  }, (0, _react.jsx)(_decisionEditorDecision.default, {
     label: "Decision",
-    size: "large"
+    spacing: "spacious",
+    color: "currentColor",
+    LEGACY_size: "large"
   }));
   return (0, _react.jsx)(_Item.default, {
     appearance: appearance,

package/dist/cjs/components/ResourcedTaskItem.js

@@ -39,7 +39,12 @@ var ResourcedTaskItem = exports.default = /*#__PURE__*/function (_PureComponent)
       var _this$props = _this.props,
         taskDecisionProvider = _this$props.taskDecisionProvider,
         objectAri = _this$props.objectAri,
-        onChange = _this$props.onChange;
+        onChange = _this$props.onChange,
+        disableOnChange = _this$props.disableOnChange;
+      if (disableOnChange) {
+        return;
+      }
+
       // Optimistically update the task
       _this.setState({
         isDone: isDone
@@ -68,6 +73,12 @@ var ResourcedTaskItem = exports.default = /*#__PURE__*/function (_PureComponent)
         }
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnClick", function () {
+      var onClick = _this.props.onClick;
+      if (onClick) {
+        onClick();
+      }
+    });
     _this.state = {
       isDone: props.isDone
     };
@@ -157,7 +168,8 @@ var ResourcedTaskItem = exports.default = /*#__PURE__*/function (_PureComponent)
         disabled = _this$props3.disabled,
         dataAttributes = _this$props3.dataAttributes,
         isRenderer = _this$props3.isRenderer,
-        isFocused = _this$props3.isFocused;
+        isFocused = _this$props3.isFocused,
+        inputRef = _this$props3.inputRef;
       return /*#__PURE__*/_react.default.createElement(_analyticsNamespacedContext.FabricElementsAnalyticsContext, {
         data: {
           objectAri: objectAri
@@ -168,12 +180,14 @@ var ResourcedTaskItem = exports.default = /*#__PURE__*/function (_PureComponent)
         isFocused: isFocused,
         taskId: taskId,
         onChange: this.handleOnChange,
+        onClick: this.handleOnClick,
         appearance: appearance,
         contentRef: contentRef,
         showPlaceholder: showPlaceholder,
         placeholder: placeholder,
         disabled: disabled,
-        dataAttributes: dataAttributes
+        dataAttributes: dataAttributes,
+        inputRef: inputRef
       }, children));
     }
   }]);

package/dist/cjs/components/TaskItem.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
-var _checkbox = _interopRequireDefault(require("@atlaskit/icon/glyph/checkbox"));
+var _checkboxCheckedCheckbox = _interopRequireDefault(require("@atlaskit/icon/core/migration/checkbox-checked--checkbox"));
 var _Item = _interopRequireDefault(require("./Item"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _analytics = require("../analytics");
@@ -39,7 +39,9 @@ var TaskItem = function TaskItem(props) {
     dataAttributes = props.dataAttributes,
     taskId = props.taskId,
     onChange = props.onChange,
-    createAnalyticsEvent = props.createAnalyticsEvent;
+    onClick = props.onClick,
+    createAnalyticsEvent = props.createAnalyticsEvent,
+    inputRefFromProps = props.inputRef;
   var checkBoxId = (0, _react.useMemo)(function () {
     return getCheckBoxId(taskId);
   }, [taskId]);
@@ -69,7 +71,8 @@ var TaskItem = function TaskItem(props) {
       }
     };
   }, [handleOnChange]);
-  var inputRef = (0, _react.useRef)(null);
+  var defaultInputRef = (0, _react.useRef)(null);
+  var inputRef = inputRefFromProps !== null && inputRefFromProps !== void 0 ? inputRefFromProps : defaultInputRef;
   var icon =
   // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   (0, _react2.jsx)("span", {
@@ -81,12 +84,15 @@ var TaskItem = function TaskItem(props) {
     name: checkBoxId,
     type: "checkbox",
     onChange: handleOnChange,
+    onClick: onClick,
     checked: !!isDone,
     disabled: !!disabled,
     suppressHydrationWarning: true,
     onKeyPress: handleOnKeyPress,
     ref: inputRef
-  }), (0, _react2.jsx)(_checkbox.default, {
+  }), (0, _react2.jsx)(_checkboxCheckedCheckbox.default, {
+    color: "currentColor",
+    spacing: "spacious",
     label: ""
   }));
   _react.default.useEffect(function () {
@@ -99,7 +105,7 @@ var TaskItem = function TaskItem(props) {
         (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 || _inputRef$current3.focus();
       }, 100);
     }
-  }, [isFocused]);
+  }, [isFocused, inputRef]);
   return (0, _react2.jsx)(_Item.default, {
     appearance: appearance,
     contentRef: contentRef,

package/dist/es2019/components/DecisionItem.js

@@ -5,7 +5,7 @@
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import DecisionIcon from '@atlaskit/icon/glyph/editor/decision';
+import DecisionIcon from '@atlaskit/icon/core/migration/decision--editor-decision';
 import Item from './Item';
 const iconStyles = showPlaceholder => {
   return css({
@@ -15,10 +15,9 @@ const iconStyles = showPlaceholder => {
     margin: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-150, 12px)"} 0 0`,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     color: showPlaceholder ? "var(--ds-icon-subtle, #626F86)" : "var(--ds-icon-success, #22A06B)",
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '> span': {
-      margin: "var(--ds-space-negative-100, -8px)"
-    }
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
   });
 };
 const DecisionItem = ({
@@ -36,7 +35,9 @@ const DecisionItem = ({
     css: iconStyles(showPlaceholder)
   }, jsx(DecisionIcon, {
     label: "Decision",
-    size: "large"
+    spacing: "spacious",
+    color: "currentColor",
+    LEGACY_size: "large"
   }));
   return jsx(Item, {
     appearance: appearance,

package/dist/es2019/components/ResourcedTaskItem.js

@@ -16,8 +16,13 @@ export default class ResourcedTaskItem extends PureComponent {
       const {
         taskDecisionProvider,
         objectAri,
-        onChange
+        onChange,
+        disableOnChange
       } = this.props;
+      if (disableOnChange) {
+        return;
+      }
+
       // Optimistically update the task
       this.setState({
         isDone
@@ -46,6 +51,14 @@ export default class ResourcedTaskItem extends PureComponent {
         }
       }
     });
+    _defineProperty(this, "handleOnClick", () => {
+      const {
+        onClick
+      } = this.props;
+      if (onClick) {
+        onClick();
+      }
+    });
     this.state = {
       isDone: props.isDone
     };
@@ -126,7 +139,8 @@ export default class ResourcedTaskItem extends PureComponent {
       disabled,
       dataAttributes,
       isRenderer,
-      isFocused
+      isFocused,
+      inputRef
     } = this.props;
     return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
       data: {
@@ -138,12 +152,14 @@ export default class ResourcedTaskItem extends PureComponent {
       isFocused: isFocused,
       taskId: taskId,
       onChange: this.handleOnChange,
+      onClick: this.handleOnClick,
       appearance: appearance,
       contentRef: contentRef,
       showPlaceholder: showPlaceholder,
       placeholder: placeholder,
       disabled: disabled,
-      dataAttributes: dataAttributes
+      dataAttributes: dataAttributes,
+      inputRef: inputRef
     }, children));
   }
 }

package/dist/es2019/components/TaskItem.js

@@ -5,7 +5,7 @@
 import React, { useMemo, useRef } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
+import CheckboxIcon from '@atlaskit/icon/core/migration/checkbox-checked--checkbox';
 import Item from './Item';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createAndFireEventInElementsChannel } from '../analytics';
@@ -26,7 +26,9 @@ const TaskItem = props => {
     dataAttributes,
     taskId,
     onChange,
-    createAnalyticsEvent
+    onClick,
+    createAnalyticsEvent,
+    inputRef: inputRefFromProps
   } = props;
   const checkBoxId = useMemo(() => getCheckBoxId(taskId), [taskId]);
   const handleOnChange = useMemo(() => {
@@ -53,7 +55,8 @@ const TaskItem = props => {
       handleOnChange(event);
     }
   }, [handleOnChange]);
-  const inputRef = useRef(null);
+  const defaultInputRef = useRef(null);
+  const inputRef = inputRefFromProps !== null && inputRefFromProps !== void 0 ? inputRefFromProps : defaultInputRef;
   const icon =
   // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   jsx("span", {
@@ -65,12 +68,15 @@ const TaskItem = props => {
     name: checkBoxId,
     type: "checkbox",
     onChange: handleOnChange,
+    onClick: onClick,
     checked: !!isDone,
     disabled: !!disabled,
     suppressHydrationWarning: true,
     onKeyPress: handleOnKeyPress,
     ref: inputRef
   }), jsx(CheckboxIcon, {
+    color: "currentColor",
+    spacing: "spacious",
     label: ""
   }));
   React.useEffect(() => {
@@ -83,7 +89,7 @@ const TaskItem = props => {
         (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
       }, 100);
     }
-  }, [isFocused]);
+  }, [isFocused, inputRef]);
   return jsx(Item, {
     appearance: appearance,
     contentRef: contentRef,

package/dist/esm/components/DecisionItem.js

@@ -5,7 +5,7 @@
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import DecisionIcon from '@atlaskit/icon/glyph/editor/decision';
+import DecisionIcon from '@atlaskit/icon/core/migration/decision--editor-decision';
 import Item from './Item';
 var iconStyles = function iconStyles(showPlaceholder) {
   return css({
@@ -15,10 +15,9 @@ var iconStyles = function iconStyles(showPlaceholder) {
     margin: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-150, 12px)", " 0 0"),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     color: showPlaceholder ? "var(--ds-icon-subtle, #626F86)" : "var(--ds-icon-success, #22A06B)",
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '> span': {
-      margin: "var(--ds-space-negative-100, -8px)"
-    }
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
   });
 };
 var DecisionItem = function DecisionItem(_ref) {
@@ -35,7 +34,9 @@ var DecisionItem = function DecisionItem(_ref) {
     css: iconStyles(showPlaceholder)
   }, jsx(DecisionIcon, {
     label: "Decision",
-    size: "large"
+    spacing: "spacious",
+    color: "currentColor",
+    LEGACY_size: "large"
   }));
   return jsx(Item, {
     appearance: appearance,

package/dist/esm/components/ResourcedTaskItem.js

@@ -30,7 +30,12 @@ var ResourcedTaskItem = /*#__PURE__*/function (_PureComponent) {
       var _this$props = _this.props,
         taskDecisionProvider = _this$props.taskDecisionProvider,
         objectAri = _this$props.objectAri,
-        onChange = _this$props.onChange;
+        onChange = _this$props.onChange,
+        disableOnChange = _this$props.disableOnChange;
+      if (disableOnChange) {
+        return;
+      }
+
       // Optimistically update the task
       _this.setState({
         isDone: isDone
@@ -59,6 +64,12 @@ var ResourcedTaskItem = /*#__PURE__*/function (_PureComponent) {
         }
       }
     });
+    _defineProperty(_assertThisInitialized(_this), "handleOnClick", function () {
+      var onClick = _this.props.onClick;
+      if (onClick) {
+        onClick();
+      }
+    });
     _this.state = {
       isDone: props.isDone
     };
@@ -148,7 +159,8 @@ var ResourcedTaskItem = /*#__PURE__*/function (_PureComponent) {
         disabled = _this$props3.disabled,
         dataAttributes = _this$props3.dataAttributes,
         isRenderer = _this$props3.isRenderer,
-        isFocused = _this$props3.isFocused;
+        isFocused = _this$props3.isFocused,
+        inputRef = _this$props3.inputRef;
       return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
         data: {
           objectAri: objectAri
@@ -159,12 +171,14 @@ var ResourcedTaskItem = /*#__PURE__*/function (_PureComponent) {
         isFocused: isFocused,
         taskId: taskId,
         onChange: this.handleOnChange,
+        onClick: this.handleOnClick,
         appearance: appearance,
         contentRef: contentRef,
         showPlaceholder: showPlaceholder,
         placeholder: placeholder,
         disabled: disabled,
-        dataAttributes: dataAttributes
+        dataAttributes: dataAttributes,
+        inputRef: inputRef
       }, children));
     }
   }]);

package/dist/esm/components/TaskItem.js

@@ -5,7 +5,7 @@
 import React, { useMemo, useRef } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
+import CheckboxIcon from '@atlaskit/icon/core/migration/checkbox-checked--checkbox';
 import Item from './Item';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createAndFireEventInElementsChannel } from '../analytics';
@@ -27,7 +27,9 @@ var TaskItem = function TaskItem(props) {
     dataAttributes = props.dataAttributes,
     taskId = props.taskId,
     onChange = props.onChange,
-    createAnalyticsEvent = props.createAnalyticsEvent;
+    onClick = props.onClick,
+    createAnalyticsEvent = props.createAnalyticsEvent,
+    inputRefFromProps = props.inputRef;
   var checkBoxId = useMemo(function () {
     return getCheckBoxId(taskId);
   }, [taskId]);
@@ -57,7 +59,8 @@ var TaskItem = function TaskItem(props) {
       }
     };
   }, [handleOnChange]);
-  var inputRef = useRef(null);
+  var defaultInputRef = useRef(null);
+  var inputRef = inputRefFromProps !== null && inputRefFromProps !== void 0 ? inputRefFromProps : defaultInputRef;
   var icon =
   // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   jsx("span", {
@@ -69,12 +72,15 @@ var TaskItem = function TaskItem(props) {
     name: checkBoxId,
     type: "checkbox",
     onChange: handleOnChange,
+    onClick: onClick,
     checked: !!isDone,
     disabled: !!disabled,
     suppressHydrationWarning: true,
     onKeyPress: handleOnKeyPress,
     ref: inputRef
   }), jsx(CheckboxIcon, {
+    color: "currentColor",
+    spacing: "spacious",
     label: ""
   }));
   React.useEffect(function () {
@@ -87,7 +93,7 @@ var TaskItem = function TaskItem(props) {
         (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 || _inputRef$current3.focus();
       }, 100);
     }
-  }, [isFocused]);
+  }, [isFocused, inputRef]);
   return jsx(Item, {
     appearance: appearance,
     contentRef: contentRef,

package/dist/types/components/ResourcedTaskItem.d.ts

@@ -1,3 +1,4 @@
+import { type RefObject } from 'react';
 import { PureComponent } from 'react';
 import { type Appearance, type ContentRef, type TaskDecisionProvider } from '../types';
 export interface Props {
@@ -6,6 +7,7 @@ export interface Props {
     isRenderer?: boolean;
     isFocused?: boolean;
     onChange?: (taskId: string, isChecked: boolean) => void;
+    onClick?: () => void;
     contentRef?: ContentRef;
     children?: any;
     taskDecisionProvider?: Promise<TaskDecisionProvider>;
@@ -17,6 +19,8 @@ export interface Props {
     dataAttributes?: {
         [key: string]: string | number;
     };
+    inputRef?: RefObject<HTMLInputElement>;
+    disableOnChange?: boolean;
 }
 export interface State {
     isDone?: boolean;
@@ -32,5 +36,6 @@ export default class ResourcedTaskItem extends PureComponent<Props, State> {
     private unsubscribe;
     private onUpdate;
     private handleOnChange;
+    private handleOnClick;
     render(): JSX.Element;
 }

package/dist/types/components/TaskItem.d.ts

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React from 'react';
+import React, { type RefObject } from 'react';
 import { type Appearance, type ContentRef } from '../types';
 import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 export interface Props {
@@ -11,6 +11,7 @@ export interface Props {
     isFocused?: boolean;
     isRenderer?: boolean;
     onChange?: (taskId: string, isChecked: boolean) => void;
+    onClick?: () => void;
     contentRef?: ContentRef;
     children?: any;
     placeholder?: string;
@@ -20,6 +21,7 @@ export interface Props {
     dataAttributes?: {
         [key: string]: string | number;
     };
+    inputRef?: RefObject<HTMLInputElement>;
 }
 declare const _default: React.ForwardRefExoticComponent<Omit<Props & WithAnalyticsEventsProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/components/ResourcedTaskItem.d.ts

@@ -1,3 +1,4 @@
+import { type RefObject } from 'react';
 import { PureComponent } from 'react';
 import { type Appearance, type ContentRef, type TaskDecisionProvider } from '../types';
 export interface Props {
@@ -6,6 +7,7 @@ export interface Props {
     isRenderer?: boolean;
     isFocused?: boolean;
     onChange?: (taskId: string, isChecked: boolean) => void;
+    onClick?: () => void;
     contentRef?: ContentRef;
     children?: any;
     taskDecisionProvider?: Promise<TaskDecisionProvider>;
@@ -17,6 +19,8 @@ export interface Props {
     dataAttributes?: {
         [key: string]: string | number;
     };
+    inputRef?: RefObject<HTMLInputElement>;
+    disableOnChange?: boolean;
 }
 export interface State {
     isDone?: boolean;
@@ -32,5 +36,6 @@ export default class ResourcedTaskItem extends PureComponent<Props, State> {
     private unsubscribe;
     private onUpdate;
     private handleOnChange;
+    private handleOnClick;
     render(): JSX.Element;
 }

package/dist/types-ts4.5/components/TaskItem.d.ts

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React from 'react';
+import React, { type RefObject } from 'react';
 import { type Appearance, type ContentRef } from '../types';
 import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 export interface Props {
@@ -11,6 +11,7 @@ export interface Props {
     isFocused?: boolean;
     isRenderer?: boolean;
     onChange?: (taskId: string, isChecked: boolean) => void;
+    onClick?: () => void;
     contentRef?: ContentRef;
     children?: any;
     placeholder?: string;
@@ -20,6 +21,7 @@ export interface Props {
     dataAttributes?: {
         [key: string]: string | number;
     };
+    inputRef?: RefObject<HTMLInputElement>;
 }
 declare const _default: React.ForwardRefExoticComponent<Omit<Props & WithAnalyticsEventsProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/task-decision",
-	"version": "17.10.4",
+	"version": "17.11.0",
 	"description": "Tasks and decisions react components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -43,7 +43,7 @@
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/icon": "^22.18.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tokens": "^1.60.0",
+		"@atlaskit/tokens": "^1.61.0",
 		"@atlaskit/util-service-support": "^6.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",