@atlaskit/jql-editor 4.0.4 → 4.0.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/jql-editor
 
+## 4.0.5
+
+### Patch Changes
+
+- [#90546](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90546) [`e3e2542b4963`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e3e2542b4963) - Update TypeScript type parameters when using `FormattedMessage` from `react-intl` to improve compatibility with React 18
+
 ## 4.0.4
 
 ### Patch Changes

package/dist/cjs/accessibility/styled.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ScreenReaderText = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _styled2 = require("../common/styled");
-var _templateObject;
-var ScreenReaderText = exports.ScreenReaderText = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), _styled2.hiddenMixin);
+var ScreenReaderText = exports.ScreenReaderText = _styled.default.div(_styled2.hiddenMixin);

package/dist/cjs/analytics/util.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 exports.useJqlEditorAnalytics = void 0;
 var _jqlEditorCommon = require("@atlaskit/jql-editor-common");
 var useJqlEditorAnalytics = exports.useJqlEditorAnalytics = function useJqlEditorAnalytics(analyticsSource) {
-  return (0, _jqlEditorCommon.useJqlPackageAnalytics)(analyticsSource, "@atlaskit/jql-editor", "4.0.4", _jqlEditorCommon.ANALYTICS_CHANNEL);
+  return (0, _jqlEditorCommon.useJqlPackageAnalytics)(analyticsSource, "@atlaskit/jql-editor", "4.0.5", _jqlEditorCommon.ANALYTICS_CHANNEL);
 };

package/dist/cjs/common/styled.js

@@ -5,11 +5,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.hiddenMixin = exports.TooltipContent = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _constants = require("@atlaskit/theme/constants");
-var _templateObject, _templateObject2;
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-var hiddenMixin = exports.hiddenMixin = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  clip: rect(1px, 1px, 1px, 1px);\n  clip-path: inset(50%);\n  height: 1px;\n  width: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n"])));
-var TooltipContent = exports.TooltipContent = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  /* CSS reset */\n  font-family: ", ";\n"])), _constants.fontFamily);
+var hiddenMixin = exports.hiddenMixin = (0, _react.css)({
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  clipPath: 'inset(50%)',
+  height: '1px',
+  width: '1px',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- needs manual remediation
+  margin: '-1px',
+  overflow: 'hidden',
+  padding: 0,
+  position: 'absolute'
+});
+var TooltipContent = exports.TooltipContent = _styled.default.div({
+  fontFamily: (0, _constants.fontFamily)()
+});

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

@@ -5,8 +5,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ExpandToggleContainer = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colors = require("@atlaskit/theme/colors");
-var _templateObject;
-var ExpandToggleContainer = exports.ExpandToggleContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* Override background styles for our button to match designs */\n\n  > button {\n    border-radius: 100%;\n    /* Fill the remaining vertical space for a single line in our editor and space between buttons */\n    margin: ", " 0;\n\n    &:hover {\n      background: ", ";\n    }\n\n    &:active,\n    &[data-firefox-is-active='true'] {\n      background: ", ";\n    }\n  }\n"])), "var(--ds-space-050, 4px)", "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N40, ")"), "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.N50, ")"));
+var ExpandToggleContainer = exports.ExpandToggleContainer = _styled.default.div({
+  /* Override background styles for our button to match designs */
+  '> button': {
+    borderRadius: '100%',
+    /* Fill the remaining vertical space for a single line in our editor and space between buttons */
+    margin: "var(--ds-space-050, 4px)".concat(" 0"),
+    '&:hover': {
+      background: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N40, ")")
+    },
+    "&:active, &[data-firefox-is-active='true']": {
+      background: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.N50, ")")
+    }
+  }
+});

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

@@ -5,8 +5,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SyntaxHelpContainer = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colors = require("@atlaskit/theme/colors");
-var _templateObject;
-var SyntaxHelpContainer = exports.SyntaxHelpContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* Override background styles for our button to match designs */\n\n  > a {\n    background: ", ";\n    border-radius: 100%;\n    /* Fill the remaining vertical space for a single line in our editor and space between buttons */\n    margin: ", ";\n\n    &:hover {\n      background: ", ";\n    }\n\n    &:focus {\n      background: ", ";\n    }\n\n    &:active,\n    &[data-firefox-is-active='true'] {\n      background: ", ";\n    }\n\n    &[disabled] {\n      background: ", ";\n    }\n  }\n"])), "var(--ds-background-neutral-bold, ".concat(_colors.N70, ")"), "var(--ds-space-050, 4px)", "var(--ds-background-neutral-bold-hovered, ".concat(_colors.N500, ")"), "var(--ds-background-neutral-bold, ".concat(_colors.N70, ")"), "var(--ds-background-neutral-bold-pressed, ".concat(_colors.N600, ")"), "var(--ds-background-disabled, ".concat(_colors.N50, ")"));
+var SyntaxHelpContainer = exports.SyntaxHelpContainer = _styled.default.div({
+  '> a': {
+    background: "var(--ds-background-neutral-bold, ".concat(_colors.N70, ")"),
+    borderRadius: '100%',
+    margin: "var(--ds-space-050, 4px)",
+    '&:hover': {
+      background: "var(--ds-background-neutral-bold-hovered, ".concat(_colors.N500, ")")
+    },
+    '&:focus': {
+      background: "var(--ds-background-neutral-bold, ".concat(_colors.N70, ")")
+    },
+    "&:active, &[data-firefox-is-active='true']": {
+      background: "var(--ds-background-neutral-bold-pressed, ".concat(_colors.N600, ")")
+    },
+    '&[disabled]': {
+      background: "var(--ds-background-disabled, ".concat(_colors.N50, ")")
+    }
+  }
+});

package/dist/cjs/ui/jql-editor-footer-content/jql-editor-help/styled.js

@@ -5,11 +5,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.HelpContainer = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _styled2 = require("../../../common/styled");
-var _templateObject, _templateObject2, _templateObject3;
-var HelpContainer = exports.HelpContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: auto;\n  margin-right: 0;\n  flex-shrink: 0;\n  padding: 0 ", ";\n\n  > * + * {\n    margin-left: ", ";\n  }\n\n  ", "\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", function (props) {
-  return props.isVisible ? (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n          visibility: visible;\n          opacity: 1;\n          transition: opacity 250ms cubic-bezier(0.15, 1, 0.3, 1);\n        "]))) : (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n          ", ";\n          opacity: 0;\n        "])), _styled2.hiddenMixin);
+var HelpContainer = exports.HelpContainer = _styled.default.div({
+  display: 'flex',
+  marginLeft: 'auto',
+  marginRight: 0,
+  flexShrink: 0,
+  padding: "0 ".concat("var(--ds-space-100, 8px)"),
+  '> * + *': {
+    marginLeft: "var(--ds-space-200, 16px)"
+  }
+}, function (props) {
+  return props.isVisible ? (0, _react.css)({
+    visibility: 'visible',
+    opacity: 1,
+    transition: 'opacity 250ms cubic-bezier(0.15, 1, 0.3, 1)'
+  }) : (0, _react.css)(_styled2.hiddenMixin, {
+    opacity: 0
+  });
 });

package/dist/cjs/ui/jql-editor-footer-content/jql-messages/format/styled.js

@@ -5,10 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MessageList = exports.MessageContainer = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _templateObject, _templateObject2;
-var MessageContainer = exports.MessageContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding-left: ", ";\n"])), function (props) {
-  return props.isSearch ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
+var MessageContainer = exports.MessageContainer = _styled.default.div(function (props) {
+  return {
+    paddingLeft: props.isSearch ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)"
+  };
 });
