@atlaskit/help 7.1.26 → 7.1.27

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

@@ -1,6 +1,5 @@
 /** @jsx jsx */
 import styled from '@emotion/styled';
-import { gridSize } from '@atlaskit/theme/constants';
 export const SearchInputContainer = styled.div`
   order: 0;
   flex: 0 1 auto;
@@ -9,25 +8,25 @@ export const SearchInputContainer = styled.div`
   box-sizing: border-box;
 `;
 export const SearchIconContainer = styled.div`
-  width: ${gridSize() * 3}px;
-  height: ${gridSize() * 3}px;
-  padding-left: ${gridSize() / 2}px;
+  width: ${"var(--ds-space-300, 24px)"};
+  height: ${"var(--ds-space-300, 24px)"};
+  padding-left: ${"var(--ds-space-050, 4px)"};
 
   & > span {
-    padding-left: ${gridSize() / 2}px;
-    height: ${gridSize() * 3}px;
-    width: ${gridSize() * 3}px;
+    padding-left: ${"var(--ds-space-050, 4px)"};
+    height: ${"var(--ds-space-300, 24px)"};
+    width: ${"var(--ds-space-300, 24px)"};
     box-sizing: border-box;
   }
 `;
 export const CloseButtonAndSpinnerContainer = styled.div`
   font-size: 0;
-  padding-right: ${gridSize()}px;
+  padding-right: ${"var(--ds-space-100, 8px)"};
   position: relative;
   white-space: nowrap;
 
   & > span {
-    padding-right: ${gridSize() / 2}px;
+    padding-right: ${"var(--ds-space-050, 4px)"};
   }
 
   & > button,

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

@@ -1,12 +1,11 @@
 /** @jsx jsx */
 import styled from '@emotion/styled';
