@atlaskit/help 7.1.23 → 7.1.25

package/dist/es2019/components/ArticlesList/ArticlesList.js

@@ -1,27 +1,23 @@
 import React from 'react';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N30 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import AnimateHeight from 'react-animate-height';
 import ArticlesListItem from './ArticlesListItem';
 import { MIN_ITEMS_TO_DISPLAY, ANIMATE_HEIGHT_TRANSITION_DURATION_MS } from './constants';
-
 const getStyles = style => {
   if (style === 'secondary') {
     return {
-      border: `2px solid ${token('color.border', N30)}`,
+      border: `2px solid ${`var(--ds-border, ${N30})`}`,
       padding: `${gridSize() * 2}px`,
       marginBottom: `${gridSize() * 1.5}px`
     };
   }
-
   return {
     border: 0,
     padding: `${gridSize()}px`,
     marginBottom: 0
   };
 };
-
 const articlesList = ({
   style = 'primary',
   articles = [],
@@ -59,5 +55,4 @@ const articlesList = ({
   key: article.id,
   href: article.href
 }))));
-
 export default articlesList;

package/dist/es2019/components/ArticlesList/ArticlesListItem/index.js

@@ -2,7 +2,6 @@ import React from 'react';
 import * as colors from '@atlaskit/theme/colors';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
-import { token } from '@atlaskit/tokens';
 import { injectIntl } from 'react-intl-next';
 import { name as packageName, version as packageVersion } from '../../../version.json';
 import { ArticlesListItemWrapper, ArticlesListItemContainer, ArticlesListItemTitleText, ArticlesListItemDescription, ArticlesListItemLinkIcon } from './styled';
