@atlaskit/help 7.1.26 → 7.2.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/help
 
+## 7.2.0
+
+### Minor Changes
+
+- [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
+
+### Patch Changes
+
+- Updated dependencies
+
+## 7.1.27
+
+### Patch Changes
+
+- [`ad5cbfa5a71`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ad5cbfa5a71) - Migrated use of `gridSize` to space tokens where possible. There is no expected visual or behaviour change.
+
 ## 7.1.26
 
 ### Patch Changes

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

@@ -9,6 +9,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 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)());
 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)());

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

@@ -30,7 +30,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
-
 var FEEDBACK_REASON_TEXT_MAX_LENGTH = '16000';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulForm',

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

@@ -8,14 +8,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.ArticleFeedbackText = exports.ArticleFeedbackContainer = exports.ArticleFeedbackAnswerWrapper = 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;
+/** @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 ArticleFeedbackContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
 exports.ArticleFeedbackContainer = ArticleFeedbackContainer;
-var ArticleFeedbackText = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 0.75rem;\n  font-weight: bold;\n  color: ", ";\n  line-height: ", "px;\n  position: relative;\n  display: inline-block;\n"])), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), (0, _constants.gridSize)() * 4);
+var ArticleFeedbackText = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 0.75rem;\n  font-weight: bold;\n  color: ", ";\n  line-height: ", ";\n  position: relative;\n  display: inline-block;\n"])), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), "var(--ds-font-lineHeight-500, 32px)");
 exports.ArticleFeedbackText = ArticleFeedbackText;
-var ArticleFeedbackAnswerWrapper = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: ", "px;\n"])), (0, _constants.gridSize)() * 2);
+var ArticleFeedbackAnswerWrapper = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: ", ";\n"])), "var(--ds-space-200, 16px)");
 exports.ArticleFeedbackAnswerWrapper = ArticleFeedbackAnswerWrapper;

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

@@ -11,17 +11,18 @@ 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, _templateObject6;
+/** @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 WhatsNewTypeTitle = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  text-decoration: none;\n  color: ", ";\n  font-size: ", "px;\n  vertical-align: middle;\n  padding-left: ", "px;\n  line-height: ", "px;\n  white-space: normal;\n  overflow-x: hidden;\n"])), "var(--ds-text-subtlest, ".concat(colors.N300, ")"), (0, _constants.fontSize)(), (0, _constants.gridSize)() / 2, (0, _constants.gridSize)() * 2.5);
+var WhatsNewTypeTitle = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  text-decoration: none;\n  color: ", ";\n  font-size: ", "px;\n  vertical-align: middle;\n  padding-left: ", ";\n  line-height: ", ";\n  white-space: normal;\n  overflow-x: hidden;\n"])), "var(--ds-text-subtlest, ".concat(colors.N300, ")"), (0, _constants.fontSize)(), "var(--ds-space-050, 4px)", "var(--ds-font-lineHeight-200, 20px)");
 exports.WhatsNewTypeTitle = WhatsNewTypeTitle;
-var WhatsNewIconContainer = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  padding-bottom: ", "px;\n"])), (0, _constants.gridSize)());
+var WhatsNewIconContainer = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  padding-bottom: ", ";\n"])), "var(--ds-space-100, 8px)");
 exports.WhatsNewIconContainer = WhatsNewIconContainer;
-var WhatsNewTitleText = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  text-decoration: none;\n  color: ", ";\n  font-size: ", "px;\n  font-weight: 600;\n  white-space: normal;\n  overflow-x: hidden;\n  padding-bottom: ", "px;\n  display: block;\n"])), "var(--ds-text, ".concat(colors.N800, ")"), (0, _constants.fontSize)(), (0, _constants.gridSize)());
+var WhatsNewTitleText = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  text-decoration: none;\n  color: ", ";\n  font-size: ", "px;\n  font-weight: 600;\n  white-space: normal;\n  overflow-x: hidden;\n  padding-bottom: ", ";\n  display: block;\n"])), "var(--ds-text, ".concat(colors.N800, ")"), (0, _constants.fontSize)(), "var(--ds-space-100, 8px)");
 exports.WhatsNewTitleText = WhatsNewTitleText;
-var WhatsNewRelatedLinksTitleText = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  text-decoration: none;\n  color: ", ";\n  font-size: ", "px;\n  font-weight: 600;\n  white-space: normal;\n  overflow-x: hidden;\n  padding-bottom: ", "px;\n  display: block;\n"])), "var(--ds-text, ".concat(colors.N800, ")"), (0, _constants.fontSizeSmall)(), (0, _constants.gridSize)());
+var WhatsNewRelatedLinksTitleText = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  text-decoration: none;\n  color: ", ";\n  font-size: ", "px;\n  font-weight: 600;\n  white-space: normal;\n  overflow-x: hidden;\n  padding-bottom: ", ";\n  display: block;\n"])), "var(--ds-text, ".concat(colors.N800, ")"), (0, _constants.fontSizeSmall)(), "var(--ds-space-100, 8px)");
 exports.WhatsNewRelatedLinksTitleText = WhatsNewRelatedLinksTitleText;
-var RelatedLinkContainer = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: ", "px;\n"])), (0, _constants.gridSize)());
+var RelatedLinkContainer = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: ", ";\n"])), "var(--ds-space-100, 8px)");
 exports.RelatedLinkContainer = RelatedLinkContainer;
-var ExternalLinkIconContainer = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  vertical-align: middle;\n  padding-left: ", "px;\n"])), (0, _constants.gridSize)() / 2);
+var ExternalLinkIconContainer = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  vertical-align: middle;\n  padding-left: ", ";\n"])), "var(--ds-space-050, 4px)");
 exports.ExternalLinkIconContainer = ExternalLinkIconContainer;

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ArticleContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _constants = require("@atlaskit/theme/constants");
 var _templateObject;
-var ArticleContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px ", "px;\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  background-color: ", ";\n  left: 100%;\n  flex: 1;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  z-index: 2;\n"])), (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 3, "var(--ds-surface, #FFFFFF)");
+/** @jsx jsx */
+var ArticleContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", " ", ";\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  background-color: ", ";\n  left: 100%;\n  flex: 1;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  z-index: 2;\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-300, 24px)", "var(--ds-surface, #FFFFFF)");
 exports.ArticleContainer = ArticleContainer;

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

@@ -11,12 +11,13 @@ 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 ArticlesListItemWrapper = _styled.default.a({
   position: "relative",
   boxSizing: "border-box",
-  padding: "".concat((0, _constants.gridSize)(), "px"),
+  padding: "var(--ds-space-100, 8px)",
   display: "block",
   textDecoration: "none",
   cursor: "pointer",
@@ -43,11 +44,11 @@ var ArticlesListItemWrapper = _styled.default.a({
 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: ", "px;\n  color: ", ";\n  padding-bottom: ", "px;\n"])), (0, _constants.gridSize)() * 2, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), (0, _constants.gridSize)() / 2);
+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)");
 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;
-var 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: ", "px;\n  white-space: normal;\n  overflow-x: hidden;\n  margin-bottom: ", "px;\n"])), "var(--ds-text, ".concat(colors.N800, ")"), (0, _constants.fontSize)(), (0, _constants.gridSize)() * 2.5, (0, _constants.gridSize)());
+var 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)");
 exports.ArticlesListItemTitleText = ArticlesListItemTitleText;
-var ArticlesListItemDescription = _styled.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  line-height: ", "px;\n  color: ", ";\n  margin: 0;\n"])), (0, _constants.gridSize)() * 2.5, "var(--ds-text-subtle, ".concat(colors.N400, ")"));
+var 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, ")"));
 exports.ArticlesListItemDescription = ArticlesListItemDescription;

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

@@ -8,8 +8,8 @@ exports.truncate = exports.ToggleShowMoreArticlesContainer = exports.ArticlesLis
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _core = require("@emotion/core");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _constants = require("@atlaskit/theme/constants");
 var _templateObject, _templateObject2, _templateObject3;
+/** @jsx jsx */
 var truncate = function truncate() {
   var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
   return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: ", ";\n"])), width);
@@ -17,5 +17,5 @@ var truncate = function truncate() {
 exports.truncate = truncate;
 var ArticlesListContainer = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
 exports.ArticlesListContainer = ArticlesListContainer;
-var ToggleShowMoreArticlesContainer = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px 0;\n  span {\n    margin: 0;\n  }\n"])), (0, _constants.gridSize)());
+var ToggleShowMoreArticlesContainer = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", " 0;\n  span {\n    margin: 0;\n  }\n"])), "var(--ds-space-100, 8px)");
 exports.ToggleShowMoreArticlesContainer = ToggleShowMoreArticlesContainer;

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

@@ -9,17 +9,17 @@ exports.HelpContentButtonText = exports.HelpContentButtonIcon = exports.HelpCont
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
-var _constants = require("@atlaskit/theme/constants");
 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 HelpContentButtonContainer = _styledComponents.default.a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  cursor: pointer;\n  width: calc(100% - ", "px);\n  color: ", ";\n  padding: ", "px;\n  border-radius: 3px;\n\n  &:hover,\n  &:focus,\n  &:visited,\n  &:active {\n    text-decoration: none;\n    outline: none;\n    outline-offset: none;\n    color: ", ";\n  }\n\n  &:focus {\n    box-shadow: ", " 0 0 0 2px inset;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"])), (0, _constants.gridSize)() * 2, "var(--ds-text-subtle, ".concat(colors.N600, ")"), _constants.gridSize, "var(--ds-text-subtle, ".concat(colors.N600, ")"), "var(--ds-border-focused, ".concat(colors.B100, ")"), "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30, ")"), "var(--ds-background-neutral-subtle-pressed, ".concat(colors.B50, ")"));
+var HelpContentButtonContainer = _styledComponents.default.a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  cursor: pointer;\n  width: calc(100% - ", ");\n  color: ", ";\n  padding: ", ";\n  border-radius: 3px;\n\n  &:hover,\n  &:focus,\n  &:visited,\n  &:active {\n    text-decoration: none;\n    outline: none;\n    outline-offset: none;\n    color: ", ";\n  }\n\n  &:focus {\n    box-shadow: ", " 0 0 0 2px inset;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"])), "var(--ds-space-200, 16px)", "var(--ds-text-subtle, ".concat(colors.N600, ")"), "var(--ds-space-100, 8px)", "var(--ds-text-subtle, ".concat(colors.N600, ")"), "var(--ds-border-focused, ".concat(colors.B100, ")"), "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30, ")"), "var(--ds-background-neutral-subtle-pressed, ".concat(colors.B50, ")"));
 exports.HelpContentButtonContainer = HelpContentButtonContainer;
 var HelpContentButtonIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  vertical-align: middle;\n  width: 20px;\n  height: 20px;\n  border-radius: 4px;\n  position: relative;\n\n  & span {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n"])));
 exports.HelpContentButtonIcon = HelpContentButtonIcon;
-var HelpContentButtonText = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: calc(100% - 20px);\n  display: inline-block;\n  vertical-align: middle;\n  padding: 0 ", "px;\n  box-sizing: border-box;\n"])), _constants.gridSize);
+var HelpContentButtonText = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: calc(100% - 20px);\n  display: inline-block;\n  vertical-align: middle;\n  padding: 0 ", ";\n  box-sizing: border-box;\n"])), "var(--ds-space-100, 8px)");
 exports.HelpContentButtonText = HelpContentButtonText;
-var HelpContentButtonExternalLinkIcon = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  vertical-align: middle;\n  padding-left: ", "px;\n"])), (0, _constants.gridSize)() / 2);
+var HelpContentButtonExternalLinkIcon = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  vertical-align: middle;\n  padding-left: ", ";\n"])), "var(--ds-space-050, 4px)");
 exports.HelpContentButtonExternalLinkIcon = HelpContentButtonExternalLinkIcon;
-var HelpContentButtonExternalNotificationIcon = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  vertical-align: middle;\n  margin-top: -", "px;\n  padding-left: ", "px;\n"])), (0, _constants.gridSize)() / 2, (0, _constants.gridSize)() / 2);
+var HelpContentButtonExternalNotificationIcon = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  vertical-align: middle;\n  margin-top: calc(-1 * ", ");\n  padding-left: ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)");
 exports.HelpContentButtonExternalNotificationIcon = HelpContentButtonExternalNotificationIcon;

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

@@ -62,37 +62,35 @@ var RelatedArticles = function RelatedArticles(_ref) {
   var updateRelatedArticles = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
     var _relatedArticles;
     return _regenerator.default.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            if (!onGetRelatedArticles) {
-              _context.next = 15;
-              break;
-            }
-            _context.prev = 1;
-            _context.next = 4;
-            return cancellablePromise(onGetRelatedArticles(routeGroup, routeName));
-          case 4:
-            _relatedArticles = _context.sent;
-            setRelatedArticles(_relatedArticles);
-            setIsLoading(false);
-            setHasError(false);
-            _context.next = 13;
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (!onGetRelatedArticles) {
+            _context.next = 15;
             break;
-          case 10:
-            _context.prev = 10;
-            _context.t0 = _context["catch"](1);
-            setHasError(true);
-          case 13:
-            _context.next = 17;
-            break;
-          case 15:
-            setIsLoading(false);
-            setHasError(false);
-          case 17:
-          case "end":
-            return _context.stop();
-        }
+          }
+          _context.prev = 1;
+          _context.next = 4;
+          return cancellablePromise(onGetRelatedArticles(routeGroup, routeName));
+        case 4:
+          _relatedArticles = _context.sent;
+          setRelatedArticles(_relatedArticles);
+          setIsLoading(false);
+          setHasError(false);
+          _context.next = 13;
+          break;
+        case 10:
+          _context.prev = 10;
+          _context.t0 = _context["catch"](1);
+          setHasError(true);
+        case 13:
+          _context.next = 17;
+          break;
+        case 15:
+          setIsLoading(false);
+          setHasError(false);
+        case 17:
+        case "end":
+          return _context.stop();
       }
     }, _callee, null, [[1, 10]]);
   })), [cancellablePromise, onGetRelatedArticles, routeGroup, routeName]);

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