-import { gridSize } from '@atlaskit/theme/constants';
 import { fontSize, fontSizeSmall } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 export const WhatsNewResultListItemWrapper = styled.a({
   position: `relative`,
   boxSizing: `border-box`,
-  padding: `${gridSize()}px`,
+  padding: "var(--ds-space-100, 8px)",
   display: `block`,
   textDecoration: `none`,
   cursor: `pointer`,
@@ -31,7 +30,7 @@ export const WhatsNewResultListItemWrapper = styled.a({
 export const WhatsNewResultListItemTitleContainer = styled.div`
   width: 100%;
   white-space: nowrap;
-  margin-bottom: ${gridSize() / 2}px;
+  margin-bottom: ${"var(--ds-space-050, 4px)"};
 `;
 export const WhatsNewResultListItemTitleText = styled.span`
   font-size: ${fontSizeSmall()}px;
@@ -39,13 +38,13 @@ export const WhatsNewResultListItemTitleText = styled.span`
   display: inline-block;
   vertical-align: middle;
   margin: 0;
-  padding-left: ${gridSize() / 2}px;
+  padding-left: ${"var(--ds-space-050, 4px)"};
   white-space: normal;
   overflow-x: hidden;
 `;
 export const WhatsNewResultListItemDescription = styled.p`
   display: block;
-  line-height: ${gridSize() * 2.5}px;
+  line-height: ${"var(--ds-font-lineHeight-200, 20px)"};
   color: ${`var(--ds-text, ${colors.N800})`};
   margin: 0;
 `;

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

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import toDate from 'date-fns/toDate';
 import isYesterday from 'date-fns/isYesterday';
@@ -38,8 +37,8 @@ const WhatsNewResultsList = ({
     }, /*#__PURE__*/React.createElement(WhatsNewResultsListGroupTitle, null, whatsNewArticlesGroupedByDate[key].title), whatsNewArticlesGroupedByDate[key].items.map((whatsNewArticle, i) => /*#__PURE__*/React.createElement(WhatsNewResultItem, {
       styles: {
         border: style === 'secondary' ? `2px solid ${`var(--ds-border, ${colors.N30})`}` : 0,
-        padding: style === 'secondary' ? `${gridSize()}px ${gridSize() * 2}px` : `${gridSize()}px`,
-        marginBottom: style === 'secondary' ? `${gridSize() * 1.5}px` : 0
+        padding: style === 'secondary' ? `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-200, 16px)"}` : `${"var(--ds-space-100, 8px)"}`,
+        marginBottom: style === 'secondary' ? `${"var(--ds-space-150, 12px)"}` : 0
       },
       id: whatsNewArticle.id,
       onClick: (event, analyticsEvent) => {

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

@@ -2,7 +2,7 @@
 
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
-import { fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
+import { fontSizeSmall } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 export const truncate = (width = '100%') => css`
   overflow-x: hidden;
@@ -14,17 +14,18 @@ export const WhatsNewResultsListContainer = styled.div`
   position: relative;
 `;
 export const WhatsNewResultsListGroupWrapper = styled.div`
-  padding: ${gridSize()}px 0 ${gridSize()}px 0;
+  padding: ${"var(--ds-space-100, 8px)"} 0 ${"var(--ds-space-100, 8px)"} 0;
 `;
 export const WhatsNewResultsListGroupTitle = styled.div`
   color: ${`var(--ds-text-subtlest, ${colors.N200})`};
   font-size: ${fontSizeSmall()}px;
   font-weight: bold;
-  padding: 0 ${gridSize()}px ${gridSize()}px ${gridSize()}px;
+  padding: 0 ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"}
+    ${"var(--ds-space-100, 8px)"};
   text-transform: uppercase;
 `;
 export const ToggleShowWhatsNewResultsContainer = styled.div`
-  padding: ${gridSize()}px 0;
+  padding: ${"var(--ds-space-100, 8px)"} 0;
   span {
     margin: 0;
   }

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

@@ -1,7 +1,5 @@
 /** @jsx jsx */
 import styled from '@emotion/styled';
-import { gridSize } from '@atlaskit/theme/constants';
-
 /**
  * Loading styled-components
  */
@@ -10,12 +8,12 @@ export const LoadignWhatsNewResultsList = styled.ul`
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  margin-top: ${gridSize() * 2}px;
+  margin-top: ${"var(--ds-space-200, 16px)"};
 `;
 export const LoadignWhatsNewResultsListItem = styled.li`
   display: block;
   width: 100%;
-  padding: ${gridSize()}px;
+  padding: ${"var(--ds-space-100, 8px)"};
   margin: 0;
   box-sizing: border-box;
 `;

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

@@ -13,14 +13,14 @@ export const WhatsNewResultsContainer = styled.div`
   overflow-x: hidden;
   overflow-y: auto;
   z-index: 1;
-  padding: ${2 * gridSize()}px;
+  padding: ${"var(--ds-space-200, 16px)"};
 `;
 export const SelectContainer = styled.div`
   width: ${19 * gridSize()}px;
 `;
 export const WhatsNewResultsListContainer = styled.div`
-  padding-top: ${gridSize()}px;
+  padding-top: ${"var(--ds-space-100, 8px)"};
 `;
 export const WhatsNewResultsListTitleContainer = styled.div`
-  padding: 0 ${gridSize()}px;
+  padding: 0 ${"var(--ds-space-100, 8px)"};
 `;

package/dist/es2019/components/styled.js

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 
 import styled from '@emotion/styled';
-import { gridSize } from '@atlaskit/theme/constants';
 export const HelpBodyContainer = styled.div`
   flex-grow: 1;
   min-height: 0;
@@ -29,6 +28,6 @@ export const Home = styled.div`
   display: ${props => props.isOverlayFullyVisible ? 'none' : 'block'};
   height: 100%;
   overflow: ${props => props.isOverlayVisible ? 'hidden' : 'auto'};
-  padding: ${gridSize() * 2}px;
+  padding: ${"var(--ds-space-200, 16px)"};
   box-sizing: border-box;
 `;

package/dist/es2019/util/styled.js

@@ -9,8 +9,8 @@ export const DividerLine = styled.div`
   background-color: ${`var(--ds-border, ${colors.N30A})`};
   height: 2px;
   width: 100%;
-  padding: 0 ${2 * gridSize()}px;
-  margin-top: ${gridSize() * 2}px;
+  padding: 0 ${"var(--ds-space-200, 16px)"};
+  margin-top: ${"var(--ds-space-200, 16px)"};
   box-sizing: border-box;
 `;
 
@@ -84,8 +84,8 @@ export const WhatsNewTypeIcon = styled.div`
   display: inline-block;
   vertical-align: middle;
   position: relative;
-  height: ${gridSize() * 2}px;
-  width: ${gridSize() * 2}px;
+  height: ${"var(--ds-space-200, 16px)"};
+  width: ${"var(--ds-space-200, 16px)"};
   border-radius: 2px;
   background-color: ${({
   type

package/dist/es2019/version.json

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

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

@@ -3,8 +3,7 @@ var _templateObject, _templateObject2, _templateObject3;
 /** @jsx jsx */
 
 import styled from '@emotion/styled';
-import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 export var ArticleFeedbackContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-export var ArticleFeedbackText = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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, ")"), gridSize() * 4);
-export var ArticleFeedbackAnswerWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding-top: ", "px;\n"])), gridSize() * 2);
+export var ArticleFeedbackText = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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)");
+export var ArticleFeedbackAnswerWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding-top: ", ";\n"])), "var(--ds-space-200, 16px)");

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

@@ -2,11 +2,11 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 /** @jsx jsx */
 import styled from '@emotion/styled';
-import { fontSize, fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
+import { fontSize, fontSizeSmall } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-export var WhatsNewTypeTitle = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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, ")"), fontSize(), gridSize() / 2, gridSize() * 2.5);
-export var WhatsNewIconContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: block;\n  padding-bottom: ", "px;\n"])), gridSize());
-export var WhatsNewTitleText = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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, ")"), fontSize(), gridSize());
-export var WhatsNewRelatedLinksTitleText = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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, ")"), fontSizeSmall(), gridSize());
-export var RelatedLinkContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-bottom: ", "px;\n"])), gridSize());
-export var ExternalLinkIconContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: middle;\n  padding-left: ", "px;\n"])), gridSize() / 2);
+export var WhatsNewTypeTitle = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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, ")"), fontSize(), "var(--ds-space-050, 4px)", "var(--ds-font-lineHeight-200, 20px)");
+export var WhatsNewIconContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: block;\n  padding-bottom: ", ";\n"])), "var(--ds-space-100, 8px)");
+export var WhatsNewTitleText = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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, ")"), fontSize(), "var(--ds-space-100, 8px)");
+export var WhatsNewRelatedLinksTitleText = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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, ")"), fontSizeSmall(), "var(--ds-space-100, 8px)");
+export var RelatedLinkContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n"])), "var(--ds-space-100, 8px)");
+export var ExternalLinkIconContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: middle;\n  padding-left: ", ";\n"])), "var(--ds-space-050, 4px)");

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

