@atlaskit/help 7.2.0 → 7.2.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/help
 
+## 7.2.2
+
+### Patch Changes
+
+- [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
+
+## 7.2.1
+
+### Patch Changes
+
+- [`7e051bad115`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7e051bad115) - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.
+
 ## 7.2.0
 
 ### Minor Changes

package/analytics/package.json

@@ -6,9 +6,9 @@
   "sideEffects": false,
   "types": "../dist/types/analytics.d.ts",
   "typesVersions": {
-    ">=4.0 <4.5": {
+    ">=4.5 <4.9": {
       "*": [
-        "../dist/types-ts4.0/analytics.d.ts"
+        "../dist/types-ts4.5/analytics.d.ts"
       ]
     }
   }

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

@@ -7,10 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.LoadingErrorMessage = exports.LoadingErrorButtonContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _constants = require("@atlaskit/theme/constants");
 var _templateObject, _templateObject2;
 /** @jsx jsx */
-var LoadingErrorMessage = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: ", "px;\n  text-align: center;\n"])), 3 * (0, _constants.gridSize)());
+var LoadingErrorMessage = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: ", ";\n  text-align: center;\n"])), "var(--ds-space-300, 24px)");
 exports.LoadingErrorMessage = LoadingErrorMessage;
-var LoadingErrorButtonContainer = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: ", "px;\n  text-align: center;\n"])), 3 * (0, _constants.gridSize)());
+var LoadingErrorButtonContainer = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: ", ";\n  text-align: center;\n"])), "var(--ds-space-300, 24px)");
 exports.LoadingErrorButtonContainer = LoadingErrorButtonContainer;

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

@@ -45,6 +45,8 @@ exports.ArticlesListItemWrapper = ArticlesListItemWrapper;
 var ArticlesListItemContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  white-space: nowrap;\n"])));
 exports.ArticlesListItemContainer = ArticlesListItemContainer;
 var 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-spacing
 exports.ArticlesListItemTypeTitle = ArticlesListItemTypeTitle;
 var ArticlesListItemLinkIcon = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  align-self: auto;\n  padding-inline-start: 5px;\n  vertical-align: middle;\n"])));
 exports.ArticlesListItemLinkIcon = ArticlesListItemLinkIcon;

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

@@ -8,19 +8,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.SearchResultsList = exports.SearchResultsContainer = exports.SearchResultSearchExternalSiteContainer = exports.SearchResultEmptyMessageText = exports.SearchResultEmptyMessageImage = 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; }
-var SearchResultsContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  background-color: ", ";\n  flex: 1;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  z-index: 10;\n  padding: 0 ", "px;\n"])), "var(--ds-surface, #FFFFFF)", 2 * (0, _constants.gridSize)());
+var SearchResultsContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  background-color: ", ";\n  flex: 1;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  z-index: 10;\n  padding: 0 ", ";\n"])), "var(--ds-surface, #FFFFFF)", "var(--ds-space-200, 16px)");
 exports.SearchResultsContainer = SearchResultsContainer;
-var SearchResultsList = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: ", "px;\n  position: relative;\n"])), 3 * (0, _constants.gridSize)());
+var SearchResultsList = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: ", ";\n  position: relative;\n"])), "var(--ds-space-300, 24px)");
 exports.SearchResultsList = SearchResultsList;
-var SearchResultEmptyMessageImage = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n"])), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)());
+var SearchResultEmptyMessageImage = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", " ", " 0\n    ", ";\n  text-align: center;\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
 exports.SearchResultEmptyMessageImage = SearchResultEmptyMessageImage;
-var SearchResultEmptyMessageText = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)(), "var(--ds-text-subtlest, ".concat(colors.N200, ")"));
+var SearchResultEmptyMessageText = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", " ", " 0\n    ", ";\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-text-subtlest, ".concat(colors.N200, ")"));
 exports.SearchResultEmptyMessageText = SearchResultEmptyMessageText;
