@atlaskit/help-layout 4.1.14 → 4.2.0

package/CHANGELOG.md

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

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

@@ -11,17 +11,18 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _constants = require("@atlaskit/theme/constants");
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+/** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var HEADER_TITLE_HEIGHT = (0, _constants.gridSize)() * 7;
 var HEADER_TITLE_BORDER_BOTTOM = 2;
 var HeaderContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-bottom: ", "px solid\n    ", ";\n  justify-content: space-between;\n  position: relative;\n"])), "var(--ds-background-neutral, ".concat(colors.N10, ")"), HEADER_TITLE_BORDER_BOTTOM, "var(--ds-border, ".concat(colors.N30, ")"));
 exports.HeaderContainer = HeaderContainer;
-var CloseButtonContainer = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: ", "px;\n  top: ", "px;\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)() * 1.5);
+var CloseButtonContainer = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: ", ";\n  top: ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-150, 12px)");
 exports.CloseButtonContainer = CloseButtonContainer;
-var BackButtonContainer = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n"])), (0, _constants.gridSize)() * 1.5, (0, _constants.gridSize)());
+var BackButtonContainer = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: ", ";\n  left: ", ";\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-100, 8px)");
 exports.BackButtonContainer = BackButtonContainer;
 var HeaderTitle = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  text-align: center;\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: ", "px;\n  width: 100%;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  display: inline-block;\n  overflow: hidden;\n  vertical-align: middle;\n"])), "var(--ds-text-subtle, ".concat(colors.N500, ")"), HEADER_TITLE_HEIGHT);
 exports.HeaderTitle = HeaderTitle;
-var HeaderContent = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0 ", "px ", "px ", "px;\n"])), (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2);
+var HeaderContent = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0 ", " ", "\n    ", ";\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");
 exports.HeaderContent = HeaderContent;

package/dist/cjs/components/constants.js

@@ -7,12 +7,12 @@ exports.TRANSITION_STATUS = exports.TRANSITION_DURATION_MS = void 0;
 // Animation related consts
 var TRANSITION_DURATION_MS = 220;
 exports.TRANSITION_DURATION_MS = TRANSITION_DURATION_MS;
-var TRANSITION_STATUS;
-exports.TRANSITION_STATUS = TRANSITION_STATUS;
-(function (TRANSITION_STATUS) {
+var TRANSITION_STATUS = /*#__PURE__*/function (TRANSITION_STATUS) {
   TRANSITION_STATUS["UNMOUNTED"] = "unmounted";
   TRANSITION_STATUS["EXITED"] = "exited";
   TRANSITION_STATUS["ENTERING"] = "entering";
   TRANSITION_STATUS["ENTERED"] = "entered";
   TRANSITION_STATUS["EXITING"] = "exiting";
-})(TRANSITION_STATUS || (exports.TRANSITION_STATUS = TRANSITION_STATUS = {}));
+  return TRANSITION_STATUS;
+}({});
+exports.TRANSITION_STATUS = TRANSITION_STATUS;

package/dist/cjs/components/styled.js

@@ -9,31 +9,31 @@ exports.Section = exports.LoadingRectangle = exports.LoadingContainer = exports.
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _core = require("@emotion/core");
-var _constants = require("@atlaskit/theme/constants");
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+/** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var Container = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  background-color: ", ";\n"])), "var(--ds-surface, #FFFFFF)");
 exports.Container = Container;
 var Section = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n"])));
 exports.Section = Section;
-var DividerLine = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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 * (0, _constants.gridSize)(), (0, _constants.gridSize)() * 2);
+var DividerLine = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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)");
 exports.DividerLine = DividerLine;
 var FOOTER_BORDER_TOP = 2;
-var HelpFooter = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px 0;\n  box-sizing: border-box;\n  background-color: ", ";\n  border-top: ", "px solid ", ";\n  justify-content: space-between;\n"])), (0, _constants.gridSize)(), "var(--ds-background-neutral, ".concat(colors.N10, ")"), FOOTER_BORDER_TOP, "var(--ds-border, ".concat(colors.N30, ")"));
+var HelpFooter = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", " 0;\n  box-sizing: border-box;\n  background-color: ", ";\n  border-top: ", "px solid ", ";\n  justify-content: space-between;\n"])), "var(--ds-space-100, 8px)", "var(--ds-background-neutral, ".concat(colors.N10, ")"), FOOTER_BORDER_TOP, "var(--ds-border, ".concat(colors.N30, ")"));
 
 /**
  * Loading
  */
 exports.HelpFooter = HelpFooter;