@@ -3,5 +3,4 @@ var _templateObject;
 /** @jsx jsx */
 
 import styled from '@emotion/styled';
-import { gridSize } from '@atlaskit/theme/constants';
-export var ArticleContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), gridSize() * 2, gridSize() * 3, "var(--ds-surface, #FFFFFF)");
+export var ArticleContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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)");

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

@@ -2,12 +2,12 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 /** @jsx jsx */
 import styled from '@emotion/styled';
-import { fontSize, gridSize } from '@atlaskit/theme/constants';
+import { fontSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 export var ArticlesListItemWrapper = styled.a({
   position: "relative",
   boxSizing: "border-box",
-  padding: "".concat(gridSize(), "px"),
+  padding: "var(--ds-space-100, 8px)",
   display: "block",
   textDecoration: "none",
   cursor: "pointer",
@@ -32,7 +32,7 @@ export var ArticlesListItemWrapper = styled.a({
   return props.styles;
 });
 export var ArticlesListItemContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  white-space: nowrap;\n"])));
-export var ArticlesListItemTypeTitle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 11px;\n  line-height: ", "px;\n  color: ", ";\n  padding-bottom: ", "px;\n"])), gridSize() * 2, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), gridSize() / 2);
+export var ArticlesListItemTypeTitle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 11px;\n  line-height: ", ";\n  color: ", ";\n  padding-bottom: ", ";\n"])), "var(--ds-font-lineHeight-100, 16px)", "var(--ds-text-subtlest, ".concat(colors.N200, ")"), "var(--ds-space-050, 4px)");
 export var ArticlesListItemLinkIcon = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  align-self: auto;\n  padding-inline-start: 5px;\n  vertical-align: middle;\n"])));
-export var ArticlesListItemTitleText = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  text-decoration: none;\n  color: ", ";\n  font-size: ", "px;\n  font-weight: 600;\n  display: inline-block;\n  line-height: ", "px;\n  white-space: normal;\n  overflow-x: hidden;\n  margin-bottom: ", "px;\n"])), "var(--ds-text, ".concat(colors.N800, ")"), fontSize(), gridSize() * 2.5, gridSize());
-export var ArticlesListItemDescription = styled.p(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: block;\n  line-height: ", "px;\n  color: ", ";\n  margin: 0;\n"])), gridSize() * 2.5, "var(--ds-text-subtle, ".concat(colors.N400, ")"));
+export var ArticlesListItemTitleText = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  text-decoration: none;\n  color: ", ";\n  font-size: ", "px;\n  font-weight: 600;\n  display: inline-block;\n  line-height: ", ";\n  white-space: normal;\n  overflow-x: hidden;\n  margin-bottom: ", ";\n"])), "var(--ds-text, ".concat(colors.N800, ")"), fontSize(), "var(--ds-font-lineHeight-200, 20px)", "var(--ds-space-100, 8px)");
+export var ArticlesListItemDescription = styled.p(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: block;\n  line-height: ", ";\n  color: ", ";\n  margin: 0;\n"])), "var(--ds-font-lineHeight-200, 20px)", "var(--ds-text-subtle, ".concat(colors.N400, ")"));

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

@@ -4,10 +4,9 @@ var _templateObject, _templateObject2, _templateObject3;
 
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
-import { gridSize } from '@atlaskit/theme/constants';
 export var truncate = function truncate() {
   var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: ", ";\n"])), width);
 };
 export var ArticlesListContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-export var ToggleShowMoreArticlesContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: ", "px 0;\n  span {\n    margin: 0;\n  }\n"])), gridSize());
+export var ToggleShowMoreArticlesContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: ", " 0;\n  span {\n    margin: 0;\n  }\n"])), "var(--ds-space-100, 8px)");

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

@@ -4,9 +4,8 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 import styled from 'styled-components';
 import * as colors from '@atlaskit/theme/colors';
-import { gridSize } from '@atlaskit/theme/constants';
-export var HelpContentButtonContainer = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), gridSize() * 2, "var(--ds-text-subtle, ".concat(colors.N600, ")"), 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, ")"));
+export var HelpContentButtonContainer = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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, ")"));
 export var HelpContentButtonIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])));