@@ -21,10 +20,8 @@ export const ArticlesListItem = ({
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
-
   const handleOnClick = event => {
     event.preventDefault();
-
     if (onClick) {
       const analyticsEvent = createAnalyticsEvent({
         action: 'clicked'
@@ -32,7 +29,6 @@ export const ArticlesListItem = ({
       onClick(event, analyticsEvent);
     }
   };
-
   return /*#__PURE__*/React.createElement(ArticlesListItemWrapper, {
     styles: styles,
     "aria-disabled": "false",
@@ -42,15 +38,13 @@ export const ArticlesListItem = ({
   }, /*#__PURE__*/React.createElement(ArticlesListItemContainer, null, /*#__PURE__*/React.createElement(ArticlesListItemTitleText, null, title, href && /*#__PURE__*/React.createElement(ArticlesListItemLinkIcon, null, /*#__PURE__*/React.createElement(ShortcutIcon, {
     size: "small",
     label: "",
-    primaryColor: token('color.icon.subtle', colors.N90),
-    secondaryColor: token('color.icon.subtle', colors.N90)
+    primaryColor: `var(--ds-icon-subtle, ${colors.N90})`,
+    secondaryColor: `var(--ds-icon-subtle, ${colors.N90})`
   })))), /*#__PURE__*/React.createElement(ArticlesListItemDescription, null, description));
 };
-
 const ArticlesListItemWithContext = props => {
   return /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: ANALYTICS_CONTEXT_DATA
   }, /*#__PURE__*/React.createElement(ArticlesListItem, props));
 };
-
 export default injectIntl(ArticlesListItemWithContext);

package/dist/es2019/components/ArticlesList/ArticlesListItem/styled.js

@@ -2,7 +2,6 @@
 import styled from '@emotion/styled';
 import { fontSize, gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const ArticlesListItemWrapper = styled.a({
   position: `relative`,
   boxSizing: `border-box`,
@@ -10,22 +9,22 @@ export const ArticlesListItemWrapper = styled.a({
   display: `block`,
   textDecoration: `none`,
   cursor: `pointer`,
-  color: `${token('color.text.subtlest', colors.N200)}`,
+  color: `${`var(--ds-text-subtlest, ${colors.N200})`}`,
   borderRadius: `3px`,
-  backgroundColor: `${token('color.background.neutral.subtle', 'transparent')}`,
+  backgroundColor: `${"var(--ds-background-neutral-subtle, transparent)"}`,
   '&:hover, &:focus, &:visited, &:active': {
     textDecoration: `none`,
     outline: `none`,
     outlineOffset: `none`
   },
   '&:focus': {
-    boxShadow: `${token('color.border.focused', colors.B100)} 0px 0px 0px 2px inset`
+    boxShadow: `${`var(--ds-border-focused, ${colors.B100})`} 0px 0px 0px 2px inset`
   },
   '&:hover': {
-    backgroundColor: `${token('color.background.neutral.subtle.hovered', colors.N30)}`
+    backgroundColor: `${`var(--ds-background-neutral-subtle-hovered, ${colors.N30})`}`
   },
   '&:active': {
-    backgroundColor: `${token('color.background.neutral.subtle.pressed', colors.B50)}`
+    backgroundColor: `${`var(--ds-background-neutral-subtle-pressed, ${colors.B50})`}`
   }
 }, props => props.styles);
 export const ArticlesListItemContainer = styled.div`
@@ -36,7 +35,7 @@ export const ArticlesListItemTypeTitle = styled.div`
   font-weight: bold;
   font-size: 11px;
   line-height: ${gridSize() * 2}px;
-  color: ${token('color.text.subtlest', colors.N200)};
+  color: ${`var(--ds-text-subtlest, ${colors.N200})`};
   padding-bottom: ${gridSize() / 2}px;
 `;
 export const ArticlesListItemLinkIcon = styled.span`
@@ -46,7 +45,7 @@ export const ArticlesListItemLinkIcon = styled.span`
 `;
 export const ArticlesListItemTitleText = styled.span`
   text-decoration: none;
-  color: ${token('color.text', colors.N800)};
+  color: ${`var(--ds-text, ${colors.N800})`};
   font-size: ${fontSize()}px;
   font-weight: 600;
   display: inline-block;
@@ -58,6 +57,6 @@ export const ArticlesListItemTitleText = styled.span`
 export const ArticlesListItemDescription = styled.p`
   display: block;
   line-height: ${gridSize() * 2.5}px;
-  color: ${token('color.text.subtle', colors.N400)};
+  color: ${`var(--ds-text-subtle, ${colors.N400})`};
   margin: 0;
 `;

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

@@ -3,7 +3,6 @@ import ArticlesList from './ArticlesList';
 import ShowMoreButton from '../ShowMoreButton';
 import { ArticlesListContainer } from './styled';
 import { MIN_ITEMS_TO_DISPLAY } from './constants';
-
 const ArticleList = ({
   style,
   articles,
@@ -13,31 +12,24 @@ const ArticleList = ({
   onToggleArticlesList
 }) => {
   const [showMoreToggled, setShowMoreToggled] = useState(true);
-
   const getMinItemsToDisplay = () => {
     return minItemsToDisplay ? minItemsToDisplay : MIN_ITEMS_TO_DISPLAY;
   };
-
   const getMaxItemsToDisplay = () => {
     if (articles) {
       return maxItemsToDisplay ? maxItemsToDisplay : articles.length;
     }
-
     return 0;
   };
-
   const getNumberOfArticlesToDisplay = showMoreToggeled => {
     return showMoreToggeled ? getMinItemsToDisplay() : getMaxItemsToDisplay();
   };
-
   const toggleArticlesList = (event, analyticsEvent) => {
     setShowMoreToggled(!showMoreToggled);
-
     if (onToggleArticlesList) {
       onToggleArticlesList(event, analyticsEvent, !showMoreToggled);
     }
   };
-
   return articles && articles.length > 0 ? /*#__PURE__*/React.createElement(ArticlesListContainer, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArticlesList, {
     style: style,
     onArticlesListItemClick: onArticlesListItemClick,
@@ -51,5 +43,4 @@ const ArticleList = ({
     itemsType: "articles"
   }))) : null;
 };
-
 export default ArticleList;

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

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';

package/dist/es2019/components/Help.js

@@ -11,7 +11,6 @@ import { RelatedArticlesContextProvider } from './contexts/relatedArticlesContex
 import { SearchContextProvider } from './contexts/searchContext';
 import { WhatsNewArticleProvider } from './contexts/whatsNewArticleContext';
 import HelpContent from './HelpContent';
-
 const LocaleIntlProvider = ({
   locale = 'en',
   children
@@ -19,7 +18,6 @@ const LocaleIntlProvider = ({
   key: locale,
   locale: locale
 }, children);
-
 export class Help extends React.PureComponent {
   render() {
     const {
@@ -33,6 +31,5 @@ export class Help extends React.PureComponent {
       footer: footer
     })))))))));
   }
-
 }
 export default withAnalyticsContext(defaultAnalyticsAttributes)(withAnalyticsEvents()(Help));

package/dist/es2019/components/HelpContent.js

@@ -43,14 +43,12 @@ export const HelpContent = ({
     if (onBackButtonClick) {
       onBackButtonClick(event, analyticsEvent);
     }
-
     if (navigateBack) {
       navigateBack();
     }
   }, [navigateBack, onBackButtonClick]);
   useEffect(() => {
     let handler;
-
     if (isOverlayVisible) {
       handler = setTimeout(() => {
         setIsOverlayFullyVisible(isOverlayVisible);
@@ -58,7 +56,6 @@ export const HelpContent = ({
     } else {
       setIsOverlayFullyVisible(isOverlayVisible);
     }
-
     return () => {
       if (handler) {
         clearTimeout(handler);

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

@@ -10,7 +10,6 @@ const analitycsContextData = {
   packageName,
   packageVersion
 };
-
 const HelpContentButton = ({
   id = '',
   href,
@@ -54,5 +53,4 @@ const HelpContentButton = ({
     position: "left"
   }, buttonContent) : /*#__PURE__*/React.createElement(React.Fragment, null, buttonContent)));
 };
-
 export default HelpContentButton;

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

@@ -1,13 +1,13 @@
 /** @jsx jsx */
+
 import styled from 'styled-components';
 import * as colors from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 export const HelpContentButtonContainer = styled.a`
   display: block;
   cursor: pointer;
   width: calc(100% - ${gridSize() * 2}px);
-  color: ${token('color.text.subtle', colors.N600)};
+  color: ${`var(--ds-text-subtle, ${colors.N600})`};
   padding: ${gridSize}px;
   border-radius: 3px;
 
@@ -18,19 +18,19 @@ export const HelpContentButtonContainer = styled.a`
     text-decoration: none;
     outline: none;
     outline-offset: none;
-    color: ${token('color.text.subtle', colors.N600)};
+    color: ${`var(--ds-text-subtle, ${colors.N600})`};
   }
 
   &:focus {
-    box-shadow: ${token('color.border.focused', colors.B100)} 0 0 0 2px inset;
+    box-shadow: ${`var(--ds-border-focused, ${colors.B100})`} 0 0 0 2px inset;
   }
 
   &:hover {
-    background-color: ${token('color.background.neutral.subtle.hovered', colors.N30)};
+    background-color: ${`var(--ds-background-neutral-subtle-hovered, ${colors.N30})`};
   }
 
   &:active {
-    background-color: ${token('color.background.neutral.subtle.pressed', colors.B50)};
+    background-color: ${`var(--ds-background-neutral-subtle-pressed, ${colors.B50})`};
   }
 `;
 export const HelpContentButtonIcon = styled.div`

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

@@ -3,7 +3,6 @@ import { injectIntl } from 'react-intl-next';
 import { messages } from '../../messages';
 import { DividerLine, LoadingRectangle } from '../../util/styled';
 import { LoadignRelatedArticleList, LoadignRelatedArticleListItem } from './styled';
-
 const RelatedArticlesLoading = ({
   intl: {
     formatMessage
@@ -62,5 +61,4 @@ const RelatedArticlesLoading = ({
     marginTop: "4px"
   })), /*#__PURE__*/React.createElement(DividerLine, null)));
 };
-
 export default injectIntl(RelatedArticlesLoading);

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

@@ -30,19 +30,16 @@ export const RelatedArticles = ({
   const [hasError, setHasError] = useState(false);
   const prevRouteGroup = usePrevious(routeGroup);
   const prevRouteName = usePrevious(routeName);
-
   const handleOnRelatedArticlesShowMoreClick = (event, analyticsEvent, isCollapsed) => {
     analyticsEvent.payload.attributes = {
       componentName: 'RelatedArticles',
       packageName,
       packageVersion
     };
-
     if (onRelatedArticlesShowMoreClick) {
       onRelatedArticlesShowMoreClick(event, analyticsEvent, isCollapsed);
     }
   };
-
   const updateRelatedArticles = useCallback(async () => {
     if (onGetRelatedArticles) {
       try {
@@ -63,7 +60,6 @@ export const RelatedArticles = ({
       updateRelatedArticles();
     }
   }, [prevRouteGroup, prevRouteName, routeGroup, routeName, updateRelatedArticles]);
-
   if (hasError) {
     return /*#__PURE__*/React.createElement(SectionMessage, {
       appearance: "warning"

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

@@ -1,16 +1,14 @@
 /** @jsx jsx */
+
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
 import * as colors from '@atlaskit/theme/colors';
 import { gridSize, fontSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
-
 const baseHeading = (size, lineHeight) => `
   font-size: ${size / fontSize()}em;
   font-style: inherit;
   line-height: ${lineHeight / size};
 `;
-
 export const truncate = (width = '100%') => css`
   overflow-x: hidden;
   text-overflow: ellipsis;
@@ -19,15 +17,15 @@ export const truncate = (width = '100%') => css`
 `;
 export const RelatedArticlesTitle = styled.div`
   ${baseHeading(16, 20)}
-  color: ${token('color.text', colors.N800)};
+  color: ${`var(--ds-text, ${colors.N800})`};
   font-weight: 600;
   letter-spacing: -0.006em;
   padding: ${gridSize() * 2}px 0;
 `;
+
 /**
  * Loading styled-components
  */
-
 export const LoadignRelatedArticleSection = styled.div`
   margin-top: ${gridSize()}px;
 `;

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

@@ -37,7 +37,6 @@ export const SearchInput = ({
     if (onSearch) {
       const value = event.target.value;
       onSearch(value);
-
       if (onSearchInputChanged) {
         const analyticsEvent = createAnalyticsEvent({
           action: 'inputChanged',
@@ -49,20 +48,17 @@ export const SearchInput = ({
       }
     }
   }, [createAnalyticsEvent, onSearch, onSearchInputChanged]);
-
   const handleOnKeyPress = event => {
     if (event.key === 'Enter') {
       handleOnInputChange(event);
     }
   };
-
   const handleOnClearButtonClick = useCallback(event => {
     if (onSearch) {
       if (inputRef && inputRef.current) {
         inputRef.current.value = '';
         onSearch('');
       }
-
       if (onSearchInputCleared) {
         const analyticsEvent = createAnalyticsEvent({
           action: 'clicked'
@@ -71,11 +67,9 @@ export const SearchInput = ({
       }
     }
   }, [createAnalyticsEvent, onSearch, onSearchInputCleared]);
-
   if (inputRef && inputRef.current) {
     inputRef.current.value = searchValue;
   }
-
   return /*#__PURE__*/React.createElement(SearchInputContainer, null, /*#__PURE__*/React.createElement(Textfield, {
     title: "Help articles search input",
     autoComplete: "off",
@@ -103,11 +97,9 @@ export const SearchInput = ({
     value: searchValue
   }));
 };
-
 const SearchInputWithContext = props => {
   return /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: ANALYTICS_CONTEXT_DATA
   }, /*#__PURE__*/React.createElement(SearchInput, props));
 };
-
 export default injectIntl(SearchInputWithContext);

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

@@ -6,7 +6,6 @@ import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import { injectIntl } from 'react-intl-next';
 import { messages } from '../../../messages';
 import { SearchResultSearchExternalSiteContainer } from './styled';
-import { token } from '@atlaskit/tokens';
 export const SearchExternalSite = ({
   searchExternalUrl,
   onSearchExternalUrlClick,
@@ -17,7 +16,6 @@ export const SearchExternalSite = ({
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
-
   const handleExternalUrlClick = event => {
     if (onSearchExternalUrlClick) {
       const analyticsEvent = createAnalyticsEvent({
@@ -26,7 +24,6 @@ export const SearchExternalSite = ({
       onSearchExternalUrlClick(event, analyticsEvent);
     }
   };
-
   return searchExternalUrl ? /*#__PURE__*/React.createElement(SearchResultSearchExternalSiteContainer, null, /*#__PURE__*/React.createElement("p", null, formatMessage(messages.help_search_results_search_external_site), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: {
       componentName: 'searchExternalUrl'
@@ -36,8 +33,8 @@ export const SearchExternalSite = ({
     iconAfter: /*#__PURE__*/React.createElement(ShortcutIcon, {
       size: "small",
       label: "",
-      primaryColor: token('color.icon.subtle', colors.N90),
-      secondaryColor: token('color.icon.subtle', colors.N90)
+      primaryColor: `var(--ds-icon-subtle, ${colors.N90})`,
+      secondaryColor: `var(--ds-icon-subtle, ${colors.N90})`
     }),
     spacing: "compact",
     href: searchExternalUrl,

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

@@ -3,7 +3,6 @@ import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import * as colors from '@atlaskit/theme/colors';
 import Button from '@atlaskit/button/custom-theme-button';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
-import { token } from '@atlaskit/tokens';
 import { injectIntl } from 'react-intl-next';
 import NotFoundImage from '../../../assets/NotFoundImage';
 import { messages } from '../../../messages';
@@ -18,7 +17,6 @@ export const SearchResultsEmpty = ({
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
-
   const handleExternalUrlClick = event => {
     if (onSearchExternalUrlClick) {
       const analyticsEvent = createAnalyticsEvent({
@@ -27,7 +25,6 @@ export const SearchResultsEmpty = ({
       onSearchExternalUrlClick(event, analyticsEvent);
     }
   };
-
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchResultEmptyMessageImage, null, /*#__PURE__*/React.createElement(NotFoundImage, null)), /*#__PURE__*/React.createElement(SearchResultEmptyMessageText, null, /*#__PURE__*/React.createElement("strong", null, formatMessage(messages.help_search_results_no_results))), searchExternalUrl && /*#__PURE__*/React.createElement(SearchResultEmptyMessageText, null, /*#__PURE__*/React.createElement("p", null, formatMessage(messages.help_search_results_no_results_line_two), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: {
       componentName: 'searchExternalUrl'
@@ -37,8 +34,8 @@ export const SearchResultsEmpty = ({
     iconAfter: /*#__PURE__*/React.createElement(ShortcutIcon, {
       size: "small",
       label: "",
-      primaryColor: token('color.icon.subtle', colors.N90),
-      secondaryColor: token('color.icon.subtle', colors.N90)
+      primaryColor: `var(--ds-icon-subtle, ${colors.N90})`,
+      secondaryColor: `var(--ds-icon-subtle, ${colors.N90})`
     }),
     spacing: "compact",
     href: searchExternalUrl,

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

@@ -58,7 +58,8 @@ export const SearchResults = () => {
     in: view === VIEW.SEARCH && isSearchResultVisible,
     timeout: FADEIN_OVERLAY_TRANSITION_DURATION_MS
   }, state => /*#__PURE__*/React.createElement(SearchResultsContainer, {
-    style: { ...defaultStyle,
+    style: {
+      ...defaultStyle,
       ...transitionStyles[state]
     }
   }, searchState !== REQUEST_STATE.error && searchResult !== null && searchResult.length > 0 && state !== 'exited' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchResultsList, {

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

@@ -2,13 +2,12 @@
 import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const SearchResultsContainer = styled.div`
   position: absolute;
   height: 100%;
   width: 100%;
   top: 0;
-  background-color: ${token('elevation.surface', '#FFFFFF')};
+  background-color: ${"var(--ds-surface, #FFFFFF)"};
   flex: 1;
   flex-direction: column;
   box-sizing: border-box;
@@ -30,7 +29,7 @@ export const SearchResultEmptyMessageText = styled.div`
   text-align: center;
 
   p {
-    color: ${token('color.text.subtlest', colors.N200)};
+    color: ${`var(--ds-text-subtlest, ${colors.N200})`};
   }
 `;
 export const SearchResultSearchExternalSiteContainer = styled.div`
@@ -38,6 +37,6 @@ export const SearchResultSearchExternalSiteContainer = styled.div`
   text-align: center;
 
   p {
-    color: ${token('color.text.subtlest', colors.N200)};
+    color: ${`var(--ds-text-subtlest, ${colors.N200})`};
   }
 `;

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

@@ -2,7 +2,6 @@ import React, { useCallback } from 'react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import * as colors from '@atlaskit/theme/colors';
 import LightbulbIcon from '@atlaskit/icon/glyph/lightbulb';
-import { token } from '@atlaskit/tokens';
 import { injectIntl } from 'react-intl-next';
 import { name as packageName, version as packageVersion } from '../../../version.json';
 import { useWhatsNewArticleContext } from '../../contexts/whatsNewArticleContext';
@@ -32,7 +31,6 @@ export const WhatsNewButton = ({
     if (onWhatsNewButtonClick) {
       onWhatsNewButtonClick(event, analytics);
     }
-
     openArticle({
       id: '',
       type: ARTICLE_TYPE.WHATS_NEW
@@ -48,17 +46,15 @@ export const WhatsNewButton = ({
       productName
     }) : formatMessage(messages.help_whats_new_button_label_without_product_name),
     icon: /*#__PURE__*/React.createElement(LightbulbIcon, {
-      primaryColor: token('color.icon.subtle', colors.N600),
+      primaryColor: `var(--ds-icon-subtle, ${colors.N600})`,
       size: "medium",
       label: ""
     })
   });
 };
-
 const WhatsNewButtonWithContext = props => {
   return /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: ANALYTICS_CONTEXT_DATA
   }, /*#__PURE__*/React.createElement(WhatsNewButton, props));
 };
-
 export default injectIntl(WhatsNewButtonWithContext);

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

@@ -13,7 +13,6 @@ export const WhatsNewResultsEmpty = ({
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
-
   const handleClearFilterLinkClick = event => {
     event.preventDefault();
     const analyticsEvent = createAnalyticsEvent({
@@ -22,7 +21,6 @@ export const WhatsNewResultsEmpty = ({
     analyticsEvent.fire();
     onClearFilter();
   };
-
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WhatsNewResultsEmptyMessageImage, null, /*#__PURE__*/React.createElement(NotFoundImage, null)), /*#__PURE__*/React.createElement(WhatsNewResultsEmptyMessageText, null, /*#__PURE__*/React.createElement("strong", null, formatMessage(messages.help_whats_new_no_results))), /*#__PURE__*/React.createElement(WhatsNewResultsEmptyMessageText, null, /*#__PURE__*/React.createElement("p", null, formatMessage(messages.help_whats_new_no_results_info), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: {
       componentName: 'WhatsNewResultsEmpty'

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

@@ -2,7 +2,6 @@
 import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const WhatsNewResultsEmptyMessageImage = styled.div`
   padding: ${3 * gridSize()}px ${3 * gridSize()}px 0 ${3 * gridSize()}px;
   text-align: center;
@@ -12,6 +11,6 @@ export const WhatsNewResultsEmptyMessageText = styled.div`
   text-align: center;
 
   p {
-    color: ${token('color.text.subtlest', colors.N200)};
+    color: ${`var(--ds-text-subtlest, ${colors.N200})`};
   }
 `;

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

@@ -2,7 +2,6 @@
 import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const SearchResultEmptyMessageImage = styled.div`
   padding: ${3 * gridSize()}px ${3 * gridSize()}px 0 ${3 * gridSize()}px;
   text-align: center;
@@ -12,6 +11,6 @@ export const SearchResultEmptyMessageText = styled.div`
   text-align: center;
 
   p {
-    color: ${token('color.text.subtlest', colors.N200)};
+    color: ${`var(--ds-text-subtlest, ${colors.N200})`};
   }
 `;

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

@@ -24,10 +24,8 @@ export const WhatsNewResultListItem = ({
     createAnalyticsEvent
   } = useAnalyticsEvents();
   const typeTitle = type ? formatMessage(getTypeTitle(type)) : '';
-
   const handleOnClick = event => {
     event.preventDefault();
-
     if (onClick) {
       const analyticsEvent = createAnalyticsEvent({
         action: 'clicked'
@@ -35,7 +33,6 @@ export const WhatsNewResultListItem = ({
       onClick(event, analyticsEvent);
     }
   };
-
   return /*#__PURE__*/React.createElement(WhatsNewResultListItemWrapper, {
     styles: styles,
     "aria-disabled": "false",
@@ -45,11 +42,9 @@ export const WhatsNewResultListItem = ({
     type: type
   }, getTypeIcon(type)), /*#__PURE__*/React.createElement(WhatsNewResultListItemTitleText, null, typeTitle)), /*#__PURE__*/React.createElement(WhatsNewResultListItemDescription, null, title));
 };
-
 const WhatsNewResultListItemWithContext = props => {
   return /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: ANALYTICS_CONTEXT_DATA
   }, /*#__PURE__*/React.createElement(WhatsNewResultListItem, props));
 };
-
 export default injectIntl(WhatsNewResultListItemWithContext);