@atlaskit/jql-editor 5.13.5 → 5.14.0

package/dist/es2019/state/index.js

@@ -9,6 +9,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { computeJqlInsights, isListOperator, normaliseJqlString } from '@atlaskit/jql-ast';
 import { JQLAutocomplete } from '@atlaskit/jql-autocomplete';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { ActionSubject, ActionSubjectId, Action as AnalyticsAction, EventType } from '../analytics';
 import { selectErrorCommand } from '../commands/select-error-command';
 import { JQL_EDITOR_MAIN_ID } from '../common/constants';
@@ -19,6 +20,7 @@ import { getNodeText } from '../utils/document-text';
 import { onStartAutocompleteEvent } from './analytics';
 import { sortOperators } from './autocomplete';
 import { hydrateQuery } from './hydration';
+import { normaliseHydrationKey } from './hydration/util';
 import { getAutocompleteOptionId, getAutocompletePosition, getFieldNodes, getReplacePositionStart, sendDebugMessage, tokensToAutocompleteOptions } from './util';
 const initialIntl = createIntl({
   locale: 'en'
@@ -864,13 +866,22 @@ export const useAutocompletePosition = createHook(Store, {
     };
   }
 });
+
+// IMPORTANT: All hydration lookup hooks below must normalise fieldName using normaliseHydrationKey.
+// This ensures consistent matching regardless of quoting or casing differences between the hydration API
+// response (storage) and ProseMirror node attributes (lookup). Both sides must use the same normalisation.
+// See normaliseHydrationKey in ./hydration/util.ts for details.
 export const useHydratedValue = createHook(Store, {
   selector: (state, {
     id,
     fieldName
   }) => {
-    var _state$hydratedValues;
-    return (_state$hydratedValues = state.hydratedValues[fieldName]) === null || _state$hydratedValues === void 0 ? void 0 : _state$hydratedValues.get(id);
+    var _state$hydratedValues2;
+    if (fg('projects_in_jira_eap_drop2')) {
+      var _state$hydratedValues;
+      return (_state$hydratedValues = state.hydratedValues[normaliseHydrationKey(fieldName)]) === null || _state$hydratedValues === void 0 ? void 0 : _state$hydratedValues.get(normaliseJqlString(id));
+    }
+    return (_state$hydratedValues2 = state.hydratedValues[fieldName]) === null || _state$hydratedValues2 === void 0 ? void 0 : _state$hydratedValues2.get(id);
   }
 });
 export const useHydratedUser = createHook(Store, {
@@ -878,8 +889,8 @@ export const useHydratedUser = createHook(Store, {
     id,
     fieldName
   }) => {
-    var _state$hydratedValues2;
-    const user = (_state$hydratedValues2 = state.hydratedValues[fieldName]) === null || _state$hydratedValues2 === void 0 ? void 0 : _state$hydratedValues2.get(id);
+    var _state$hydratedValues3, _state$hydratedValues4;
+    const user = fg('projects_in_jira_eap_drop2') ? (_state$hydratedValues3 = state.hydratedValues[normaliseHydrationKey(fieldName)]) === null || _state$hydratedValues3 === void 0 ? void 0 : _state$hydratedValues3.get(normaliseJqlString(id)) : (_state$hydratedValues4 = state.hydratedValues[fieldName]) === null || _state$hydratedValues4 === void 0 ? void 0 : _state$hydratedValues4.get(id);
     return user && user.type === 'user' ? user : undefined;
   }
 });
@@ -888,8 +899,8 @@ export const useHydratedTeam = createHook(Store, {
     id,
     fieldName
   }) => {
-    var _state$hydratedValues3;
-    const team = (_state$hydratedValues3 = state.hydratedValues[fieldName]) === null || _state$hydratedValues3 === void 0 ? void 0 : _state$hydratedValues3.get(id);
+    var _state$hydratedValues5, _state$hydratedValues6;
+    const team = fg('projects_in_jira_eap_drop2') ? (_state$hydratedValues5 = state.hydratedValues[normaliseHydrationKey(fieldName)]) === null || _state$hydratedValues5 === void 0 ? void 0 : _state$hydratedValues5.get(normaliseJqlString(id)) : (_state$hydratedValues6 = state.hydratedValues[fieldName]) === null || _state$hydratedValues6 === void 0 ? void 0 : _state$hydratedValues6.get(id);
     return team && team.type === 'team' ? team : undefined;
   }
 });