-var MessageList = exports.MessageList = _styled.default.ul(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n  padding-left: ", ";\n"])), "var(--ds-space-300, 24px)");
+var MessageList = exports.MessageList = _styled.default.ul({
+  margin: 0,
+  paddingLeft: "var(--ds-space-300, 24px)"
+});

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

@@ -11,11 +11,32 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _constants2 = require("../../plugins/validation-tooltip/constants");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
-var fadeIn = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n"])));
-var fadeOut = (0, _react.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    visibility: visible;\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n"])));
-var EditorMain = exports.EditorMain = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  /* CSS reset */\n  font-family: ", ";\n  font-size: ", "px;\n  flex-grow: 1;\n\n  /* These styles and animations are derived from @atlaskit/tooltip */\n\n  .", " {\n    background-color: ", ";\n    color: ", ";\n    border-radius: ", ";\n    box-sizing: border-box;\n    font-size: 12px;\n    line-height: 1.3;\n    max-width: 240px;\n    padding: ", " ", ";\n    word-wrap: break-word;\n    overflow-wrap: break-word;\n    z-index: ", ";\n    pointer-events: none;\n    position: absolute;\n    visibility: hidden;\n\n    /* Horizontally center and vertically position above the target element */\n    transform: translate(-50%, calc(-100% - ", "));\n\n    &.", " {\n      animation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n      visibility: visible;\n    }\n\n    &.", " {\n      animation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n    }\n  }\n"])), _constants.fontFamily, _constants.fontSize, _constants2.TOOLTIP_CLASSNAME, "var(--ds-background-neutral-bold, ".concat(_colors.N800, ")"), "var(--ds-text-inverse, ".concat(_colors.N0, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-space-025, 2px)", "var(--ds-space-075, 6px)", _constants.layers.tooltip(), "var(--ds-space-200, 16px)", _constants2.TOOLTIP_ENTER_CLASSNAME, fadeIn, _constants2.TOOLTIP_EXIT_CLASSNAME, fadeOut);
-var EditorFooter = exports.EditorFooter = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  /* We always have at least 1 row of space allocated to the footer */\n  min-height: 20px;\n"])));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var fadeIn = (0, _react.keyframes)({
+  from: {
+    opacity: 0
+  },
+  to: {
+    opacity: 1
+  }
+});
+var fadeOut = (0, _react.keyframes)({
+  from: {
+    visibility: 'visible',
+    opacity: 1
+  },
+  to: {
+    opacity: 0
+  }
+});
+
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation
+var EditorMain = exports.EditorMain = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* CSS reset */\n  font-family: ", ";\n  font-size: ", "px;\n  flex-grow: 1;\n\n  /* These styles and animations are derived from @atlaskit/tooltip */\n\n  .", " {\n    background-color: ", ";\n    color: ", ";\n    border-radius: ", ";\n    box-sizing: border-box;\n    font-size: 12px;\n    line-height: 1.3;\n    max-width: 240px;\n    padding: ", " ", ";\n    word-wrap: break-word;\n    overflow-wrap: break-word;\n    z-index: ", ";\n    pointer-events: none;\n    position: absolute;\n    visibility: hidden;\n\n    /* Horizontally center and vertically position above the target element */\n    transform: translate(-50%, calc(-100% - ", "));\n\n    &.", " {\n      animation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n      visibility: visible;\n    }\n\n    &.", " {\n      animation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n    }\n  }\n"])), _constants.fontFamily, _constants.fontSize, _constants2.TOOLTIP_CLASSNAME, "var(--ds-background-neutral-bold, ".concat(_colors.N800, ")"), "var(--ds-text-inverse, ".concat(_colors.N0, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-space-025, 2px)", "var(--ds-space-075, 6px)", _constants.layers.tooltip(), "var(--ds-space-200, 16px)", _constants2.TOOLTIP_ENTER_CLASSNAME, fadeIn, _constants2.TOOLTIP_EXIT_CLASSNAME, fadeOut);
+var EditorFooter = exports.EditorFooter = _styled.default.div({
+  display: 'flex',
+  justifyContent: 'space-between',
+  minHeight: '20px'
+});
 
 // Height (in px) for a single row in the editor
 var rowHeight = (0, _constants.gridSize)() * 2.75;
@@ -24,38 +45,83 @@ var getEditorInputVerticalPadding = function getEditorInputVerticalPadding(isCom
   return isCompact ? 3 : 7;
 };
 var editorInputHorizontalPadding = 6;
-var EditorViewContainer = exports.EditorViewContainer = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-style: solid;\n  border-width: 2px;\n  border-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  overflow: auto;\n  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;\n\n  ", "\n\n  ", "\n"])), "var(--ds-background-input, ".concat(_colors.N10, ")"), "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(_colors.N900, ")"), function (props) {
-  return props.editorViewHasFocus ? (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n          background-color: ", ";\n          border-color: ", ";\n        "])), "var(--ds-surface, ".concat(_colors.N0, ")"), "var(--ds-border-focused, ".concat(_colors.B100, ")")) : (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n          :hover {\n            background-color: ", ";\n          }\n        "])), "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"));
+var EditorViewContainer = exports.EditorViewContainer = _styled.default.div({
+  backgroundColor: "var(--ds-background-input, ".concat(_colors.N10, ")"),
+  borderStyle: 'solid',
+  borderWidth: '2px',
+  borderColor: "var(--ds-border, ".concat(_colors.N40, ")"),
+  borderRadius: "var(--ds-border-radius-100, 3px)",
+  boxSizing: 'border-box',
+  color: "var(--ds-text, ".concat(_colors.N900, ")"),
+  display: 'flex',
+  overflow: 'auto',
+  transition: 'background-color 0.2s ease-in-out, border-color 0.2s ease-in-out'
+}, function (props) {
+  return props.editorViewHasFocus ? (0, _react.css)({
+    backgroundColor: "var(--ds-surface, ".concat(_colors.N0, ")"),
+    borderColor: "var(--ds-border-focused, ".concat(_colors.B100, ")")
+  }) : (0, _react.css)({
+    ':hover': {
+      backgroundColor: "var(--ds-background-input-hovered, ".concat(_colors.N30, ")")
+    }
+  });
 }, function (props) {
-  return props.editorViewIsInvalid && (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n      border-color: ", ";\n    "])), "var(--ds-border-danger, ".concat(_colors.R400, ")"));
+  return props.editorViewIsInvalid && (0, _react.css)({
+    borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")")
+  });
 });
-var ReadOnlyEditorViewContainer = exports.ReadOnlyEditorViewContainer = (0, _styled.default)(EditorViewContainer)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  color: ", ";\n  pointer-events: none;\n"])), "var(--ds-background-disabled, ".concat(_colors.N30, ")"), "var(--ds-text-disabled, ".concat(_colors.N100, ")"));
-var LineNumberToolbar = exports.LineNumberToolbar = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  flex-shrink: 0;\n  width: 30px;\n  position: sticky;\n  top: 0;\n\n  ", "\n"])), "var(--ds-background-neutral, ".concat(_colors.N30, ")"), function (props) {
-  return !props.lineNumbersVisible && (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n      display: none;\n    "])));
+var ReadOnlyEditorViewContainer = exports.ReadOnlyEditorViewContainer = (0, _styled.default)(EditorViewContainer)({
+  backgroundColor: "var(--ds-background-disabled, ".concat(_colors.N30, ")"),
+  color: "var(--ds-text-disabled, ".concat(_colors.N100, ")"),
+  pointerEvents: 'none'
+});
+var LineNumberToolbar = exports.LineNumberToolbar = _styled.default.div({
+  backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N30, ")"),
+  flexShrink: 0,
+  width: '30px',
+  position: 'sticky',
+  top: 0
+}, function (props) {
+  return !props.lineNumbersVisible && (0, _react.css)({
+    display: 'none'
+  });
 });
 
 /**
  * The main div which the Prosemirror editor will be rendered into.
  */
