@atlaskit/help-layout 4.2.14 → 4.2.16

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/help-layout
 
+## 4.2.16
+
+### Patch Changes
+
+- [#80085](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80085) [`7febfed958dd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7febfed958dd) - Update usage of `React.FC` to explicity include `children`
+
+## 4.2.15
+
+### Patch Changes
+
+- [#77102](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77102) [`b93a56e5ee66`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b93a56e5ee66) - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.
+
 ## 4.2.14
 
 ### Patch Changes

package/dist/cjs/analytics.js

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.withAnalyticsEvents = exports.withAnalyticsContext = exports.defaultAnalyticsAttributes = exports.createAndFire = void 0;
 var x = _interopRequireWildcard(require("@atlaskit/analytics-next"));
-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; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var withAnalyticsEvents = exports.withAnalyticsEvents = x.withAnalyticsEvents;
 var withAnalyticsContext = exports.withAnalyticsContext = x.withAnalyticsContext;
 var createAndFire = exports.createAndFire = x.createAndFireEvent('atlaskit');
 var defaultAnalyticsAttributes = exports.defaultAnalyticsAttributes = {
   componentName: 'helpPanel',
   packageName: "@atlaskit/help-layout",
-  packageVersion: "4.2.14"
+  packageVersion: "4.2.16"
 };

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

@@ -75,7 +75,7 @@ var BackButtonWithContext = function BackButtonWithContext(props) {
     data: {
       componentName: 'backButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "4.2.14"
+      packageVersion: "4.2.16"
     }
   }, /*#__PURE__*/_react.default.createElement(BackButton, props));
 };

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

@@ -50,7 +50,7 @@ var CloseButtonWithContext = function CloseButtonWithContext(props) {
     data: {
       componentName: 'closeButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "4.2.14"
+      packageVersion: "4.2.16"
     }
   }, /*#__PURE__*/_react.default.createElement(CloseButton, props));
 };

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