-var LoadingContainer = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px;\n  height: 100%;\n"])), 2 * (0, _constants.gridSize)());
+var LoadingContainer = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", ";\n  height: 100%;\n"])), "var(--ds-space-200, 16px)");
 exports.LoadingContainer = LoadingContainer;
 var shimmer = (0, _core.keyframes)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    0% {\n        background-position: -300px 0;\n    }\n    100% {\n        background-position: 1000px 0;\n    }\n"])));
 var LoadingRectangle = _styled.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  height: ", ";\n  margin-top: ", ";\n  width: ", ";\n  border-radius: 2px;\n  animation-duration: 1.2s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n  background-color: ", ";\n  background-image: linear-gradient(\n    to right,\n    ", " 10%,\n    ", " 20%,\n    ", " 30%\n  );\n  background-repeat: no-repeat;\n"])), function (props) {
   return props.contentHeight ? props.contentHeight : '1rem';
 }, function (props) {
-  return props.marginTop ? props.marginTop : (0, _constants.gridSize)() + 'px';
+  return props.marginTop ? props.marginTop : "var(--ds-space-100, 8px)";
 }, function (props) {
   return props.contentWidth ? props.contentWidth : '100%';
 }, shimmer, "var(--ds-background-neutral, ".concat(colors.N30, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), "var(--ds-background-neutral, ".concat(colors.N40, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"));

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/help-layout",
-	"version": "4.1.14",
+	"version": "4.2.0",
 	"sideEffects": false
 }

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

@@ -13,13 +13,13 @@ export const HeaderContainer = styled.div`
 `;
 export const CloseButtonContainer = styled.div`
   position: absolute;
-  right: ${gridSize()}px;
-  top: ${gridSize() * 1.5}px;
+  right: ${"var(--ds-space-100, 8px)"};
+  top: ${"var(--ds-space-150, 12px)"};
 `;
 export const BackButtonContainer = styled.div`
   position: absolute;
-  top: ${gridSize() * 1.5}px;
-  left: ${gridSize()}px;
+  top: ${"var(--ds-space-150, 12px)"};
+  left: ${"var(--ds-space-100, 8px)"};
 `;
 export const HeaderTitle = styled.div`
   color: ${`var(--ds-text-subtle, ${colors.N500})`};
@@ -35,5 +35,6 @@ export const HeaderTitle = styled.div`
   vertical-align: middle;
 `;
 export const HeaderContent = styled.div`
-  padding: 0 ${gridSize() * 2}px ${gridSize() * 2}px ${gridSize() * 2}px;
+  padding: 0 ${"var(--ds-space-200, 16px)"} ${"var(--ds-space-200, 16px)"}
+    ${"var(--ds-space-200, 16px)"};
 `;

package/dist/es2019/components/constants.js

@@ -1,10 +1,10 @@
 // Animation related consts
 export const TRANSITION_DURATION_MS = 220;
-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

@@ -2,7 +2,6 @@
 
 import styled from '@emotion/styled';
 import { keyframes } from '@emotion/core';
-import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 export const Container = styled.div`
   position: absolute;
@@ -24,13 +23,13 @@ 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;
 `;
 const FOOTER_BORDER_TOP = 2;
 export const HelpFooter = styled.div`
-  padding: ${gridSize()}px 0;
+  padding: ${"var(--ds-space-100, 8px)"} 0;
   box-sizing: border-box;
   background-color: ${`var(--ds-background-neutral, ${colors.N10})`};
   border-top: ${FOOTER_BORDER_TOP}px solid ${`var(--ds-border, ${colors.N30})`};
@@ -42,7 +41,7 @@ export const HelpFooter = styled.div`
  */
 
 export const LoadingContainer = styled.div`
-  padding: ${2 * gridSize()}px;
+  padding: ${"var(--ds-space-200, 16px)"};
   height: 100%;
 `;
 const shimmer = keyframes`