-var EditorView = exports.EditorView = _styled.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  counter-reset: lineNumber;\n  flex-grow: 1;\n\n  transition: height 250ms cubic-bezier(0.15, 1, 0.3, 1),\n    max-height 250ms cubic-bezier(0.15, 1, 0.3, 1);\n  max-height: ", "px;\n\n  line-height: ", ";\n  font-family: ", ";\n  word-break: break-word;\n  overflow-wrap: anywhere;\n  white-space: pre-wrap;\n\n  &[data-expanded] {\n    height: ", "px;\n    max-height: ", "px;\n  }\n\n  .ProseMirror {\n    color: ", ";\n    padding: ", "px\n      ", "px;\n\n    &:focus {\n      outline: none;\n    }\n\n    .mark-token-keyword {\n      color: ", ";\n    }\n\n    .mark-token-field {\n      color: ", ";\n    }\n\n    .mark-token-operator {\n      color: ", ";\n    }\n\n    .mark-token-error {\n      color: ", ";\n      text-decoration: wavy underline;\n      text-decoration-thickness: 1px;\n      text-decoration-skip-ink: none;\n    }\n  }\n\n  p {\n    margin: 0;\n    counter-increment: lineNumber;\n    position: relative;\n\n    /* Show the current line number before each paragraph block. */\n\n    &::before {\n      content: counter(lineNumber);\n      color: ", ";\n      font-size: 10px;\n      line-height: ", ";\n      padding: 0 ", " 0 ", ";\n      position: absolute;\n      box-sizing: border-box;\n      /* Shift the line number tag 100% (plus 8px padding) to the left to position it inside the LineNumberToolbar */\n      transform: translateX(calc(-100% - ", "));\n\n      /* We can fit 3 digits before ellipses. This is not very responsive but saves us having to add expensive width\n        recalculation logic to the LineNumberToolbar for a scenario that *should* never happen. */\n      max-width: 30px;\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n\n      ", "\n    }\n  }\n"])), function (props) {
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation
+var EditorView = exports.EditorView = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  counter-reset: lineNumber;\n  flex-grow: 1;\n\n  transition: height 250ms cubic-bezier(0.15, 1, 0.3, 1),\n    max-height 250ms cubic-bezier(0.15, 1, 0.3, 1);\n  max-height: ", "px;\n\n  line-height: ", ";\n  font-family: ", ";\n  word-break: break-word;\n  overflow-wrap: anywhere;\n  white-space: pre-wrap;\n\n  &[data-expanded] {\n    height: ", "px;\n    max-height: ", "px;\n  }\n\n  .ProseMirror {\n    color: ", ";\n    padding: ", "px\n      ", "px;\n\n    &:focus {\n      outline: none;\n    }\n\n    .mark-token-keyword {\n      color: ", ";\n    }\n\n    .mark-token-field {\n      color: ", ";\n    }\n\n    .mark-token-operator {\n      color: ", ";\n    }\n\n    .mark-token-error {\n      color: ", ";\n      text-decoration: wavy underline;\n      text-decoration-thickness: 1px;\n      text-decoration-skip-ink: none;\n    }\n  }\n\n  p {\n    margin: 0;\n    counter-increment: lineNumber;\n    position: relative;\n\n    /* Show the current line number before each paragraph block. */\n\n    &::before {\n      content: counter(lineNumber);\n      color: ", ";\n      font-size: 10px;\n      line-height: ", ";\n      padding: 0 ", " 0 ", ";\n      position: absolute;\n      box-sizing: border-box;\n      /* Shift the line number tag 100% (plus 8px padding) to the left to position it inside the LineNumberToolbar */\n      transform: translateX(calc(-100% - ", "));\n\n      /* We can fit 3 digits before ellipses. This is not very responsive but saves us having to add expensive width\n        recalculation logic to the LineNumberToolbar for a scenario that *should* never happen. */\n      max-width: 30px;\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n\n      ", "\n    }\n  }\n"])), function (props) {
   return rowHeight * props.defaultMaxRows + getEditorInputVerticalPadding(props.isCompact) * 2;
-}, rowHeight / (0, _constants.fontSize)(), _constants.codeFontFamily, function (props) {
+}, rowHeight / (0, _constants.fontSize)(), (0, _constants.codeFontFamily)(), function (props) {
   return rowHeight * props.expandedRows + getEditorInputVerticalPadding(props.isCompact) * 2;
 }, function (props) {
   return rowHeight * props.expandedRows + getEditorInputVerticalPadding(props.isCompact) * 2;
 }, "var(--ds-text, ".concat(_colors.N700, ")"), function (props) {
   return getEditorInputVerticalPadding(props.isCompact);
 }, editorInputHorizontalPadding, "var(--ds-text-accent-purple, ".concat(_colors.P400, ")"), "var(--ds-text-accent-blue, ".concat(_colors.B300, ")"), "var(--ds-text-accent-green, ".concat(_colors.G300, ")"), "var(--ds-text-danger, ".concat(_colors.R400, ")"), "var(--ds-text-subtlest, ".concat(_colors.N100, ")"), rowHeight / 10, "var(--ds-space-100, 8px)", "var(--ds-space-025, 2px)", "var(--ds-space-100, 8px)", function (props) {
-  return !props.lineNumbersVisible && (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n          display: none;\n        "])));
+  return !props.lineNumbersVisible && // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n          display: none;\n        "])));
 });
-var ReadOnlyEditorView = exports.ReadOnlyEditorView = (0, _styled.default)(EditorView)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  /* We need to replicate padding from the inner prosemirror element in our read only state. That means we also need\n  recompute max height excluding the child padding. */\n  padding: ", "px\n    ", "px;\n  max-height: ", "px;\n\n  > p {\n    /* Prevent collapsing empty paragraphs */\n    min-height: ", "px;\n  }\n"])), function (props) {
+
+// FIXME: convert-props-syntax rule doesn't catch this
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression
+var ReadOnlyEditorView = exports.ReadOnlyEditorView = (0, _styled.default)(EditorView)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  /* We need to replicate padding from the inner prosemirror element in our read only state. That means we also need\n  recompute max height excluding the child padding. */\n  padding: ", "px\n    ", "px;\n  max-height: ", "px;\n\n  > p {\n    /* Prevent collapsing empty paragraphs */\n    min-height: ", "px;\n  }\n"])), function (props) {
   return getEditorInputVerticalPadding(props.isCompact);
 }, editorInputHorizontalPadding, function (props) {
   return rowHeight * props.defaultMaxRows;
 }, rowHeight);