@@ -12,6 +12,7 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var _constants = require("@atlaskit/theme/constants");
 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 baseHeading = function baseHeading(size, lineHeight) {
@@ -22,15 +23,15 @@ var truncate = function truncate() {
   return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: ", ";\n"])), width);
 };
 exports.truncate = truncate;
-var RelatedArticlesTitle = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  color: ", ";\n  font-weight: 600;\n  letter-spacing: -0.006em;\n  padding: ", "px 0;\n"])), baseHeading(16, 20), "var(--ds-text, ".concat(colors.N800, ")"), (0, _constants.gridSize)() * 2);
+var RelatedArticlesTitle = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  color: ", ";\n  font-weight: 600;\n  letter-spacing: -0.006em;\n  padding: ", " 0;\n"])), baseHeading(16, 20), "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-space-200, 16px)");
 
 /**
  * Loading styled-components
  */
 exports.RelatedArticlesTitle = RelatedArticlesTitle;
-var LoadignRelatedArticleSection = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", "px;\n"])), (0, _constants.gridSize)());
+var LoadignRelatedArticleSection = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n"])), "var(--ds-space-100, 8px)");
 exports.LoadignRelatedArticleSection = LoadignRelatedArticleSection;
 var LoadignRelatedArticleList = _styled.default.ul(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n"])));
 exports.LoadignRelatedArticleList = LoadignRelatedArticleList;
-var LoadignRelatedArticleListItem = _styled.default.li(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  width: 100%;\n  padding: ", "px;\n  margin-bottom: ", "px;\n  box-sizing: border-box;\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)() * 2);
+var LoadignRelatedArticleListItem = _styled.default.li(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  width: 100%;\n  padding: ", ";\n  margin-bottom: ", ";\n  box-sizing: border-box;\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)");
 exports.LoadignRelatedArticleListItem = LoadignRelatedArticleListItem;

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