@@ -6,18 +6,41 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.HeaderTitle = exports.HeaderContent = exports.HeaderContainer = exports.CloseButtonContainer = exports.BackButtonContainer = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _constants = require("@atlaskit/theme/constants");
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /** @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 = exports.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, ")"));
-var CloseButtonContainer = exports.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)");
-var BackButtonContainer = exports.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)");
-var HeaderTitle = exports.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);
-var HeaderContent = exports.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)");
+
+var HeaderContainer = exports.HeaderContainer = _styled.default.div({
+  backgroundColor: "var(--ds-background-neutral, ".concat(colors.N10, ")"),
+  borderBottom: "var(--ds-space-025, 2px)".concat(" solid ", "var(--ds-border, ".concat(colors.N30, ")")),
+  justifyContent: 'space-between',
+  position: 'relative'
+});
+var CloseButtonContainer = exports.CloseButtonContainer = _styled.default.div({
+  position: 'absolute',
+  right: "var(--ds-space-100, 8px)",
+  top: "var(--ds-space-150, 12px)"
+});
+var BackButtonContainer = exports.BackButtonContainer = _styled.default.div({
+  position: 'absolute',
+  top: "var(--ds-space-150, 12px)",
+  left: "var(--ds-space-100, 8px)"
+});
+var HeaderTitle = exports.HeaderTitle = _styled.default.div({
+  color: "var(--ds-text-subtle, ".concat(colors.N500, ")"),
+  textAlign: 'center',
+  fontSize: '1rem',
+  fontWeight: 600,
+  lineHeight: "var(--ds-space-800, 56px)",
+  width: '100%',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  display: 'inline-block',
+  overflow: 'hidden',
+  verticalAlign: 'middle'
+});
+var HeaderContent = exports.HeaderContent = _styled.default.div({
+  padding: "0 ".concat("var(--ds-space-200, 16px)", " ", "var(--ds-space-200, 16px)", " ", "var(--ds-space-200, 16px)")
+});

package/dist/cjs/components/HelpLayout.js

@@ -16,7 +16,7 @@ var _analytics = require("../analytics");
 var _MessagesIntlProvider = _interopRequireDefault(require("./MessagesIntlProvider"));
 var _HelpLayoutContent = _interopRequireDefault(require("./HelpLayoutContent"));
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var HelpLayout = exports.HelpLayout = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(HelpLayout, _React$PureComponent);
   var _super = _createSuper(HelpLayout);

package/dist/cjs/components/HelpLayoutContent.js

@@ -23,7 +23,7 @@ var HelpContent = exports.HelpContent = function HelpContent(props) {
     "aria-label": formatMessage(_messages.messages.help_loading),
     role: "img"
   }, /*#__PURE__*/_react.default.createElement(_styled.LoadingRectangle, {
-    contentHeight: "20px",
+    contentHeight: "var(--ds-space-250, 20px)",
     marginTop: "0"
   }), /*#__PURE__*/_react.default.createElement(_styled.LoadingRectangle, {
     contentWidth: "90%"

package/dist/cjs/components/styled.js

@@ -10,26 +10,64 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject;
+/* eslint-disable @atlaskit/design-system/no-exported-keyframes */
+/* eslint-disable @atlaskit/design-system/no-styled-tagged-template-expression */
 /** @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 = exports.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)");
-var Section = exports.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"])));
-var DividerLine = exports.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)");
-var FOOTER_BORDER_TOP = 2;
-var HelpFooter = exports.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, ")"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var Container = exports.Container = _styled.default.div({
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: 0,
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  backgroundColor: "var(--ds-surface, #FFFFFF)"
+});
+var Section = exports.Section = _styled.default.div({
+  flexGrow: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  minHeight: 0
+});
+var DividerLine = exports.DividerLine = _styled.default.div({
+  backgroundColor: "var(--ds-border, ".concat(colors.N30A, ")"),
+  height: "var(--ds-space-025, 2px)",
+  width: '100%',
+  padding: "0 ".concat("var(--ds-space-200, 16px)"),
+  marginTop: "var(--ds-space-200, 16px)",
+  boxSizing: 'border-box'
+});
+var HelpFooter = exports.HelpFooter = _styled.default.div({
+  padding: "var(--ds-space-100, 8px)".concat(" 0"),
+  boxSizing: 'border-box',
+  backgroundColor: "var(--ds-background-neutral, ".concat(colors.N10, ")"),
+  borderTop: "var(--ds-space-025, 2px)".concat(" solid ", "var(--ds-border, ".concat(colors.N30, ")")),
+  justifyContent: 'space-between'
+});
 
 /**
  * Loading
  */
 
-var LoadingContainer = exports.LoadingContainer = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", ";\n  height: 100%;\n"])), "var(--ds-space-200, 16px)");
-var shimmer = (0, _react.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 = exports.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';
+var LoadingContainer = exports.LoadingContainer = _styled.default.div({
+  padding: "var(--ds-space-200, 16px)",
+  height: '100%'
+});
+var shimmer = (0, _react.keyframes)({
+  '0%': {
+    backgroundPosition: '-300px 0'
+  },
+  '100%': {
+    backgroundPosition: '1000px 0'
+  }
+});
+var LoadingRectangle = exports.LoadingRectangle = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  height: ", ";\n  margin-top: ", ";\n  width: ", ";\n  border-radius: ", ";\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 : "var(--ds-space-200, 1rem)";
 }, function (props) {
   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, ")"));
+}, "var(--ds-space-025, 2px)", 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/es2019/analytics.js

@@ -5,5 +5,5 @@ export const createAndFire = x.createAndFireEvent('atlaskit');
 export const defaultAnalyticsAttributes = {
   componentName: 'helpPanel',
   packageName: "@atlaskit/help-layout",
-  packageVersion: "4.2.14"
+  packageVersion: "4.2.16"
 };

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

@@ -69,7 +69,7 @@ const BackButtonWithContext = props => {
     data: {
       componentName: 'backButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "4.2.14"
+      packageVersion: "4.2.16"
     }
   }, /*#__PURE__*/React.createElement(BackButton, props));
 };

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

@@ -47,7 +47,7 @@ const CloseButtonWithContext = props => {
     data: {
       componentName: 'closeButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "4.2.14"
+      packageVersion: "4.2.16"
     }
   }, /*#__PURE__*/React.createElement(CloseButton, props));
 };

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

@@ -1,40 +1,35 @@
 /** @jsx jsx */
 import styled from '@emotion/styled';