-var EditorControls = exports.EditorControls = _styled.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  flex-shrink: 0;\n  margin-left: auto;\n  margin-right: ", "px;\n  line-height: normal;\n  position: sticky;\n  top: 0;\n  height: ", "px;\n"])), function (props) {
-  return props.isSearch ? getEditorInputVerticalPadding(props.isCompact) - 1 // the search button needs the same vertical & horizontal spacing
-  : editorInputHorizontalPadding - 3;
-}, function (props) {
-  return rowHeight + 2 * getEditorInputVerticalPadding(props.isCompact);
+var EditorControls = exports.EditorControls = _styled.default.div(function (props) {
+  return {
+    alignItems: 'center',
+    display: 'flex',
+    flexShrink: 0,
+    marginLeft: 'auto',
+    marginRight: "".concat(props.isSearch ? getEditorInputVerticalPadding(props.isCompact) - 1 // the search button needs the same vertical & horizontal spacing
+    : editorInputHorizontalPadding - 3, "px"),
+    lineHeight: 'normal',
+    position: 'sticky',
+    top: 0,
+    height: "".concat(rowHeight + 2 * getEditorInputVerticalPadding(props.isCompact), "px")
+  };
 });

package/dist/cjs/ui/tooltip-tag/styled.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledTooltipTag = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _templateObject;
-var StyledTooltipTag = exports.StyledTooltipTag = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
+var StyledTooltipTag = exports.StyledTooltipTag = _styled.default.div({
+  display: 'flex'
+});

package/dist/es2019/accessibility/styled.js

@@ -1,5 +1,3 @@
 import styled from '@emotion/styled';
 import { hiddenMixin } from '../common/styled';
-export const ScreenReaderText = styled.div`
-  ${hiddenMixin}
-`;
+export const ScreenReaderText = styled.div(hiddenMixin);

package/dist/es2019/analytics/util.js

@@ -1,4 +1,4 @@
 import { ANALYTICS_CHANNEL, useJqlPackageAnalytics } from '@atlaskit/jql-editor-common';
 export const useJqlEditorAnalytics = analyticsSource => {
-  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "4.0.4", ANALYTICS_CHANNEL);
+  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "4.0.5", ANALYTICS_CHANNEL);
 };

package/dist/es2019/common/styled.js

@@ -3,17 +3,17 @@ import styled from '@emotion/styled';
 import { fontFamily } from '@atlaskit/theme/constants';
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const hiddenMixin = css`
-  clip: rect(1px, 1px, 1px, 1px);
-  clip-path: inset(50%);
-  height: 1px;
-  width: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-`;
-export const TooltipContent = styled.div`
-  /* CSS reset */
-  font-family: ${fontFamily};
-`;
+export const hiddenMixin = css({
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  clipPath: 'inset(50%)',
+  height: '1px',
+  width: '1px',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- needs manual remediation
+  margin: '-1px',
+  overflow: 'hidden',
+  padding: 0,
+  position: 'absolute'
+});
+export const TooltipContent = styled.div({
+  fontFamily: fontFamily()
+});

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

@@ -1,20 +1,16 @@
 import styled from '@emotion/styled';
 import { N40, N50 } from '@atlaskit/theme/colors';
-export const ExpandToggleContainer = styled.div`
+export const ExpandToggleContainer = styled.div({
   /* Override background styles for our button to match designs */
-
-  > button {
-    border-radius: 100%;
+  '> button': {
+    borderRadius: '100%',
     /* 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})`};
-    }
-
-    &:active,
-    &[data-firefox-is-active='true'] {
-      background: ${`var(--ds-background-neutral-subtle-pressed, ${N50})`};
+    margin: `${"var(--ds-space-050, 4px)"} 0`,
+    '&:hover': {
+      background: `var(--ds-background-neutral-subtle-hovered, ${N40})`
+    },
+    "&:active, &[data-firefox-is-active='true']": {
+      background: `var(--ds-background-neutral-subtle-pressed, ${N50})`
     }
   }