-export var HelpContentButtonText = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: calc(100% - 20px);\n  display: inline-block;\n  vertical-align: middle;\n  padding: 0 ", "px;\n  box-sizing: border-box;\n"])), gridSize);
-export var HelpContentButtonExternalLinkIcon = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: middle;\n  padding-left: ", "px;\n"])), gridSize() / 2);
-export var HelpContentButtonExternalNotificationIcon = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: middle;\n  margin-top: -", "px;\n  padding-left: ", "px;\n"])), gridSize() / 2, gridSize() / 2);
+export var HelpContentButtonText = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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)");
+export var HelpContentButtonExternalLinkIcon = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: middle;\n  padding-left: ", ";\n"])), "var(--ds-space-050, 4px)");
+export var HelpContentButtonExternalNotificationIcon = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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)");

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

@@ -5,7 +5,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
 import * as colors from '@atlaskit/theme/colors';
-import { gridSize, fontSize } from '@atlaskit/theme/constants';
+import { fontSize } from '@atlaskit/theme/constants';
 var baseHeading = function baseHeading(size, lineHeight) {
   return "\n  font-size: ".concat(size / fontSize(), "em;\n  font-style: inherit;\n  line-height: ").concat(lineHeight / size, ";\n");
 };
@@ -13,11 +13,11 @@ export var truncate = function truncate() {
   var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: ", ";\n"])), width);
 };
