@atlaskit/help 7.2.4 → 7.2.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/help
 
+## 7.2.6
+
+### Patch Changes
+
+- [`f01deb5e6ab`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f01deb5e6ab) - Use injected env vars instead of version.json
+
+## 7.2.5
+
+### Patch Changes
+
+- [`7bdb050c04e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7bdb050c04e) - Internal change to use space tokens for spacing properties. There is no visual change.
+
 ## 7.2.4
 
 ### Patch Changes

package/dist/cjs/analytics.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.withAnalyticsEvents = exports.withAnalyticsContext = exports.defaultAnalyticsAttributes = exports.createAndFire = void 0;
 var x = _interopRequireWildcard(require("@atlaskit/analytics-next"));
-var _version = require("./version.json");
 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 withAnalyticsEvents = x.withAnalyticsEvents;
@@ -17,7 +16,7 @@ var createAndFire = x.createAndFireEvent('atlaskit');
 exports.createAndFire = createAndFire;
 var defaultAnalyticsAttributes = {
   componentName: 'help',
-  packageName: _version.name,
-  packageVersion: _version.version
+  packageName: "@atlaskit/help",
+  packageVersion: "7.2.6"
 };
 exports.defaultAnalyticsAttributes = defaultAnalyticsAttributes;

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

@@ -9,14 +9,13 @@ var _react = _interopRequireDefault(require("react"));
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _version = require("../../../version.json");
 var _messages = require("../../../messages");
 var _SomethingWrongImage = _interopRequireDefault(require("../../../assets/SomethingWrongImage"));
 var _styled = require("./styled");
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleLoadingFail',
-  packageName: _version.name,
-  packageVersion: _version.version
+  packageName: "@atlaskit/help",
+  packageVersion: "7.2.6"
 };
 var ArticleLoadingFail = function ArticleLoadingFail(_ref) {
   var onTryAgainButtonClick = _ref.onTryAgainButtonClick,

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

@@ -9,12 +9,11 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
-var _version = require("../../../../version.json");
 var _messages = require("../../../../messages");
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulNoButton',
-  packageName: _version.name,
-  packageVersion: _version.version
+  packageName: "@atlaskit/help",
+  packageVersion: "7.2.6"
 };
 var ArticleWasHelpfulNoButton = function ArticleWasHelpfulNoButton(_ref) {
   var _ref$isSelected = _ref.isSelected,

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

@@ -9,12 +9,11 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
-var _version = require("../../../../version.json");
 var _messages = require("../../../../messages");
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulYesButton',
-  packageName: _version.name,
-  packageVersion: _version.version
+  packageName: "@atlaskit/help",
+  packageVersion: "7.2.6"
 };
 var ArticleWasHelpfulYesButton = function ArticleWasHelpfulYesButton(_ref) {
   var _ref$isSelected = _ref.isSelected,

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

@@ -18,10 +18,8 @@ var _form = _interopRequireWildcard(require("@atlaskit/form"));
 var _radio = require("@atlaskit/radio");
 var _checkbox = require("@atlaskit/checkbox");
 var _textarea = _interopRequireDefault(require("@atlaskit/textarea"));
-var _constants = require("@atlaskit/theme/constants");
 var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/check-circle"));
 var _theme = require("@atlaskit/theme");
-var _version = require("../../../../version.json");
 var _messages = require("../../../../messages");
 var _WasHelpfulYesButton = _interopRequireDefault(require("./WasHelpfulYesButton"));
 var _WasHelpfulNoButton = _interopRequireDefault(require("./WasHelpfulNoButton"));
@@ -33,8 +31,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var FEEDBACK_REASON_TEXT_MAX_LENGTH = '16000';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulForm',
-  packageName: _version.name,
-  packageVersion: _version.version
+  packageName: "@atlaskit/help",
+  packageVersion: "7.2.6"
 };
 var ArticleWasHelpfulForm = function ArticleWasHelpfulForm(_ref) {
   var onWasHelpfulSubmit = _ref.onWasHelpfulSubmit,
@@ -151,7 +149,7 @@ var ArticleWasHelpfulForm = function ArticleWasHelpfulForm(_ref) {
     if ((handleArticleWasHelpfulYesButtonClick || handleArticleWasHelpfulNoButtonClick) && !wasHelpfulFormSubmited) {
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.ArticleFeedbackContainer, null, /*#__PURE__*/_react.default.createElement(_styled.ArticleFeedbackText, {
         style: {
-          paddingRight: "".concat((0, _constants.gridSize)(), "px")
+          paddingRight: "var(--ds-space-100, 8px)"
         }
       }, formatMessage(_messages.messages.help_article_rating_title)), /*#__PURE__*/_react.default.createElement(_buttonGroup.default, null, handleArticleWasHelpfulYesButtonClick && /*#__PURE__*/_react.default.createElement(_WasHelpfulYesButton.default, {
         onClick: handleArticleWasHelpfulYesButtonClick,
@@ -206,7 +204,7 @@ var ArticleWasHelpfulForm = function ArticleWasHelpfulForm(_ref) {
     } else if (wasHelpfulFormSubmited && wasHelpful === null) {
       return /*#__PURE__*/_react.default.createElement(_styled.ArticleFeedbackContainer, null, /*#__PURE__*/_react.default.createElement("span", {
         style: {
-          paddingRight: "".concat((0, _constants.gridSize)(), "px"),
+          paddingRight: "var(--ds-space-100, 8px)",
           verticalAlign: 'middle'
         }
       }, /*#__PURE__*/_react.default.createElement(_checkCircle.default, {

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

@@ -10,7 +10,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _helpArticle = _interopRequireWildcard(require("@atlaskit/help-article"));
 var _RelatedArticles = _interopRequireDefault(require("../../RelatedArticles"));
 var _Help = require("../../../model/Help");
-var _version = require("../../../version.json");
 var _navigationContext = require("../../contexts/navigationContext");
 var _helpArticleContext = require("../../contexts/helpArticleContext");
 var _relatedArticlesContext = require("../../contexts/relatedArticlesContext");
@@ -64,8 +63,8 @@ var HelpArticle = function HelpArticle(_ref) {
   var handleOnRelatedArticlesShowMoreClick = (0, _react.useCallback)(function (event, analyticsEvent, isCollapsed) {
     analyticsEvent.payload.attributes = {
       componentName: 'Article',
-      packageName: _version.name,
-      packageVersion: _version.version
+      packageName: "@atlaskit/help",
+      packageVersion: "7.2.6"
     };
     if (onRelatedArticlesShowMoreClick) {
       onRelatedArticlesShowMoreClick(event, analyticsEvent, isCollapsed);

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Loading = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
-var _constants = require("@atlaskit/theme/constants");
 var _messages = require("../../../../messages");
 var _styled = require("../../../../util/styled");
 var Loading = function Loading(_ref) {
@@ -26,7 +25,7 @@ var Loading = function Loading(_ref) {
     marginTop: "4px"
   }), /*#__PURE__*/_react.default.createElement(_styled.LoadingRectangle, {
     style: {
-      marginLeft: "".concat((0, _constants.gridSize)(), "px")
+      marginLeft: "var(--ds-space-100, 8px)"
     },
     contentHeight: "11px",
     contentWidth: "60px",

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

@@ -9,11 +9,9 @@ exports.default = exports.WhatsNewArticle = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _helpArticle = _interopRequireWildcard(require("@atlaskit/help-article"));
-var _constants = require("@atlaskit/theme/constants");
 var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
-var _version = require("../../../version.json");
 var _messages = require("../../../messages");
 var _util = require("../../../util");
 var _styled = require("../../../util/styled");
@@ -23,8 +21,8 @@ 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; }
 var analyticsContextData = {
   componentName: 'ArticlesListItem',
-  packageName: _version.name,
-  packageVersion: _version.version
+  packageName: "@atlaskit/help",
+  packageVersion: "7.2.6"
 };
 var WhatsNewArticle = function WhatsNewArticle(_ref) {
   var formatMessage = _ref.intl.formatMessage,
@@ -43,7 +41,7 @@ var WhatsNewArticle = function WhatsNewArticle(_ref) {
     }), (article.relatedExternalLinks || article.communityUrl) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.DividerLine, {
       style: {
         marginTop: 0,
-        marginBottom: (0, _constants.gridSize)() * 2
+        marginBottom: "var(--ds-space-200, 16px)"
       }
     }), /*#__PURE__*/_react.default.createElement(_styled2.WhatsNewTitleText, null, "RELATED LINKS"), /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
       data: {

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

@@ -6,22 +6,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _constants = require("@atlaskit/theme/constants");
 var _colors = require("@atlaskit/theme/colors");
 var _reactAnimateHeight = _interopRequireDefault(require("react-animate-height"));
 var _ArticlesListItem = _interopRequireDefault(require("./ArticlesListItem"));
-var _constants2 = require("./constants");
+var _constants = require("./constants");
 var getStyles = function getStyles(style) {
   if (style === 'secondary') {
     return {
       border: "2px solid ".concat("var(--ds-border, ".concat(_colors.N30, ")")),
-      padding: "".concat((0, _constants.gridSize)() * 2, "px"),
-      marginBottom: "".concat((0, _constants.gridSize)() * 1.5, "px")
+      padding: "var(--ds-space-200, 16px)",
+      marginBottom: "var(--ds-space-150, 12px)"
     };
   }
   return {
     border: 0,
-    padding: "".concat((0, _constants.gridSize)(), "px"),
+    padding: "var(--ds-space-100, 8px)",
     marginBottom: 0
   };
 };
@@ -31,9 +30,9 @@ var articlesList = function articlesList(_ref) {
     _ref$articles = _ref.articles,
     articles = _ref$articles === void 0 ? [] : _ref$articles,
     _ref$minItemsToDispla = _ref.minItemsToDisplay,
-    minItemsToDisplay = _ref$minItemsToDispla === void 0 ? _constants2.MIN_ITEMS_TO_DISPLAY : _ref$minItemsToDispla,
+    minItemsToDisplay = _ref$minItemsToDispla === void 0 ? _constants.MIN_ITEMS_TO_DISPLAY : _ref$minItemsToDispla,
     _ref$numberOfArticles = _ref.numberOfArticlesToDisplay,
-    numberOfArticlesToDisplay = _ref$numberOfArticles === void 0 ? _constants2.MIN_ITEMS_TO_DISPLAY : _ref$numberOfArticles,
+    numberOfArticlesToDisplay = _ref$numberOfArticles === void 0 ? _constants.MIN_ITEMS_TO_DISPLAY : _ref$numberOfArticles,
     onArticlesListItemClick = _ref.onArticlesListItemClick;
   return articles && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, articles.slice(0, minItemsToDisplay).map(function (article) {
     return /*#__PURE__*/_react.default.createElement(_ArticlesListItem.default, {
@@ -50,7 +49,7 @@ var articlesList = function articlesList(_ref) {
       href: article.href
     });
   })), /*#__PURE__*/_react.default.createElement(_reactAnimateHeight.default, {
-    duration: _constants2.ANIMATE_HEIGHT_TRANSITION_DURATION_MS,
+    duration: _constants.ANIMATE_HEIGHT_TRANSITION_DURATION_MS,
     easing: "linear",
     height: numberOfArticlesToDisplay > minItemsToDisplay ? 'auto' : 0
   }, articles.slice(minItemsToDisplay, articles.length).map(function (article) {

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

@@ -11,14 +11,13 @@ var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
 var _reactIntlNext = require("react-intl-next");
-var _version = require("../../../version.json");
 var _styled = require("./styled");
 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 ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
-  packageName: _version.name,
-  packageVersion: _version.version
+  packageName: "@atlaskit/help",
+  packageVersion: "7.2.6"
 };
 var ArticlesListItem = function ArticlesListItem(_ref) {
   var styles = _ref.styles,

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

@@ -46,7 +46,7 @@ var ArticlesListItemContainer = _styled.default.div(_templateObject || (_templat
 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
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 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/HelpContentButton/index.js

@@ -11,14 +11,13 @@ var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"))
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _notificationIndicator = require("@atlaskit/notification-indicator");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _version = require("../../version.json");
 var _styled = require("./styled");
 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 analitycsContextData = {
   componentName: 'HelpContentButton',
-  packageName: _version.name,
-  packageVersion: _version.version
+  packageName: "@atlaskit/help",
+  packageVersion: "7.2.6"
 };
 var HelpContentButton = function HelpContentButton(_ref) {
   var _ref$id = _ref.id,

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

@@ -14,7 +14,6 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _sectionMessage = _interopRequireDefault(require("@atlaskit/section-message"));
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 var _reactIntlNext = require("react-intl-next");
-var _version = require("../../version.json");
 var _messages = require("../../messages");
 var _ArticlesList = _interopRequireDefault(require("../ArticlesList"));
 var _RelatedArticlesLoading = _interopRequireDefault(require("./RelatedArticlesLoading"));
@@ -24,6 +23,8 @@ var _cancellablePromise = _interopRequireDefault(require("../../util/hooks/cance
 var _previous = require("../../util/hooks/previous");
 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 packageName = "@atlaskit/help";
+var packageVersion = "7.2.6";
 var RelatedArticles = function RelatedArticles(_ref) {
   var _ref$style = _ref.style,
     style = _ref$style === void 0 ? 'primary' : _ref$style,
@@ -52,8 +53,8 @@ var RelatedArticles = function RelatedArticles(_ref) {
   var handleOnRelatedArticlesShowMoreClick = function handleOnRelatedArticlesShowMoreClick(event, analyticsEvent, isCollapsed) {
     analyticsEvent.payload.attributes = {
       componentName: 'RelatedArticles',
-      packageName: _version.name,
-      packageVersion: _version.version
+      packageName: packageName,
+      packageVersion: packageVersion
     };
     if (onRelatedArticlesShowMoreClick) {
       onRelatedArticlesShowMoreClick(event, analyticsEvent, isCollapsed);
@@ -125,7 +126,7 @@ var RelatedArticles = function RelatedArticles(_ref) {
 exports.RelatedArticles = RelatedArticles;
 var _default = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'RelatedArticles',
-  packageName: _version.name,
-  packageVersion: _version.version
+  packageName: packageName,
+  packageVersion: packageVersion
 })((0, _reactIntlNext.injectIntl)(RelatedArticles));
 exports.default = _default;

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

@@ -15,7 +15,6 @@ var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/search"));
 var _close = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/close"));
 var _reactIntlNext = require("react-intl-next");
-var _version = require("../../../version.json");
 var _Requests = require("../../../model/Requests");
 var _searchContext = require("../../contexts/searchContext");
 var _messages = require("../../../messages");
@@ -24,8 +23,8 @@ 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; }
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'searchInput',
-  packageName: _version.name,
-  packageVersion: _version.version
+  packageName: "@atlaskit/help",
+  packageVersion: "7.2.6"
 };
 var SearchInput = function SearchInput(_ref) {
   var formatMessage = _ref.intl.formatMessage;

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

@@ -11,7 +11,6 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var _lightbulb = _interopRequireDefault(require("@atlaskit/icon/glyph/lightbulb"));
 var _reactIntlNext = require("react-intl-next");
-var _version = require("../../../version.json");
 var _whatsNewArticleContext = require("../../contexts/whatsNewArticleContext");
 var _navigationContext = require("../../contexts/navigationContext");
 var _messages = require("../../../messages");
@@ -21,8 +20,8 @@ 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; }
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'WhatsNewButton',
-  packageName: _version.name,
-  packageVersion: _version.version
+  packageName: "@atlaskit/help",
+  packageVersion: "7.2.6"
 };
 var WhatsNewButton = function WhatsNewButton(_ref) {
   var productName = _ref.productName,

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

@@ -8,15 +8,14 @@ exports.default = exports.WhatsNewResultListItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _reactIntlNext = require("react-intl-next");
-var _version = require("../../../../../version.json");
 var _WhatsNew = require("../../../../../model/WhatsNew");
 var _util = require("../../../../../util");
 var _styled = require("../../../../../util/styled");
 var _styled2 = require("./styled");
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
-  packageName: _version.name,
-  packageVersion: _version.version
+  packageName: "@atlaskit/help",
+  packageVersion: "7.2.6"
 };
 var WhatsNewResultListItem = function WhatsNewResultListItem(_ref) {
   var formatMessage = _ref.intl.formatMessage,

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

@@ -36,7 +36,7 @@ var WhatsNewResultsLoading = function WhatsNewResultsLoading(_ref) {
     marginTop: "4px"
   }), /*#__PURE__*/_react.default.createElement(_styled.LoadingRectangle, {
     style: {
-      marginLeft: "".concat((0, _constants.gridSize)(), "px")
+      marginLeft: "var(--ds-space-100, 8px)"
     },
     contentHeight: "11px",
     contentWidth: "60px",
@@ -58,7 +58,7 @@ var WhatsNewResultsLoading = function WhatsNewResultsLoading(_ref) {
     marginTop: "4px"
   }), /*#__PURE__*/_react.default.createElement(_styled.LoadingRectangle, {
     style: {
-      marginLeft: "".concat((0, _constants.gridSize)(), "px")
+      marginLeft: "var(--ds-space-100, 8px)"
     },
     contentHeight: "11px",
     contentWidth: "60px",
@@ -84,7 +84,7 @@ var WhatsNewResultsLoading = function WhatsNewResultsLoading(_ref) {
     marginTop: "4px"
   }), /*#__PURE__*/_react.default.createElement(_styled.LoadingRectangle, {
     style: {
-      marginLeft: "".concat((0, _constants.gridSize)(), "px")
+      marginLeft: "var(--ds-space-100, 8px)"
     },
     contentHeight: "11px",
     contentWidth: "60px",
@@ -106,7 +106,7 @@ var WhatsNewResultsLoading = function WhatsNewResultsLoading(_ref) {
     marginTop: "4px"
   }), /*#__PURE__*/_react.default.createElement(_styled.LoadingRectangle, {
     style: {
-      marginLeft: "".concat((0, _constants.gridSize)(), "px")
+      marginLeft: "var(--ds-space-100, 8px)"
     },
     contentHeight: "11px",
     contentWidth: "60px",

package/dist/cjs/version.json

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

package/dist/es2019/analytics.js

@@ -1,10 +1,9 @@
 import * as x from '@atlaskit/analytics-next';
-import { name as packageName, version as packageVersion } from './version.json';
 export const withAnalyticsEvents = x.withAnalyticsEvents;
 export const withAnalyticsContext = x.withAnalyticsContext;
 export const createAndFire = x.createAndFireEvent('atlaskit');
 export const defaultAnalyticsAttributes = {
   componentName: 'help',
-  packageName,
-  packageVersion
+  packageName: "@atlaskit/help",
+  packageVersion: "7.2.6"
 };

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

@@ -2,14 +2,13 @@ import React from 'react';
 import Button from '@atlaskit/button/custom-theme-button';
 import { injectIntl } from 'react-intl-next';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
-import { name as packageName, version as packageVersion } from '../../../version.json';
 import { messages } from '../../../messages';
 import SomethingWrongImage from '../../../assets/SomethingWrongImage';
 import { LoadingErrorMessage, LoadingErrorButtonContainer } from './styled';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleLoadingFail',
-  packageName,
-  packageVersion
+  packageName: "@atlaskit/help",
+  packageVersion: "7.2.6"
 };
 export const ArticleLoadingFail = ({
   onTryAgainButtonClick,

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

@@ -2,12 +2,11 @@ import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/custom-theme-button';
-import { name as packageName, version as packageVersion } from '../../../../version.json';
 import { messages } from '../../../../messages';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulNoButton',
-  packageName,
-  packageVersion
+  packageName: "@atlaskit/help",
+  packageVersion: "7.2.6"
 };
 export const ArticleWasHelpfulNoButton = ({
   isSelected = false,

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

@@ -2,12 +2,11 @@ import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/custom-theme-button';
-import { name as packageName, version as packageVersion } from '../../../../version.json';
 import { messages } from '../../../../messages';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulYesButton',
-  packageName,
-  packageVersion
+  packageName: "@atlaskit/help",
+  packageVersion: "7.2.6"
 };
 export const ArticleWasHelpfulYesButton = ({
   isSelected = false,

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

@@ -9,12 +9,10 @@ import Form, { Field, CheckboxField, FormFooter } from '@atlaskit/form';
 import { RadioGroup } from '@atlaskit/radio';
 import { Checkbox } from '@atlaskit/checkbox';
 import TextArea from '@atlaskit/textarea';
-import { gridSize } from '@atlaskit/theme/constants';
 import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { colors } from '@atlaskit/theme';
-import { name as packageName, version as packageVersion } from '../../../../version.json';
 import { messages } from '../../../../messages';
 import ArticleWasHelpfulYesButton from './WasHelpfulYesButton';
 import ArticleWasHelpfulNoButton from './WasHelpfulNoButton';
@@ -22,8 +20,8 @@ import { ArticleFeedbackContainer, ArticleFeedbackText, ArticleFeedbackAnswerWra
 const FEEDBACK_REASON_TEXT_MAX_LENGTH = '16000';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulForm',
-  packageName,
-  packageVersion
+  packageName: "@atlaskit/help",
+  packageVersion: "7.2.6"
 };
 export const ArticleWasHelpfulForm = ({
   onWasHelpfulSubmit,
@@ -123,7 +121,7 @@ export const ArticleWasHelpfulForm = ({
     if ((handleArticleWasHelpfulYesButtonClick || handleArticleWasHelpfulNoButtonClick) && !wasHelpfulFormSubmited) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArticleFeedbackContainer, null, /*#__PURE__*/React.createElement(ArticleFeedbackText, {
         style: {
-          paddingRight: `${gridSize()}px`
+          paddingRight: "var(--ds-space-100, 8px)"
         }
       }, formatMessage(messages.help_article_rating_title)), /*#__PURE__*/React.createElement(ButtonGroup, null, handleArticleWasHelpfulYesButtonClick && /*#__PURE__*/React.createElement(ArticleWasHelpfulYesButton, {
         onClick: handleArticleWasHelpfulYesButtonClick,
@@ -176,7 +174,7 @@ export const ArticleWasHelpfulForm = ({
     } else if (wasHelpfulFormSubmited && wasHelpful === null) {
       return /*#__PURE__*/React.createElement(ArticleFeedbackContainer, null, /*#__PURE__*/React.createElement("span", {
         style: {
-          paddingRight: `${gridSize()}px`,
+          paddingRight: "var(--ds-space-100, 8px)",
           verticalAlign: 'middle'
         }
       }, /*#__PURE__*/React.createElement(CheckCircleIcon, {

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

@@ -2,7 +2,6 @@ import React, { useCallback } from 'react';
 import { BODY_FORMAT_TYPES } from '@atlaskit/help-article';
 import RelatedArticles from '../../RelatedArticles';
 import { ARTICLE_TYPE } from '../../../model/Help';
-import { name as packageName, version as packageVersion } from '../../../version.json';
 import { useNavigationContext } from '../../contexts/navigationContext';
 import { useHelpArticleContext } from '../../contexts/helpArticleContext';
 import { useRelatedArticlesContext } from '../../contexts/relatedArticlesContext';
@@ -59,8 +58,8 @@ export const HelpArticle = ({
   const handleOnRelatedArticlesShowMoreClick = useCallback((event, analyticsEvent, isCollapsed) => {
     analyticsEvent.payload.attributes = {
       componentName: 'Article',
-      packageName,
-      packageVersion
+      packageName: "@atlaskit/help",
+      packageVersion: "7.2.6"
     };
     if (onRelatedArticlesShowMoreClick) {
       onRelatedArticlesShowMoreClick(event, analyticsEvent, isCollapsed);

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
-import { gridSize } from '@atlaskit/theme/constants';
 import { messages } from '../../../../messages';
 import { LoadingRectangle } from '../../../../util/styled';
 export const Loading = ({
@@ -21,7 +20,7 @@ export const Loading = ({
   marginTop: "4px"
 }), /*#__PURE__*/React.createElement(LoadingRectangle, {
   style: {
-    marginLeft: `${gridSize()}px`
+    marginLeft: "var(--ds-space-100, 8px)"
   },
   contentHeight: "11px",
   contentWidth: "60px",

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

@@ -2,11 +2,9 @@ import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import { BODY_FORMAT_TYPES } from '@atlaskit/help-article';
 import HelpArticleContent from '@atlaskit/help-article';
-import { gridSize } from '@atlaskit/theme/constants';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/custom-theme-button';
-import { name as packageName, version as packageVersion } from '../../../version.json';
 import { messages } from '../../../messages';
 import { getTypeIcon, getTypeTitle } from '../../../util';
 import { WhatsNewTypeIcon, DividerLine } from '../../../util/styled';
@@ -14,8 +12,8 @@ import Loading from './Loading';
 import { WhatsNewTypeTitle, WhatsNewTitleText, WhatsNewIconContainer, RelatedLinkContainer, ExternalLinkIconContainer } from './styled';
 const analyticsContextData = {
   componentName: 'ArticlesListItem',
-  packageName,
-  packageVersion
+  packageName: "@atlaskit/help",
+  packageVersion: "7.2.6"
 };
 export const WhatsNewArticle = ({
   intl: {
@@ -37,7 +35,7 @@ export const WhatsNewArticle = ({
     }), (article.relatedExternalLinks || article.communityUrl) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DividerLine, {
       style: {
         marginTop: 0,
-        marginBottom: gridSize() * 2
+        marginBottom: "var(--ds-space-200, 16px)"
       }
     }), /*#__PURE__*/React.createElement(WhatsNewTitleText, null, "RELATED LINKS"), /*#__PURE__*/React.createElement(AnalyticsContext, {
       data: {