-`;
+});

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

@@ -1,29 +1,21 @@
 import styled from '@emotion/styled';
 import { N50, N500, N600, N70 } from '@atlaskit/theme/colors';
-export const SyntaxHelpContainer = styled.div`
-  /* Override background styles for our button to match designs */
-
-  > a {
-    background: ${`var(--ds-background-neutral-bold, ${N70})`};
-    border-radius: 100%;
-    /* Fill the remaining vertical space for a single line in our editor and space between buttons */
-    margin: ${"var(--ds-space-050, 4px)"};
-
-    &:hover {
-      background: ${`var(--ds-background-neutral-bold-hovered, ${N500})`};
-    }
-
-    &:focus {
-      background: ${`var(--ds-background-neutral-bold, ${N70})`};
-    }
-
-    &:active,
-    &[data-firefox-is-active='true'] {
-      background: ${`var(--ds-background-neutral-bold-pressed, ${N600})`};
-    }
-
-    &[disabled] {
-      background: ${`var(--ds-background-disabled, ${N50})`};
+export const SyntaxHelpContainer = styled.div({
+  '> a': {
+    background: `var(--ds-background-neutral-bold, ${N70})`,
+    borderRadius: '100%',
+    margin: "var(--ds-space-050, 4px)",
+    '&:hover': {
+      background: `var(--ds-background-neutral-bold-hovered, ${N500})`
+    },
+    '&:focus': {
+      background: `var(--ds-background-neutral-bold, ${N70})`
+    },
+    "&:active, &[data-firefox-is-active='true']": {
+      background: `var(--ds-background-neutral-bold-pressed, ${N600})`
+    },
+    '&[disabled]': {
+      background: `var(--ds-background-disabled, ${N50})`
     }
   }
-`;
+});

package/dist/es2019/ui/jql-editor-footer-content/jql-editor-help/styled.js

@@ -1,23 +1,19 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { hiddenMixin } from '../../../common/styled';
-export const HelpContainer = styled.div`
-  display: flex;
-  margin-left: auto;
-  margin-right: 0;
-  flex-shrink: 0;
-  padding: 0 ${"var(--ds-space-100, 8px)"};
-
-  > * + * {
-    margin-left: ${"var(--ds-space-200, 16px)"};
+export const HelpContainer = styled.div({
+  display: 'flex',
+  marginLeft: 'auto',
+  marginRight: 0,
+  flexShrink: 0,
+  padding: `0 ${"var(--ds-space-100, 8px)"}`,
+  '> * + *': {
+    marginLeft: "var(--ds-space-200, 16px)"
   }
-
-  ${props => props.isVisible ? css`
-          visibility: visible;
-          opacity: 1;
-          transition: opacity 250ms cubic-bezier(0.15, 1, 0.3, 1);
-        ` : css`
-          ${hiddenMixin};
-          opacity: 0;
-        `}
-`;
+}, props => props.isVisible ? css({
+  visibility: 'visible',
+  opacity: 1,
+  transition: 'opacity 250ms cubic-bezier(0.15, 1, 0.3, 1)'
+}) : css(hiddenMixin, {
+  opacity: 0
+}));

package/dist/es2019/ui/jql-editor-footer-content/jql-messages/format/styled.js

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
-export const MessageContainer = styled.div`
-  padding-left: ${props => props.isSearch ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)"};
-`;
-export const MessageList = styled.ul`
-  margin: 0;
-  padding-left: ${"var(--ds-space-300, 24px)"};
-`;
+export const MessageContainer = styled.div(props => ({
+  paddingLeft: props.isSearch ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)"
+}));
+export const MessageList = styled.ul({
+  margin: 0,
+  paddingLeft: "var(--ds-space-300, 24px)"
+});

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

@@ -5,25 +5,25 @@ import { codeFontFamily, fontFamily, fontSize,
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 gridSize, layers } from '@atlaskit/theme/constants';
 import { TOOLTIP_CLASSNAME, TOOLTIP_ENTER_CLASSNAME, TOOLTIP_EXIT_CLASSNAME } from '../../plugins/validation-tooltip/constants';
-const fadeIn = keyframes`
-  from {
-    opacity: 0;
+const fadeIn = keyframes({
+  from: {
+    opacity: 0
+  },
+  to: {
+    opacity: 1
   }
-
-  to {
-    opacity: 1;
-  }
-`;
-const fadeOut = keyframes`
-  from {
-    visibility: visible;
-    opacity: 1;
+});
+const fadeOut = keyframes({
+  from: {
+    visibility: 'visible',
+    opacity: 1
+  },
+  to: {
+    opacity: 0
   }
+});
 
-  to {
-    opacity: 0;
-  }
-`;
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation
 export const EditorMain = styled.div`
   /* CSS reset */
   font-family: ${fontFamily};
@@ -61,63 +61,57 @@ export const EditorMain = styled.div`
     }
   }
 `;
-export const EditorFooter = styled.div`
-  display: flex;
-  justify-content: space-between;
-  /* We always have at least 1 row of space allocated to the footer */
-  min-height: 20px;
-`;
+export const EditorFooter = styled.div({
+  display: 'flex',
+  justifyContent: 'space-between',
+  minHeight: '20px'
+});
 
 // Height (in px) for a single row in the editor
 const rowHeight = gridSize() * 2.75;
 // Vertical padding for the editor input
 const getEditorInputVerticalPadding = isCompact => isCompact ? 3 : 7;
 const editorInputHorizontalPadding = 6;
-export const EditorViewContainer = styled.div`
-  background-color: ${`var(--ds-background-input, ${N10})`};
-  border-style: solid;
-  border-width: 2px;
-  border-color: ${`var(--ds-border, ${N40})`};
-  border-radius: ${"var(--ds-border-radius-100, 3px)"};
-  box-sizing: border-box;
-  color: ${`var(--ds-text, ${N900})`};
-  display: flex;
-  overflow: auto;
-  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
-
-  ${props => props.editorViewHasFocus ? css`
-          background-color: ${`var(--ds-surface, ${N0})`};
-          border-color: ${`var(--ds-border-focused, ${B100})`};
-        ` : css`
-          :hover {
-            background-color: ${`var(--ds-background-input-hovered, ${N30})`};
-          }
-        `}
-
-  ${props => props.editorViewIsInvalid && css`
-      border-color: ${`var(--ds-border-danger, ${R400})`};
-    `}
-`;
-export const ReadOnlyEditorViewContainer = styled(EditorViewContainer)`
-  background-color: ${`var(--ds-background-disabled, ${N30})`};
-  color: ${`var(--ds-text-disabled, ${N100})`};
-  pointer-events: none;
-`;
-export const LineNumberToolbar = styled.div`
-  background-color: ${`var(--ds-background-neutral, ${N30})`};
-  flex-shrink: 0;
-  width: 30px;
-  position: sticky;
-  top: 0;
-
-  ${props => !props.lineNumbersVisible && css`
-      display: none;
-    `}
-`;
+export const EditorViewContainer = styled.div({
+  backgroundColor: `var(--ds-background-input, ${N10})`,
+  borderStyle: 'solid',
+  borderWidth: '2px',
+  borderColor: `var(--ds-border, ${N40})`,
+  borderRadius: "var(--ds-border-radius-100, 3px)",
+  boxSizing: 'border-box',
+  color: `var(--ds-text, ${N900})`,
+  display: 'flex',
+  overflow: 'auto',
+  transition: 'background-color 0.2s ease-in-out, border-color 0.2s ease-in-out'
+}, props => props.editorViewHasFocus ? css({
+  backgroundColor: `var(--ds-surface, ${N0})`,
+  borderColor: `var(--ds-border-focused, ${B100})`
+}) : css({
+  ':hover': {
+    backgroundColor: `var(--ds-background-input-hovered, ${N30})`
+  }
+}), props => props.editorViewIsInvalid && css({
+  borderColor: `var(--ds-border-danger, ${R400})`
+}));
+export const ReadOnlyEditorViewContainer = styled(EditorViewContainer)({
+  backgroundColor: `var(--ds-background-disabled, ${N30})`,
+  color: `var(--ds-text-disabled, ${N100})`,
+  pointerEvents: 'none'
+});
+export const LineNumberToolbar = styled.div({
+  backgroundColor: `var(--ds-background-neutral, ${N30})`,
+  flexShrink: 0,
+  width: '30px',
+  position: 'sticky',
+  top: 0
+}, props => !props.lineNumbersVisible && css({
+  display: 'none'
+}));
 
 /**
  * The main div which the Prosemirror editor will be rendered into.
  */
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation
 export const EditorView = styled.div`
   counter-reset: lineNumber;
   flex-grow: 1;
@@ -127,7 +121,7 @@ export const EditorView = styled.div`
   max-height: ${props => rowHeight * props.defaultMaxRows + getEditorInputVerticalPadding(props.isCompact) * 2}px;
 
   line-height: ${rowHeight / fontSize()};
-  font-family: ${codeFontFamily};
+  font-family: ${codeFontFamily()};
   word-break: break-word;
   overflow-wrap: anywhere;
   white-space: pre-wrap;
@@ -191,12 +185,17 @@ export const EditorView = styled.div`
       overflow: hidden;
       white-space: nowrap;
 
-      ${props => !props.lineNumbersVisible && css`
+      ${props => !props.lineNumbersVisible &&
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+css`
           display: none;
         `}
     }
   }
 `;
+
+// FIXME: convert-props-syntax rule doesn't catch this
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression
 export const ReadOnlyEditorView = styled(EditorView)`
   /* We need to replicate padding from the inner prosemirror element in our read only state. That means we also need
   recompute max height excluding the child padding. */
@@ -209,15 +208,15 @@ export const ReadOnlyEditorView = styled(EditorView)`
     min-height: ${rowHeight}px;
   }
 `;
-export const EditorControls = styled.div`
-  align-items: center;
-  display: flex;
-  flex-shrink: 0;
-  margin-left: auto;
-  margin-right: ${props => props.isSearch ? getEditorInputVerticalPadding(props.isCompact) - 1 // the search button needs the same vertical & horizontal spacing
-: editorInputHorizontalPadding - 3}px;
-  line-height: normal;
-  position: sticky;
-  top: 0;
-  height: ${props => rowHeight + 2 * getEditorInputVerticalPadding(props.isCompact)}px;
-`;
+export const EditorControls = styled.div(props => ({
+  alignItems: 'center',
+  display: 'flex',
+  flexShrink: 0,
+  marginLeft: 'auto',
+  marginRight: `${props.isSearch ? getEditorInputVerticalPadding(props.isCompact) - 1 // the search button needs the same vertical & horizontal spacing
+  : editorInputHorizontalPadding - 3}px`,
+  lineHeight: 'normal',
+  position: 'sticky',
+  top: 0,
+  height: `${rowHeight + 2 * getEditorInputVerticalPadding(props.isCompact)}px`
+}));

package/dist/es2019/ui/tooltip-tag/styled.js

@@ -1,4 +1,4 @@
 import styled from '@emotion/styled';
-export const StyledTooltipTag = styled.div`
-  display: flex;
-`;
+export const StyledTooltipTag = styled.div({
+  display: 'flex'
+});

package/dist/esm/accessibility/styled.js

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import styled from '@emotion/styled';
 import { hiddenMixin } from '../common/styled';
-export var ScreenReaderText = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), hiddenMixin);
+export var ScreenReaderText = styled.div(hiddenMixin);

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", "4.0.4", ANALYTICS_CHANNEL);
+  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "4.0.5", ANALYTICS_CHANNEL);
 };

package/dist/esm/common/styled.js

@@ -1,9 +1,19 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { fontFamily } from '@atlaskit/theme/constants';
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export var hiddenMixin = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  clip: rect(1px, 1px, 1px, 1px);\n  clip-path: inset(50%);\n  height: 1px;\n  width: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n"])));
-export var TooltipContent = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  /* CSS reset */\n  font-family: ", ";\n"])), fontFamily);
+export var hiddenMixin = css({
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  clipPath: 'inset(50%)',
+  height: '1px',
+  width: '1px',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- needs manual remediation
+  margin: '-1px',
+  overflow: 'hidden',
+  padding: 0,
+  position: 'absolute'
+});
+export var TooltipContent = styled.div({
+  fontFamily: fontFamily()
+});

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

@@ -1,5 +1,16 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import styled from '@emotion/styled';
 import { N40, N50 } from '@atlaskit/theme/colors';
-export var ExpandToggleContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* Override background styles for our button to match designs */\n\n  > button {\n    border-radius: 100%;\n    /* Fill the remaining vertical space for a single line in our editor and space between buttons */\n    margin: ", " 0;\n\n    &:hover {\n      background: ", ";\n    }\n\n    &:active,\n    &[data-firefox-is-active='true'] {\n      background: ", ";\n    }\n  }\n"])), "var(--ds-space-050, 4px)", "var(--ds-background-neutral-subtle-hovered, ".concat(N40, ")"), "var(--ds-background-neutral-subtle-pressed, ".concat(N50, ")"));
+export var ExpandToggleContainer = styled.div({
+  /* Override background styles for our button to match designs */
+  '> button': {
+    borderRadius: '100%',
+    /* Fill the remaining vertical space for a single line in our editor and space between buttons */
+    margin: "var(--ds-space-050, 4px)".concat(" 0"),
+    '&:hover': {
+      background: "var(--ds-background-neutral-subtle-hovered, ".concat(N40, ")")
+    },
+    "&:active, &[data-firefox-is-active='true']": {
+      background: "var(--ds-background-neutral-subtle-pressed, ".concat(N50, ")")
+    }
+  }
+});

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

@@ -1,5 +1,21 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import styled from '@emotion/styled';
 import { N50, N500, N600, N70 } from '@atlaskit/theme/colors';
-export var SyntaxHelpContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* Override background styles for our button to match designs */\n\n  > a {\n    background: ", ";\n    border-radius: 100%;\n    /* Fill the remaining vertical space for a single line in our editor and space between buttons */\n    margin: ", ";\n\n    &:hover {\n      background: ", ";\n    }\n\n    &:focus {\n      background: ", ";\n    }\n\n    &:active,\n    &[data-firefox-is-active='true'] {\n      background: ", ";\n    }\n\n    &[disabled] {\n      background: ", ";\n    }\n  }\n"])), "var(--ds-background-neutral-bold, ".concat(N70, ")"), "var(--ds-space-050, 4px)", "var(--ds-background-neutral-bold-hovered, ".concat(N500, ")"), "var(--ds-background-neutral-bold, ".concat(N70, ")"), "var(--ds-background-neutral-bold-pressed, ".concat(N600, ")"), "var(--ds-background-disabled, ".concat(N50, ")"));
+export var SyntaxHelpContainer = styled.div({
+  '> a': {
+    background: "var(--ds-background-neutral-bold, ".concat(N70, ")"),
+    borderRadius: '100%',
+    margin: "var(--ds-space-050, 4px)",
+    '&:hover': {
+      background: "var(--ds-background-neutral-bold-hovered, ".concat(N500, ")")
+    },
+    '&:focus': {
+      background: "var(--ds-background-neutral-bold, ".concat(N70, ")")
+    },
+    "&:active, &[data-firefox-is-active='true']": {
+      background: "var(--ds-background-neutral-bold-pressed, ".concat(N600, ")")
+    },
+    '&[disabled]': {
+      background: "var(--ds-background-disabled, ".concat(N50, ")")
+    }
+  }
+});

package/dist/esm/ui/jql-editor-footer-content/jql-editor-help/styled.js

@@ -1,8 +1,21 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { hiddenMixin } from '../../../common/styled';
-export var HelpContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: auto;\n  margin-right: 0;\n  flex-shrink: 0;\n  padding: 0 ", ";\n\n  > * + * {\n    margin-left: ", ";\n  }\n\n  ", "\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", function (props) {
-  return props.isVisible ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          visibility: visible;\n          opacity: 1;\n          transition: opacity 250ms cubic-bezier(0.15, 1, 0.3, 1);\n        "]))) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          ", ";\n          opacity: 0;\n        "])), hiddenMixin);
+export var HelpContainer = styled.div({
+  display: 'flex',
+  marginLeft: 'auto',
+  marginRight: 0,
+  flexShrink: 0,
+  padding: "0 ".concat("var(--ds-space-100, 8px)"),
+  '> * + *': {
+    marginLeft: "var(--ds-space-200, 16px)"
+  }
+}, function (props) {
+  return props.isVisible ? css({
+    visibility: 'visible',
+    opacity: 1,
+    transition: 'opacity 250ms cubic-bezier(0.15, 1, 0.3, 1)'
+  }) : css(hiddenMixin, {
+    opacity: 0
+  });
 });

