@atlaskit/help 7.2.29 → 7.3.0

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

@@ -41,19 +41,24 @@ export const SearchResults = () => {
     isSearchResultVisible,
     onSearch,
     onSearchResultItemClick,
-    onSearchExternalUrlClick
+    onSearchExternalUrlClick,
+    openExternalSearchUrlInNewTab
   } = useSearchContext();
   const {
     openArticle,
     view
   } = useNavigationContext();
   const handleOnSearchResultItemClick = useCallback((event, analyticsEvent, articleData) => {
-    openArticle({
-      id: articleData.id,
-      type: ARTICLE_TYPE.HELP_ARTICLE
-    });
+    if (!openExternalSearchUrlInNewTab || articleData.href == null) {
+      openArticle({
+        id: articleData.id,
+        type: ARTICLE_TYPE.HELP_ARTICLE
+      });
+    } else {
+      window.open(articleData.href, '_blank');
+    }
     onSearchResultItemClick(event, analyticsEvent, articleData);
-  }, [onSearchResultItemClick, openArticle]);
+  }, [onSearchResultItemClick, openArticle, openExternalSearchUrlInNewTab]);
   return /*#__PURE__*/React.createElement(Transition, {
     in: view === VIEW.SEARCH && isSearchResultVisible,
     timeout: FADEIN_OVERLAY_TRANSITION_DURATION_MS

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

@@ -1,43 +1,39 @@
 /** @jsx jsx */
 import styled from '@emotion/styled';
 import * as colors from '@atlaskit/theme/colors';
-export const SearchResultsContainer = styled.div`
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  background-color: ${"var(--ds-surface, #FFFFFF)"};
-  flex: 1;
-  flex-direction: column;
-  box-sizing: border-box;
-  overflow-x: hidden;
-  overflow-y: auto;
-  z-index: 10;
-  padding: 0 ${"var(--ds-space-200, 16px)"};
-`;
-export const SearchResultsList = styled.div`
-  padding-top: ${"var(--ds-space-300, 24px)"};
-  position: relative;
-`;
-export const SearchResultEmptyMessageImage = styled.div`
-  padding: ${"var(--ds-space-300, 24px)"} ${"var(--ds-space-300, 24px)"} 0
-    ${"var(--ds-space-300, 24px)"};
-  text-align: center;
-`;
-export const SearchResultEmptyMessageText = styled.div`
-  padding: ${"var(--ds-space-300, 24px)"} ${"var(--ds-space-300, 24px)"} 0
-    ${"var(--ds-space-300, 24px)"};
-  text-align: center;
-
-  p {
-    color: ${`var(--ds-text-subtlest, ${colors.N200})`};
+export const SearchResultsContainer = styled.div({
+  position: 'absolute',
+  height: '100%',
+  width: '100%',
+  top: 0,
+  backgroundColor: "var(--ds-surface, #FFFFFF)",
+  flex: 1,
+  flexDirection: 'column',
+  boxSizing: 'border-box',
+  overflowX: 'hidden',
+  overflowY: 'auto',
+  zIndex: 10,
+  padding: `0 ${"var(--ds-space-200, 16px)"}`
+});
+export const SearchResultsList = styled.div({
+  paddingTop: "var(--ds-space-300, 24px)",
+  position: 'relative'
+});
+export const SearchResultEmptyMessageImage = styled.div({
+  padding: `${"var(--ds-space-300, 24px)"} ${"var(--ds-space-300, 24px)"} 0 ${"var(--ds-space-300, 24px)"}`,
+  textAlign: 'center'
+});
+export const SearchResultEmptyMessageText = styled.div({
+  padding: `${"var(--ds-space-300, 24px)"} ${"var(--ds-space-300, 24px)"} 0 ${"var(--ds-space-300, 24px)"}`,
+  textAlign: 'center',
+  p: {
+    color: `var(--ds-text-subtlest, ${colors.N200})`
   }
-`;
-export const SearchResultSearchExternalSiteContainer = styled.div`
-  padding: ${"var(--ds-space-300, 24px)"};
-  text-align: center;
-
-  p {
-    color: ${`var(--ds-text-subtlest, ${colors.N200})`};
+});
+export const SearchResultSearchExternalSiteContainer = styled.div({
+  padding: "var(--ds-space-300, 24px)",
+  textAlign: 'center',
+  p: {
+    color: `var(--ds-text-subtlest, ${colors.N200})`
   }
-`;
+});

