@atlaskit/help 7.2.20 → 7.2.21

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/help
 
+## 7.2.21
+
+### Patch Changes
+
+- [#77778](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77778) [`7fd2dabb944a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7fd2dabb944a) - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.
+
 ## 7.2.20
 
 ### Patch Changes

package/dist/cjs/analytics.js

@@ -14,5 +14,5 @@ var createAndFire = exports.createAndFire = x.createAndFireEvent('atlaskit');
 var defaultAnalyticsAttributes = exports.defaultAnalyticsAttributes = {
   componentName: 'help',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.20"
+  packageVersion: "7.2.21"
 };

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

@@ -15,7 +15,7 @@ var _styled = require("./styled");
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleLoadingFail',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.20"
+  packageVersion: "7.2.21"
 };
 var ArticleLoadingFail = exports.ArticleLoadingFail = function ArticleLoadingFail(_ref) {
   var onTryAgainButtonClick = _ref.onTryAgainButtonClick,

package/dist/cjs/components/Article/HelpArticle/WasHelpfulForm/WasHelpfulNoButton.js

@@ -13,7 +13,7 @@ var _messages = require("../../../../messages");
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulNoButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.20"
+  packageVersion: "7.2.21"
 };
 var ArticleWasHelpfulNoButton = exports.ArticleWasHelpfulNoButton = function ArticleWasHelpfulNoButton(_ref) {
   var _ref$isSelected = _ref.isSelected,

package/dist/cjs/components/Article/HelpArticle/WasHelpfulForm/WasHelpfulYesButton.js

@@ -13,7 +13,7 @@ var _messages = require("../../../../messages");
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulYesButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.20"
+  packageVersion: "7.2.21"
 };
 var ArticleWasHelpfulYesButton = exports.ArticleWasHelpfulYesButton = function ArticleWasHelpfulYesButton(_ref) {
   var _ref$isSelected = _ref.isSelected,

package/dist/cjs/components/Article/HelpArticle/WasHelpfulForm/index.js

@@ -36,7 +36,7 @@ var FEEDBACK_REASON_TEXT_MAX_LENGTH = '16000';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulForm',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.20"
+  packageVersion: "7.2.21"
 };
 var ArticleWasHelpfulForm = exports.ArticleWasHelpfulForm = function ArticleWasHelpfulForm(_ref) {
   var onWasHelpfulSubmit = _ref.onWasHelpfulSubmit,

package/dist/cjs/components/Article/HelpArticle/index.js

@@ -64,7 +64,7 @@ var HelpArticle = exports.HelpArticle = function HelpArticle(_ref) {
     analyticsEvent.payload.attributes = {
       componentName: 'Article',
       packageName: "@atlaskit/help",
-      packageVersion: "7.2.20"
+      packageVersion: "7.2.21"
     };
     if (onRelatedArticlesShowMoreClick) {
       onRelatedArticlesShowMoreClick(event, analyticsEvent, isCollapsed);

package/dist/cjs/components/Article/WhatsNewArticle/index.js

@@ -22,7 +22,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var analyticsContextData = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.20"
+  packageVersion: "7.2.21"
 };
 var WhatsNewArticle = exports.WhatsNewArticle = function WhatsNewArticle(_ref) {
   var formatMessage = _ref.intl.formatMessage,

package/dist/cjs/components/Article/index.js

@@ -21,7 +21,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // Animation
 var defaultStyle = {
-  left: "100%"
+  left: '100%'
 };
 var enableTransition = {
   enabled: {
@@ -33,7 +33,7 @@ var transitionStyles = {
     left: 0
   },
   exited: {
-    left: "100%"
+    left: '100%'
   }
 };
 var Article = exports.Article = function Article() {

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

@@ -17,7 +17,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.20"
+  packageVersion: "7.2.21"
 };
 var ArticlesListItem = exports.ArticlesListItem = function ArticlesListItem(_ref) {
   var styles = _ref.styles,

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

@@ -6,45 +6,70 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ArticlesListItemWrapper = exports.ArticlesListItemTypeTitle = exports.ArticlesListItemTitleText = exports.ArticlesListItemLinkIcon = exports.ArticlesListItemDescription = exports.ArticlesListItemContainer = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _constants = require("@atlaskit/theme/constants");
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-/** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/** @jsx jsx */
+
 var ArticlesListItemWrapper = exports.ArticlesListItemWrapper = _styled.default.a({
-  position: "relative",
-  boxSizing: "border-box",
+  position: 'relative',
+  boxSizing: 'border-box',
   padding: "var(--ds-space-100, 8px)",
-  display: "block",
-  textDecoration: "none",
-  cursor: "pointer",
-  color: "".concat("var(--ds-text-subtlest, ".concat(colors.N200, ")")),
-  borderRadius: "3px",
+  display: 'block',
+  textDecoration: 'none',
+  cursor: 'pointer',
+  color: "var(--ds-text-subtlest, ".concat(colors.N200, ")"),
+  borderRadius: '3px',
   backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
   '&:hover, &:focus, &:visited, &:active': {
-    textDecoration: "none",
-    outline: "none",
-    outlineOffset: "none"
+    textDecoration: 'none',
+    outline: 'none',
+    outlineOffset: 'none'
   },
   '&:focus': {
     boxShadow: "".concat("var(--ds-border-focused, ".concat(colors.B100, ")"), " 0px 0px 0px 2px inset")
   },
   '&:hover': {
-    backgroundColor: "".concat("var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30, ")"))
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30, ")")
   },
   '&:active': {
-    backgroundColor: "".concat("var(--ds-background-neutral-subtle-pressed, ".concat(colors.B50, ")"))
+    backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(colors.B50, ")")
   }
 }, function (props) {
   return props.styles;
 });
-var ArticlesListItemContainer = exports.ArticlesListItemContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  white-space: nowrap;\n"])));
-var ArticlesListItemTypeTitle = exports.ArticlesListItemTypeTitle = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: bold;\n  font-size: 11px;\n  line-height: ", ";\n  color: ", ";\n  padding-bottom: ", ";\n"])), "var(--ds-font-lineHeight-100, 16px)", "var(--ds-text-subtlest, ".concat(colors.N200, ")"), "var(--ds-space-050, 4px)");
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-var ArticlesListItemLinkIcon = exports.ArticlesListItemLinkIcon = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  align-self: auto;\n  padding-inline-start: 5px;\n  vertical-align: middle;\n"])));
-var ArticlesListItemTitleText = exports.ArticlesListItemTitleText = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  text-decoration: none;\n  color: ", ";\n  font-size: ", "px;\n  font-weight: 600;\n  display: inline-block;\n  line-height: ", ";\n  white-space: normal;\n  overflow-x: hidden;\n  margin-bottom: ", ";\n"])), "var(--ds-text, ".concat(colors.N800, ")"), (0, _constants.fontSize)(), "var(--ds-font-lineHeight-200, 20px)", "var(--ds-space-100, 8px)");
-var ArticlesListItemDescription = exports.ArticlesListItemDescription = _styled.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  line-height: ", ";\n  color: ", ";\n  margin: 0;\n"])), "var(--ds-font-lineHeight-200, 20px)", "var(--ds-text-subtle, ".concat(colors.N400, ")"));
+var ArticlesListItemContainer = exports.ArticlesListItemContainer = _styled.default.div({
+  width: '100%',
+  whiteSpace: 'nowrap'
+});
+var ArticlesListItemTypeTitle = exports.ArticlesListItemTypeTitle = _styled.default.div({
+  fontWeight: 'bold',
+  fontSize: '11px',
+  lineHeight: "var(--ds-font-lineHeight-100, 16px)",
+  color: "var(--ds-text-subtlest, ".concat(colors.N200, ")"),
+  paddingBottom: "var(--ds-space-050, 4px)"
+});
+var ArticlesListItemLinkIcon = exports.ArticlesListItemLinkIcon = _styled.default.span({
+  alignSelf: 'auto',
+  paddingInlineStart: "var(--ds-space-050, 4px)",
+  verticalAlign: 'middle'
+});
+var ArticlesListItemTitleText = exports.ArticlesListItemTitleText = _styled.default.span({
+  textDecoration: 'none',
+  color: "var(--ds-text, ".concat(colors.N800, ")"),
+  fontSize: "".concat((0, _constants.fontSize)(), "px"),
+  fontWeight: 600,
+  display: 'inline-block',
+  lineHeight: "var(--ds-font-lineHeight-200, 20px)",
+  whiteSpace: 'normal',
+  overflowX: 'hidden',
+  marginBottom: "var(--ds-space-100, 8px)"
+});
+var ArticlesListItemDescription = exports.ArticlesListItemDescription = _styled.default.p({
+  display: 'block',
+  lineHeight: "var(--ds-font-lineHeight-200, 20px)",
+  color: "var(--ds-text-subtle, ".concat(colors.N400, ")"),
+  margin: 0
+});

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

@@ -17,7 +17,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var analitycsContextData = {
   componentName: 'HelpContentButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.20"
+  packageVersion: "7.2.21"
 };
 var HelpContentButton = function HelpContentButton(_ref) {
   var _ref$id = _ref.id,

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

@@ -28,7 +28,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /** @jsxFrag */
 
 var packageName = "@atlaskit/help";
-var packageVersion = "7.2.20";
+var packageVersion = "7.2.21";
 var RelatedArticles = exports.RelatedArticles = function RelatedArticles(_ref) {
   var _ref$style = _ref.style,
     style = _ref$style === void 0 ? 'primary' : _ref$style,

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

@@ -27,7 +27,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'searchInput',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.20"
+  packageVersion: "7.2.21"
 };
 var SearchInput = exports.SearchInput = function SearchInput(_ref) {
   var formatMessage = _ref.intl.formatMessage;

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

@@ -21,7 +21,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'WhatsNewButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.20"
+  packageVersion: "7.2.21"
 };
 var WhatsNewButton = exports.WhatsNewButton = function WhatsNewButton(_ref) {
   var productName = _ref.productName,

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

@@ -15,7 +15,7 @@ var _styled2 = require("./styled");
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.20"
+  packageVersion: "7.2.21"
 };
 var WhatsNewResultListItem = exports.WhatsNewResultListItem = function WhatsNewResultListItem(_ref) {
   var formatMessage = _ref.intl.formatMessage,

package/dist/es2019/analytics.js

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

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

@@ -8,7 +8,7 @@ import { LoadingErrorMessage, LoadingErrorButtonContainer } from './styled';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleLoadingFail',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.20"
+  packageVersion: "7.2.21"
 };
 export const ArticleLoadingFail = ({
   onTryAgainButtonClick,

package/dist/es2019/components/Article/HelpArticle/WasHelpfulForm/WasHelpfulNoButton.js

@@ -6,7 +6,7 @@ import { messages } from '../../../../messages';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulNoButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.20"
+  packageVersion: "7.2.21"
 };
 export const ArticleWasHelpfulNoButton = ({
   isSelected = false,

package/dist/es2019/components/Article/HelpArticle/WasHelpfulForm/WasHelpfulYesButton.js

@@ -6,7 +6,7 @@ import { messages } from '../../../../messages';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulYesButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.20"
+  packageVersion: "7.2.21"
 };
 export const ArticleWasHelpfulYesButton = ({
   isSelected = false,

package/dist/es2019/components/Article/HelpArticle/WasHelpfulForm/index.js

@@ -25,7 +25,7 @@ const FEEDBACK_REASON_TEXT_MAX_LENGTH = '16000';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulForm',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.20"
+  packageVersion: "7.2.21"
 };
 export const ArticleWasHelpfulForm = ({
   onWasHelpfulSubmit,

package/dist/es2019/components/Article/HelpArticle/index.js

@@ -59,7 +59,7 @@ export const HelpArticle = ({
     analyticsEvent.payload.attributes = {
       componentName: 'Article',
       packageName: "@atlaskit/help",
-      packageVersion: "7.2.20"
+      packageVersion: "7.2.21"
     };
     if (onRelatedArticlesShowMoreClick) {
       onRelatedArticlesShowMoreClick(event, analyticsEvent, isCollapsed);

package/dist/es2019/components/Article/WhatsNewArticle/index.js

@@ -13,7 +13,7 @@ import { WhatsNewTypeTitle, WhatsNewTitleText, WhatsNewIconContainer, RelatedLin
 const analyticsContextData = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.20"
+  packageVersion: "7.2.21"
 };
 export const WhatsNewArticle = ({
   intl: {

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

@@ -7,7 +7,7 @@ import { ArticleContainer } from './styled';
 import ArticleContent from './ArticleContent';
 // Animation
 const defaultStyle = {
-  left: `100%`
+  left: '100%'
 };
 const enableTransition = {
   enabled: {
@@ -19,7 +19,7 @@ const transitionStyles = {
     left: 0
   },
   exited: {
-    left: `100%`
+    left: '100%'
   }
 };
 export const Article = () => {

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

@@ -7,7 +7,7 @@ import { ArticlesListItemWrapper, ArticlesListItemContainer, ArticlesListItemTit
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.20"
+  packageVersion: "7.2.21"
 };
 export const ArticlesListItem = ({
   styles,

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

@@ -3,62 +3,60 @@ import styled from '@emotion/styled';
 import { fontSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 export const ArticlesListItemWrapper = styled.a({
-  position: `relative`,
-  boxSizing: `border-box`,
+  position: 'relative',
+  boxSizing: 'border-box',
   padding: "var(--ds-space-100, 8px)",
-  display: `block`,
-  textDecoration: `none`,
-  cursor: `pointer`,
-  color: `${`var(--ds-text-subtlest, ${colors.N200})`}`,
-  borderRadius: `3px`,
-  backgroundColor: `${"var(--ds-background-neutral-subtle, transparent)"}`,
+  display: 'block',
+  textDecoration: 'none',
+  cursor: 'pointer',
+  color: `var(--ds-text-subtlest, ${colors.N200})`,
+  borderRadius: '3px',
+  backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
   '&:hover, &:focus, &:visited, &:active': {
-    textDecoration: `none`,
-    outline: `none`,
-    outlineOffset: `none`
+    textDecoration: 'none',
+    outline: 'none',
+    outlineOffset: 'none'
   },
   '&:focus': {
     boxShadow: `${`var(--ds-border-focused, ${colors.B100})`} 0px 0px 0px 2px inset`
   },
   '&:hover': {
-    backgroundColor: `${`var(--ds-background-neutral-subtle-hovered, ${colors.N30})`}`
+    backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${colors.N30})`
   },
   '&:active': {
-    backgroundColor: `${`var(--ds-background-neutral-subtle-pressed, ${colors.B50})`}`
+    backgroundColor: `var(--ds-background-neutral-subtle-pressed, ${colors.B50})`
   }
 }, props => props.styles);
-export const ArticlesListItemContainer = styled.div`
-  width: 100%;
-  white-space: nowrap;
-`;
-export const ArticlesListItemTypeTitle = styled.div`
-  font-weight: bold;
-  font-size: 11px;
-  line-height: ${"var(--ds-font-lineHeight-100, 16px)"};
-  color: ${`var(--ds-text-subtlest, ${colors.N200})`};
-  padding-bottom: ${"var(--ds-space-050, 4px)"};
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const ArticlesListItemLinkIcon = styled.span`
-  align-self: auto;
-  padding-inline-start: 5px;
-  vertical-align: middle;
-`;
-export const ArticlesListItemTitleText = styled.span`
-  text-decoration: none;
-  color: ${`var(--ds-text, ${colors.N800})`};
-  font-size: ${fontSize()}px;
-  font-weight: 600;
-  display: inline-block;
-  line-height: ${"var(--ds-font-lineHeight-200, 20px)"};
-  white-space: normal;
-  overflow-x: hidden;
-  margin-bottom: ${"var(--ds-space-100, 8px)"};
-`;
-export const ArticlesListItemDescription = styled.p`
-  display: block;
-  line-height: ${"var(--ds-font-lineHeight-200, 20px)"};
-  color: ${`var(--ds-text-subtle, ${colors.N400})`};
-  margin: 0;
-`;
+export const ArticlesListItemContainer = styled.div({
+  width: '100%',
+  whiteSpace: 'nowrap'
+});
+export const ArticlesListItemTypeTitle = styled.div({
+  fontWeight: 'bold',
+  fontSize: '11px',
+  lineHeight: "var(--ds-font-lineHeight-100, 16px)",
+  color: `var(--ds-text-subtlest, ${colors.N200})`,
+  paddingBottom: "var(--ds-space-050, 4px)"
+});
+export const ArticlesListItemLinkIcon = styled.span({
+  alignSelf: 'auto',
+  paddingInlineStart: "var(--ds-space-050, 4px)",
+  verticalAlign: 'middle'
+});
+export const ArticlesListItemTitleText = styled.span({
+  textDecoration: 'none',
+  color: `var(--ds-text, ${colors.N800})`,
+  fontSize: `${fontSize()}px`,
+  fontWeight: 600,
+  display: 'inline-block',
+  lineHeight: "var(--ds-font-lineHeight-200, 20px)",
+  whiteSpace: 'normal',
+  overflowX: 'hidden',
+  marginBottom: "var(--ds-space-100, 8px)"
+});
+export const ArticlesListItemDescription = styled.p({
+  display: 'block',
+  lineHeight: "var(--ds-font-lineHeight-200, 20px)",
+  color: `var(--ds-text-subtle, ${colors.N400})`,
+  margin: 0
+});

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

@@ -7,7 +7,7 @@ import { HelpContentButtonContainer, HelpContentButtonIcon, HelpContentButtonTex
 const analitycsContextData = {
   componentName: 'HelpContentButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.20"
+  packageVersion: "7.2.21"
 };
 const HelpContentButton = ({
   id = '',

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

@@ -15,7 +15,7 @@ import useCancellablePromise from '../../util/hooks/cancellablePromise';
 import { usePrevious } from '../../util/hooks/previous';
 import { jsx } from '@emotion/react';
 const packageName = "@atlaskit/help";
-const packageVersion = "7.2.20";
+const packageVersion = "7.2.21";
 export const RelatedArticles = ({
   style = 'primary',
   routeGroup,

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

@@ -17,7 +17,7 @@ import { SearchInputContainer, SearchIconContainer, CloseButtonAndSpinnerContain
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'searchInput',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.20"
+  packageVersion: "7.2.21"
 };
 export const SearchInput = ({
   intl: {

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.20"
+  packageVersion: "7.2.21"
 };
 export const WhatsNewButton = ({
   productName,

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.20"
+  packageVersion: "7.2.21"
 };
 export const WhatsNewResultListItem = ({
   intl: {

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.20"
+  packageVersion: "7.2.21"
 };

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.20"
+  packageVersion: "7.2.21"
 };
 export var ArticleLoadingFail = function ArticleLoadingFail(_ref) {
   var onTryAgainButtonClick = _ref.onTryAgainButtonClick,

package/dist/esm/components/Article/HelpArticle/WasHelpfulForm/WasHelpfulNoButton.js

@@ -6,7 +6,7 @@ import { messages } from '../../../../messages';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulNoButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.20"
+  packageVersion: "7.2.21"
 };
 export var ArticleWasHelpfulNoButton = function ArticleWasHelpfulNoButton(_ref) {
   var _ref$isSelected = _ref.isSelected,

package/dist/esm/components/Article/HelpArticle/WasHelpfulForm/WasHelpfulYesButton.js

@@ -6,7 +6,7 @@ import { messages } from '../../../../messages';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulYesButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.20"
+  packageVersion: "7.2.21"
 };
 export var ArticleWasHelpfulYesButton = function ArticleWasHelpfulYesButton(_ref) {
   var _ref$isSelected = _ref.isSelected,

package/dist/esm/components/Article/HelpArticle/WasHelpfulForm/index.js

@@ -26,7 +26,7 @@ var FEEDBACK_REASON_TEXT_MAX_LENGTH = '16000';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulForm',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.20"
+  packageVersion: "7.2.21"
 };
 export var ArticleWasHelpfulForm = function ArticleWasHelpfulForm(_ref) {
   var onWasHelpfulSubmit = _ref.onWasHelpfulSubmit,

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

@@ -55,7 +55,7 @@ export var HelpArticle = function HelpArticle(_ref) {
     analyticsEvent.payload.attributes = {
       componentName: 'Article',
       packageName: "@atlaskit/help",
-      packageVersion: "7.2.20"
+      packageVersion: "7.2.21"
     };
     if (onRelatedArticlesShowMoreClick) {
       onRelatedArticlesShowMoreClick(event, analyticsEvent, isCollapsed);

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

@@ -13,7 +13,7 @@ import { WhatsNewTypeTitle, WhatsNewTitleText, WhatsNewIconContainer, RelatedLin
 var analyticsContextData = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.20"
+  packageVersion: "7.2.21"
 };
 export var WhatsNewArticle = function WhatsNewArticle(_ref) {
   var formatMessage = _ref.intl.formatMessage,

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

@@ -11,7 +11,7 @@ import { ArticleContainer } from './styled';
 import ArticleContent from './ArticleContent';
 // Animation
 var defaultStyle = {
-  left: "100%"
+  left: '100%'
 };
 var enableTransition = {
   enabled: {
@@ -23,7 +23,7 @@ var transitionStyles = {
     left: 0
   },
   exited: {
-    left: "100%"
+    left: '100%'
   }
 };
 export var Article = function Article() {

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

@@ -7,7 +7,7 @@ import { ArticlesListItemWrapper, ArticlesListItemContainer, ArticlesListItemTit
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.20"
+  packageVersion: "7.2.21"
 };
 export var ArticlesListItem = function ArticlesListItem(_ref) {
   var styles = _ref.styles,

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

@@ -1,40 +1,64 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 /** @jsx jsx */
 import styled from '@emotion/styled';
 import { fontSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 export var ArticlesListItemWrapper = styled.a({
-  position: "relative",
-  boxSizing: "border-box",
+  position: 'relative',
+  boxSizing: 'border-box',
   padding: "var(--ds-space-100, 8px)",
-  display: "block",
-  textDecoration: "none",
-  cursor: "pointer",
-  color: "".concat("var(--ds-text-subtlest, ".concat(colors.N200, ")")),
-  borderRadius: "3px",
+  display: 'block',
+  textDecoration: 'none',
+  cursor: 'pointer',
+  color: "var(--ds-text-subtlest, ".concat(colors.N200, ")"),
+  borderRadius: '3px',
   backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
   '&:hover, &:focus, &:visited, &:active': {
-    textDecoration: "none",
-    outline: "none",
-    outlineOffset: "none"
+    textDecoration: 'none',
+    outline: 'none',
+    outlineOffset: 'none'
   },
   '&:focus': {
     boxShadow: "".concat("var(--ds-border-focused, ".concat(colors.B100, ")"), " 0px 0px 0px 2px inset")
   },
   '&:hover': {
-    backgroundColor: "".concat("var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30, ")"))
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30, ")")
   },
   '&:active': {
-    backgroundColor: "".concat("var(--ds-background-neutral-subtle-pressed, ".concat(colors.B50, ")"))
+    backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(colors.B50, ")")
   }
 }, function (props) {
   return props.styles;
 });
-export var ArticlesListItemContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  white-space: nowrap;\n"])));
-export var ArticlesListItemTypeTitle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 11px;\n  line-height: ", ";\n  color: ", ";\n  padding-bottom: ", ";\n"])), "var(--ds-font-lineHeight-100, 16px)", "var(--ds-text-subtlest, ".concat(colors.N200, ")"), "var(--ds-space-050, 4px)");
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export var ArticlesListItemLinkIcon = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  align-self: auto;\n  padding-inline-start: 5px;\n  vertical-align: middle;\n"])));
-export var ArticlesListItemTitleText = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  text-decoration: none;\n  color: ", ";\n  font-size: ", "px;\n  font-weight: 600;\n  display: inline-block;\n  line-height: ", ";\n  white-space: normal;\n  overflow-x: hidden;\n  margin-bottom: ", ";\n"])), "var(--ds-text, ".concat(colors.N800, ")"), fontSize(), "var(--ds-font-lineHeight-200, 20px)", "var(--ds-space-100, 8px)");
-export var ArticlesListItemDescription = styled.p(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: block;\n  line-height: ", ";\n  color: ", ";\n  margin: 0;\n"])), "var(--ds-font-lineHeight-200, 20px)", "var(--ds-text-subtle, ".concat(colors.N400, ")"));
+export var ArticlesListItemContainer = styled.div({
+  width: '100%',
+  whiteSpace: 'nowrap'
+});
+export var ArticlesListItemTypeTitle = styled.div({
+  fontWeight: 'bold',
+  fontSize: '11px',
+  lineHeight: "var(--ds-font-lineHeight-100, 16px)",
+  color: "var(--ds-text-subtlest, ".concat(colors.N200, ")"),
+  paddingBottom: "var(--ds-space-050, 4px)"
+});
+export var ArticlesListItemLinkIcon = styled.span({
+  alignSelf: 'auto',
+  paddingInlineStart: "var(--ds-space-050, 4px)",
+  verticalAlign: 'middle'
+});
+export var ArticlesListItemTitleText = styled.span({
+  textDecoration: 'none',
+  color: "var(--ds-text, ".concat(colors.N800, ")"),
+  fontSize: "".concat(fontSize(), "px"),
+  fontWeight: 600,
+  display: 'inline-block',
+  lineHeight: "var(--ds-font-lineHeight-200, 20px)",
+  whiteSpace: 'normal',
+  overflowX: 'hidden',
+  marginBottom: "var(--ds-space-100, 8px)"
+});
+export var ArticlesListItemDescription = styled.p({
+  display: 'block',
+  lineHeight: "var(--ds-font-lineHeight-200, 20px)",
+  color: "var(--ds-text-subtle, ".concat(colors.N400, ")"),
+  margin: 0
+});

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

@@ -7,7 +7,7 @@ import { HelpContentButtonContainer, HelpContentButtonIcon, HelpContentButtonTex
 var analitycsContextData = {
   componentName: 'HelpContentButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.20"
+  packageVersion: "7.2.21"
 };
 var HelpContentButton = function HelpContentButton(_ref) {
   var _ref$id = _ref.id,

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

@@ -18,7 +18,7 @@ import useCancellablePromise from '../../util/hooks/cancellablePromise';
 import { usePrevious } from '../../util/hooks/previous';
 import { jsx } from '@emotion/react';
 var packageName = "@atlaskit/help";
-var packageVersion = "7.2.20";
+var packageVersion = "7.2.21";
 export var RelatedArticles = function RelatedArticles(_ref) {
   var _ref$style = _ref.style,
     style = _ref$style === void 0 ? 'primary' : _ref$style,

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

@@ -17,7 +17,7 @@ import { SearchInputContainer, SearchIconContainer, CloseButtonAndSpinnerContain
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'searchInput',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.20"
+  packageVersion: "7.2.21"
 };
 export var SearchInput = function SearchInput(_ref) {
   var formatMessage = _ref.intl.formatMessage;

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

@@ -11,7 +11,7 @@ import { ARTICLE_TYPE } from '../../../model/Help';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'WhatsNewButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.20"
+  packageVersion: "7.2.21"
 };
 export var WhatsNewButton = function WhatsNewButton(_ref) {
   var productName = _ref.productName,

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

@@ -8,7 +8,7 @@ import { WhatsNewResultListItemWrapper, WhatsNewResultListItemTitleContainer, Wh
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.2.20"
+  packageVersion: "7.2.21"
 };
 export var WhatsNewResultListItem = function WhatsNewResultListItem(_ref) {
   var formatMessage = _ref.intl.formatMessage,

package/docs/0-intro.tsx

@@ -1,25 +1,10 @@
 import React from 'react';
-import {
-  md,
-  code,
-  Props,
-  AtlassianInternalWarning,
-  DevPreviewWarning,
-} from '@atlaskit/docs';
+import { md, code, Props, AtlassianInternalWarning } from '@atlaskit/docs';
 
 const helpProps = require('!!extract-react-types-loader!../src/components/Help');
 
 export default md`
-  ${(
-    <>
-      <div style={{ marginBottom: '0.5rem' }}>
-        <AtlassianInternalWarning />
-      </div>
-      <div style={{ marginTop: '0.5rem' }}>
-        <DevPreviewWarning />
-      </div>
-    </>
-  )}
+  ${(<AtlassianInternalWarning />)}
 
   ## Usage
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/help",
-  "version": "7.2.20",
+  "version": "7.2.21",
   "description": "A cross-product help component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -42,22 +42,22 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/button": "^17.3.0",
+    "@atlaskit/button": "^17.6.0",
     "@atlaskit/checkbox": "^13.0.0",
     "@atlaskit/form": "^9.0.3",
-    "@atlaskit/help-article": "^4.1.0",
-    "@atlaskit/help-layout": "^4.2.0",
-    "@atlaskit/icon": "^22.0.0",
-    "@atlaskit/notification-indicator": "^9.1.0",
+    "@atlaskit/help-article": "^4.1.10",
+    "@atlaskit/help-layout": "^4.2.15",
+    "@atlaskit/icon": "^22.1.0",
+    "@atlaskit/notification-indicator": "^9.2.0",
     "@atlaskit/notification-log-client": "^6.1.0",
     "@atlaskit/radio": "^6.0.0",
     "@atlaskit/section-message": "^6.4.0",
-    "@atlaskit/select": "^17.0.3",
+    "@atlaskit/select": "^17.1.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/textarea": "^5.0.0",
     "@atlaskit/textfield": "^6.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.36.0",
+    "@atlaskit/tokens": "^1.39.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",