-import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-const HEADER_TITLE_HEIGHT = gridSize() * 7;
-const HEADER_TITLE_BORDER_BOTTOM = 2;
-export const HeaderContainer = styled.div`
-  background-color: ${`var(--ds-background-neutral, ${colors.N10})`};
-  border-bottom: ${HEADER_TITLE_BORDER_BOTTOM}px solid
-    ${`var(--ds-border, ${colors.N30})`};
-  justify-content: space-between;
-  position: relative;
-`;
-export const CloseButtonContainer = styled.div`
-  position: absolute;
-  right: ${"var(--ds-space-100, 8px)"};
-  top: ${"var(--ds-space-150, 12px)"};
-`;
-export const BackButtonContainer = styled.div`
-  position: absolute;
-  top: ${"var(--ds-space-150, 12px)"};
-  left: ${"var(--ds-space-100, 8px)"};
-`;
-export const HeaderTitle = styled.div`
-  color: ${`var(--ds-text-subtle, ${colors.N500})`};
-  text-align: center;
-  font-size: 1rem;
-  font-weight: 600;
-  line-height: ${HEADER_TITLE_HEIGHT}px;
-  width: 100%;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  display: inline-block;
-  overflow: hidden;
-  vertical-align: middle;
-`;
-export const HeaderContent = styled.div`
-  padding: 0 ${"var(--ds-space-200, 16px)"} ${"var(--ds-space-200, 16px)"}
-    ${"var(--ds-space-200, 16px)"};
-`;
+export const HeaderContainer = styled.div({
+  backgroundColor: `var(--ds-background-neutral, ${colors.N10})`,
+  borderBottom: `${"var(--ds-space-025, 2px)"} solid ${`var(--ds-border, ${colors.N30})`}`,
+  justifyContent: 'space-between',
+  position: 'relative'
+});
+export const CloseButtonContainer = styled.div({
+  position: 'absolute',
+  right: "var(--ds-space-100, 8px)",
+  top: "var(--ds-space-150, 12px)"
+});
+export const BackButtonContainer = styled.div({
+  position: 'absolute',
+  top: "var(--ds-space-150, 12px)",
+  left: "var(--ds-space-100, 8px)"
+});
+export const HeaderTitle = styled.div({
+  color: `var(--ds-text-subtle, ${colors.N500})`,
+  textAlign: 'center',
+  fontSize: '1rem',
+  fontWeight: 600,
+  lineHeight: "var(--ds-space-800, 56px)",
+  width: '100%',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  display: 'inline-block',
+  overflow: 'hidden',
+  verticalAlign: 'middle'
+});
+export const HeaderContent = styled.div({
+  padding: `0 ${"var(--ds-space-200, 16px)"} ${"var(--ds-space-200, 16px)"} ${"var(--ds-space-200, 16px)"}`
+});

package/dist/es2019/components/HelpLayoutContent.js