package/dist/esm/ui/jql-editor-footer-content/jql-messages/format/styled.js

@@ -1,7 +1,10 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
 import styled from '@emotion/styled';
-export var MessageContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-left: ", ";\n"])), function (props) {
-  return props.isSearch ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
+export var MessageContainer = styled.div(function (props) {
+  return {
+    paddingLeft: props.isSearch ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)"
+  };
 });
-export var MessageList = styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding-left: ", ";\n"])), "var(--ds-space-300, 24px)");
+export var MessageList = styled.ul({
+  margin: 0,
+  paddingLeft: "var(--ds-space-300, 24px)"
+});

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

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { css, keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 import { B100, B300, G300, N0, N10, N100, N30, N40, N700, N800, N900, P400, R400 } from '@atlaskit/theme/colors';
@@ -7,10 +7,31 @@ import { codeFontFamily, fontFamily, fontSize,
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 gridSize, layers } from '@atlaskit/theme/constants';
 import { TOOLTIP_CLASSNAME, TOOLTIP_ENTER_CLASSNAME, TOOLTIP_EXIT_CLASSNAME } from '../../plugins/validation-tooltip/constants';
-var fadeIn = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n"])));
-var fadeOut = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  from {\n    visibility: visible;\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n"])));
-export var EditorMain = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  /* CSS reset */\n  font-family: ", ";\n  font-size: ", "px;\n  flex-grow: 1;\n\n  /* These styles and animations are derived from @atlaskit/tooltip */\n\n  .", " {\n    background-color: ", ";\n    color: ", ";\n    border-radius: ", ";\n    box-sizing: border-box;\n    font-size: 12px;\n    line-height: 1.3;\n    max-width: 240px;\n    padding: ", " ", ";\n    word-wrap: break-word;\n    overflow-wrap: break-word;\n    z-index: ", ";\n    pointer-events: none;\n    position: absolute;\n    visibility: hidden;\n\n    /* Horizontally center and vertically position above the target element */\n    transform: translate(-50%, calc(-100% - ", "));\n\n    &.", " {\n      animation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n      visibility: visible;\n    }\n\n    &.", " {\n      animation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n    }\n  }\n"])), fontFamily, fontSize, TOOLTIP_CLASSNAME, "var(--ds-background-neutral-bold, ".concat(N800, ")"), "var(--ds-text-inverse, ".concat(N0, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-space-025, 2px)", "var(--ds-space-075, 6px)", layers.tooltip(), "var(--ds-space-200, 16px)", TOOLTIP_ENTER_CLASSNAME, fadeIn, TOOLTIP_EXIT_CLASSNAME, fadeOut);
-export var EditorFooter = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  /* We always have at least 1 row of space allocated to the footer */\n  min-height: 20px;\n"])));
+var fadeIn = keyframes({
+  from: {
+    opacity: 0
+  },
+  to: {
+    opacity: 1
+  }
+});
+var fadeOut = keyframes({
+  from: {
+    visibility: 'visible',
+    opacity: 1
+  },
+  to: {
+    opacity: 0
+  }
+});
+
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation
+export var EditorMain = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* CSS reset */\n  font-family: ", ";\n  font-size: ", "px;\n  flex-grow: 1;\n\n  /* These styles and animations are derived from @atlaskit/tooltip */\n\n  .", " {\n    background-color: ", ";\n    color: ", ";\n    border-radius: ", ";\n    box-sizing: border-box;\n    font-size: 12px;\n    line-height: 1.3;\n    max-width: 240px;\n    padding: ", " ", ";\n    word-wrap: break-word;\n    overflow-wrap: break-word;\n    z-index: ", ";\n    pointer-events: none;\n    position: absolute;\n    visibility: hidden;\n\n    /* Horizontally center and vertically position above the target element */\n    transform: translate(-50%, calc(-100% - ", "));\n\n    &.", " {\n      animation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n      visibility: visible;\n    }\n\n    &.", " {\n      animation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n    }\n  }\n"])), fontFamily, fontSize, TOOLTIP_CLASSNAME, "var(--ds-background-neutral-bold, ".concat(N800, ")"), "var(--ds-text-inverse, ".concat(N0, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-space-025, 2px)", "var(--ds-space-075, 6px)", layers.tooltip(), "var(--ds-space-200, 16px)", TOOLTIP_ENTER_CLASSNAME, fadeIn, TOOLTIP_EXIT_CLASSNAME, fadeOut);
+export var EditorFooter = styled.div({
+  display: 'flex',
+  justifyContent: 'space-between',
+  minHeight: '20px'
+});
 
 // Height (in px) for a single row in the editor
 var rowHeight = gridSize() * 2.75;
@@ -19,38 +40,83 @@ var getEditorInputVerticalPadding = function getEditorInputVerticalPadding(isCom
   return isCompact ? 3 : 7;
 };
 var editorInputHorizontalPadding = 6;
-export var EditorViewContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-style: solid;\n  border-width: 2px;\n  border-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  overflow: auto;\n  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;\n\n  ", "\n\n  ", "\n"])), "var(--ds-background-input, ".concat(N10, ")"), "var(--ds-border, ".concat(N40, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(N900, ")"), function (props) {
-  return props.editorViewHasFocus ? css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          background-color: ", ";\n          border-color: ", ";\n        "])), "var(--ds-surface, ".concat(N0, ")"), "var(--ds-border-focused, ".concat(B100, ")")) : css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          :hover {\n            background-color: ", ";\n          }\n        "])), "var(--ds-background-input-hovered, ".concat(N30, ")"));
+export var EditorViewContainer = styled.div({
+  backgroundColor: "var(--ds-background-input, ".concat(N10, ")"),
+  borderStyle: 'solid',
+  borderWidth: '2px',
+  borderColor: "var(--ds-border, ".concat(N40, ")"),
+  borderRadius: "var(--ds-border-radius-100, 3px)",
+  boxSizing: 'border-box',
+  color: "var(--ds-text, ".concat(N900, ")"),
+  display: 'flex',
+  overflow: 'auto',
+  transition: 'background-color 0.2s ease-in-out, border-color 0.2s ease-in-out'
+}, function (props) {
+  return props.editorViewHasFocus ? css({
+    backgroundColor: "var(--ds-surface, ".concat(N0, ")"),
+    borderColor: "var(--ds-border-focused, ".concat(B100, ")")
+  }) : css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-input-hovered, ".concat(N30, ")")
+    }
+  });
 }, function (props) {
-  return props.editorViewIsInvalid && css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      border-color: ", ";\n    "])), "var(--ds-border-danger, ".concat(R400, ")"));
+  return props.editorViewIsInvalid && css({
+    borderColor: "var(--ds-border-danger, ".concat(R400, ")")
+  });
 });