-var SearchResultSearchExternalSiteContainer = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px;\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), 3 * (0, _constants.gridSize)(), "var(--ds-text-subtlest, ".concat(colors.N200, ")"));
+var SearchResultSearchExternalSiteContainer = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", ";\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), "var(--ds-space-300, 24px)", "var(--ds-text-subtlest, ".concat(colors.N200, ")"));
 exports.SearchResultSearchExternalSiteContainer = SearchResultSearchExternalSiteContainer;

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

@@ -8,13 +8,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.WhatsNewResultsEmptyMessageText = exports.WhatsNewResultsEmptyMessageImage = 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;
 /** @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; }
-var WhatsNewResultsEmptyMessageImage = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n"])), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)());
+var WhatsNewResultsEmptyMessageImage = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", " ", " 0\n    ", ";\n  text-align: center;\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
 exports.WhatsNewResultsEmptyMessageImage = WhatsNewResultsEmptyMessageImage;
-var WhatsNewResultsEmptyMessageText = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)(), "var(--ds-text-subtlest, ".concat(colors.N200, ")"));
+var WhatsNewResultsEmptyMessageText = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", " ", " 0\n    ", ";\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-text-subtlest, ".concat(colors.N200, ")"));
 exports.WhatsNewResultsEmptyMessageText = WhatsNewResultsEmptyMessageText;

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

@@ -8,13 +8,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.SearchResultEmptyMessageText = exports.SearchResultEmptyMessageImage = 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;
 /** @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; }
-var SearchResultEmptyMessageImage = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n"])), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)());
+var SearchResultEmptyMessageImage = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", " ", " 0\n    ", ";\n  text-align: center;\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
 exports.SearchResultEmptyMessageImage = SearchResultEmptyMessageImage;
-var SearchResultEmptyMessageText = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)(), "var(--ds-text-subtlest, ".concat(colors.N200, ")"));
+var SearchResultEmptyMessageText = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", " ", " 0\n    ", ";\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-text-subtlest, ".concat(colors.N200, ")"));
 exports.SearchResultEmptyMessageText = SearchResultEmptyMessageText;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/help",
-	"version": "7.2.0",
+	"version": "7.2.2",
 	"sideEffects": false
 }

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

@@ -1,11 +1,10 @@
 /** @jsx jsx */
 import styled from '@emotion/styled';
-import { gridSize } from '@atlaskit/theme/constants';
 export const LoadingErrorMessage = styled.div`
-  padding-top: ${3 * gridSize()}px;
+  padding-top: ${"var(--ds-space-300, 24px)"};
   text-align: center;
 `;
 export const LoadingErrorButtonContainer = styled.div`
-  padding-top: ${3 * gridSize()}px;
+  padding-top: ${"var(--ds-space-300, 24px)"};
   text-align: center;
 `;

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

@@ -38,6 +38,8 @@ export const ArticlesListItemTypeTitle = styled.div`
   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-spacing
 export const ArticlesListItemLinkIcon = styled.span`
   align-self: auto;
   padding-inline-start: 5px;

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

@@ -1,6 +1,5 @@
 /** @jsx jsx */
 import styled from '@emotion/styled';
-import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 export const SearchResultsContainer = styled.div`
   position: absolute;
@@ -14,18 +13,20 @@ export const SearchResultsContainer = styled.div`
   overflow-x: hidden;
   overflow-y: auto;
   z-index: 10;
-  padding: 0 ${2 * gridSize()}px;
+  padding: 0 ${"var(--ds-space-200, 16px)"};
 `;
 export const SearchResultsList = styled.div`
-  padding-top: ${3 * gridSize()}px;
+  padding-top: ${"var(--ds-space-300, 24px)"};
   position: relative;
 `;
 export const SearchResultEmptyMessageImage = styled.div`
