@atlaskit/help 7.1.26 → 7.2.0

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

@@ -1,20 +1,20 @@
 /** @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 const WhatsNewTypeTitle = styled.span`
   text-decoration: none;
   color: ${`var(--ds-text-subtlest, ${colors.N300})`};
   font-size: ${fontSize()}px;
   vertical-align: middle;
-  padding-left: ${gridSize() / 2}px;
-  line-height: ${gridSize() * 2.5}px;
+  padding-left: ${"var(--ds-space-050, 4px)"};
+  line-height: ${"var(--ds-font-lineHeight-200, 20px)"};
   white-space: normal;
   overflow-x: hidden;
 `;
 export const WhatsNewIconContainer = styled.div`
   display: block;
-  padding-bottom: ${gridSize()}px;
+  padding-bottom: ${"var(--ds-space-100, 8px)"};
 `;
 export const WhatsNewTitleText = styled.span`
   text-decoration: none;
@@ -23,7 +23,7 @@ export const WhatsNewTitleText = styled.span`
   font-weight: 600;
   white-space: normal;
   overflow-x: hidden;
-  padding-bottom: ${gridSize()}px;
+  padding-bottom: ${"var(--ds-space-100, 8px)"};
   display: block;
 `;
 export const WhatsNewRelatedLinksTitleText = styled.span`
@@ -33,14 +33,14 @@ export const WhatsNewRelatedLinksTitleText = styled.span`
   font-weight: 600;
   white-space: normal;
   overflow-x: hidden;
-  padding-bottom: ${gridSize()}px;
+  padding-bottom: ${"var(--ds-space-100, 8px)"};
   display: block;
 `;
 export const RelatedLinkContainer = styled.div`
-  margin-bottom: ${gridSize()}px;
+  margin-bottom: ${"var(--ds-space-100, 8px)"};
 `;
 export const ExternalLinkIconContainer = styled.div`
   display: inline-block;
   vertical-align: middle;
-  padding-left: ${gridSize() / 2}px;
+  padding-left: ${"var(--ds-space-050, 4px)"};
 `;

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

@@ -1,9 +1,8 @@
 /** @jsx jsx */
 
 import styled from '@emotion/styled';
-import { gridSize } from '@atlaskit/theme/constants';
 export const ArticleContainer = styled.div`
-  padding: ${gridSize() * 2}px ${gridSize() * 3}px;
+  padding: ${"var(--ds-space-200, 16px)"} ${"var(--ds-space-300, 24px)"};
   position: absolute;
   height: 100%;
   width: 100%;

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

@@ -1,11 +1,11 @@
 /** @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 const ArticlesListItemWrapper = styled.a({
   position: `relative`,
   boxSizing: `border-box`,
-  padding: `${gridSize()}px`,
+  padding: "var(--ds-space-100, 8px)",
   display: `block`,
   textDecoration: `none`,
   cursor: `pointer`,
@@ -34,9 +34,9 @@ export const ArticlesListItemContainer = styled.div`
 export const ArticlesListItemTypeTitle = styled.div`
   font-weight: bold;
   font-size: 11px;
-  line-height: ${gridSize() * 2}px;
+  line-height: ${"var(--ds-font-lineHeight-100, 16px)"};
   color: ${`var(--ds-text-subtlest, ${colors.N200})`};
-  padding-bottom: ${gridSize() / 2}px;
+  padding-bottom: ${"var(--ds-space-050, 4px)"};
 `;
 export const ArticlesListItemLinkIcon = styled.span`
   align-self: auto;
@@ -49,14 +49,14 @@ export const ArticlesListItemTitleText = styled.span`
   font-size: ${fontSize()}px;
   font-weight: 600;
   display: inline-block;
-  line-height: ${gridSize() * 2.5}px;
+  line-height: ${"var(--ds-font-lineHeight-200, 20px)"};
   white-space: normal;
   overflow-x: hidden;
-  margin-bottom: ${gridSize()}px;
+  margin-bottom: ${"var(--ds-space-100, 8px)"};
 `;
 export const ArticlesListItemDescription = styled.p`
   display: block;
-  line-height: ${gridSize() * 2.5}px;
+  line-height: ${"var(--ds-font-lineHeight-200, 20px)"};
   color: ${`var(--ds-text-subtle, ${colors.N400})`};
   margin: 0;
 `;

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

@@ -2,7 +2,6 @@
 
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
-import { gridSize } from '@atlaskit/theme/constants';
 export const truncate = (width = '100%') => css`
   overflow-x: hidden;
   text-overflow: ellipsis;
@@ -13,7 +12,7 @@ export const ArticlesListContainer = styled.div`
   position: relative;
 `;
 export const ToggleShowMoreArticlesContainer = styled.div`
-  padding: ${gridSize()}px 0;
+  padding: ${"var(--ds-space-100, 8px)"} 0;
   span {
     margin: 0;
   }

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

@@ -2,13 +2,12 @@
 
 import styled from 'styled-components';
 import * as colors from '@atlaskit/theme/colors';
-import { gridSize } from '@atlaskit/theme/constants';
 export const HelpContentButtonContainer = styled.a`
   display: block;
   cursor: pointer;
-  width: calc(100% - ${gridSize() * 2}px);
+  width: calc(100% - ${"var(--ds-space-200, 16px)"});
   color: ${`var(--ds-text-subtle, ${colors.N600})`};
-  padding: ${gridSize}px;
+  padding: ${"var(--ds-space-100, 8px)"};
   border-radius: 3px;
 
   &:hover,