-export var ReadOnlyEditorViewContainer = styled(EditorViewContainer)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  color: ", ";\n  pointer-events: none;\n"])), "var(--ds-background-disabled, ".concat(N30, ")"), "var(--ds-text-disabled, ".concat(N100, ")"));
-export var LineNumberToolbar = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  flex-shrink: 0;\n  width: 30px;\n  position: sticky;\n  top: 0;\n\n  ", "\n"])), "var(--ds-background-neutral, ".concat(N30, ")"), function (props) {
-  return !props.lineNumbersVisible && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      display: none;\n    "])));
+export var ReadOnlyEditorViewContainer = styled(EditorViewContainer)({
+  backgroundColor: "var(--ds-background-disabled, ".concat(N30, ")"),
+  color: "var(--ds-text-disabled, ".concat(N100, ")"),
+  pointerEvents: 'none'
+});
+export var LineNumberToolbar = styled.div({
+  backgroundColor: "var(--ds-background-neutral, ".concat(N30, ")"),
+  flexShrink: 0,
+  width: '30px',
+  position: 'sticky',
+  top: 0
+}, function (props) {
+  return !props.lineNumbersVisible && css({
+    display: 'none'
+  });
 });
 
 /**
  * The main div which the Prosemirror editor will be rendered into.
  */