@@ -17,7 +17,7 @@ export const HelpContent = props => {
     "aria-label": formatMessage(messages.help_loading),
     role: "img"
   }, /*#__PURE__*/React.createElement(LoadingRectangle, {
-    contentHeight: "20px",
+    contentHeight: "var(--ds-space-250, 20px)",
     marginTop: "0"
   }), /*#__PURE__*/React.createElement(LoadingRectangle, {
     contentWidth: "90%"

package/dist/es2019/components/styled.js

@@ -1,63 +1,64 @@
+/* eslint-disable @atlaskit/design-system/no-exported-keyframes */
+/* eslint-disable @atlaskit/design-system/no-styled-tagged-template-expression */
 /** @jsx jsx */
 
 import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 import * as colors from '@atlaskit/theme/colors';
-export const Container = styled.div`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  background-color: ${"var(--ds-surface, #FFFFFF)"};
-`;
-export const Section = styled.div`
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-`;
-export const DividerLine = styled.div`
-  background-color: ${`var(--ds-border, ${colors.N30A})`};
-  height: 2px;
-  width: 100%;
-  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: ${"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})`};
-  justify-content: space-between;
-`;
+export const Container = styled.div({
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: 0,
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  backgroundColor: "var(--ds-surface, #FFFFFF)"
+});
+export const Section = styled.div({
+  flexGrow: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  minHeight: 0
+});
+export const DividerLine = styled.div({
+  backgroundColor: `var(--ds-border, ${colors.N30A})`,
+  height: "var(--ds-space-025, 2px)",
+  width: '100%',
+  padding: `0 ${"var(--ds-space-200, 16px)"}`,
+  marginTop: "var(--ds-space-200, 16px)",
+  boxSizing: 'border-box'
+});
+export const HelpFooter = styled.div({
+  padding: `${"var(--ds-space-100, 8px)"} 0`,
+  boxSizing: 'border-box',
+  backgroundColor: `var(--ds-background-neutral, ${colors.N10})`,
+  borderTop: `${"var(--ds-space-025, 2px)"} solid ${`var(--ds-border, ${colors.N30})`}`,
+  justifyContent: 'space-between'
+});
 
 /**
  * Loading
  */
 
-export const LoadingContainer = styled.div`
-  padding: ${"var(--ds-space-200, 16px)"};
-  height: 100%;
-`;
-const shimmer = keyframes`
-    0% {
-        background-position: -300px 0;
-    }
-    100% {
-        background-position: 1000px 0;
-    }
-`;
+export const LoadingContainer = styled.div({
+  padding: "var(--ds-space-200, 16px)",
+  height: '100%'
+});
+const shimmer = keyframes({
+  '0%': {
+    backgroundPosition: '-300px 0'
+  },
+  '100%': {
+    backgroundPosition: '1000px 0'
+  }
+});
 export const LoadingRectangle = styled.div`
   position: relative;
-  height: ${props => props.contentHeight ? props.contentHeight : '1rem'};
+  height: ${props => props.contentHeight ? props.contentHeight : "var(--ds-space-200, 1rem)"};
   margin-top: ${props => props.marginTop ? props.marginTop : "var(--ds-space-100, 8px)"};
   width: ${props => props.contentWidth ? props.contentWidth : '100%'};
-  border-radius: 2px;
+  border-radius: ${"var(--ds-space-025, 2px)"};
   animation-duration: 1.2s;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;

package/dist/esm/analytics.js

@@ -5,5 +5,5 @@ export var createAndFire = x.createAndFireEvent('atlaskit');
 export var defaultAnalyticsAttributes = {
   componentName: 'helpPanel',
   packageName: "@atlaskit/help-layout",
-  packageVersion: "4.2.14"
+  packageVersion: "4.2.16"
 };

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

@@ -68,7 +68,7 @@ var BackButtonWithContext = function BackButtonWithContext(props) {
     data: {
       componentName: 'backButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "4.2.14"
+      packageVersion: "4.2.16"
     }
   }, /*#__PURE__*/React.createElement(BackButton, props));
 };

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

@@ -43,7 +43,7 @@ var CloseButtonWithContext = function CloseButtonWithContext(props) {
     data: {
       componentName: 'closeButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "4.2.14"
+      packageVersion: "4.2.16"
     }
   }, /*#__PURE__*/React.createElement(CloseButton, props));
 };

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

@@ -1,13 +1,35 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 /** @jsx jsx */
 import styled from '@emotion/styled';
-import { gridSize } from '@atlaskit/theme/constants';
 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: ", ";\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 ", " ", "\n    ", ";\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");
+export var HeaderContainer = styled.div({
+  backgroundColor: "var(--ds-background-neutral, ".concat(colors.N10, ")"),
+  borderBottom: "var(--ds-space-025, 2px)".concat(" solid ", "var(--ds-border, ".concat(colors.N30, ")")),
+  justifyContent: 'space-between',
+  position: 'relative'
+});
+export var CloseButtonContainer = styled.div({
+  position: 'absolute',
+  right: "var(--ds-space-100, 8px)",
+  top: "var(--ds-space-150, 12px)"
+});
+export var BackButtonContainer = styled.div({
+  position: 'absolute',
+  top: "var(--ds-space-150, 12px)",
+  left: "var(--ds-space-100, 8px)"
+});
+export var HeaderTitle = styled.div({
+  color: "var(--ds-text-subtle, ".concat(colors.N500, ")"),
+  textAlign: 'center',
+  fontSize: '1rem',
+  fontWeight: 600,
+  lineHeight: "var(--ds-space-800, 56px)",
+  width: '100%',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  display: 'inline-block',
+  overflow: 'hidden',
+  verticalAlign: 'middle'
+});
+export var HeaderContent = styled.div({
+  padding: "0 ".concat("var(--ds-space-200, 16px)", " ", "var(--ds-space-200, 16px)", " ", "var(--ds-space-200, 16px)")
+});

package/dist/esm/components/HelpLayout.js