-  padding: ${3 * gridSize()}px ${3 * gridSize()}px 0 ${3 * gridSize()}px;
+  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: ${3 * gridSize()}px ${3 * gridSize()}px 0 ${3 * gridSize()}px;
+  padding: ${"var(--ds-space-300, 24px)"} ${"var(--ds-space-300, 24px)"} 0
+    ${"var(--ds-space-300, 24px)"};
   text-align: center;
 
   p {
@@ -33,7 +34,7 @@ export const SearchResultEmptyMessageText = styled.div`
   }
 `;
 export const SearchResultSearchExternalSiteContainer = styled.div`
-  padding: ${3 * gridSize()}px;
+  padding: ${"var(--ds-space-300, 24px)"};
   text-align: center;
 
   p {

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

@@ -1,13 +1,14 @@
 /** @jsx jsx */
 import styled from '@emotion/styled';
-import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 export const WhatsNewResultsEmptyMessageImage = styled.div`
-  padding: ${3 * gridSize()}px ${3 * gridSize()}px 0 ${3 * gridSize()}px;
+  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: ${3 * gridSize()}px ${3 * gridSize()}px 0 ${3 * gridSize()}px;
+  padding: ${"var(--ds-space-300, 24px)"} ${"var(--ds-space-300, 24px)"} 0
+    ${"var(--ds-space-300, 24px)"};
   text-align: center;
 
   p {

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

@@ -1,13 +1,14 @@
 /** @jsx jsx */
 import styled from '@emotion/styled';
-import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 export const SearchResultEmptyMessageImage = styled.div`
-  padding: ${3 * gridSize()}px ${3 * gridSize()}px 0 ${3 * gridSize()}px;
+  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: ${3 * gridSize()}px ${3 * gridSize()}px 0 ${3 * gridSize()}px;
+  padding: ${"var(--ds-space-300, 24px)"} ${"var(--ds-space-300, 24px)"} 0
+    ${"var(--ds-space-300, 24px)"};
   text-align: center;
 
   p {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/help",
-	"version": "7.2.0",
+	"version": "7.2.2",
 	"sideEffects": false
 }

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

@@ -2,6 +2,5 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2;
 /** @jsx jsx */
 import styled from '@emotion/styled';
-import { gridSize } from '@atlaskit/theme/constants';
-export var LoadingErrorMessage = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-top: ", "px;\n  text-align: center;\n"])), 3 * gridSize());
-export var LoadingErrorButtonContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-top: ", "px;\n  text-align: center;\n"])), 3 * gridSize());
+export var LoadingErrorMessage = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-top: ", ";\n  text-align: center;\n"])), "var(--ds-space-300, 24px)");
+export var LoadingErrorButtonContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-top: ", ";\n  text-align: center;\n"])), "var(--ds-space-300, 24px)");

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

@@ -33,6 +33,8 @@ export var ArticlesListItemWrapper = styled.a({
 });
 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-spacing
 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, ")"));

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

@@ -2,10 +2,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 /** @jsx jsx */
 import styled from '@emotion/styled';
-import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-export var SearchResultsContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  background-color: ", ";\n  flex: 1;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  z-index: 10;\n  padding: 0 ", "px;\n"])), "var(--ds-surface, #FFFFFF)", 2 * gridSize());
-export var SearchResultsList = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-top: ", "px;\n  position: relative;\n"])), 3 * gridSize());
-export var SearchResultEmptyMessageImage = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n"])), 3 * gridSize(), 3 * gridSize(), 3 * gridSize());
-export var SearchResultEmptyMessageText = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), 3 * gridSize(), 3 * gridSize(), 3 * gridSize(), "var(--ds-text-subtlest, ".concat(colors.N200, ")"));
-export var SearchResultSearchExternalSiteContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: ", "px;\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), 3 * gridSize(), "var(--ds-text-subtlest, ".concat(colors.N200, ")"));
+export var SearchResultsContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  background-color: ", ";\n  flex: 1;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  z-index: 10;\n  padding: 0 ", ";\n"])), "var(--ds-surface, #FFFFFF)", "var(--ds-space-200, 16px)");
+export var SearchResultsList = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-top: ", ";\n  position: relative;\n"])), "var(--ds-space-300, 24px)");
+export var SearchResultEmptyMessageImage = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: ", " ", " 0\n    ", ";\n  text-align: center;\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
+export var SearchResultEmptyMessageText = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: ", " ", " 0\n    ", ";\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-text-subtlest, ".concat(colors.N200, ")"));
+export var SearchResultSearchExternalSiteContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: ", ";\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), "var(--ds-space-300, 24px)", "var(--ds-text-subtlest, ".concat(colors.N200, ")"));

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

@@ -2,7 +2,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2;
 /** @jsx jsx */
 import styled from '@emotion/styled';
-import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-export var WhatsNewResultsEmptyMessageImage = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n"])), 3 * gridSize(), 3 * gridSize(), 3 * gridSize());
-export var WhatsNewResultsEmptyMessageText = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), 3 * gridSize(), 3 * gridSize(), 3 * gridSize(), "var(--ds-text-subtlest, ".concat(colors.N200, ")"));
+export var WhatsNewResultsEmptyMessageImage = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: ", " ", " 0\n    ", ";\n  text-align: center;\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
+export var WhatsNewResultsEmptyMessageText = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: ", " ", " 0\n    ", ";\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-text-subtlest, ".concat(colors.N200, ")"));

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

@@ -2,7 +2,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2;
 /** @jsx jsx */
 import styled from '@emotion/styled';
-import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-export var SearchResultEmptyMessageImage = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n"])), 3 * gridSize(), 3 * gridSize(), 3 * gridSize());
-export var SearchResultEmptyMessageText = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), 3 * gridSize(), 3 * gridSize(), 3 * gridSize(), "var(--ds-text-subtlest, ".concat(colors.N200, ")"));
+export var SearchResultEmptyMessageImage = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: ", " ", " 0\n    ", ";\n  text-align: center;\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
+export var SearchResultEmptyMessageText = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: ", " ", " 0\n    ", ";\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-text-subtlest, ".concat(colors.N200, ")"));

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/help",
-	"version": "7.2.0",
+	"version": "7.2.2",
 	"sideEffects": false
 }

package/dist/types/components/ArticlesList/ArticlesListItem/styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type ArticlesListItemWrapperProps = {
+type ArticlesListItemWrapperProps = {
     styles: any;
 };
 export declare const ArticlesListItemWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, ArticlesListItemWrapperProps, object>;

package/dist/types/components/Help.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { Help as HelpInterface } from '../model/Help';
-export declare type Props = HelpInterface & WithAnalyticsEventsProps;
+export type Props = HelpInterface & WithAnalyticsEventsProps;
 export declare class Help extends React.PureComponent<Props> {
     render(): JSX.Element;
 }

package/dist/types/components/HelpContentButton/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { NotificationLogProvider } from '@atlaskit/notification-log-client';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-export declare type Props = {
+export type Props = {
     id?: string;
     href?: string;
     notificationMax?: number;

package/dist/types/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/WhatsNewResultItem/styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type WhatsNewResultListItemWrapperProps = {
+type WhatsNewResultListItemWrapperProps = {
     styles: any;
 };
 export declare const WhatsNewResultListItemWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, WhatsNewResultListItemWrapperProps, object>;

package/dist/types/components/contexts/navigationContext.d.ts

@@ -4,7 +4,7 @@ import { Article, ArticleItem } from '../../model/Article';
 import { WhatsNewArticleItem, WhatsNewArticle } from '../../model/WhatsNew';
 import { HistoryItem, articleId } from '../../model/Help';
 import { VIEW } from '../constants';
-declare type ViewType = keyof typeof VIEW;
+type ViewType = keyof typeof VIEW;
 interface NavigationProviderInterface {
     navigationData?: {
         articleId: articleId;

package/dist/types/components/styled.d.ts

@@ -1,11 +1,11 @@
 /** @jsx jsx */
 /// <reference types="react" />
-declare type HelpBodyProps = {
+type HelpBodyProps = {
     isOverlayVisible?: boolean;
 };
 export declare const HelpBodyContainer: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, HelpBodyProps, object>;
 export declare const HelpBody: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, HelpBodyProps, object>;
-declare type HomeProps = {
+type HomeProps = {
     isOverlayFullyVisible?: boolean;
     isOverlayVisible?: boolean;
 };

package/dist/types/util/hooks/ctx.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare function createCtx<ContextType>(): readonly [() => ContextType, import("react").Provider<ContextType | undefined>];
+export declare function createCtx<ContextType>(): readonly [() => NonNullable<ContextType>, import("react").Provider<ContextType | undefined>];

package/dist/types/util/i18n-util.d.ts

@@ -1,6 +1,6 @@
-declare type LanguageCode = 'zh' | 'cs' | 'da' | 'nl' | 'en' | 'en_GB' | 'et' | 'fi' | 'fr' | 'de' | 'hu' | 'is' | 'it' | 'ja' | 'ko' | 'nb' | 'pl' | 'pt_BR' | 'pt_PT' | 'ro' | 'ru' | 'sk' | 'es' | 'sv';
-export declare type LangCode = LanguageCode | 'pt-BR' | 'pt-PT';
-declare type LocaleMessages = {
+type LanguageCode = 'zh' | 'cs' | 'da' | 'nl' | 'en' | 'en_GB' | 'et' | 'fi' | 'fr' | 'de' | 'hu' | 'is' | 'it' | 'ja' | 'ko' | 'nb' | 'pl' | 'pt_BR' | 'pt_PT' | 'ro' | 'ru' | 'sk' | 'es' | 'sv';
+export type LangCode = LanguageCode | 'pt-BR' | 'pt-PT';
+type LocaleMessages = {
     [key: string]: string;
 };
 /**

package/dist/types/util/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { WHATS_NEW_ITEM_TYPES } from '../model/WhatsNew';
-export declare const getTypeIcon: (itemType?: WHATS_NEW_ITEM_TYPES | undefined) => "" | JSX.Element;
+export declare const getTypeIcon: (itemType?: WHATS_NEW_ITEM_TYPES) => "" | JSX.Element;
 export declare const getTypeTitle: (itemType: WHATS_NEW_ITEM_TYPES) => {
     id: string;
     defaultMessage: string;

package/dist/types/util/styled.d.ts

@@ -5,7 +5,7 @@ export declare const DividerLine: import("@emotion/styled-base").StyledComponent
 /**
  * Loading container
  */
-declare type LoadingRectangleProps = {
+type LoadingRectangleProps = {
     contentWidth?: string;
     contentHeight?: string;
     marginTop?: string;
@@ -14,7 +14,7 @@ export declare const LoadingRectangle: import("@emotion/styled-base").StyledComp
 /**
  * Loading Circle
  */
-declare type LoadingCircleProps = {
+type LoadingCircleProps = {
     radius?: string;
     marginTop?: string;
 };
@@ -22,7 +22,7 @@ export declare const LoadingCircle: import("@emotion/styled-base").StyledCompone
 /**
  * What's new icon
  */
-declare type WhatsNewTypeIconProps = {
+type WhatsNewTypeIconProps = {
     type?: WHATS_NEW_ITEM_TYPES;
 };
 export declare const WhatsNewTypeIcon: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, WhatsNewTypeIconProps, object>;

package/dist/types/util/testing/mock.d.ts

@@ -4,5 +4,5 @@ export declare const getMockArticle: (id: string, routeName?: string, routeGroup
 export declare const getMockArticleItem: (id: string, routeName?: string, routeGroup?: string, productName?: string, href?: string) => ArticleItem;
 export declare const getMockArticleItemList: (numberOfItems: number) => ArticleItem[];
 export declare const getMockWhatsNewArticle: (id: string, routeName?: string, routeGroup?: string, productName?: string, href?: string) => Article;
-export declare const getMockWhatsNewArticleItem: (id: string, type?: WHATS_NEW_ITEM_TYPES | undefined, title?: string, description?: string, changeTargetSchedule?: string, status?: string, featureRolloutDate?: string, href?: string) => WhatsNewArticleItem;
+export declare const getMockWhatsNewArticleItem: (id: string, type?: WHATS_NEW_ITEM_TYPES, title?: string, description?: string, changeTargetSchedule?: string, status?: string, featureRolloutDate?: string, href?: string) => WhatsNewArticleItem;
 export declare const getMockWhatsNewArticleItemList: (numberOfItems: number) => WhatsNewArticleItem[];

package/messages/package.json

@@ -6,9 +6,9 @@
   "sideEffects": false,
   "types": "../dist/types/messages.d.ts",
   "typesVersions": {
-    ">=4.0 <4.5": {
+    ">=4.5 <4.9": {
       "*": [
-        "../dist/types-ts4.0/messages.d.ts"
+        "../dist/types-ts4.5/messages.d.ts"
       ]
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/help",
-  "version": "7.2.0",
+  "version": "7.2.2",
   "description": "A cross-product help component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,6 +12,14 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.ts",
   "atlassian": {
@@ -29,7 +37,7 @@
     "@atlaskit/analytics": "^8.1.0",
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/button": "^16.7.0",
-    "@atlaskit/checkbox": "^12.5.0",
+    "@atlaskit/checkbox": "^12.6.0",
     "@atlaskit/form": "^8.11.0",
     "@atlaskit/help-article": "^4.1.0",
     "@atlaskit/help-layout": "^4.2.0",
@@ -43,7 +51,7 @@
     "@atlaskit/textarea": "^4.6.0",
     "@atlaskit/textfield": "^5.4.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.3.0",
+    "@atlaskit/tokens": "^1.4.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
@@ -68,7 +76,7 @@
     "algoliasearch": "^3.35.1",
     "enzyme": "^3.10.0",
     "react-test-renderer": "^16.8.0",
-    "typescript": "4.5.5"
+    "typescript": "~4.9.5"
   },
   "keywords": [
     "atlaskit",
@@ -80,7 +88,8 @@
   "techstack": {
     "@repo/internal": {
       "design-tokens": [
-        "color"
+        "color",
+        "spacing"
       ]
     }
   }

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,300 @@
+## API Report File for "@atlaskit/help"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+/// <reference types="react" />
+
+import type { AdfDoc } from '@atlaskit/help-article';
+import { BODY_FORMAT_TYPES } from '@atlaskit/help-article';
+import { ClassAttributes } from 'react';
+import { DetailedHTMLProps } from 'react';
+import { HTMLAttributes } from 'react';
+import { NotificationLogProvider } from '@atlaskit/notification-log-client';
+import { default as React_2 } from 'react';
+import { StyledComponent } from '@emotion/styled-base';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { WithContextProps } from '@atlaskit/analytics-next';
+import { WithIntlProps } from 'react-intl-next';
+import { WrappedComponentProps } from 'react-intl-next';
+
+// @public (undocumented)
+export interface Article extends ArticleItem {
+    // (undocumented)
+    body: AdfDoc | string;
+    // (undocumented)
+    bodyFormat?: BODY_FORMAT_TYPES;
+    // (undocumented)
+    relatedArticles?: ArticleItem[];
+}
+
+// @public (undocumented)
+export enum ARTICLE_ITEM_TYPES {
+    // (undocumented)
+    topicInProduct = "topicInProduct"
+}
+
+// @public (undocumented)
+export enum ARTICLE_TYPE {
+    // (undocumented)
+    HELP_ARTICLE = "HELP_ARTICLE",
+    // (undocumented)
+    WHATS_NEW = "WHATS_NEW"
+}
+
+// @public (undocumented)
+export interface ArticleFeedback {
+    // (undocumented)
+    contactMe: boolean;
+    // (undocumented)
+    feedbackReason: string;
+    // (undocumented)
+    feedbackReasonText: string;
+    // (undocumented)
+    wasHelpful: boolean;
+}
+
+// @public (undocumented)
+export interface articleId {
+    // (undocumented)
+    id: string;
+    // (undocumented)
+    type: ARTICLE_TYPE;
+}
+
+// @public (undocumented)
+export interface ArticleItem {
+    // (undocumented)
+    description?: string;
+    // (undocumented)
+    href?: string;
+    // (undocumented)
+    id: string;
+    // (undocumented)
+    lastPublished: string;
+    // (undocumented)
+    productName?: string;
+    // (undocumented)
+    routes?: {
+        routeName: string;
+        routeGroup: string;
+    }[];
+    // (undocumented)
+    title: string;
+    // (undocumented)
+    topicId?: string;
+    // (undocumented)
+    type: ARTICLE_ITEM_TYPES;
+}
+
+// @public (undocumented)
+export const ArticlesListItem: React_2.FC<WithIntlProps<Props_3 & Partial<ArticleItem> & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React_2.ComponentType<Props_3 & Partial<ArticleItem> & WrappedComponentProps<"intl">>;
+};
+
+// @public (undocumented)
+const _default: React_2.ForwardRefExoticComponent<Pick<Omit<Props, keyof WithAnalyticsEventsProps> & React_2.RefAttributes<any> & WithContextProps, "analyticsContext" | "key" | keyof Help> & React_2.RefAttributes<any>>;
+export default _default;
+
+// @public (undocumented)
+export const DividerLine: StyledComponent<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement>>, object>;
+
+// @public (undocumented)
+export interface Help {
+    // (undocumented)
+    children?: React.ReactNode;
+    // (undocumented)
+    footer?: React.ReactNode;
+    // (undocumented)
+    header?: {
+        onCloseButtonClick?(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent): void;
+        onBackButtonClick?(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent): void;
+    };
+    // (undocumented)
+    helpArticle?: {
+        onGetHelpArticle?(articleId: articleId): Promise<Article>;
+        onHelpArticleLoadingFailTryAgainButtonClick?(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent, articleId: articleId): void;
+        onWasHelpfulSubmit?(analyticsEvent: UIAnalyticsEvent, articleFeedback: ArticleFeedback, articleData: ArticleItem): Promise<boolean>;
+        onWasHelpfulYesButtonClick?(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent, ArticleItem: ArticleItem): void;
+        onWasHelpfulNoButtonClick?(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent, ArticleItem: ArticleItem): void;
+    };
+    // (undocumented)
+    home?: {
+        homeOptions?: Props_2[];
+    };
+    // (undocumented)
+    navigation?: {
+        navigationData?: {
+            articleId: articleId;
+            history: HistoryItem[];
+        };
+        setNavigationData?(navigationData: {
+            articleId?: articleId;
+            history?: HistoryItem[];
+        }): void;
+    };
+    // (undocumented)
+    relatedArticles?: {
+        routeGroup?: string;
+        routeName?: string;
+        onGetRelatedArticles?(routeGroup?: string, routeName?: string): Promise<ArticleItem[]>;
+        onRelatedArticlesShowMoreClick?(event: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent, isCollapsed: boolean): void;
+        onRelatedArticlesListItemClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent, articleData: ArticleItem) => void;
+    };
+    // (undocumented)
+    search?: {
+        onSearch?(value: string): Promise<ArticleItem[]>;
+        onSearchInputChanged?(event: React.KeyboardEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent, value: string): void;
+        onSearchInputCleared?(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent): void;
+        onSearchResultItemClick?(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent, articleData: ArticleItem): void;
+        onSearchExternalUrlClick?(event?: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent?: UIAnalyticsEvent): void;
+        searchExternalUrl?: string;
+    };
+    // (undocumented)
+    whatsNew?: {
+        whatsNewGetNotificationProvider?: Promise<NotificationLogProvider>;
+        productName?: string;
+        onWhatsNewButtonClick?(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent): void;
+        onSearchWhatsNewArticles?(filter?: '' | WHATS_NEW_ITEM_TYPES, numberOfItems?: number, page?: string): Promise<whatsNewSearchResult>;
+        onWhatsNewResultItemClick?(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent, whatsNewArticleData: WhatsNewArticleItem): void;
+        onSearchWhatsNewShowMoreClick?(event: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent): void;
+        onGetWhatsNewArticle?(id: articleId): Promise<WhatsNewArticle>;
+    };
+}
+
+// @public (undocumented)
+export const HelpContentButton: ({ id, href, notificationMax, notificationLogProvider, text, icon, onClick, tooltipText, }: Props_2) => JSX.Element;
+
+// @public (undocumented)
+export interface HistoryItem {
+    // (undocumented)
+    article?: Article | WhatsNewArticle;
+    // (undocumented)
+    id: string;
+    // (undocumented)
+    state: REQUEST_STATE;
+    // (undocumented)
+    type: ARTICLE_TYPE;
+    // (undocumented)
+    uid: number;
+}
+
+// @public (undocumented)
+type Props = Help & WithAnalyticsEventsProps;
+
+// @public (undocumented)
+type Props_2 = {
+    id?: string;
+    href?: string;
+    notificationMax?: number;
+    notificationLogProvider?: Promise<NotificationLogProvider>;
+    text: string;
+    icon?: React_2.ReactChild;
+    tooltipText?: string;
+    onClick?: (id: string, analytics: UIAnalyticsEvent, event: React_2.MouseEvent<HTMLElement>) => void;
+};
+
+// @public (undocumented)
+interface Props_3 {
+    // (undocumented)
+    onClick?: (event: React_2.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
+    // (undocumented)
+    styles?: {};
+}
+
+// @public (undocumented)
+interface Props_4 {
+    // (undocumented)
+    onGetRelatedArticles?(routeGroup?: string, routeName?: string): Promise<ArticleItem[]>;
+    // (undocumented)
+    onRelatedArticlesListItemClick?: (event: React_2.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent, articleData: ArticleItem) => void;
+    // (undocumented)
+    onRelatedArticlesShowMoreClick?: (event: React_2.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent, isCollapsed: boolean) => void;
+    // (undocumented)
+    routeGroup?: string;
+    // (undocumented)
+    routeName?: string;
+    // (undocumented)
+    style?: 'primary' | 'secondary';
+}
+
+// @public (undocumented)
+export const RelatedArticles: React_2.ForwardRefExoticComponent<Omit<Props_4 & WrappedComponentProps<"intl">, "intl"> & {
+    forwardedRef?: React_2.Ref<any> | undefined;
+} & {
+    children?: React_2.ReactNode;
+} & WithContextProps & React_2.RefAttributes<any>>;
+
+// @public (undocumented)
+enum REQUEST_STATE {
+    // (undocumented)
+    done = "done",
+    // (undocumented)
+    error = "error",
+    // (undocumented)
+    load = "load",
+    // (undocumented)
+    loading = "loading",
+    // (undocumented)
+    reload = "reload"
+}
+
+// @public (undocumented)
+export enum WHATS_NEW_ITEM_TYPES {
+    // (undocumented)
+    EXPERIMENT = "Experiment",
+    // (undocumented)
+    FIX = "Fix",
+    // (undocumented)
+    IMPROVEMENT = "Improvement",
+    // (undocumented)
+    NEW_FEATURE = "Announcement",
+    // (undocumented)
+    REMOVED = "Removed"
+}
+
+// @public (undocumented)
+export interface WhatsNewArticle extends WhatsNewArticleItem {
+    // (undocumented)
+    bodyFormat?: BODY_FORMAT_TYPES;
+    // (undocumented)
+    description: AdfDoc | string;
+}
+
+// @public (undocumented)
+export interface WhatsNewArticleItem {
+    // (undocumented)
+    changeTargetSchedule?: string;
+    // (undocumented)
+    communityUrl?: string;
+    // (undocumented)
+    featureRolloutDate?: string;
+    // (undocumented)
+    href?: string;
+    // (undocumented)
+    id: string;
+    // (undocumented)
+    relatedExternalLinks?: string;
+    // (undocumented)
+    status?: string;
+    // (undocumented)
+    title?: string;
+    // (undocumented)
+    type?: WHATS_NEW_ITEM_TYPES;
+}
+
+// @public (undocumented)
+interface whatsNewSearchResult {
+    // (undocumented)
+    articles: WhatsNewArticleItem[];
+    // (undocumented)
+    hasNextPage: boolean;
+    // (undocumented)
+    nextPage: string;
+}
+
+// (No @packageDocumentation comment for this package)
+
+```