@@ -7,11 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.SearchInputContainer = exports.SearchIconContainer = exports.CloseButtonAndSpinnerContainer = 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, _templateObject3;
+/** @jsx jsx */
 var SearchInputContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  order: 0;\n  flex: 0 1 auto;\n  align-self: auto;\n  width: 100%;\n  box-sizing: border-box;\n"])));
 exports.SearchInputContainer = SearchInputContainer;
-var SearchIconContainer = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  height: ", "px;\n  padding-left: ", "px;\n\n  & > span {\n    padding-left: ", "px;\n    height: ", "px;\n    width: ", "px;\n    box-sizing: border-box;\n  }\n"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() / 2, (0, _constants.gridSize)() / 2, (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3);
+var SearchIconContainer = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n  padding-left: ", ";\n\n  & > span {\n    padding-left: ", ";\n    height: ", ";\n    width: ", ";\n    box-sizing: border-box;\n  }\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
 exports.SearchIconContainer = SearchIconContainer;
-var CloseButtonAndSpinnerContainer = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 0;\n  padding-right: ", "px;\n  position: relative;\n  white-space: nowrap;\n\n  & > span {\n    padding-right: ", "px;\n  }\n\n  & > button,\n  & > span {\n    display: inline-block;\n    vertical-align: middle;\n  }\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)() / 2);
+var CloseButtonAndSpinnerContainer = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 0;\n  padding-right: ", ";\n  position: relative;\n  white-space: nowrap;\n\n  & > span {\n    padding-right: ", ";\n  }\n\n  & > button,\n  & > span {\n    display: inline-block;\n    vertical-align: middle;\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)");
 exports.CloseButtonAndSpinnerContainer = CloseButtonAndSpinnerContainer;

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