package/dist/es2019/components/WhatsNew/WhatsNewButton/index.js

@@ -11,7 +11,7 @@ import { ARTICLE_TYPE } from '../../../model/Help';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'WhatsNewButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.29"
+  packageVersion: "7.3.0"
 };
 export const WhatsNewButton = ({
   productName,

package/dist/es2019/components/WhatsNew/WhatsNewResults/WhatsNewResultsEmpty/styled.js

@@ -1,17 +1,14 @@
 /** @jsx jsx */
 import styled from '@emotion/styled';
 import * as colors from '@atlaskit/theme/colors';
-export const WhatsNewResultsEmptyMessageImage = styled.div`
-  padding: ${"var(--ds-space-300, 24px)"} ${"var(--ds-space-300, 24px)"} 0
-    ${"var(--ds-space-300, 24px)"};
-  text-align: center;
-`;
-export const WhatsNewResultsEmptyMessageText = styled.div`
-  padding: ${"var(--ds-space-300, 24px)"} ${"var(--ds-space-300, 24px)"} 0
-    ${"var(--ds-space-300, 24px)"};
-  text-align: center;
-
-  p {
-    color: ${`var(--ds-text-subtlest, ${colors.N200})`};
+export const WhatsNewResultsEmptyMessageImage = styled.div({
+  padding: `${"var(--ds-space-300, 24px)"} ${"var(--ds-space-300, 24px)"} 0 ${"var(--ds-space-300, 24px)"}`,
+  textAlign: 'center'
+});
+export const WhatsNewResultsEmptyMessageText = styled.div({
+  padding: `${"var(--ds-space-300, 24px)"} ${"var(--ds-space-300, 24px)"} 0 ${"var(--ds-space-300, 24px)"}`,
+  textAlign: 'center',
+  p: {
+    color: `var(--ds-text-subtlest, ${colors.N200})`
   }
-`;
+});

package/dist/es2019/components/WhatsNew/WhatsNewResults/WhatsNewResultsError/styled.js

@@ -1,17 +1,14 @@
 /** @jsx jsx */
 import styled from '@emotion/styled';
 import * as colors from '@atlaskit/theme/colors';
-export const SearchResultEmptyMessageImage = styled.div`
-  padding: ${"var(--ds-space-300, 24px)"} ${"var(--ds-space-300, 24px)"} 0
-    ${"var(--ds-space-300, 24px)"};
-  text-align: center;
-`;
-export const SearchResultEmptyMessageText = styled.div`
-  padding: ${"var(--ds-space-300, 24px)"} ${"var(--ds-space-300, 24px)"} 0
-    ${"var(--ds-space-300, 24px)"};
-  text-align: center;
-
-  p {
-    color: ${`var(--ds-text-subtlest, ${colors.N200})`};
+export const SearchResultEmptyMessageImage = styled.div({
+  padding: `${"var(--ds-space-300, 24px)"} ${"var(--ds-space-300, 24px)"} 0 ${"var(--ds-space-300, 24px)"}`,
+  textAlign: 'center'
+});
+export const SearchResultEmptyMessageText = styled.div({
+  padding: `${"var(--ds-space-300, 24px)"} ${"var(--ds-space-300, 24px)"} 0 ${"var(--ds-space-300, 24px)"}`,
+  textAlign: 'center',
+  p: {
+    color: `var(--ds-text-subtlest, ${colors.N200})`
   }
-`;
+});

package/dist/es2019/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/WhatsNewResultItem/index.js