@@ -4,7 +4,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { withAnalyticsEvents, withAnalyticsContext } from '@atlaskit/analytics-next';
 import { defaultAnalyticsAttributes } from '../analytics';

package/dist/esm/components/HelpLayoutContent.js

@@ -16,7 +16,7 @@ export var HelpContent = function HelpContent(props) {
     "aria-label": formatMessage(messages.help_loading),
     role: "img"
   }, /*#__PURE__*/React.createElement(LoadingRectangle, {
-    contentHeight: "20px",
+    contentHeight: "var(--ds-space-250, 20px)",
     marginTop: "0"
   }), /*#__PURE__*/React.createElement(LoadingRectangle, {
     contentWidth: "90%"

package/dist/esm/components/styled.js

@@ -1,26 +1,64 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject;
+/* eslint-disable @atlaskit/design-system/no-exported-keyframes */
+/* eslint-disable @atlaskit/design-system/no-styled-tagged-template-expression */
 /** @jsx jsx */
 
 import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 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 ", ";\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: ", " 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, ")"));
+export var Container = styled.div({
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: 0,
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  backgroundColor: "var(--ds-surface, #FFFFFF)"
+});
+export var Section = styled.div({
+  flexGrow: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  minHeight: 0
+});
+export var DividerLine = styled.div({
+  backgroundColor: "var(--ds-border, ".concat(colors.N30A, ")"),
+  height: "var(--ds-space-025, 2px)",
+  width: '100%',
+  padding: "0 ".concat("var(--ds-space-200, 16px)"),
+  marginTop: "var(--ds-space-200, 16px)",
+  boxSizing: 'border-box'
+});
+export var HelpFooter = styled.div({
+  padding: "var(--ds-space-100, 8px)".concat(" 0"),
+  boxSizing: 'border-box',
+  backgroundColor: "var(--ds-background-neutral, ".concat(colors.N10, ")"),
+  borderTop: "var(--ds-space-025, 2px)".concat(" solid ", "var(--ds-border, ".concat(colors.N30, ")")),
+  justifyContent: 'space-between'
+});
 
 /**
  * Loading
  */
 
-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';
+export var LoadingContainer = styled.div({
+  padding: "var(--ds-space-200, 16px)",
+  height: '100%'
+});
+var shimmer = keyframes({
+  '0%': {
+    backgroundPosition: '-300px 0'
+  },
+  '100%': {
+    backgroundPosition: '1000px 0'
+  }
+});
+export var LoadingRectangle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  height: ", ";\n  margin-top: ", ";\n  width: ", ";\n  border-radius: ", ";\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 : "var(--ds-space-200, 1rem)";
 }, function (props) {
   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, ")"));
+}, "var(--ds-space-025, 2px)", 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/docs/0-intro.tsx

@@ -1,30 +1,15 @@
 import React from 'react';
-import {
-  md,
-  code,
-  Props,
-  AtlassianInternalWarning,
-  DevPreviewWarning,
-} from '@atlaskit/docs';
+import { md, code, Props, AtlassianInternalWarning } from '@atlaskit/docs';
 
 const helpPanelProps = require('!!extract-react-types-loader!../src/components/HelpLayout');
 
 export default md`
-  ${(
-    <>
-      <div style={{ marginBottom: '0.5rem' }}>
-        <AtlassianInternalWarning />
-      </div>
-      <div style={{ marginTop: '0.5rem' }}>
-        <DevPreviewWarning />
-      </div>
-    </>
-  )}
+  ${(<AtlassianInternalWarning />)}
 
   ## Usage
 
   ${code`
-  import React from 'react';
+import React from 'react';
 import { AnalyticsListener } from '@atlaskit/analytics-next';
 import Page from '@atlaskit/page';
 
@@ -43,7 +28,7 @@ const handleEvent = (analyticsEvent: { payload: any; context: any }) => {
   console.log('Received event:', { payload, context });
 };
 
-const Example: React.FC = () => {
+const Example = () => {
   return (
     <ExampleWrapper>
       <Page>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/help-layout",
-  "version": "4.2.14",
+  "version": "4.2.16",
   "description": "Layout for the atlaskit/help component.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -34,10 +34,10 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/button": "^17.3.0",
-    "@atlaskit/icon": "^22.0.0",
+    "@atlaskit/button": "^17.7.0",
+    "@atlaskit/icon": "^22.1.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.37.0",
+    "@atlaskit/tokens": "^1.41.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",