@atlaskit/quick-search 8.1.10 → 8.1.11

package/compass.yml

@@ -41,6 +41,5 @@ customFields:
   - name: Test
     type: text
     value: null
-
 # Learn more about formatting compass.yml:
 # https://go.atlassian.com/compass-yml-format

package/dist/cjs/components/ResultItem/styled.js

@@ -5,18 +5,74 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ResultItemTextAfter = exports.ResultItemSubText = exports.ResultItemIcon = exports.ResultItemGroupTitle = exports.ResultItemGroupHeader = exports.ResultItemCaption = exports.ResultItemAfterWrapper = exports.ResultItemAfter = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _colors = require("@atlaskit/theme/colors");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-var ResultItemGroupHeader = exports.ResultItemGroupHeader = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: ", ";\n  margin-top: ", ";\n"])), "var(--ds-space-negative-150, -12px)", "var(--ds-space-150, 12px)");
-var ResultItemGroupTitle = exports.ResultItemGroupTitle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 11px;\n  line-height: 16px;\n  font-weight: 600;\n"])));
-var ResultItemAfter = exports.ResultItemAfter = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: ", ";\n"])), function (_ref) {
-  var shouldTakeSpace = _ref.shouldTakeSpace;
-  return shouldTakeSpace ? '24px' : 0;
-});
-var ResultItemAfterWrapper = exports.ResultItemAfterWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
-var ResultItemCaption = exports.ResultItemCaption = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 12px;\n  margin-left: ", ";\n"])), _colors.N200, "var(--ds-space-100, 8px)");
-var ResultItemSubText = exports.ResultItemSubText = _styledComponents.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 12px;\n  color: ", ";\n"])), _colors.N200);
-var ResultItemIcon = exports.ResultItemIcon = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: padding 200ms;\n\n  > * {\n    flex: 1 0 auto;\n  }\n\n  /* We need to ensure that any image passed in as a child (<img/>, <svg/>\n    etc.) receives the correct width, height and border radius. We don't\n    currently assume that the image passed in is the correct dimensions, or has\n    width / height 100% */\n  > img {\n    height: ", ";\n    width: ", ";\n  }\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
-var ResultItemTextAfter = exports.ResultItemTextAfter = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  z-index: 1;\n"])));
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var ResultItemGroupHeader = exports.ResultItemGroupHeader = _styledComponents.default.div({
+  display: 'flex',
+  marginLeft: "var(--ds-space-negative-150, -12px)",
+  marginTop: "var(--ds-space-150, 12px)"
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var ResultItemGroupTitle = exports.ResultItemGroupTitle = _styledComponents.default.div({
+  fontSize: '11px',
+  lineHeight: '16px',
+  fontWeight: 600
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
+var ResultItemAfter = exports.ResultItemAfter = _styledComponents.default.div(function (props) {
+  return {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    minWidth: props.shouldTakeSpace ? '24px' : 0
+  };
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var ResultItemAfterWrapper = exports.ResultItemAfterWrapper = _styledComponents.default.div({
+  display: 'flex'
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var ResultItemCaption = exports.ResultItemCaption = _styledComponents.default.span({
+  color: _colors.N200,
+  fontSize: '12px',
+  marginLeft: "var(--ds-space-100, 8px)"
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var ResultItemSubText = exports.ResultItemSubText = _styledComponents.default.span({
+  fontSize: '12px',
+  color: _colors.N200
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var ResultItemIcon = exports.ResultItemIcon = _styledComponents.default.div({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0,
+  transition: 'padding 200ms',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '> *': {
+    flex: '1 0 auto'
+  },
+  /* We need to ensure that any image passed in as a child (<img/>, <svg/>
+     etc.) receives the correct width, height and border radius. We don't
+     currently assume that the image passed in is the correct dimensions, or has
+     width / height 100% */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '> img': {
+    height: "var(--ds-space-300, 24px)",
+    width: "var(--ds-space-300, 24px)"
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var ResultItemTextAfter = exports.ResultItemTextAfter = _styledComponents.default.div({
+  position: 'relative',
+  zIndex: 1
+});

package/dist/cjs/components/Search/Search.js

@@ -12,16 +12,20 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _styled = require("./styled");
-var _templateObject;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var controlKeys = exports.controlKeys = ['ArrowUp', 'ArrowDown', 'Enter', 'Tab', 'ArrowRight'];
-var SpinnerParent = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  margin-left: ", ";\n  margin-top: ", ";\n"])), "var(--ds-space-250, 20px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)");
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
+var SpinnerParent = _styledComponents.default.div({
+  height: "var(--ds-space-250, 20px)",
+  marginLeft: "var(--ds-space-150, 12px)",
+  marginTop: "var(--ds-space-150, 12px)"
+});
 var Search = exports.default = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(Search, _React$PureComponent);
   var _super = _createSuper(Search);

package/dist/cjs/components/Search/styled.js

@@ -9,19 +9,68 @@ exports.getPlaceholderStyle = exports.getPlaceholderColor = exports.SearchInputT
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _colors = require("@atlaskit/theme/colors");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var inputRightPadding = "var(--ds-space-200, 16px)";
-var SearchBox = exports.SearchBox = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: sticky;\n  top: 0;\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  height: 36px;\n  z-index: 10; /* required to keep the search box on top of icons in results when sticky */\n"])), _colors.N0, _colors.N500);
-var SearchFieldBaseOuter = exports.SearchFieldBaseOuter = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1;\n  margin-right: auto;\n  padding-bottom: ", ";\n  border-bottom: 2px solid ", ";\n"])), "var(--ds-space-025, 2px)", _colors.B200);
-var SearchFieldBaseInner = exports.SearchFieldBaseInner = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  align-items: center;\n  padding-right: ", "; /* pad search text from FieldBase's isLoading spinner */\n  display: flex;\n  flex-grow: 1;\n"])), inputRightPadding);
-var SearchInner = exports.SearchInner = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  padding-right: ", ";\n"])), "var(--ds-space-300, 24px)");
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var SearchBox = exports.SearchBox = _styledComponents.default.div({
+  position: 'sticky',
+  top: 0,
+  backgroundColor: _colors.N0,
+  color: _colors.N500,
+  display: 'flex',
+  height: '36px',
+  zIndex: 10 /* required to keep the search box on top of icons in results when sticky */
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var SearchFieldBaseOuter = exports.SearchFieldBaseOuter = _styledComponents.default.div({
+  display: 'flex',
+  flex: 1,
+  marginRight: 'auto',
+  paddingBottom: "var(--ds-space-025, 2px)",
+  borderBottom: "2px solid ".concat(_colors.B200)
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var SearchFieldBaseInner = exports.SearchFieldBaseInner = _styledComponents.default.div({
+  position: 'relative',
+  alignItems: 'center',
+  paddingRight: inputRightPadding /* pad search text from FieldBase's isLoading spinner */,
+  display: 'flex',
+  flexGrow: 1
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var SearchInner = exports.SearchInner = _styledComponents.default.div({
+  paddingRight: "var(--ds-space-300, 24px)"
+});
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 var getPlaceholderStyle = exports.getPlaceholderStyle = function getPlaceholderStyle(style) {
-  return (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  &::-webkit-input-placeholder {\n    ", ";\n  }\n  &::-moz-placeholder {\n    /* Mozilla Firefox 19+ */\n    ", " opacity: 1;\n  }\n  &::-ms-input-placeholder {\n    /* Microsoft Edge */\n    ", ";\n  }\n  &:-moz-placeholder {\n    /* Mozilla Firefox 4 to 18 */\n    ", " opacity: 1;\n  }\n  &:-ms-input-placeholder {\n    /* Internet Explorer 10-11 */\n    ", ";\n  }\n"])), style, style, style, style, style);
+  return (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t&::-webkit-input-placeholder {\n\t\t", ";\n\t}\n\t&::-moz-placeholder {\n\t\t/* Mozilla Firefox 19+ */\n\t\t", " opacity: 1;\n\t}\n\t&::-ms-input-placeholder {\n\t\t/* Microsoft Edge */\n\t\t", ";\n\t}\n\t&:-moz-placeholder {\n\t\t/* Mozilla Firefox 4 to 18 */\n\t\t", " opacity: 1;\n\t}\n\t&:-ms-input-placeholder {\n\t\t/* Internet Explorer 10-11 */\n\t\t", ";\n\t}\n"])), style, style, style, style, style);
 };
-var getPlaceholderColor = exports.getPlaceholderColor = (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"));
-var SearchInput = exports.SearchInput = _styledComponents.default.input(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: transparent;\n  border: 0;\n  color: ", ";\n  flex-grow: 1;\n  font-size: 1.4em;\n  outline: 0;\n  // Safari adds 2px margin-left\n  margin-left: 0;\n  ", ";\n"])), _colors.N500, getPlaceholderStyle(getPlaceholderColor));
-var SearchInputTypeAhead = exports.SearchInputTypeAhead = (0, _styledComponents.default)(SearchInput)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  position: absolute;\n  width: calc(100% - ", ");\n  z-index: -1;\n"])), _colors.N50, inputRightPadding);
-var SearchInputControlsContainer = exports.SearchInputControlsContainer = _styledComponents.default.span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  padding-left: ", ";\n"])), "var(--ds-space-300, 24px)");
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var getPlaceholderColor = exports.getPlaceholderColor = (0, _styledComponents.css)({
+  color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
+});
+
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var SearchInput = exports.SearchInput = _styledComponents.default.input(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\tbackground-color: transparent;\n\tborder: 0;\n\tcolor: ", ";\n\tflex-grow: 1;\n\tfont-size: 1.4em;\n\toutline: 0;\n\t// Safari adds 2px margin-left\n\tmargin-left: 0;\n\t", ";\n"])), _colors.N500, getPlaceholderStyle(getPlaceholderColor));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var SearchInputTypeAhead = exports.SearchInputTypeAhead = (0, _styledComponents.default)(SearchInput)({
+  color: _colors.N50,
+  position: 'absolute',
+  width: "calc(100% - ".concat(inputRightPadding, ")"),
+  zIndex: -1
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var SearchInputControlsContainer = exports.SearchInputControlsContainer = _styledComponents.default.span({
+  paddingLeft: "var(--ds-space-300, 24px)"
+});
 SearchInputControlsContainer.displayName = 'SearchInputControlsContainer'; // required for testing

package/dist/es2019/components/ResultItem/styled.js

@@ -1,53 +1,68 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from 'styled-components';
 import { N200 } from '@atlaskit/theme/colors';
-export const ResultItemGroupHeader = styled.div`
-  display: flex;
-  margin-left: ${"var(--ds-space-negative-150, -12px)"};
-  margin-top: ${"var(--ds-space-150, 12px)"};
-`;
-export const ResultItemGroupTitle = styled.div`
-  font-size: 11px;
-  line-height: 16px;
-  font-weight: 600;
-`;
-export const ResultItemAfter = styled.div`
-  min-width: ${({
-  shouldTakeSpace
-}) => shouldTakeSpace ? '24px' : 0};
-`;
-export const ResultItemAfterWrapper = styled.div`
-  display: flex;
-`;
-export const ResultItemCaption = styled.span`
-  color: ${N200};
-  font-size: 12px;
-  margin-left: ${"var(--ds-space-100, 8px)"};
-`;
-export const ResultItemSubText = styled.span`
-  font-size: 12px;
-  color: ${N200};
-`;
-export const ResultItemIcon = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  transition: padding 200ms;
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const ResultItemGroupHeader = styled.div({
+  display: 'flex',
+  marginLeft: "var(--ds-space-negative-150, -12px)",
+  marginTop: "var(--ds-space-150, 12px)"
+});
 
-  > * {
-    flex: 1 0 auto;
-  }
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const ResultItemGroupTitle = styled.div({
+  fontSize: '11px',
+  lineHeight: '16px',
+  fontWeight: 600
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
+export const ResultItemAfter = styled.div(props => ({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  minWidth: props.shouldTakeSpace ? '24px' : 0
+}));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const ResultItemAfterWrapper = styled.div({
+  display: 'flex'
+});
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const ResultItemCaption = styled.span({
+  color: N200,
+  fontSize: '12px',
+  marginLeft: "var(--ds-space-100, 8px)"
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const ResultItemSubText = styled.span({
+  fontSize: '12px',
+  color: N200
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const ResultItemIcon = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0,
+  transition: 'padding 200ms',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '> *': {
+    flex: '1 0 auto'
+  },
   /* We need to ensure that any image passed in as a child (<img/>, <svg/>
-    etc.) receives the correct width, height and border radius. We don't
-    currently assume that the image passed in is the correct dimensions, or has
-    width / height 100% */
-  > img {
-    height: ${"var(--ds-space-300, 24px)"};
-    width: ${"var(--ds-space-300, 24px)"};
+     etc.) receives the correct width, height and border radius. We don't
+     currently assume that the image passed in is the correct dimensions, or has
+     width / height 100% */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '> img': {
+    height: "var(--ds-space-300, 24px)",
+    width: "var(--ds-space-300, 24px)"
   }
-`;
-export const ResultItemTextAfter = styled.div`
-  position: relative;
-  z-index: 1;
-`;
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const ResultItemTextAfter = styled.div({
+  position: 'relative',
+  zIndex: 1
+});

package/dist/es2019/components/Search/Search.js

@@ -1,14 +1,17 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import Spinner from '@atlaskit/spinner';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from 'styled-components';
 import { SearchBox, SearchFieldBaseInner, SearchInner, SearchInput, SearchFieldBaseOuter, SearchInputControlsContainer, SearchInputTypeAhead } from './styled';
 export const controlKeys = ['ArrowUp', 'ArrowDown', 'Enter', 'Tab', 'ArrowRight'];
-const SpinnerParent = styled.div`
-  height: ${"var(--ds-space-250, 20px)"};
-  margin-left: ${"var(--ds-space-150, 12px)"};
-  margin-top: ${"var(--ds-space-150, 12px)"};
-`;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
+const SpinnerParent = styled.div({
+  height: "var(--ds-space-250, 20px)",
+  marginLeft: "var(--ds-space-150, 12px)",
+  marginTop: "var(--ds-space-150, 12px)"
+});
 export default class Search extends React.PureComponent {
   constructor(...args) {
     super(...args);

package/dist/es2019/components/Search/styled.js

@@ -1,74 +1,93 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled, { css } from 'styled-components';
 import { N0, N200, N500, B200, N50 } from '@atlaskit/theme/colors';
 const inputRightPadding = "var(--ds-space-200, 16px)";
-export const SearchBox = styled.div`
-  position: sticky;
-  top: 0;
-  background-color: ${N0};
-  color: ${N500};
-  display: flex;
-  height: 36px;
-  z-index: 10; /* required to keep the search box on top of icons in results when sticky */
-`;
-export const SearchFieldBaseOuter = styled.div`
-  display: flex;
-  flex: 1;
-  margin-right: auto;
-  padding-bottom: ${"var(--ds-space-025, 2px)"};
-  border-bottom: 2px solid ${B200};
-`;
-export const SearchFieldBaseInner = styled.div`
-  position: relative;
-  align-items: center;
-  padding-right: ${inputRightPadding}; /* pad search text from FieldBase's isLoading spinner */
-  display: flex;
-  flex-grow: 1;
-`;
-export const SearchInner = styled.div`
-  padding-right: ${"var(--ds-space-300, 24px)"};
-`;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const SearchBox = styled.div({
+  position: 'sticky',
+  top: 0,
+  backgroundColor: N0,
+  color: N500,
+  display: 'flex',
+  height: '36px',
+  zIndex: 10 /* required to keep the search box on top of icons in results when sticky */
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const SearchFieldBaseOuter = styled.div({
+  display: 'flex',
+  flex: 1,
+  marginRight: 'auto',
+  paddingBottom: "var(--ds-space-025, 2px)",
+  borderBottom: `2px solid ${B200}`
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const SearchFieldBaseInner = styled.div({
+  position: 'relative',
+  alignItems: 'center',
+  paddingRight: inputRightPadding /* pad search text from FieldBase's isLoading spinner */,
+  display: 'flex',
+  flexGrow: 1
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const SearchInner = styled.div({
+  paddingRight: "var(--ds-space-300, 24px)"
+});
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 export const getPlaceholderStyle = style => css`
-  &::-webkit-input-placeholder {
-    ${style};
-  }
-  &::-moz-placeholder {
-    /* Mozilla Firefox 19+ */
-    ${style} opacity: 1;
-  }
-  &::-ms-input-placeholder {
-    /* Microsoft Edge */
-    ${style};
-  }
-  &:-moz-placeholder {
-    /* Mozilla Firefox 4 to 18 */
-    ${style} opacity: 1;
-  }
-  &:-ms-input-placeholder {
-    /* Internet Explorer 10-11 */
-    ${style};
-  }
-`;
-export const getPlaceholderColor = css`
-  color: ${`var(--ds-text-subtlest, ${N200})`};
+	&::-webkit-input-placeholder {
+		${style};
+	}
+	&::-moz-placeholder {
+		/* Mozilla Firefox 19+ */
+		${style} opacity: 1;
+	}
+	&::-ms-input-placeholder {
+		/* Microsoft Edge */
+		${style};
+	}
+	&:-moz-placeholder {
+		/* Mozilla Firefox 4 to 18 */
+		${style} opacity: 1;
+	}
+	&:-ms-input-placeholder {
+		/* Internet Explorer 10-11 */
+		${style};
+	}
 `;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const getPlaceholderColor = css({
+  color: `var(--ds-text-subtlest, ${N200})`
+});
+
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const SearchInput = styled.input`
-  background-color: transparent;
-  border: 0;
-  color: ${N500};
-  flex-grow: 1;
-  font-size: 1.4em;
-  outline: 0;
-  // Safari adds 2px margin-left
-  margin-left: 0;
-  ${getPlaceholderStyle(getPlaceholderColor)};
-`;
-export const SearchInputTypeAhead = styled(SearchInput)`
-  color: ${N50};
-  position: absolute;
-  width: calc(100% - ${inputRightPadding});
-  z-index: -1;
-`;
-export const SearchInputControlsContainer = styled.span`
-  padding-left: ${"var(--ds-space-300, 24px)"};
+	background-color: transparent;
+	border: 0;
+	color: ${N500};
+	flex-grow: 1;
+	font-size: 1.4em;
+	outline: 0;
+	// Safari adds 2px margin-left
+	margin-left: 0;
+	${getPlaceholderStyle(getPlaceholderColor)};
 `;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const SearchInputTypeAhead = styled(SearchInput)({
+  color: N50,
+  position: 'absolute',
+  width: `calc(100% - ${inputRightPadding})`,
+  zIndex: -1
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const SearchInputControlsContainer = styled.span({
+  paddingLeft: "var(--ds-space-300, 24px)"
+});
 SearchInputControlsContainer.displayName = 'SearchInputControlsContainer'; // required for testing

package/dist/esm/components/ResultItem/styled.js

@@ -1,15 +1,70 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from 'styled-components';
 import { N200 } from '@atlaskit/theme/colors';
-export var ResultItemGroupHeader = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: ", ";\n  margin-top: ", ";\n"])), "var(--ds-space-negative-150, -12px)", "var(--ds-space-150, 12px)");
-export var ResultItemGroupTitle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-size: 11px;\n  line-height: 16px;\n  font-weight: 600;\n"])));
-export var ResultItemAfter = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  min-width: ", ";\n"])), function (_ref) {
-  var shouldTakeSpace = _ref.shouldTakeSpace;
-  return shouldTakeSpace ? '24px' : 0;
-});
-export var ResultItemAfterWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
-export var ResultItemCaption = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 12px;\n  margin-left: ", ";\n"])), N200, "var(--ds-space-100, 8px)");
-export var ResultItemSubText = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  font-size: 12px;\n  color: ", ";\n"])), N200);
-export var ResultItemIcon = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: padding 200ms;\n\n  > * {\n    flex: 1 0 auto;\n  }\n\n  /* We need to ensure that any image passed in as a child (<img/>, <svg/>\n    etc.) receives the correct width, height and border radius. We don't\n    currently assume that the image passed in is the correct dimensions, or has\n    width / height 100% */\n  > img {\n    height: ", ";\n    width: ", ";\n  }\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
-export var ResultItemTextAfter = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 1;\n"])));
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var ResultItemGroupHeader = styled.div({
+  display: 'flex',
+  marginLeft: "var(--ds-space-negative-150, -12px)",
+  marginTop: "var(--ds-space-150, 12px)"
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var ResultItemGroupTitle = styled.div({
+  fontSize: '11px',
+  lineHeight: '16px',
+  fontWeight: 600
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
+export var ResultItemAfter = styled.div(function (props) {
+  return {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    minWidth: props.shouldTakeSpace ? '24px' : 0
+  };
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var ResultItemAfterWrapper = styled.div({
+  display: 'flex'
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var ResultItemCaption = styled.span({
+  color: N200,
+  fontSize: '12px',
+  marginLeft: "var(--ds-space-100, 8px)"
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var ResultItemSubText = styled.span({
+  fontSize: '12px',
+  color: N200
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var ResultItemIcon = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0,
+  transition: 'padding 200ms',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '> *': {
+    flex: '1 0 auto'
+  },
+  /* We need to ensure that any image passed in as a child (<img/>, <svg/>
+     etc.) receives the correct width, height and border radius. We don't
+     currently assume that the image passed in is the correct dimensions, or has
+     width / height 100% */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '> img': {
+    height: "var(--ds-space-300, 24px)",
+    width: "var(--ds-space-300, 24px)"
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var ResultItemTextAfter = styled.div({
+  position: 'relative',
+  zIndex: 1
+});

package/dist/esm/components/Search/Search.js

@@ -5,16 +5,21 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import Spinner from '@atlaskit/spinner';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from 'styled-components';
 import { SearchBox, SearchFieldBaseInner, SearchInner, SearchInput, SearchFieldBaseOuter, SearchInputControlsContainer, SearchInputTypeAhead } from './styled';
 export var controlKeys = ['ArrowUp', 'ArrowDown', 'Enter', 'Tab', 'ArrowRight'];
-var SpinnerParent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: ", ";\n  margin-left: ", ";\n  margin-top: ", ";\n"])), "var(--ds-space-250, 20px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)");
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
+var SpinnerParent = styled.div({
+  height: "var(--ds-space-250, 20px)",
+  marginLeft: "var(--ds-space-150, 12px)",
+  marginTop: "var(--ds-space-150, 12px)"
+});
 var Search = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(Search, _React$PureComponent);
   var _super = _createSuper(Search);