@@ -8,7 +8,7 @@ import { WhatsNewResultListItemWrapper, WhatsNewResultListItemTitleContainer, Wh
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.29"
+  packageVersion: "7.3.0"
 };
 export const WhatsNewResultListItem = ({
   intl: {

package/dist/es2019/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/WhatsNewResultItem/styled.js

@@ -27,24 +27,24 @@ export const WhatsNewResultListItemWrapper = styled.a({
     backgroundColor: `${`var(--ds-background-neutral-subtle-pressed, ${colors.B50})`}`
   }
 }, props => props.styles);
-export const WhatsNewResultListItemTitleContainer = styled.div`
-  width: 100%;
-  white-space: nowrap;
-  margin-bottom: ${"var(--ds-space-050, 4px)"};
-`;
-export const WhatsNewResultListItemTitleText = styled.span`
-  font-size: ${fontSizeSmall()}px;
-  line-height: ${fontSize()}px;
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0;
-  padding-left: ${"var(--ds-space-050, 4px)"};
-  white-space: normal;
-  overflow-x: hidden;
-`;
-export const WhatsNewResultListItemDescription = styled.p`
-  display: block;
-  line-height: 20px;
-  color: ${`var(--ds-text, ${colors.N800})`};
-  margin: 0;
-`;
+export const WhatsNewResultListItemTitleContainer = styled.div({
+  width: '100%',
+  whiteSpace: 'nowrap',
+  marginBottom: "var(--ds-space-050, 4px)"
+});
+export const WhatsNewResultListItemTitleText = styled.span({
+  fontSize: `${fontSizeSmall()}px`,
+  lineHeight: `${fontSize()}px`,
+  display: 'inline-block',
+  verticalAlign: 'middle',
+  margin: 0,
+  paddingLeft: "var(--ds-space-050, 4px)",
+  whiteSpace: 'normal',
+  overflowX: 'hidden'
+});
+export const WhatsNewResultListItemDescription = styled.p({
+  display: 'block',
+  lineHeight: '20px',
+  color: `var(--ds-text, ${colors.N800})`,
+  margin: 0
+});

package/dist/es2019/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/styled.js

@@ -4,29 +4,28 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { fontSizeSmall } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-export const truncate = (width = '100%') => css`
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: ${width};
-`;
-export const WhatsNewResultsListContainer = styled.div`
-  position: relative;
-`;
-export const WhatsNewResultsListGroupWrapper = styled.div`
-  padding: ${"var(--ds-space-100, 8px)"} 0 ${"var(--ds-space-100, 8px)"} 0;
-`;
-export const WhatsNewResultsListGroupTitle = styled.div`
-  color: ${`var(--ds-text-subtlest, ${colors.N200})`};
-  font-size: ${fontSizeSmall()}px;
-  font-weight: bold;
-  padding: 0 ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"}
-    ${"var(--ds-space-100, 8px)"};
-  text-transform: uppercase;
-`;
-export const ToggleShowWhatsNewResultsContainer = styled.div`
-  padding: ${"var(--ds-space-100, 8px)"} 0;
-  span {
-    margin: 0;
+export const truncate = (width = '100%') => css({
+  overflowX: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  width: width
+});
+export const WhatsNewResultsListContainer = styled.div({
+  position: 'relative'
+});
+export const WhatsNewResultsListGroupWrapper = styled.div({
+  padding: `${"var(--ds-space-100, 8px)"} 0 ${"var(--ds-space-100, 8px)"} 0`
+});
+export const WhatsNewResultsListGroupTitle = styled.div({
+  color: `var(--ds-text-subtlest, ${colors.N200})`,
+  fontSize: `${fontSizeSmall()}px`,
+  fontWeight: 'bold',
+  padding: `0 ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"}`,
+  textTransform: 'uppercase'
+});
+export const ToggleShowWhatsNewResultsContainer = styled.div({
+  padding: `${"var(--ds-space-100, 8px)"} 0`,
+  span: {
+    margin: 0
   }
-`;
+});

package/dist/es2019/components/WhatsNew/WhatsNewResults/WhatsNewResultsLoading/styled.js

@@ -3,17 +3,17 @@ import styled from '@emotion/styled';
 /**
  * Loading styled-components
  */
-export const LoadignWhatsNewResultsList = styled.ul`
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  margin-top: ${"var(--ds-space-200, 16px)"};
-`;
-export const LoadignWhatsNewResultsListItem = styled.li`
-  display: block;
-  width: 100%;
-  padding: ${"var(--ds-space-100, 8px)"};
-  margin: 0;
-  box-sizing: border-box;
-`;
+export const LoadignWhatsNewResultsList = styled.ul({
+  width: '100%',
+  margin: 0,
+  padding: 0,
+  boxSizing: 'border-box',
+  marginTop: "var(--ds-space-200, 16px)"
+});
+export const LoadignWhatsNewResultsListItem = styled.li({
+  display: 'block',
+  width: '100%',
+  padding: "var(--ds-space-100, 8px)",
+  margin: 0,
+  boxSizing: 'border-box'
+});

package/dist/es2019/components/WhatsNew/WhatsNewResults/styled.js

@@ -1,26 +1,26 @@
 /** @jsx jsx */
 import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
-export const WhatsNewResultsContainer = styled.div`
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  background-color: ${"var(--ds-surface, #FFFFFF)"};
-  flex: 1;
-  flex-direction: column;
-  box-sizing: border-box;
-  overflow-x: hidden;
-  overflow-y: auto;
-  z-index: 1;
-  padding: ${"var(--ds-space-200, 16px)"};
-`;
-export const SelectContainer = styled.div`
-  width: ${19 * gridSize()}px;
-`;
-export const WhatsNewResultsListContainer = styled.div`
-  padding-top: ${"var(--ds-space-100, 8px)"};
-`;
-export const WhatsNewResultsListTitleContainer = styled.div`
-  padding: 0 ${"var(--ds-space-100, 8px)"};
-`;
+export const WhatsNewResultsContainer = styled.div({
+  position: 'absolute',
+  height: '100%',
+  width: '100%',
+  top: 0,
+  backgroundColor: "var(--ds-surface, #FFFFFF)",
+  flex: 1,
+  flexDirection: 'column',
+  boxSizing: 'border-box',
+  overflowX: 'hidden',
+  overflowY: 'auto',
+  zIndex: 1,
+  padding: "var(--ds-space-200, 16px)"
+});
+export const SelectContainer = styled.div({
+  width: `${19 * gridSize()}px`
+});
+export const WhatsNewResultsListContainer = styled.div({
+  paddingTop: "var(--ds-space-100, 8px)"
+});
+export const WhatsNewResultsListTitleContainer = styled.div({
+  padding: `0 ${"var(--ds-space-100, 8px)"}`
+});

package/dist/es2019/components/contexts/searchContext.js

@@ -11,7 +11,8 @@ export const SearchContextProvider = ({
   onSearchResultItemClick,
   onSearchExternalUrlClick,
   searchExternalUrl,
-  children
+  children,
+  openExternalSearchUrlInNewTab
 }) => {
   // Search
   const [searchValue, setSearchValue] = useState('');
@@ -74,7 +75,8 @@ export const SearchContextProvider = ({
       searchExternalUrl,
       searchResult,
       searchState,
-      searchValue
+      searchValue,
+      openExternalSearchUrlInNewTab
     }
   }, children);
 };

package/dist/es2019/components/styled.js

@@ -1,33 +1,33 @@
 /** @jsx jsx */
 
 import styled from '@emotion/styled';
-export const HelpBodyContainer = styled.div`
-  flex-grow: 1;
-  min-height: 0;
-  position: relative;
-  overflow-y: auto;
-  overflow-x: hidden;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-  align-content: stretch;
-  align-items: flex-start;
-`;
-export const HelpBody = styled.div`
-  width: 100%;
-  box-sizing: border-box;
-  order: 0;
-  flex: 1 1 auto;
-  align-self: auto;
-  position: relative;
-  overflow-x: hidden;
-  overflow-y: auto;
-`;
-export const Home = styled.div`
-  display: ${props => props.isOverlayFullyVisible ? 'none' : 'block'};
-  height: 100%;
-  overflow: ${props => props.isOverlayVisible ? 'hidden' : 'auto'};
-  padding: ${"var(--ds-space-200, 16px)"};
-  box-sizing: border-box;
-`;
+export const HelpBodyContainer = styled.div({
+  flexGrow: 1,
+  minHeight: 0,
+  position: 'relative',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+  display: 'flex',
+  flexDirection: 'column',
+  flexWrap: 'nowrap',
+  justifyContent: 'flex-start',
+  alignContent: 'stretch',
+  alignItems: 'flex-start'
+});
+export const HelpBody = styled.div({
+  width: '100%',
+  boxSizing: 'border-box',
+  order: 0,
+  flex: '1 1 auto',
+  alignSelf: 'auto',
+  position: 'relative',
+  overflowX: 'hidden',
+  overflowY: 'auto'
+});
+export const Home = styled.div(props => ({
+  display: props.isOverlayFullyVisible ? 'none' : 'block',
+  height: '100%',
+  overflow: props.isOverlayVisible ? 'hidden' : 'auto',
+  padding: "var(--ds-space-200, 16px)",
+  boxSizing: 'border-box'
+}));

package/dist/es2019/model/Help.js

@@ -1,4 +1,3 @@
-import { ArticleItem } from './Article';
 export let ARTICLE_TYPE = /*#__PURE__*/function (ARTICLE_TYPE) {
   ARTICLE_TYPE["HELP_ARTICLE"] = "HELP_ARTICLE";
   ARTICLE_TYPE["WHATS_NEW"] = "WHATS_NEW";

package/dist/es2019/util/helpers.js

@@ -1,9 +1,13 @@
-export const createArticleObject = algoliaResponse => {
-  const bodyObject = algoliaResponse.hits[0].body;
-  const stylesObject = algoliaResponse.hits[1].body;
+export let RESPONSE_TYPE = /*#__PURE__*/function (RESPONSE_TYPE) {
+  RESPONSE_TYPE["ALGOLIA"] = "ALGOLIA";
+  return RESPONSE_TYPE;
+}({});
+export const createArticleObject = (styles, content, responseType = RESPONSE_TYPE.ALGOLIA) => {
+  const bodyObject = content.body;
+  const stylesObject = styles.body;
   const body = `<div class="content-platform-support">${stylesObject} ${bodyObject}</div>`;
   return {
-    ...algoliaResponse.hits[0],
+    ...content,
     body
   };
 };

package/dist/es2019/util/styled.js

@@ -5,81 +5,72 @@ import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { WHATS_NEW_ITEM_TYPES } from '../model/WhatsNew';
-export const DividerLine = styled.div`
-  background-color: ${`var(--ds-border, ${colors.N30A})`};
-  height: 2px;
-  width: 100%;
-  padding: 0 ${"var(--ds-space-200, 16px)"};
-  margin-top: ${"var(--ds-space-200, 16px)"};
-  box-sizing: border-box;
-`;
+export const DividerLine = styled.div({
+  backgroundColor: `var(--ds-border, ${colors.N30A})`,
+  height: '2px',
+  width: '100%',
+  padding: `0 ${"var(--ds-space-200, 16px)"}`,
+  marginTop: "var(--ds-space-200, 16px)",
+  boxSizing: 'border-box'
+});
 
 /**
  * Loading container
  */
 
-const shimmer = keyframes`
-    0% {
-        background-position: -300px 0;
-    }
-    100% {
-        background-position: 1000px 0;
-    }
-`;
-export const LoadingRectangle = styled.div`
-  display: inline-block;
-  vertical-align: middle;
-  position: relative;
-  height: ${props => props.contentHeight ? props.contentHeight : '1rem'};
-  margin-top: ${props => props.marginTop ? props.marginTop : gridSize() + 'px'};
-  width: ${props => props.contentWidth ? props.contentWidth : '100%'};
-  border-radius: 2px;
-  animation-duration: 1.2s;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  animation-name: ${shimmer};
-  animation-timing-function: linear;
-  background-color: ${`var(--ds-background-neutral, ${colors.N30})`};
-  background-image: linear-gradient(
-    to right,
-    ${`var(--ds-background-neutral-subtle, ${colors.N30})`} 10%,
-    ${`var(--ds-background-neutral, ${colors.N40})`} 20%,
-    ${`var(--ds-background-neutral-subtle, ${colors.N30})`} 30%
-  );
-  background-repeat: no-repeat;
-`;
+const shimmer = keyframes({
+  '0%': {
+    backgroundPosition: '-300px 0'
+  },
+  '100%': {
+    backgroundPosition: '1000px 0'
+  }
+});
+export const LoadingRectangle = styled.div(props => ({
+  display: 'inline-block',
+  verticalAlign: 'middle',
+  position: 'relative',
+  height: props.contentHeight ? props.contentHeight : '1rem',
+  marginTop: props.marginTop ? props.marginTop : gridSize() + 'px',
+  width: props.contentWidth ? props.contentWidth : '100%',
+  borderRadius: '2px',
+  animationDuration: '1.2s',
+  animationFillMode: 'forwards',
+  animationIterationCount: 'infinite',
+  animationName: shimmer,
+  animationTimingFunction: 'linear',
+  backgroundColor: `var(--ds-background-neutral, ${colors.N30})`,
+  backgroundImage: `linear-gradient( to right, ${`var(--ds-background-neutral-subtle, ${colors.N30})`} 10%, ${`var(--ds-background-neutral, ${colors.N40})`} 20%, ${`var(--ds-background-neutral-subtle, ${colors.N30})`} 30% )`,
+  backgroundRepeat: 'no-repeat'
+}));
 
 /**
  * Loading Circle
  */
 
-export const LoadingCircle = styled.div`
-  display: inline-block;
-  vertical-align: middle;
-  position: relative;
-  height: ${props => props.radius ? props.radius : `${gridSize() * 4}px`};
-  margin-top: ${props => props.marginTop ? props.marginTop : ''};
-  width: ${props => props.radius ? props.radius : `${gridSize() * 4}px`};
-  border-radius: 50%;
-  animation-duration: 1.2s;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  animation-name: ${shimmer};
-  animation-timing-function: linear;
-  background-color: ${`var(--ds-background-neutral, ${colors.N30})`};
-  background-image: linear-gradient(
-    to right,
-    ${`var(--ds-background-neutral-subtle, ${colors.N30})`} 10%,
-    ${`var(--ds-background-neutral, ${colors.N40})`} 20%,
-    ${`var(--ds-background-neutral-subtle, ${colors.N30})`} 30%
-  );
-  background-repeat: no-repeat;
-`;
+export const LoadingCircle = styled.div(props => ({
+  display: 'inline-block',
+  verticalAlign: 'middle',
+  position: 'relative',
+  height: props.radius ? props.radius : `${gridSize() * 4}px`,
+  marginTop: props.marginTop ? props.marginTop : '',
+  width: props.radius ? props.radius : `${gridSize() * 4}px`,
+  borderRadius: '50%',
+  animationDuration: '1.2s',
+  animationFillMode: 'forwards',
+  animationIterationCount: 'infinite',
+  animationName: shimmer,
+  animationTimingFunction: 'linear',
+  backgroundColor: `var(--ds-background-neutral, ${colors.N30})`,
+  backgroundImage: `linear-gradient( to right, ${`var(--ds-background-neutral-subtle, ${colors.N30})`} 10%, ${`var(--ds-background-neutral, ${colors.N40})`} 20%, ${`var(--ds-background-neutral-subtle, ${colors.N30})`} 30% )`,
+  backgroundRepeat: 'no-repeat'
+}));
 
 /**
  * What's new icon
  */
 
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation
 export const WhatsNewTypeIcon = styled.div`
   display: inline-block;
   vertical-align: middle;

package/dist/esm/analytics.js

@@ -5,5 +5,5 @@ export var createAndFire = x.createAndFireEvent('atlaskit');
 export var defaultAnalyticsAttributes = {
   componentName: 'help',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.29"
+  packageVersion: "7.3.0"
 };

package/dist/esm/components/Article/ArticleLoadingFail/index.js

@@ -8,7 +8,7 @@ import { LoadingErrorMessage, LoadingErrorButtonContainer } from './styled';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleLoadingFail',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.29"
+  packageVersion: "7.3.0"
 };
 export var ArticleLoadingFail = function ArticleLoadingFail(_ref) {
   var onTryAgainButtonClick = _ref.onTryAgainButtonClick,