@atlaskit/help 8.0.9 → 9.0.0

package/dist/es2019/components/RelatedArticles/RelatedArticlesLoading.js

@@ -2,16 +2,16 @@ import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import { messages } from '../../messages';
 import { DividerLine, LoadingRectangle } from '../../util/styled';
-import { LoadignRelatedArticleList, LoadignRelatedArticleListItem } from './styled';
+import { LoadingRelatedArticleList, LoadingRelatedArticleListItem } from './styled';
 const RelatedArticlesLoading = ({
   intl: {
     formatMessage
   }
 }) => {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LoadignRelatedArticleList, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LoadingRelatedArticleList, {
     "aria-label": formatMessage(messages.help_loading),
     role: "img"
-  }, /*#__PURE__*/React.createElement(LoadignRelatedArticleListItem, null, /*#__PURE__*/React.createElement(LoadingRectangle, {
+  }, /*#__PURE__*/React.createElement(LoadingRelatedArticleListItem, null, /*#__PURE__*/React.createElement(LoadingRectangle, {
     contentHeight: "11px",
     contentWidth: "60px",
     marginTop: "0"
@@ -27,7 +27,7 @@ const RelatedArticlesLoading = ({
   }), /*#__PURE__*/React.createElement(LoadingRectangle, {
     contentWidth: "100%",
     marginTop: "4px"
-  })), /*#__PURE__*/React.createElement(LoadignRelatedArticleListItem, null, /*#__PURE__*/React.createElement(LoadingRectangle, {
+  })), /*#__PURE__*/React.createElement(LoadingRelatedArticleListItem, null, /*#__PURE__*/React.createElement(LoadingRectangle, {
     contentHeight: "11px",
     contentWidth: "60px",
     marginTop: "0"
@@ -43,7 +43,7 @@ const RelatedArticlesLoading = ({
   }), /*#__PURE__*/React.createElement(LoadingRectangle, {
     contentWidth: "100%",
     marginTop: "4px"
-  })), /*#__PURE__*/React.createElement(LoadignRelatedArticleListItem, null, /*#__PURE__*/React.createElement(LoadingRectangle, {
+  })), /*#__PURE__*/React.createElement(LoadingRelatedArticleListItem, null, /*#__PURE__*/React.createElement(LoadingRectangle, {
     contentHeight: "11px",
     contentWidth: "60px",
     marginTop: "0"

package/dist/es2019/components/RelatedArticles/index.compiled.css

@@ -0,0 +1,8 @@
+._19bvidpf{padding-left:0}
+._1ipkidpf span{margin-top:0}
+._1kdcidpf span{margin-right:0}
+._1w2uidpf span{margin-left:0}
+._3glyidpf span{margin-bottom:0}
+._ca0qidpf{padding-top:0}
+._n3tdidpf{padding-bottom:0}
+._u5f3idpf{padding-right:0}

package/dist/es2019/components/RelatedArticles/index.js

@@ -1,14 +1,13 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 /** @jsxFrag */
-
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useState, useEffect, useCallback } from 'react';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import SectionMessage from '@atlaskit/section-message';
 import Button from '@atlaskit/button/custom-theme-button';
 import { injectIntl } from 'react-intl-next';
+import { Text } from '@atlaskit/primitives/compiled';
 import { messages } from '../../messages';
 import ArticlesList from '../ArticlesList';
 import RelatedArticlesLoading from './RelatedArticlesLoading';
@@ -16,19 +15,9 @@ import { DividerLine } from '../../util/styled';
 import { RelatedArticlesTitle } from './styled';
 import useCancellablePromise from '../../util/hooks/cancellablePromise';
 import { usePrevious } from '../../util/hooks/previous';
-import { Text } from '@atlaskit/primitives';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 const packageName = "@atlaskit/help";
-const packageVersion = "8.0.9";
-const buttonStyles = css({
-  padding: '0',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& span': {
-    margin: '0'
-  }
-});
+const packageVersion = "9.0.0";
+const buttonStyles = null;
 export const RelatedArticles = ({
   style = 'primary',
   routeGroup,
@@ -79,24 +68,24 @@ export const RelatedArticles = ({
     }
   }, [prevRouteGroup, prevRouteName, routeGroup, routeName, updateRelatedArticles]);
   if (hasError) {
-    return jsx(SectionMessage, {
+    return /*#__PURE__*/React.createElement(SectionMessage, {
       appearance: "warning"
-    }, jsx(Text, {
+    }, /*#__PURE__*/React.createElement(Text, {
       as: "p"
-    }, jsx(Text, {
+    }, /*#__PURE__*/React.createElement(Text, {
       as: "strong"
-    }, formatMessage(messages.help_related_article_endpoint_error_title))), jsx(Text, {
+    }, formatMessage(messages.help_related_article_endpoint_error_title))), /*#__PURE__*/React.createElement(Text, {
       as: "p"
-    }, formatMessage(messages.help_related_article_endpoint_error_description)), jsx(Text, {
+    }, formatMessage(messages.help_related_article_endpoint_error_description)), /*#__PURE__*/React.createElement(Text, {
       as: "p"
-    }, jsx(Button, {
+    }, /*#__PURE__*/React.createElement(Button, {
       appearance: "link",
       spacing: "compact",
-      css: buttonStyles,
-      onClick: updateRelatedArticles
+      onClick: updateRelatedArticles,
+      className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1ipkidpf _1kdcidpf _3glyidpf _1w2uidpf"])
     }, formatMessage(messages.help_related_article_endpoint_error_button_label))));
   } else {
-    return jsx(React.Fragment, null, style === 'secondary' && relatedArticles.length > 0 && jsx(React.Fragment, null, jsx(DividerLine, null), jsx(RelatedArticlesTitle, null, formatMessage(messages.help_related_article_title))), isLoading ? jsx(RelatedArticlesLoading, null) : jsx(ArticlesList
+    return /*#__PURE__*/React.createElement(React.Fragment, null, style === 'secondary' && relatedArticles.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DividerLine, null), /*#__PURE__*/React.createElement(RelatedArticlesTitle, null, formatMessage(messages.help_related_article_title))), isLoading ? /*#__PURE__*/React.createElement(RelatedArticlesLoading, null) : /*#__PURE__*/React.createElement(ArticlesList
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     , {
       style: style,

package/dist/es2019/components/RelatedArticles/styled.compiled.css

@@ -0,0 +1,20 @@
+._11c8nbxd{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._18u0idpf{margin-left:0}
+._19bvidpf{padding-left:0}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._19pkidpf{margin-top:0}
+._1bsb1osq{width:100%}
+._1e0c1ule{display:block}
+._2hwxidpf{margin-right:0}
+._ca0qidpf{padding-top:0}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._n3tdidpf{padding-bottom:0}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._otyridpf{margin-bottom:0}
+._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._u5f3idpf{padding-right:0}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._vchhusvi{box-sizing:border-box}

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

@@ -1,50 +1,30 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
-import * as colors from '@atlaskit/theme/colors';
-export const truncate = (width = '100%') => css({
-  overflowX: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  width: width
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-export const RelatedArticlesTitle = styled.div({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  color: `var(--ds-text, ${colors.N800})`,
-  font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  padding: `${"var(--ds-space-200, 16px)"} 0`
-});
+/* styled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./styled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { N800 } from '@atlaskit/theme/colors';
+const relatedArticlesTitleStyles = null;
+export const RelatedArticlesTitle = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_11c8nbxd _syaz1fxt _ca0qpxbi _u5f3idpf _n3tdpxbi _19bvidpf"])
+}, children);
 
 /**
  * Loading styled-components
  */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const LoadignRelatedArticleSection = styled.div({
-  marginTop: "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 LoadignRelatedArticleList = styled.ul({
-  width: '100%',
-  margin: 0,
-  padding: 0,
-  boxSizing: 'border-box'
-});
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const LoadignRelatedArticleListItem = styled.li({
-  display: 'block',
-  width: '100%',
-  padding: "var(--ds-space-100, 8px)",
-  marginBottom: "var(--ds-space-200, 16px)",
-  boxSizing: 'border-box'
-});
+const loadingRelatedArticleListStyles = null;
+export const LoadingRelatedArticleList = ({
+  children,
+  ...rest
+}) => /*#__PURE__*/React.createElement("ul", _extends({}, rest, {
+  className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bsb1osq _vchhusvi"])
+}), children);
+const loadingRelatedArticleListItemStyles = null;
+export const LoadingRelatedArticleListItem = ({
+  children
+}) => /*#__PURE__*/React.createElement("li", {
+  className: ax(["_1e0c1ule _1bsb1osq _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _otyrpxbi _vchhusvi"])
+}, children);

package/dist/es2019/components/Search/SearchInput/index.compiled.css

@@ -0,0 +1,2 @@
+._1bsb1tcg{width:24px}
+._4t3i1tcg{height:24px}

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

@@ -1,8 +1,6 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useRef, useCallback } from 'react';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import Textfield from '@atlaskit/textfield';
@@ -11,8 +9,6 @@ import { gridSize } from '@atlaskit/theme/constants';
 import Spinner from '@atlaskit/spinner';
 import SearchIcon from '@atlaskit/icon/core/migration/search';
 import EditorCloseIcon from '@atlaskit/icon/core/migration/close--editor-close';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { REQUEST_STATE } from '../../../model/Requests';
 import { useSearchContext } from '../../contexts/searchContext';
@@ -23,14 +19,9 @@ import { useNavigationContext } from '../../contexts/navigationContext';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'searchInput',
   packageName: "@atlaskit/help",
-  packageVersion: "8.0.9"
+  packageVersion: "9.0.0"
 };
-const buttonStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  width: `${gridSize() * 3}px`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  height: `${gridSize() * 3}px`
-});
+const buttonStyles = null;
 export const SearchInput = ({
   intl: {
     formatMessage
@@ -92,26 +83,26 @@ export const SearchInput = ({
     return null;
   }
   const WrapperComponent = isAiEnabled ? SearchInputContainerAi : SearchInputContainer;
-  return jsx(WrapperComponent, null, jsx(Textfield, {
+  return /*#__PURE__*/React.createElement(WrapperComponent, null, /*#__PURE__*/React.createElement(Textfield, {
     "aria-label": formatMessage(messages.help_search_placeholder),
     autoComplete: "off",
     ref: inputRef,
     name: "help-search-input",
-    elemBeforeInput: jsx(SearchIconContainer, null, jsx(SearchIcon, {
+    elemBeforeInput: /*#__PURE__*/React.createElement(SearchIconContainer, null, /*#__PURE__*/React.createElement(SearchIcon, {
       LEGACY_margin: "0 2px",
       color: "currentColor",
       spacing: "spacious",
       label: ""
     })),
-    elemAfterInput: jsx(CloseButtonAndSpinnerContainer, null, searchState === REQUEST_STATE.loading && jsx(Spinner, {
+    elemAfterInput: /*#__PURE__*/React.createElement(CloseButtonAndSpinnerContainer, null, searchState === REQUEST_STATE.loading && /*#__PURE__*/React.createElement(Spinner, {
       size: "small"
-    }), searchValue !== '' && jsx(Button, {
-      css: buttonStyles,
+    }), searchValue !== '' && /*#__PURE__*/React.createElement(Button, {
       appearance: "subtle",
       onClick: handleOnClearButtonClick,
       spacing: "none",
-      "aria-label": "Clear field"
-    }, jsx(EditorCloseIcon, {
+      "aria-label": "Clear field",
+      className: ax(["_1bsb1tcg _4t3i1tcg"])
+    }, /*#__PURE__*/React.createElement(EditorCloseIcon, {
       color: "currentColor",
       spacing: "spacious",
       label: ""
@@ -123,8 +114,8 @@ export const SearchInput = ({
   }));
 };
 const SearchInputWithContext = props => {
-  return jsx(AnalyticsContext, {
+  return /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: ANALYTICS_CONTEXT_DATA
-  }, jsx(SearchInput, props));
+  }, /*#__PURE__*/React.createElement(SearchInput, props));
 };
 export default injectIntl(SearchInputWithContext);

package/dist/es2019/components/Search/SearchInput/styled.compiled.css

@@ -0,0 +1,28 @@
+._1275nkob>button, ._1skznkob>span{vertical-align:middle}
+._16jlidpf{flex-grow:0}
+._18u01ejb{margin-left:var(--ds-space-300,24px)}
+._18u01i6y{margin-left:var(--ds-space-negative-025,-2px)}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._19pkou31{margin-top:var(--ds-space-200,14px)}
+._1bsb1ejb{width:var(--ds-space-300,24px)}
+._1bsb1j1s{width:calc(100% - var(--ds-space-300, 24px) - var(--ds-space-300, 24px))}
+._1bsb1osq{width:100%}
+._1f021ejb>span{height:var(--ds-space-300,24px)}
+._1f49idpf{order:0}
+._1msb1o8l>button, ._1w7e1o8l>span{display:inline-block}
+._1o9zkb7n{flex-shrink:1}
+._1rckusvi>span{box-sizing:border-box}
+._1wpz1wug{align-self:auto}
+._1wybidpf{font-size:0}
+._1yg61b66>span{padding-left:var(--ds-space-050,4px)}
+._2hwx1ejb{margin-right:var(--ds-space-300,24px)}
+._4t3i1ejb{height:var(--ds-space-300,24px)}
+._4t3ixy5q{height:var(--ds-space-400,2pc)}
+._hjaq1b66>span{padding-right:var(--ds-space-050,4px)}
+._i0dl1wug{flex-basis:auto}
+._kqswh2mm{position:relative}
+._nbgx1ejb>span{width:var(--ds-space-300,24px)}
+._o5721q9c{white-space:nowrap}
+._otyrou31{margin-bottom:var(--ds-space-200,14px)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._vchhusvi{box-sizing:border-box}

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

@@ -1,61 +1,28 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const SearchInputContainer = styled.div({
-  order: 0,
-  flex: '0 1 auto',
-  alignSelf: 'auto',
-  width: '100%',
-  boxSizing: 'border-box'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const SearchInputContainerAi = styled.div({
-  width: `calc(100% - ${"var(--ds-space-300, 24px)"} - ${"var(--ds-space-300, 24px)"})`,
-  height: "var(--ds-space-400, 32px)",
-  marginLeft: "var(--ds-space-300, 24px)",
-  marginRight: "var(--ds-space-300, 24px)",
-  marginTop: "var(--ds-space-200, 14px)",
-  marginBottom: "var(--ds-space-200, 14px)",
-  order: 0,
-  flex: '0 1 auto',
-  alignSelf: 'auto',
-  boxSizing: 'border-box'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const SearchIconContainer = styled.div({
-  width: "var(--ds-space-300, 24px)",
-  height: "var(--ds-space-300, 24px)",
-  paddingLeft: "var(--ds-space-050, 4px)",
-  marginLeft: "var(--ds-space-negative-025, -2px)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& > span': {
-    paddingLeft: "var(--ds-space-050, 4px)",
-    height: "var(--ds-space-300, 24px)",
-    width: "var(--ds-space-300, 24px)",
-    boxSizing: 'border-box'
-  }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const CloseButtonAndSpinnerContainer = styled.div({
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  fontSize: 0,
-  paddingRight: "var(--ds-space-100, 8px)",
-  position: 'relative',
-  whiteSpace: 'nowrap',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& > span': {
-    paddingRight: "var(--ds-space-050, 4px)"
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& > button, & > span': {
-    display: 'inline-block',
-    verticalAlign: 'middle'
-  }
-});
+/* styled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./styled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+const searchInputContainerStyles = null;
+export const SearchInputContainer = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_16jlidpf _1o9zkb7n _i0dl1wug _1f49idpf _1wpz1wug _1bsb1osq _vchhusvi"])
+}, children);
+const searchInputContainerAiStyles = null;
+export const SearchInputContainerAi = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_16jlidpf _1o9zkb7n _i0dl1wug _1bsb1j1s _4t3ixy5q _18u01ejb _2hwx1ejb _19pkou31 _otyrou31 _1f49idpf _1wpz1wug _vchhusvi"])
+}, children);
+const searchIconContainerStyles = null;
+export const SearchIconContainer = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1bsb1ejb _4t3i1ejb _19bv1b66 _18u01i6y _1yg61b66 _1f021ejb _nbgx1ejb _1rckusvi"])
+}, children);
+const closeButtonAndSpinnerContainerStyles = null;
+export const CloseButtonAndSpinnerContainer = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1wybidpf _u5f3u2gc _kqswh2mm _o5721q9c _hjaq1b66 _1msb1o8l _1w7e1o8l _1275nkob _1skznkob"])
+}, children);

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

@@ -4,7 +4,7 @@ import * as colors from '@atlaskit/theme/colors';
 import Button from '@atlaskit/button';
 import ShortcutIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
 import { injectIntl } from 'react-intl-next';
-import { Text } from '@atlaskit/primitives';
+import { Text } from '@atlaskit/primitives/compiled';
 import { messages } from '../../../messages';
 import { SearchResultSearchExternalSiteContainer } from './styled';
 export const SearchExternalSite = ({

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

@@ -4,7 +4,7 @@ import * as colors from '@atlaskit/theme/colors';
 import Button from '@atlaskit/button';
 import ShortcutIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
 import { injectIntl } from 'react-intl-next';
-import { Text } from '@atlaskit/primitives';
+import { Text } from '@atlaskit/primitives/compiled';
 import NotFoundImage from '../../../assets/NotFoundImage';
 import { messages } from '../../../messages';
 import { SearchResultEmptyMessageImage, SearchResultEmptyMessageText, SearchResultEmptyMessageHeaderText } from './styled';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import Button from '@atlaskit/button/custom-theme-button';
 import { injectIntl } from 'react-intl-next';
-import { Text } from '@atlaskit/primitives';
+import { Text } from '@atlaskit/primitives/compiled';
 import ErrorImage from '../../../assets/ErrorImage';
 import { messages } from '../../../messages';
 import { SearchResultEmptyMessageImage, SearchResultEmptyMessageText } from './styled';

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

@@ -1,7 +1,7 @@
 import React, { useCallback, useRef, useState, useEffect } from 'react';
 import { Transition } from 'react-transition-group';
 import { REQUEST_STATE } from '../../../model/Requests';
-import { FADEIN_OVERLAY_TRANSITION_DURATION_MS, VIEW } from '../../constants';
+import { VIEW } from '../../constants';
 import { useSearchContext } from '../../contexts/searchContext';
 import { useNavigationContext } from '../../contexts/navigationContext';
 import { ARTICLE_TYPE } from '../../../model/Help';
@@ -9,30 +9,7 @@ import SearchResultsList from './SearchResults';
 import SearchExternalSite from './SearchExternalSite';
 import SearchResultsEmpty from './SearchResultsEmpty';
 import SearchResultsError from './SearchResultsError';
-import { SearchResultsContainer, SearchResultsContainerAi } from './styled';
-const defaultStyle = {
-  transition: `opacity ${FADEIN_OVERLAY_TRANSITION_DURATION_MS}ms`,
-  opacity: 0,
-  visibility: 'hidden'
-};
-const transitionStyles = {
-  entering: {
-    opacity: 1,
-    visibility: 'visible'
-  },
-  entered: {
-    opacity: 1,
-    visibility: 'visible'
-  },
-  exiting: {
-    opacity: 0,
-    visibility: 'visible'
-  },
-  exited: {
-    opacity: 0,
-    visibility: 'hidden'
-  }
-};
+import { FADEIN_OVERLAY_TRANSITION_DURATION_MS, SearchResultsContainer, SearchResultsContainerAi } from './styled';
 export const SearchResults = ({
   isAiEnabled = false
 }) => {
@@ -75,12 +52,7 @@ export const SearchResults = ({
     in: view === VIEW.SEARCH && isSearchResultVisible,
     timeout: FADEIN_OVERLAY_TRANSITION_DURATION_MS
   }, state => /*#__PURE__*/React.createElement(SearchResultsContainerAi, {
-    style: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      ...defaultStyle,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      ...transitionStyles[state]
-    }
+    transitionState: state
   }, /*#__PURE__*/React.createElement("div", {
     ref: liveRegionRef,
     "aria-live": "polite",
@@ -119,12 +91,7 @@ export const SearchResults = ({
     in: view === VIEW.SEARCH && isSearchResultVisible,
     timeout: FADEIN_OVERLAY_TRANSITION_DURATION_MS
   }, state => /*#__PURE__*/React.createElement(SearchResultsContainer, {
-    style: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      ...defaultStyle,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      ...transitionStyles[state]
-    }
+    transitionState: state
   }, /*#__PURE__*/React.createElement("div", {
     ref: liveRegionRef,
     "aria-live": "polite",

package/dist/es2019/components/Search/SearchResults/styled.compiled.css

@@ -0,0 +1,31 @@
+._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._v5643rtd{transition:opacity .44s}
+._125x1wmz p{color:var(--ds-text-subtlest,#6b778c)}
+._154i1eca{top:var(--ds-space-800,60px)}
+._154iidpf{top:0}
+._16jlkb7n{flex-grow:1}
+._18m91wug{overflow-y:auto}
+._19bv1ejb{padding-left:var(--ds-space-300,24px)}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._1bsb1osq{width:100%}
+._1o9zkb7n{flex-shrink:1}
+._1pbyzo7u{z-index:10}
+._1reo15vq{overflow-x:hidden}
+._2lx21bp4{flex-direction:column}
+._3um015vq{visibility:hidden}
+._4t3i1kz6{height:calc(100% - var(--ds-space-800, 60px))}
+._4t3i1osq{height:100%}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._ca0qidpf{padding-top:0}
+._i0dlf1ug{flex-basis:0%}
+._k48pmoej{font-weight:var(--ds-font-weight-bold,700)}
+._kqswstnw{position:absolute}
+._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
+._n3tdidpf{padding-bottom:0}
+._syaz10s3{color:var(--ds-text,#42526e)}
+._tzy4idpf{opacity:0}
+._u5f31ejb{padding-right:var(--ds-space-300,24px)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
+._vchhusvi{box-sizing:border-box}
+._y3gn1h6o{text-align:center}