@@ -56,7 +55,7 @@ const shimmer = keyframes`
 export const LoadingRectangle = styled.div`
   position: relative;
   height: ${props => props.contentHeight ? props.contentHeight : '1rem'};
-  margin-top: ${props => props.marginTop ? props.marginTop : gridSize() + 'px'};
+  margin-top: ${props => props.marginTop ? props.marginTop : "var(--ds-space-100, 8px)"};
   width: ${props => props.contentWidth ? props.contentWidth : '100%'};
   border-radius: 2px;
   animation-duration: 1.2s;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/help-layout",
-	"version": "4.1.14",
+	"version": "4.2.0",
 	"sideEffects": false
 }

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

@@ -7,7 +7,7 @@ import * as colors from '@atlaskit/theme/colors';
 var HEADER_TITLE_HEIGHT = gridSize() * 7;
 var HEADER_TITLE_BORDER_BOTTOM = 2;
 export var HeaderContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-bottom: ", "px solid\n    ", ";\n  justify-content: space-between;\n  position: relative;\n"])), "var(--ds-background-neutral, ".concat(colors.N10, ")"), HEADER_TITLE_BORDER_BOTTOM, "var(--ds-border, ".concat(colors.N30, ")"));
-export var CloseButtonContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: ", "px;\n  top: ", "px;\n"])), gridSize(), gridSize() * 1.5);
-export var BackButtonContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n"])), gridSize() * 1.5, gridSize());
+export var CloseButtonContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: ", ";\n  top: ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-150, 12px)");
+export var BackButtonContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: ", ";\n  left: ", ";\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-100, 8px)");
 export var HeaderTitle = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n  text-align: center;\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: ", "px;\n  width: 100%;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  display: inline-block;\n  overflow: hidden;\n  vertical-align: middle;\n"])), "var(--ds-text-subtle, ".concat(colors.N500, ")"), HEADER_TITLE_HEIGHT);
-export var HeaderContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: 0 ", "px ", "px ", "px;\n"])), gridSize() * 2, gridSize() * 2, gridSize() * 2);
+export var HeaderContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: 0 ", " ", "\n    ", ";\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");

package/dist/esm/components/constants.js

@@ -1,10 +1,10 @@
 // Animation related consts
 export var TRANSITION_DURATION_MS = 220;
-export var TRANSITION_STATUS;
-(function (TRANSITION_STATUS) {
+export var TRANSITION_STATUS = /*#__PURE__*/function (TRANSITION_STATUS) {
   TRANSITION_STATUS["UNMOUNTED"] = "unmounted";
   TRANSITION_STATUS["EXITED"] = "exited";
   TRANSITION_STATUS["ENTERING"] = "entering";
   TRANSITION_STATUS["ENTERED"] = "entered";
   TRANSITION_STATUS["EXITING"] = "exiting";
-})(TRANSITION_STATUS || (TRANSITION_STATUS = {}));
+  return TRANSITION_STATUS;
+}({});

package/dist/esm/components/styled.js

@@ -4,24 +4,23 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 import styled from '@emotion/styled';
 import { keyframes } from '@emotion/core';