@@ -52,17 +51,17 @@ export const HelpContentButtonText = styled.div`
   width: calc(100% - 20px);
   display: inline-block;
   vertical-align: middle;
-  padding: 0 ${gridSize}px;
+  padding: 0 ${"var(--ds-space-100, 8px)"};
   box-sizing: border-box;
 `;
 export const HelpContentButtonExternalLinkIcon = styled.div`
   display: inline-block;
   vertical-align: middle;
-  padding-left: ${gridSize() / 2}px;
+  padding-left: ${"var(--ds-space-050, 4px)"};
 `;
 export const HelpContentButtonExternalNotificationIcon = styled.div`
   display: inline-block;
   vertical-align: middle;
-  margin-top: -${gridSize() / 2}px;
-  padding-left: ${gridSize() / 2}px;
+  margin-top: calc(-1 * ${"var(--ds-space-050, 4px)"});
+  padding-left: ${"var(--ds-space-050, 4px)"};
 `;

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

@@ -3,7 +3,7 @@
 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';
 const baseHeading = (size, lineHeight) => `
   font-size: ${size / fontSize()}em;
   font-style: inherit;
@@ -20,14 +20,14 @@ export const RelatedArticlesTitle = styled.div`
   color: ${`var(--ds-text, ${colors.N800})`};
   font-weight: 600;
   letter-spacing: -0.006em;
-  padding: ${gridSize() * 2}px 0;
+  padding: ${"var(--ds-space-200, 16px)"} 0;
 `;
 
 /**
  * Loading styled-components
  */
 export const LoadignRelatedArticleSection = styled.div`
-  margin-top: ${gridSize()}px;
+  margin-top: ${"var(--ds-space-100, 8px)"};
 `;
 export const LoadignRelatedArticleList = styled.ul`
   width: 100%;
@@ -38,7 +38,7 @@ export const LoadignRelatedArticleList = styled.ul`
 export const LoadignRelatedArticleListItem = styled.li`
   display: block;
   width: 100%;
-  padding: ${gridSize()}px;
-  margin-bottom: ${gridSize() * 2}px;
+  padding: ${"var(--ds-space-100, 8px)"};
+  margin-bottom: ${"var(--ds-space-200, 16px)"};
   box-sizing: border-box;
 `;

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/constants.js

@@ -1,24 +1,24 @@
 export const MIN_CHARACTERS_FOR_SEARCH = 3;
 export const LOADING_TIMEOUT = 1000;
 export const NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE = 10;
-export let VIEW;
-
-// Animation related consts
-(function (VIEW) {
+export let 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 || (VIEW = {}));
+  return VIEW;
+}({});
+
+// Animation related consts
 export const SLIDEIN_OVERLAY_TRANSITION_DURATION_MS = 300;
 export const FADEIN_OVERLAY_TRANSITION_DURATION_MS = 440;
 export const HIDE_CONTENT_DELAY = FADEIN_OVERLAY_TRANSITION_DURATION_MS + 200;
-export let TRANSITION_STATUS;
-(function (TRANSITION_STATUS) {
+export let 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 || (TRANSITION_STATUS = {}));
+  return TRANSITION_STATUS;
+}({});

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/model/Article.js

@@ -1,5 +1,5 @@
 // TODO - Check if we need to delete this
-export let ARTICLE_ITEM_TYPES;
-(function (ARTICLE_ITEM_TYPES) {
+export let ARTICLE_ITEM_TYPES = /*#__PURE__*/function (ARTICLE_ITEM_TYPES) {
   ARTICLE_ITEM_TYPES["topicInProduct"] = "topicInProduct";
-})(ARTICLE_ITEM_TYPES || (ARTICLE_ITEM_TYPES = {}));
+  return ARTICLE_ITEM_TYPES;
+}({});

package/dist/es2019/model/Help.js

@@ -1,6 +1,6 @@
 import { ArticleItem } from './Article';
-export let ARTICLE_TYPE;
-(function (ARTICLE_TYPE) {
+export let ARTICLE_TYPE = /*#__PURE__*/function (ARTICLE_TYPE) {
   ARTICLE_TYPE["HELP_ARTICLE"] = "HELP_ARTICLE";
   ARTICLE_TYPE["WHATS_NEW"] = "WHATS_NEW";
-})(ARTICLE_TYPE || (ARTICLE_TYPE = {}));
+  return ARTICLE_TYPE;
+}({});

package/dist/es2019/model/Requests.js

@@ -1,8 +1,8 @@
-export let REQUEST_STATE;
-(function (REQUEST_STATE) {
+export let REQUEST_STATE = /*#__PURE__*/function (REQUEST_STATE) {
   REQUEST_STATE["done"] = "done";
   REQUEST_STATE["loading"] = "loading";
   REQUEST_STATE["load"] = "load";
   REQUEST_STATE["error"] = "error";
   REQUEST_STATE["reload"] = "reload";
-})(REQUEST_STATE || (REQUEST_STATE = {}));
+  return REQUEST_STATE;
+}({});

package/dist/es2019/model/WhatsNew.js

@@ -1,8 +1,8 @@
-export let WHATS_NEW_ITEM_TYPES;
-(function (WHATS_NEW_ITEM_TYPES) {
+export let WHATS_NEW_ITEM_TYPES = /*#__PURE__*/function (WHATS_NEW_ITEM_TYPES) {
   WHATS_NEW_ITEM_TYPES["NEW_FEATURE"] = "Announcement";
   WHATS_NEW_ITEM_TYPES["IMPROVEMENT"] = "Improvement";
   WHATS_NEW_ITEM_TYPES["FIX"] = "Fix";
   WHATS_NEW_ITEM_TYPES["REMOVED"] = "Removed";
   WHATS_NEW_ITEM_TYPES["EXPERIMENT"] = "Experiment";
-})(WHATS_NEW_ITEM_TYPES || (WHATS_NEW_ITEM_TYPES = {}));
+  return WHATS_NEW_ITEM_TYPES;
+}({});

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.2.0",
 	"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)");