@@ -898,8 +909,8 @@ export const useHydratedProject = createHook(Store, {
     id,
     fieldName
   }) => {
-    var _state$hydratedValues4;
-    const project = (_state$hydratedValues4 = state.hydratedValues[normaliseJqlString(fieldName)]) === null || _state$hydratedValues4 === void 0 ? void 0 : _state$hydratedValues4.get(normaliseJqlString(id));
+    var _state$hydratedValues7, _state$hydratedValues8;
+    const project = fg('projects_in_jira_eap_drop2') ? (_state$hydratedValues7 = state.hydratedValues[normaliseHydrationKey(fieldName)]) === null || _state$hydratedValues7 === void 0 ? void 0 : _state$hydratedValues7.get(normaliseJqlString(id)) : (_state$hydratedValues8 = state.hydratedValues[normaliseJqlString(fieldName)]) === null || _state$hydratedValues8 === void 0 ? void 0 : _state$hydratedValues8.get(normaliseJqlString(id));
     return project && project.type === 'project' ? project : undefined;
   }
 });
@@ -909,8 +920,8 @@ export const useHydratedDeprecations = createHook(Store, {
     const fieldsInQuery = getFieldNodes(ast);
     const toReturn = [];
     Object.entries(state.hydratedValues).forEach(([fieldName]) => {
-      var _state$hydratedValues5;
-      (_state$hydratedValues5 = state.hydratedValues[fieldName]) === null || _state$hydratedValues5 === void 0 ? void 0 : _state$hydratedValues5.forEach(value => {
+      var _state$hydratedValues9;
+      (_state$hydratedValues9 = state.hydratedValues[fieldName]) === null || _state$hydratedValues9 === void 0 ? void 0 : _state$hydratedValues9.forEach(value => {
         if (value.type === 'deprecated-field') {
           if (fieldsInQuery.has(value.id.toLowerCase())) {
             toReturn.push(value);

package/dist/es2019/ui/jql-editor-controls-content/base-expand-toggle/index.js

@@ -4,7 +4,6 @@ import { IconButton } from '@atlaskit/button/new';
 import GrowDiagonalIcon from '@atlaskit/icon/core/grow-diagonal';
 import ShrinkDiagonalIcon from '@atlaskit/icon/core/shrink-diagonal';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { N50, N500 } from '@atlaskit/theme/colors';
 import { ExpandToggleContainer } from './styled';
 
 // Atlaskit doesn't provide a circle variation of the expand/collapse icons so we have to implement our own
@@ -12,13 +11,13 @@ const ExpandCircleIcon = ({
   isDisabled
 }) => /*#__PURE__*/React.createElement(GrowDiagonalIcon, {
   label: '',
-  color: isDisabled ? `var(--ds-icon-disabled, ${N50})` : `var(--ds-icon, ${N500})`
+  color: isDisabled ? "var(--ds-icon-disabled, #080F214A)" : "var(--ds-icon, #292A2E)"
 });
 const CollapseCircleIcon = ({
   isDisabled
 }) => /*#__PURE__*/React.createElement(ShrinkDiagonalIcon, {
   label: '',
-  color: isDisabled ? `var(--ds-icon-disabled, ${N50})` : `var(--ds-icon, ${N500})`
+  color: isDisabled ? "var(--ds-icon-disabled, #080F214A)" : "var(--ds-icon, #292A2E)"
 });
 export const BaseExpandToggle = ({
   expanded,

package/dist/es2019/ui/jql-editor-controls-content/base-expand-toggle/styled.js

@@ -1,6 +1,5 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
-import { N40, N50 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const ExpandToggleContainer = styled.div({
   /* Override background styles for our button to match designs */
@@ -10,11 +9,11 @@ export const ExpandToggleContainer = styled.div({
     /* Fill the remaining vertical space for a single line in our editor and space between buttons */
     margin: `${"var(--ds-space-050, 4px)"} 0`,
     '&:hover': {
-      background: `var(--ds-background-neutral-subtle-hovered, ${N40})`
+      background: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     "&:active, &[data-firefox-is-active='true']": {
-      background: `var(--ds-background-neutral-subtle-pressed, ${N50})`
+      background: "var(--ds-background-neutral-subtle-pressed, #0B120E24)"
     }
   }
 });

package/dist/es2019/ui/jql-editor-controls-content/base-syntax-help/index.js

@@ -6,7 +6,6 @@ import QuestionCircleIcon from '@atlaskit/icon/core/question-circle';
 import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
-import { N0 } from '@atlaskit/theme/colors';
 import { SyntaxHelpContainer } from './styled';
 
 // Fixes icon margin issus after new icon migration
@@ -44,7 +43,7 @@ export const BaseSyntaxHelp = ({
       xcss: iconStyle
     }, /*#__PURE__*/React.createElement(QuestionCircleIcon, {
       label: '',
-      color: isDisabled ? `var(--ds-icon-disabled, ${N0})` : `var(--ds-icon-inverse, ${N0})`
+      color: isDisabled ? "var(--ds-icon-disabled, #080F214A)" : "var(--ds-icon-inverse, #FFFFFF)"
     })),
     onClick: onClick
   }));

package/dist/es2019/ui/jql-editor-controls-content/base-syntax-help/styled.js

@@ -1,26 +1,25 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
-import { N50, N500, N600, N70 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const SyntaxHelpContainer = styled.div({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> a': {
-    background: `var(--ds-background-neutral-bold, ${N70})`,
+    background: "var(--ds-background-neutral-bold, #292A2E)",
     borderRadius: "var(--ds-radius-full, 9999px)",
     margin: "var(--ds-space-050, 4px)",
     '&:hover': {
-      background: `var(--ds-background-neutral-bold-hovered, ${N500})`
+      background: "var(--ds-background-neutral-bold-hovered, #3B3D42)"
     },
     '&:focus': {
-      background: `var(--ds-background-neutral-bold, ${N70})`
+      background: "var(--ds-background-neutral-bold, #292A2E)"
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     "&:active, &[data-firefox-is-active='true']": {
-      background: `var(--ds-background-neutral-bold-pressed, ${N600})`
+      background: "var(--ds-background-neutral-bold-pressed, #505258)"
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '&[disabled]': {
-      background: `var(--ds-background-disabled, ${N50})`
+      background: "var(--ds-background-disabled, #17171708)"
     }
   }
 });

package/dist/es2019/ui/jql-editor-footer-content/jql-messages/infos/index.js

@@ -3,7 +3,6 @@ import { di } from 'react-magnetic-di';
 import { HelperMessage } from '@atlaskit/form';
 import StatusInformationIcon from '@atlaskit/icon/core/status-information';
 import { Box } from '@atlaskit/primitives/compiled';
-import * as colors from '@atlaskit/theme/colors';
 import { useEditorViewHasInfos } from '../../../../hooks/use-editor-view-has-infos';
 import { useExternalMessages } from '../../../../state';
 import { FormatMessages, MessageContainer } from '../format';
@@ -28,7 +27,7 @@ export const InfoMessages = () => {
     paddingInlineEnd: "space.050"
   }, /*#__PURE__*/React.createElement(StatusInformationIcon, {
     label: "",
-    color: `var(--ds-icon-information, ${colors.B500})`,
+    color: "var(--ds-icon-information, #357DE8)",
     size: "small"
   })), infoMessage)) : null;
 };

package/dist/es2019/ui/jql-editor-footer-content/jql-messages/warnings/index.js

@@ -5,7 +5,6 @@ import StatusWarningIcon from '@atlaskit/icon/core/status-warning';
 import Link from '@atlaskit/link';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
-import * as colors from '@atlaskit/theme/colors';
 import { useEditorViewHasWarnings } from '../../../../hooks/use-editor-view-has-warnings';
 import { useExternalMessages, useHydratedDeprecations, useIntl } from '../../../../state';
 import { FormatMessages, MessageContainer } from '../format';
@@ -100,7 +99,7 @@ export const WarningMessages = () => {
     paddingInlineEnd: "space.050"
   }, /*#__PURE__*/React.createElement(StatusWarningIcon, {
     label: "",
-    color: `var(--ds-icon-warning, ${colors.Y400})`,
+    color: "var(--ds-icon-warning, #E06C00)",
     size: "small"
   })), warningMessage)) : null;
 };

package/dist/es2019/ui/jql-editor-layout/styled.js

@@ -3,7 +3,6 @@ import { css, keyframes } from '@emotion/react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { B200, B300, G500, N0, N10, N100, N30, N700, N800, N900, P400, R400 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import { TOOLTIP_CLASSNAME, TOOLTIP_ENTER_CLASSNAME, TOOLTIP_EXIT_CLASSNAME } from '../../plugins/validation-tooltip/constants';
 const fadeIn = keyframes({
@@ -34,8 +33,8 @@ export const EditorMain = styled.div`
 	/* These styles and animations are derived from @atlaskit/tooltip */
 
 	.${TOOLTIP_CLASSNAME} {
-		background-color: ${`var(--ds-background-neutral-bold, ${N800})`};
-		color: ${`var(--ds-text-inverse, ${N0})`};
+		background-color: ${"var(--ds-background-neutral-bold, #292A2E)"};
+		color: ${"var(--ds-text-inverse, #FFFFFF)"};
 		border-radius: ${"var(--ds-radius-small, 3px)"};
 		box-sizing: border-box;
 		font: ${"var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"};
@@ -77,14 +76,14 @@ const getEditorInputVerticalPadding = isCompact => isCompact ? 3 : 7;
 const editorInputHorizontalPadding = 6;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const EditorViewContainer = styled.div({
-  backgroundColor: `var(--ds-background-input, ${N10})`,
+  backgroundColor: "var(--ds-background-input, #FFFFFF)",
   borderStyle: 'solid',
   borderWidth: "var(--ds-border-width, 1px)",
-  borderColor: `var(--ds-border-input, ${N100})`,
+  borderColor: "var(--ds-border-input, #8C8F97)",
   borderRadius: "var(--ds-radius-medium, 3px)",
   padding: "var(--ds-border-width, 1px)",
   boxSizing: 'border-box',
-  color: `var(--ds-text, ${N900})`,
+  color: "var(--ds-text, #292A2E)",
   display: 'flex',
   overflow: 'auto',
   transition: 'background-color 0.2s ease-in-out, border-color 0.2s ease-in-out'
@@ -93,34 +92,34 @@ export const EditorViewContainer = styled.div({
 props => props.editorViewIsInvalid &&
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
 css({
-  borderColor: `var(--ds-border-danger, ${R400})`,
-  boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-danger, ${R400})`}`
+  borderColor: "var(--ds-border-danger, #E2483D)",
+  boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${"var(--ds-border-danger, #E2483D)"}`
 }),
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
 props => props.editorViewHasFocus ?
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
 css({
-  backgroundColor: `var(--ds-surface, ${N0})`,
-  borderColor: `var(--ds-border-focused, ${B200})`,
-  boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-focused, ${B200})`}`
+  backgroundColor: "var(--ds-surface, #FFFFFF)",
+  borderColor: "var(--ds-border-focused, #4688EC)",
+  boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${"var(--ds-border-focused, #4688EC)"}`
 }) :
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
 css({
   '&:hover': {
-    backgroundColor: `var(--ds-background-input-hovered, ${N30})`
+    backgroundColor: "var(--ds-background-input-hovered, #F8F8F8)"
   }
 }));
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const ReadOnlyEditorViewContainer = styled(EditorViewContainer)({
-  backgroundColor: `var(--ds-background-disabled, ${N30})`,
-  color: `var(--ds-text-disabled, ${N100})`,
+  backgroundColor: "var(--ds-background-disabled, #17171708)",
+  color: "var(--ds-text-disabled, #080F214A)",
   pointerEvents: 'none'
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const LineNumberToolbar = styled.div({
-  backgroundColor: `var(--ds-background-neutral, ${N30})`,
+  backgroundColor: "var(--ds-background-neutral, #0515240F)",
   flexShrink: 0,
   width: '30px',
   position: 'sticky',
@@ -159,7 +158,7 @@ export const EditorView = styled.div`
 	}
 
 	.ProseMirror {
-		color: ${`var(--ds-text, ${N700})`};
+		color: ${"var(--ds-text, #292A2E)"};
 		padding: ${props => getEditorInputVerticalPadding(props.isCompact)}px
 			${editorInputHorizontalPadding}px;
 
@@ -168,19 +167,19 @@ export const EditorView = styled.div`
 		}
 
 		.mark-token-keyword {
-			color: ${`var(--ds-text-accent-purple, ${P400})`};
+			color: ${"var(--ds-text-accent-purple, #803FA5)"};
 		}
 
 		.mark-token-field {
-			color: ${`var(--ds-text-accent-blue, ${B300})`};
+			color: ${"var(--ds-text-accent-blue, #1558BC)"};
 		}
 
 		.mark-token-operator {
-			color: ${`var(--ds-text-accent-green, ${G500})`};
+			color: ${"var(--ds-text-accent-green, #216E4E)"};
 		}
 
 		.mark-token-error {
-			color: ${`var(--ds-text-danger, ${R400})`};
+			color: ${"var(--ds-text-danger, #AE2E24)"};
 			text-decoration: wavy underline;
 			text-decoration-thickness: 1px;
 			text-decoration-skip-ink: none;
@@ -196,7 +195,7 @@ export const EditorView = styled.div`
 
 		&::before {
 			content: counter(lineNumber);
-			color: ${`var(--ds-text-subtlest, ${N100})`};
+			color: ${"var(--ds-text-subtlest, #6B6E76)"};
 			font-size: 10px;
 			line-height: ${rowHeight / 10};
 			padding: 0 ${"var(--ds-space-100, 8px)"} 0 ${"var(--ds-space-025, 2px)"};

package/dist/esm/analytics/util.js

@@ -1,4 +1,4 @@
 import { ANALYTICS_CHANNEL, useJqlPackageAnalytics } from '@atlaskit/jql-editor-common';
 export var useJqlEditorAnalytics = function useJqlEditorAnalytics(analyticsSource) {
-  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "0.0.0-development", ANALYTICS_CHANNEL);
+  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "5.13.6", ANALYTICS_CHANNEL);
 };

package/dist/esm/async.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+
+// oxlint-disable-next-line @atlassian/no-restricted-imports
 import { lazyForPaint, LazySuspense } from 'react-loosely-lazy';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { withErrorBoundary } from './ui/error-boundary';

package/dist/esm/plugins/autocomplete/components/autocomplete-dropdown/styled.js

@@ -1,16 +1,15 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
-import { N200, N40, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var AutocompleteContainer = styled.div({
   position: 'absolute',
-  backgroundColor: "var(--ds-surface-overlay, white)",
+  backgroundColor: "var(--ds-surface-overlay, #FFFFFF)",
   borderRadius: "var(--ds-radius-small, 3px)",
   willChange: 'top, left',
   zIndex: layers.dialog(),
-  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
-  padding: "var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-0, 0)"),
+  boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)",
+  padding: "var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-0, 0px)"),
   minWidth: '200px',
   maxWidth: '400px',
   '&:focus': {
@@ -45,15 +44,15 @@ export var AutocompleteOptionsContainer = styled.div({
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var OptionList = styled.ul({
   listStyle: 'none',
-  margin: "var(--ds-space-0, 0)",
-  padding: "var(--ds-space-0, 0)"
+  margin: "var(--ds-space-0, 0px)",
+  padding: "var(--ds-space-0, 0px)"
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var AutocompleteLoadingFooter = styled.div({
   display: 'flex',
   justifyContent: 'center',
-  color: "var(--ds-text-subtlest, ".concat(N200, ")"),
+  color: "var(--ds-text-subtlest, #6B6E76)",
   fontStyle: 'italic',
   padding: "var(--ds-space-150, 12px)",
   textAlign: 'center'
@@ -62,7 +61,7 @@ export var AutocompleteLoadingFooter = styled.div({
 function (_ref3) {
   var hasOptions = _ref3.hasOptions;
   return hasOptions && {
-    borderTop: "solid 1px ".concat("var(--ds-border, ".concat(N40, ")")),
+    borderTop: "solid ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border, #0B120E24)"),
     marginTop: "var(--ds-space-075, 6px)",
     paddingTop: "var(--ds-space-250, 20px)"
   };

package/dist/esm/plugins/autocomplete/components/autocomplete-option/index.js

@@ -16,7 +16,6 @@ import TagIcon from '@atlaskit/icon/core/tag';
 import CheckboxIcon from '@atlaskit/icon/core/task';
 import TextIcon from '@atlaskit/icon/core/text';
 import { normaliseJqlString } from '@atlaskit/jql-ast';
-import { N400 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { useIntl } from '../../../../state';
 import { messages } from './messages';
@@ -163,7 +162,7 @@ var AutocompleteOption = /*#__PURE__*/forwardRef(function (props, ref) {
     spacing: "spacious",
     testId: "jql-editor-deprecated-icon",
     label: "",
-    color: "var(--ds-icon, ".concat(N400, ")")
+    color: "var(--ds-icon, #292A2E)"
   }))) : optionName, fieldType && /*#__PURE__*/React.createElement(FieldType, null, fieldTypeIcon && /*#__PURE__*/React.createElement(FieldTypeIcon, null, fieldTypeIcon), fieldType));
   var tooltipContent = /*#__PURE__*/React.createElement(TooltipContent, null, name);
   if (overflows) {

package/dist/esm/plugins/autocomplete/components/autocomplete-option/styled.js

@@ -1,6 +1,5 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
-import { N100, N20, N50, N800 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var TooltipContent = styled.div({
   fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
@@ -18,7 +17,7 @@ export var OptionListItem = styled.li({
 function (_ref) {
   var isSelected = _ref.isSelected;
   return isSelected && {
-    background: "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")")
+    background: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
   };
 },
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
@@ -26,13 +25,13 @@ function (_ref2) {
   var isDeprecated = _ref2.isDeprecated;
   return isDeprecated && {
     cursor: 'default',
-    color: "var(--ds-text-disabled, ".concat(N50, ")")
+    color: "var(--ds-text-disabled, #080F214A)"
   };
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var OptionName = styled.div({
-  color: "var(--ds-text, ".concat(N800, ")"),
+  color: "var(--ds-text, #292A2E)",
   overflow: 'hidden',
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
@@ -42,7 +41,7 @@ export var OptionName = styled.div({
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var DeprecatedOptionContainer = styled.div({
-  color: "var(--ds-text-disabled, ".concat(N50, ")"),
+  color: "var(--ds-text-disabled, #080F214A)",
   display: 'flex',
   justifyContent: 'space-between',
   opacity: 0.6
@@ -58,7 +57,7 @@ export var FieldType = styled.div({
   display: 'flex',
   alignItems: 'center',
   marginTop: "var(--ds-space-negative-025, -2px)",
-  color: "var(--ds-text-subtlest, ".concat(N100, ")")
+  color: "var(--ds-text-subtlest, #6B6E76)"
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

package/dist/esm/plugins/autocomplete/view.js

@@ -56,7 +56,7 @@ var AutocompletePluginView = /*#__PURE__*/function (_ReactPluginView) {
       if (_this.enableRichInlineNodes && option.type === 'value' && option.valueType === 'user') {
         transaction.setMeta('hydrate', true);
       }
-      if (_this.enableRichInlineNodes && option.type === 'value' && (option.valueType === 'team' && fg('jira_update_jql_teams') || option.valueType === 'project' && fg('projects_in_jira_eap_drop2'))) {
+      if (_this.enableRichInlineNodes && option.type === 'value' && (option.valueType === 'team' || option.valueType === 'project' && fg('projects_in_jira_eap_drop2'))) {
         transaction.setMeta('hydrate', true);
       }
       var documentFrom = getDocumentPosition(transaction.doc, from);
@@ -98,17 +98,13 @@ var AutocompletePluginView = /*#__PURE__*/function (_ReactPluginView) {
             }
           case 'team':
             {
-              if (fg('jira_update_jql_teams')) {
-                var _attributes = {
-                  type: 'team',
-                  id: value,
-                  name: nameOnRichInlineNode !== null && nameOnRichInlineNode !== void 0 ? nameOnRichInlineNode : name,
-                  fieldName: context === null || context === void 0 ? void 0 : context.field
-                };
-                nodes.push(_this.view.state.schema.nodes.team.create(_attributes, textContent));
-              } else {
-                nodes.push(textContent);
-              }
+              var _attributes = {
+                type: 'team',
+                id: value,
+                name: nameOnRichInlineNode !== null && nameOnRichInlineNode !== void 0 ? nameOnRichInlineNode : name,
+                fieldName: context === null || context === void 0 ? void 0 : context.field
+              };
+              nodes.push(_this.view.state.schema.nodes.team.create(_attributes, textContent));
               break;
             }
           case 'project':

package/dist/esm/plugins/rich-inline-nodes/nodes/team/styled.js

@@ -2,7 +2,6 @@
 import { css } from '@emotion/react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
-import { N0, N40, N50, N500, R400 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var TeamContainer = styled.span({
   display: 'inline-flex',
@@ -20,42 +19,42 @@ function (_ref) {
     if (error) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       return css({
-        color: "var(--ds-text-inverse, ".concat(N0, ")"),
-        backgroundColor: "var(--ds-background-danger-bold, ".concat(R400, ")"),
+        color: "var(--ds-text-inverse, #FFFFFF)",
+        backgroundColor: "var(--ds-background-danger-bold, #C9372C)",
         textDecoration: 'wavy underline',
         textDecorationThickness: '1px',
         textDecorationSkipInk: 'none',
-        textDecorationColor: "var(--ds-text-inverse, ".concat(N0, ")")
+        textDecorationColor: "var(--ds-text-inverse, #FFFFFF)"
       });
     } else {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       return css({
-        color: "var(--ds-text, ".concat(N0, ")"),
-        backgroundColor: "var(--ds-background-selected, ".concat(N500, ")"),
-        boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, transparent)")
+        color: "var(--ds-text, #292A2E)",
+        backgroundColor: "var(--ds-background-selected, #E9F2FE)",
+        boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #1868DB)")
       });
     }
   } else {
     if (error) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       return css({
-        color: "var(--ds-text-subtle, ".concat(N500, ")"),
-        backgroundColor: "var(--ds-background-neutral, ".concat(N40, ")"),
+        color: "var(--ds-text-subtle, #505258)",
+        backgroundColor: "var(--ds-background-neutral, #0515240F)",
         textDecoration: 'wavy underline',
         textDecorationThickness: '1px',
         textDecorationSkipInk: 'none',
-        textDecorationColor: "var(--ds-text-danger, ".concat(R400, ")"),
+        textDecorationColor: "var(--ds-text-danger, #AE2E24)",
         '&:hover': {
-          backgroundColor: "var(--ds-background-neutral-hovered, ".concat(N50, ")")
+          backgroundColor: "var(--ds-background-neutral-hovered, #0B120E24)"
         }
       });
     } else {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       return css({
-        color: "var(--ds-text-subtle, ".concat(N500, ")"),
-        backgroundColor: "var(--ds-background-neutral, ".concat(N40, ")"),
+        color: "var(--ds-text-subtle, #505258)",
+        backgroundColor: "var(--ds-background-neutral, #0515240F)",
         '&:hover': {
-          backgroundColor: "var(--ds-background-neutral-hovered, ".concat(N50, ")")
+          backgroundColor: "var(--ds-background-neutral-hovered, #0B120E24)"
         }
       });
     }