@@ -11,6 +11,7 @@ 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)());

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

@@ -11,6 +11,7 @@ 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)());

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

@@ -11,6 +11,7 @@ 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)());

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

@@ -11,12 +11,13 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _constants = require("@atlaskit/theme/constants");
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var _templateObject, _templateObject2, _templateObject3;
+/** @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 WhatsNewResultListItemWrapper = _styled.default.a({
   position: "relative",
   boxSizing: "border-box",
-  padding: "".concat((0, _constants.gridSize)(), "px"),
+  padding: "var(--ds-space-100, 8px)",
   display: "block",
   textDecoration: "none",
   cursor: "pointer",
@@ -41,9 +42,9 @@ var WhatsNewResultListItemWrapper = _styled.default.a({
   return props.styles;
 });
 exports.WhatsNewResultListItemWrapper = WhatsNewResultListItemWrapper;
-var WhatsNewResultListItemTitleContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  white-space: nowrap;\n  margin-bottom: ", "px;\n"])), (0, _constants.gridSize)() / 2);
+var WhatsNewResultListItemTitleContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  white-space: nowrap;\n  margin-bottom: ", ";\n"])), "var(--ds-space-050, 4px)");
 exports.WhatsNewResultListItemTitleContainer = WhatsNewResultListItemTitleContainer;
-var WhatsNewResultListItemTitleText = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", "px;\n  line-height: ", "px;\n  display: inline-block;\n  vertical-align: middle;\n  margin: 0;\n  padding-left: ", "px;\n  white-space: normal;\n  overflow-x: hidden;\n"])), (0, _constants.fontSizeSmall)(), (0, _constants.fontSize)(), (0, _constants.gridSize)() / 2);
+var WhatsNewResultListItemTitleText = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", "px;\n  line-height: ", "px;\n  display: inline-block;\n  vertical-align: middle;\n  margin: 0;\n  padding-left: ", ";\n  white-space: normal;\n  overflow-x: hidden;\n"])), (0, _constants.fontSizeSmall)(), (0, _constants.fontSize)(), "var(--ds-space-050, 4px)");
 exports.WhatsNewResultListItemTitleText = WhatsNewResultListItemTitleText;
-var WhatsNewResultListItemDescription = _styled.default.p(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  line-height: ", "px;\n  color: ", ";\n  margin: 0;\n"])), (0, _constants.gridSize)() * 2.5, "var(--ds-text, ".concat(colors.N800, ")"));
+var WhatsNewResultListItemDescription = _styled.default.p(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  line-height: ", ";\n  color: ", ";\n  margin: 0;\n"])), "var(--ds-font-lineHeight-200, 20px)", "var(--ds-text, ".concat(colors.N800, ")"));
 exports.WhatsNewResultListItemDescription = WhatsNewResultListItemDescription;

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

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _constants = require("@atlaskit/theme/constants");
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var _toDate = _interopRequireDefault(require("date-fns/toDate"));
 var _isYesterday = _interopRequireDefault(require("date-fns/isYesterday"));
@@ -54,8 +53,8 @@ var WhatsNewResultsList = function WhatsNewResultsList(_ref) {
       return /*#__PURE__*/_react.default.createElement(_WhatsNewResultItem.default, {
         styles: {
           border: style === 'secondary' ? "2px solid ".concat("var(--ds-border, ".concat(colors.N30, ")")) : 0,
-          padding: style === 'secondary' ? "".concat((0, _constants.gridSize)(), "px ").concat((0, _constants.gridSize)() * 2, "px") : "".concat((0, _constants.gridSize)(), "px"),
-          marginBottom: style === 'secondary' ? "".concat((0, _constants.gridSize)() * 1.5, "px") : 0
+          padding: style === 'secondary' ? "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-200, 16px)") : "var(--ds-space-100, 8px)",
+          marginBottom: style === 'secondary' ? "var(--ds-space-150, 12px)" : 0
         },
         id: whatsNewArticle.id,
         onClick: function onClick(event, analyticsEvent) {

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

@@ -12,6 +12,7 @@ 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 truncate = function truncate() {
@@ -21,9 +22,9 @@ var truncate = function truncate() {
 exports.truncate = truncate;
 var WhatsNewResultsListContainer = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
 exports.WhatsNewResultsListContainer = WhatsNewResultsListContainer;
-var WhatsNewResultsListGroupWrapper = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px 0 ", "px 0;\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)());
+var WhatsNewResultsListGroupWrapper = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", " 0 ", " 0;\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
 exports.WhatsNewResultsListGroupWrapper = WhatsNewResultsListGroupWrapper;
-var WhatsNewResultsListGroupTitle = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", "px;\n  font-weight: bold;\n  padding: 0 ", "px ", "px ", "px;\n  text-transform: uppercase;\n"])), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), (0, _constants.fontSizeSmall)(), (0, _constants.gridSize)(), (0, _constants.gridSize)(), (0, _constants.gridSize)());
+var WhatsNewResultsListGroupTitle = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", "px;\n  font-weight: bold;\n  padding: 0 ", " ", "\n    ", ";\n  text-transform: uppercase;\n"])), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), (0, _constants.fontSizeSmall)(), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
 exports.WhatsNewResultsListGroupTitle = WhatsNewResultsListGroupTitle;
-var ToggleShowWhatsNewResultsContainer = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px 0;\n  span {\n    margin: 0;\n  }\n"])), (0, _constants.gridSize)());
+var ToggleShowWhatsNewResultsContainer = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", " 0;\n  span {\n    margin: 0;\n  }\n"])), "var(--ds-space-100, 8px)");
 exports.ToggleShowWhatsNewResultsContainer = ToggleShowWhatsNewResultsContainer;

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

@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.LoadignWhatsNewResultsListItem = exports.LoadignWhatsNewResultsList = 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 */
 /**
  * Loading styled-components
  */
-var LoadignWhatsNewResultsList = _styled.default.ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  margin-top: ", "px;\n"])), (0, _constants.gridSize)() * 2);
+var LoadignWhatsNewResultsList = _styled.default.ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  margin-top: ", ";\n"])), "var(--ds-space-200, 16px)");
 exports.LoadignWhatsNewResultsList = LoadignWhatsNewResultsList;
-var LoadignWhatsNewResultsListItem = _styled.default.li(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  width: 100%;\n  padding: ", "px;\n  margin: 0;\n  box-sizing: border-box;\n"])), (0, _constants.gridSize)());
+var LoadignWhatsNewResultsListItem = _styled.default.li(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  width: 100%;\n  padding: ", ";\n  margin: 0;\n  box-sizing: border-box;\n"])), "var(--ds-space-100, 8px)");
 exports.LoadignWhatsNewResultsListItem = LoadignWhatsNewResultsListItem;

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

@@ -9,11 +9,12 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _constants = require("@atlaskit/theme/constants");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var WhatsNewResultsContainer = _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: 1;\n  padding: ", "px;\n"])), "var(--ds-surface, #FFFFFF)", 2 * (0, _constants.gridSize)());
+/** @jsx jsx */
+var WhatsNewResultsContainer = _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: 1;\n  padding: ", ";\n"])), "var(--ds-surface, #FFFFFF)", "var(--ds-space-200, 16px)");
 exports.WhatsNewResultsContainer = WhatsNewResultsContainer;
 var SelectContainer = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n"])), 19 * (0, _constants.gridSize)());
 exports.SelectContainer = SelectContainer;
-var WhatsNewResultsListContainer = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: ", "px;\n"])), (0, _constants.gridSize)());
+var WhatsNewResultsListContainer = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: ", ";\n"])), "var(--ds-space-100, 8px)");
 exports.WhatsNewResultsListContainer = WhatsNewResultsListContainer;
-var WhatsNewResultsListTitleContainer = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0 ", "px;\n"])), (0, _constants.gridSize)());
+var WhatsNewResultsListTitleContainer = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0 ", ";\n"])), "var(--ds-space-100, 8px)");
 exports.WhatsNewResultsListTitleContainer = WhatsNewResultsListTitleContainer;

package/dist/cjs/components/constants.js

@@ -10,27 +10,27 @@ var LOADING_TIMEOUT = 1000;
 exports.LOADING_TIMEOUT = LOADING_TIMEOUT;
 var NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE = 10;
 exports.NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE = NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE;
-var VIEW; // Animation related consts
-exports.VIEW = VIEW;
-(function (VIEW) {
+var VIEW = /*#__PURE__*/function (VIEW) {
   VIEW["DEFAULT_CONTENT"] = "DEFAULT_CONTENT";
   VIEW["SEARCH"] = "SEARCH";
   VIEW["ARTICLE"] = "ARTICLE";
   VIEW["WHATS_NEW"] = "WHATS_NEW";
   VIEW["WHATS_NEW_ARTICLE"] = "WHATS_NEW_ARTICLE";
-})(VIEW || (exports.VIEW = VIEW = {}));
+  return VIEW;
+}({}); // Animation related consts
+exports.VIEW = VIEW;
 var SLIDEIN_OVERLAY_TRANSITION_DURATION_MS = 300;
 exports.SLIDEIN_OVERLAY_TRANSITION_DURATION_MS = SLIDEIN_OVERLAY_TRANSITION_DURATION_MS;
 var FADEIN_OVERLAY_TRANSITION_DURATION_MS = 440;
 exports.FADEIN_OVERLAY_TRANSITION_DURATION_MS = FADEIN_OVERLAY_TRANSITION_DURATION_MS;
 var HIDE_CONTENT_DELAY = FADEIN_OVERLAY_TRANSITION_DURATION_MS + 200;
 exports.HIDE_CONTENT_DELAY = HIDE_CONTENT_DELAY;
-var TRANSITION_STATUS;
-exports.TRANSITION_STATUS = TRANSITION_STATUS;
-(function (TRANSITION_STATUS) {
+var TRANSITION_STATUS = /*#__PURE__*/function (TRANSITION_STATUS) {
   TRANSITION_STATUS["UNMOUNTED"] = "unmounted";
   TRANSITION_STATUS["EXITED"] = "exited";
   TRANSITION_STATUS["ENTERING"] = "entering";
   TRANSITION_STATUS["ENTERED"] = "entered";
   TRANSITION_STATUS["EXITING"] = "exiting";
-})(TRANSITION_STATUS || (exports.TRANSITION_STATUS = TRANSITION_STATUS = {}));
+  return TRANSITION_STATUS;
+}({});
+exports.TRANSITION_STATUS = TRANSITION_STATUS;