-export var RelatedArticlesTitle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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, ")"), gridSize() * 2);
+export var RelatedArticlesTitle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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
  */
-export var LoadignRelatedArticleSection = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-top: ", "px;\n"])), gridSize());
+export var LoadignRelatedArticleSection = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n"])), "var(--ds-space-100, 8px)");
 export var LoadignRelatedArticleList = styled.ul(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n"])));
-export var LoadignRelatedArticleListItem = styled.li(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: block;\n  width: 100%;\n  padding: ", "px;\n  margin-bottom: ", "px;\n  box-sizing: border-box;\n"])), gridSize(), gridSize() * 2);
+export var LoadignRelatedArticleListItem = styled.li(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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)");

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

@@ -2,7 +2,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3;
 /** @jsx jsx */
 import styled from '@emotion/styled';
-import { gridSize } from '@atlaskit/theme/constants';
 export var SearchInputContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  order: 0;\n  flex: 0 1 auto;\n  align-self: auto;\n  width: 100%;\n  box-sizing: border-box;\n"])));
-export var SearchIconContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), gridSize() * 3, gridSize() * 3, gridSize() / 2, gridSize() / 2, gridSize() * 3, gridSize() * 3);
-export var CloseButtonAndSpinnerContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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"])), gridSize(), gridSize() / 2);
+export var SearchIconContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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)");
+export var CloseButtonAndSpinnerContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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)");

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

@@ -2,13 +2,12 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3;
 /** @jsx jsx */
 import styled from '@emotion/styled';
-import { gridSize } from '@atlaskit/theme/constants';
 import { fontSize, fontSizeSmall } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 export var WhatsNewResultListItemWrapper = styled.a({
   position: "relative",
   boxSizing: "border-box",
-  padding: "".concat(gridSize(), "px"),
+  padding: "var(--ds-space-100, 8px)",
   display: "block",
   textDecoration: "none",
   cursor: "pointer",
@@ -32,6 +31,6 @@ export var WhatsNewResultListItemWrapper = styled.a({
 }, function (props) {
   return props.styles;
 });
-export var WhatsNewResultListItemTitleContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  white-space: nowrap;\n  margin-bottom: ", "px;\n"])), gridSize() / 2);
-export var WhatsNewResultListItemTitleText = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), fontSizeSmall(), fontSize(), gridSize() / 2);
-export var WhatsNewResultListItemDescription = styled.p(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: block;\n  line-height: ", "px;\n  color: ", ";\n  margin: 0;\n"])), gridSize() * 2.5, "var(--ds-text, ".concat(colors.N800, ")"));
+export var WhatsNewResultListItemTitleContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  white-space: nowrap;\n  margin-bottom: ", ";\n"])), "var(--ds-space-050, 4px)");
+export var WhatsNewResultListItemTitleText = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), fontSizeSmall(), fontSize(), "var(--ds-space-050, 4px)");
+export var WhatsNewResultListItemDescription = styled.p(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: block;\n  line-height: ", ";\n  color: ", ";\n  margin: 0;\n"])), "var(--ds-font-lineHeight-200, 20px)", "var(--ds-text, ".concat(colors.N800, ")"));

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

@@ -1,6 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useEffect, useState } from 'react';
-import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import toDate from 'date-fns/toDate';
 import isYesterday from 'date-fns/isYesterday';