-export var EditorView = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  counter-reset: lineNumber;\n  flex-grow: 1;\n\n  transition: height 250ms cubic-bezier(0.15, 1, 0.3, 1),\n    max-height 250ms cubic-bezier(0.15, 1, 0.3, 1);\n  max-height: ", "px;\n\n  line-height: ", ";\n  font-family: ", ";\n  word-break: break-word;\n  overflow-wrap: anywhere;\n  white-space: pre-wrap;\n\n  &[data-expanded] {\n    height: ", "px;\n    max-height: ", "px;\n  }\n\n  .ProseMirror {\n    color: ", ";\n    padding: ", "px\n      ", "px;\n\n    &:focus {\n      outline: none;\n    }\n\n    .mark-token-keyword {\n      color: ", ";\n    }\n\n    .mark-token-field {\n      color: ", ";\n    }\n\n    .mark-token-operator {\n      color: ", ";\n    }\n\n    .mark-token-error {\n      color: ", ";\n      text-decoration: wavy underline;\n      text-decoration-thickness: 1px;\n      text-decoration-skip-ink: none;\n    }\n  }\n\n  p {\n    margin: 0;\n    counter-increment: lineNumber;\n    position: relative;\n\n    /* Show the current line number before each paragraph block. */\n\n    &::before {\n      content: counter(lineNumber);\n      color: ", ";\n      font-size: 10px;\n      line-height: ", ";\n      padding: 0 ", " 0 ", ";\n      position: absolute;\n      box-sizing: border-box;\n      /* Shift the line number tag 100% (plus 8px padding) to the left to position it inside the LineNumberToolbar */\n      transform: translateX(calc(-100% - ", "));\n\n      /* We can fit 3 digits before ellipses. This is not very responsive but saves us having to add expensive width\n        recalculation logic to the LineNumberToolbar for a scenario that *should* never happen. */\n      max-width: 30px;\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n\n      ", "\n    }\n  }\n"])), function (props) {
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation
+export var EditorView = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  counter-reset: lineNumber;\n  flex-grow: 1;\n\n  transition: height 250ms cubic-bezier(0.15, 1, 0.3, 1),\n    max-height 250ms cubic-bezier(0.15, 1, 0.3, 1);\n  max-height: ", "px;\n\n  line-height: ", ";\n  font-family: ", ";\n  word-break: break-word;\n  overflow-wrap: anywhere;\n  white-space: pre-wrap;\n\n  &[data-expanded] {\n    height: ", "px;\n    max-height: ", "px;\n  }\n\n  .ProseMirror {\n    color: ", ";\n    padding: ", "px\n      ", "px;\n\n    &:focus {\n      outline: none;\n    }\n\n    .mark-token-keyword {\n      color: ", ";\n    }\n\n    .mark-token-field {\n      color: ", ";\n    }\n\n    .mark-token-operator {\n      color: ", ";\n    }\n\n    .mark-token-error {\n      color: ", ";\n      text-decoration: wavy underline;\n      text-decoration-thickness: 1px;\n      text-decoration-skip-ink: none;\n    }\n  }\n\n  p {\n    margin: 0;\n    counter-increment: lineNumber;\n    position: relative;\n\n    /* Show the current line number before each paragraph block. */\n\n    &::before {\n      content: counter(lineNumber);\n      color: ", ";\n      font-size: 10px;\n      line-height: ", ";\n      padding: 0 ", " 0 ", ";\n      position: absolute;\n      box-sizing: border-box;\n      /* Shift the line number tag 100% (plus 8px padding) to the left to position it inside the LineNumberToolbar */\n      transform: translateX(calc(-100% - ", "));\n\n      /* We can fit 3 digits before ellipses. This is not very responsive but saves us having to add expensive width\n        recalculation logic to the LineNumberToolbar for a scenario that *should* never happen. */\n      max-width: 30px;\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n\n      ", "\n    }\n  }\n"])), function (props) {
   return rowHeight * props.defaultMaxRows + getEditorInputVerticalPadding(props.isCompact) * 2;
-}, rowHeight / fontSize(), codeFontFamily, function (props) {
+}, rowHeight / fontSize(), codeFontFamily(), function (props) {
   return rowHeight * props.expandedRows + getEditorInputVerticalPadding(props.isCompact) * 2;
 }, function (props) {
   return rowHeight * props.expandedRows + getEditorInputVerticalPadding(props.isCompact) * 2;
 }, "var(--ds-text, ".concat(N700, ")"), function (props) {
   return getEditorInputVerticalPadding(props.isCompact);
 }, editorInputHorizontalPadding, "var(--ds-text-accent-purple, ".concat(P400, ")"), "var(--ds-text-accent-blue, ".concat(B300, ")"), "var(--ds-text-accent-green, ".concat(G300, ")"), "var(--ds-text-danger, ".concat(R400, ")"), "var(--ds-text-subtlest, ".concat(N100, ")"), rowHeight / 10, "var(--ds-space-100, 8px)", "var(--ds-space-025, 2px)", "var(--ds-space-100, 8px)", function (props) {
-  return !props.lineNumbersVisible && css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n          display: none;\n        "])));
+  return !props.lineNumbersVisible && // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          display: none;\n        "])));
 });
-export var ReadOnlyEditorView = styled(EditorView)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  /* We need to replicate padding from the inner prosemirror element in our read only state. That means we also need\n  recompute max height excluding the child padding. */\n  padding: ", "px\n    ", "px;\n  max-height: ", "px;\n\n  > p {\n    /* Prevent collapsing empty paragraphs */\n    min-height: ", "px;\n  }\n"])), function (props) {
+
+// FIXME: convert-props-syntax rule doesn't catch this
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression
+export var ReadOnlyEditorView = styled(EditorView)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  /* We need to replicate padding from the inner prosemirror element in our read only state. That means we also need\n  recompute max height excluding the child padding. */\n  padding: ", "px\n    ", "px;\n  max-height: ", "px;\n\n  > p {\n    /* Prevent collapsing empty paragraphs */\n    min-height: ", "px;\n  }\n"])), function (props) {
   return getEditorInputVerticalPadding(props.isCompact);
 }, editorInputHorizontalPadding, function (props) {
   return rowHeight * props.defaultMaxRows;
 }, rowHeight);
-export var EditorControls = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  flex-shrink: 0;\n  margin-left: auto;\n  margin-right: ", "px;\n  line-height: normal;\n  position: sticky;\n  top: 0;\n  height: ", "px;\n"])), function (props) {
-  return props.isSearch ? getEditorInputVerticalPadding(props.isCompact) - 1 // the search button needs the same vertical & horizontal spacing
-  : editorInputHorizontalPadding - 3;
-}, function (props) {
-  return rowHeight + 2 * getEditorInputVerticalPadding(props.isCompact);
+export var EditorControls = styled.div(function (props) {
+  return {
+    alignItems: 'center',
+    display: 'flex',
+    flexShrink: 0,
+    marginLeft: 'auto',
+    marginRight: "".concat(props.isSearch ? getEditorInputVerticalPadding(props.isCompact) - 1 // the search button needs the same vertical & horizontal spacing
+    : editorInputHorizontalPadding - 3, "px"),
+    lineHeight: 'normal',
+    position: 'sticky',
+    top: 0,
+    height: "".concat(rowHeight + 2 * getEditorInputVerticalPadding(props.isCompact), "px")
+  };
 });

package/dist/esm/ui/tooltip-tag/styled.js

@@ -1,4 +1,4 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import styled from '@emotion/styled';
-export var StyledTooltipTag = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+export var StyledTooltipTag = styled.div({
+  display: 'flex'
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/jql-editor",
-  "version": "4.0.4",
+  "version": "4.0.5",
   "description": "This package allows consumers to render an advanced JQL editor component to enable autocomplete-assisted authoring and validation of JQL queries.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -39,18 +39,18 @@
     "@atlaskit/analytics-gas-types": "^5.1.0",
     "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/avatar": "^21.5.0",
-    "@atlaskit/button": "^17.7.0",
+    "@atlaskit/button": "^17.12.0",
     "@atlaskit/editor-prosemirror": "3.0.0",
-    "@atlaskit/form": "^9.0.3",
+    "@atlaskit/form": "^9.1.0",
     "@atlaskit/icon": "^22.1.0",
-    "@atlaskit/jql-ast": "^3.1.0",
+    "@atlaskit/jql-ast": "^3.2.0",
     "@atlaskit/jql-autocomplete": "^2.0.0",
     "@atlaskit/jql-editor-common": "^2.0.0",
     "@atlaskit/jql-parser": "^2.0.0",
     "@atlaskit/spinner": "^16.0.0",
-    "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.42.0",
-    "@atlaskit/tooltip": "^18.1.0",
+    "@atlaskit/theme": "^12.7.0",
+    "@atlaskit/tokens": "^1.43.0",
+    "@atlaskit/tooltip": "^18.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.0.0",