-import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 export var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  background-color: ", ";\n"])), "var(--ds-surface, #FFFFFF)");
 export var Section = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n"])));
-export var DividerLine = styled.div(_templateObject3 || (_templateObject3 = _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(_templateObject3 || (_templateObject3 = _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)");
 var FOOTER_BORDER_TOP = 2;
-export var HelpFooter = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: ", "px 0;\n  box-sizing: border-box;\n  background-color: ", ";\n  border-top: ", "px solid ", ";\n  justify-content: space-between;\n"])), gridSize(), "var(--ds-background-neutral, ".concat(colors.N10, ")"), FOOTER_BORDER_TOP, "var(--ds-border, ".concat(colors.N30, ")"));
+export var HelpFooter = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: ", " 0;\n  box-sizing: border-box;\n  background-color: ", ";\n  border-top: ", "px solid ", ";\n  justify-content: space-between;\n"])), "var(--ds-space-100, 8px)", "var(--ds-background-neutral, ".concat(colors.N10, ")"), FOOTER_BORDER_TOP, "var(--ds-border, ".concat(colors.N30, ")"));
 
 /**
  * Loading
  */
 
-export var LoadingContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: ", "px;\n  height: 100%;\n"])), 2 * gridSize());
+export var LoadingContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: ", ";\n  height: 100%;\n"])), "var(--ds-space-200, 16px)");
 var shimmer = keyframes(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    0% {\n        background-position: -300px 0;\n    }\n    100% {\n        background-position: 1000px 0;\n    }\n"])));
 export var LoadingRectangle = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: relative;\n  height: ", ";\n  margin-top: ", ";\n  width: ", ";\n  border-radius: 2px;\n  animation-duration: 1.2s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n  background-color: ", ";\n  background-image: linear-gradient(\n    to right,\n    ", " 10%,\n    ", " 20%,\n    ", " 30%\n  );\n  background-repeat: no-repeat;\n"])), function (props) {
   return props.contentHeight ? props.contentHeight : '1rem';
 }, function (props) {
-  return props.marginTop ? props.marginTop : gridSize() + 'px';
+  return props.marginTop ? props.marginTop : "var(--ds-space-100, 8px)";
 }, function (props) {
   return props.contentWidth ? props.contentWidth : '100%';
 }, shimmer, "var(--ds-background-neutral, ".concat(colors.N30, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), "var(--ds-background-neutral, ".concat(colors.N40, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"));

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/help-layout",
-	"version": "4.1.14",
+	"version": "4.2.0",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/help-layout",
-  "version": "4.1.14",
+  "version": "4.2.0",
   "description": "Layout for the atlaskit/help component.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -23,13 +23,13 @@
     }
   },
   "dependencies": {
-    "@atlaskit/analytics": "^8.0.0",
-    "@atlaskit/analytics-next": "^9.0.0",
-    "@atlaskit/button": "^16.5.0",
-    "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^1.2.0",
-    "@atlaskit/tooltip": "^17.6.0",
+    "@atlaskit/analytics": "^8.1.0",
+    "@atlaskit/analytics-next": "^9.1.0",
+    "@atlaskit/button": "^16.7.0",
+    "@atlaskit/icon": "^21.12.0",
+    "@atlaskit/theme": "^12.5.0",
+    "@atlaskit/tokens": "^1.3.0",
+    "@atlaskit/tooltip": "^17.8.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
     "@emotion/styled": "^10.0.7",
@@ -44,8 +44,8 @@
   "devDependencies": {
     "@atlaskit/docs": "*",
     "@atlaskit/navigation": "^37.0.0",
-    "@atlaskit/page": "^12.2.0",
-    "@atlaskit/right-side-panel": "^1.1.0",
+    "@atlaskit/page": "^12.3.0",
+    "@atlaskit/right-side-panel": "^1.2.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "algoliasearch": "^3.35.1",
     "enzyme": "^3.10.0",

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

@@ -1,47 +0,0 @@
-## API Report File for "@atlaskit/help-layout"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-/// <reference types="react" />
-
-import { default as React_2 } from 'react';
-import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { WithContextProps } from '@atlaskit/analytics-next';
-
-// @public (undocumented)
-const _default: React_2.ForwardRefExoticComponent<Pick<Omit<Props, keyof WithAnalyticsEventsProps> & React_2.RefAttributes<any> & WithContextProps, "analyticsContext" | "key" | keyof HelpLayout> & React_2.RefAttributes<any>>;
-export default _default;
-
-// @public (undocumented)
-interface HelpLayout extends HelpPanelHeader {
-    // (undocumented)
-    children?: React.ReactNode;
-    // (undocumented)
-    footer?: React.ReactNode;
-    // (undocumented)
-    isLoading?: boolean;
-}
-
-// @public (undocumented)
-interface HelpPanelHeader {
-    // (undocumented)
-    headerContent?: React.ReactNode;
-    // (undocumented)
-    headerTitle?: string;
-    // (undocumented)
-    isBackbuttonVisible?: boolean;
-    // (undocumented)
-    onBackButtonClick?(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent): void;
-    // (undocumented)
-    onCloseButtonClick?(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent): void;
-}
-
-// @public (undocumented)
-type Props = HelpLayout & WithAnalyticsEventsProps;
-
-// (No @packageDocumentation comment for this package)
-
-```