@@ -44,8 +43,8 @@ var WhatsNewResultsList = function WhatsNewResultsList(_ref) {
       return /*#__PURE__*/React.createElement(WhatsNewResultItem, {
         styles: {
           border: style === 'secondary' ? "2px solid ".concat("var(--ds-border, ".concat(colors.N30, ")")) : 0,
-          padding: style === 'secondary' ? "".concat(gridSize(), "px ").concat(gridSize() * 2, "px") : "".concat(gridSize(), "px"),
-          marginBottom: style === 'secondary' ? "".concat(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/esm/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/styled.js

@@ -4,13 +4,13 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
-import { fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
+import { fontSizeSmall } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 export var truncate = function truncate() {
   var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: ", ";\n"])), width);
 };
 export var WhatsNewResultsListContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-export var WhatsNewResultsListGroupWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: ", "px 0 ", "px 0;\n"])), gridSize(), gridSize());
-export var WhatsNewResultsListGroupTitle = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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, ")"), fontSizeSmall(), gridSize(), gridSize(), gridSize());
-export var ToggleShowWhatsNewResultsContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: ", "px 0;\n  span {\n    margin: 0;\n  }\n"])), gridSize());
+export var WhatsNewResultsListGroupWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: ", " 0 ", " 0;\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
+export var WhatsNewResultsListGroupTitle = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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, ")"), fontSizeSmall(), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
+export var ToggleShowWhatsNewResultsContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: ", " 0;\n  span {\n    margin: 0;\n  }\n"])), "var(--ds-space-100, 8px)");

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

@@ -2,10 +2,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2;
 /** @jsx jsx */
 import styled from '@emotion/styled';
-import { gridSize } from '@atlaskit/theme/constants';
-
 /**
  * Loading styled-components
  */
-export var LoadignWhatsNewResultsList = styled.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  margin-top: ", "px;\n"])), gridSize() * 2);
-export var LoadignWhatsNewResultsListItem = styled.li(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: block;\n  width: 100%;\n  padding: ", "px;\n  margin: 0;\n  box-sizing: border-box;\n"])), gridSize());
+export var LoadignWhatsNewResultsList = styled.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  margin-top: ", ";\n"])), "var(--ds-space-200, 16px)");
+export var LoadignWhatsNewResultsListItem = styled.li(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: block;\n  width: 100%;\n  padding: ", ";\n  margin: 0;\n  box-sizing: border-box;\n"])), "var(--ds-space-100, 8px)");

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

@@ -3,7 +3,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
 import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
-export var WhatsNewResultsContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  background-color: ", ";\n  flex: 1;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  z-index: 1;\n  padding: ", "px;\n"])), "var(--ds-surface, #FFFFFF)", 2 * gridSize());
+export var WhatsNewResultsContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  background-color: ", ";\n  flex: 1;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  z-index: 1;\n  padding: ", ";\n"])), "var(--ds-surface, #FFFFFF)", "var(--ds-space-200, 16px)");
 export var SelectContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", "px;\n"])), 19 * gridSize());
-export var WhatsNewResultsListContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding-top: ", "px;\n"])), gridSize());
-export var WhatsNewResultsListTitleContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: 0 ", "px;\n"])), gridSize());
+export var WhatsNewResultsListContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding-top: ", ";\n"])), "var(--ds-space-100, 8px)");
+export var WhatsNewResultsListTitleContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: 0 ", ";\n"])), "var(--ds-space-100, 8px)");

package/dist/esm/components/styled.js

@@ -3,11 +3,10 @@ var _templateObject, _templateObject2, _templateObject3;
 /** @jsx jsx */
 
 import styled from '@emotion/styled';
-import { gridSize } from '@atlaskit/theme/constants';
 export var HelpBodyContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  min-height: 0;\n  position: relative;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-content: stretch;\n  align-items: flex-start;\n"])));
 export var HelpBody = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  box-sizing: border-box;\n  order: 0;\n  flex: 1 1 auto;\n  align-self: auto;\n  position: relative;\n  overflow-x: hidden;\n  overflow-y: auto;\n"])));
-export var Home = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: ", ";\n  height: 100%;\n  overflow: ", ";\n  padding: ", "px;\n  box-sizing: border-box;\n"])), function (props) {
+export var Home = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: ", ";\n  height: 100%;\n  overflow: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"])), function (props) {
   return props.isOverlayFullyVisible ? 'none' : 'block';
 }, function (props) {
   return props.isOverlayVisible ? 'hidden' : 'auto';
-}, gridSize() * 2);
+}, "var(--ds-space-200, 16px)");

package/dist/esm/util/styled.js

@@ -7,7 +7,7 @@ import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { keyframes } from '@emotion/core';
 import { WHATS_NEW_ITEM_TYPES } from '../model/WhatsNew';
-export var DividerLine = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  height: 2px;\n  width: 100%;\n  padding: 0 ", "px;\n  margin-top: ", "px;\n  box-sizing: border-box;\n"])), "var(--ds-border, ".concat(colors.N30A, ")"), 2 * gridSize(), gridSize() * 2);
+export var DividerLine = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  height: 2px;\n  width: 100%;\n  padding: 0 ", ";\n  margin-top: ", ";\n  box-sizing: border-box;\n"])), "var(--ds-border, ".concat(colors.N30A, ")"), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");
 
 /**
  * Loading container
@@ -38,7 +38,7 @@ export var LoadingCircle = styled.div(_templateObject4 || (_templateObject4 = _t
  * What's new icon
  */
 
-export var WhatsNewTypeIcon = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: middle;\n  position: relative;\n  height: ", "px;\n  width: ", "px;\n  border-radius: 2px;\n  background-color: ", ";\n\n  & > img {\n    width: calc(100% - ", "px);\n    height: calc(100% - ", "px);\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n\n    & > svg {\n      height: 100%;\n      width: 100%;\n    }\n  }\n"])), gridSize() * 2, gridSize() * 2, function (_ref) {
+export var WhatsNewTypeIcon = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: middle;\n  position: relative;\n  height: ", ";\n  width: ", ";\n  border-radius: 2px;\n  background-color: ", ";\n\n  & > img {\n    width: calc(100% - ", "px);\n    height: calc(100% - ", "px);\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n\n    & > svg {\n      height: 100%;\n      width: 100%;\n    }\n  }\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)", function (_ref) {
   var type = _ref.type;
   switch (type) {
     case WHATS_NEW_ITEM_TYPES.IMPROVEMENT:

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/help",
-  "version": "7.1.26",
+  "version": "7.1.27",
   "description": "A cross-product help component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   "dependencies": {
     "@atlaskit/analytics": "^8.0.0",
     "@atlaskit/analytics-next": "^9.0.0",
-    "@atlaskit/button": "^16.5.0",
+    "@atlaskit/button": "^16.6.0",
     "@atlaskit/checkbox": "^12.4.0",
     "@atlaskit/form": "^8.8.0",
     "@atlaskit/help-article": "^4.0.0",
@@ -39,12 +39,12 @@
     "@atlaskit/radio": "^5.4.0",
     "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/select": "^16.1.0",
-    "@atlaskit/spinner": "^15.3.0",
+    "@atlaskit/spinner": "^15.4.0",
     "@atlaskit/textarea": "^4.5.0",
     "@atlaskit/textfield": "^5.3.0",
-    "@atlaskit/theme": "^12.2.0",
+    "@atlaskit/theme": "^12.3.0",
     "@atlaskit/tokens": "^1.2.0",
-    "@atlaskit/tooltip": "^17.6.0",
+    "@atlaskit/tooltip": "^17.7.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
     "@emotion/styled": "^10.0.7",