@atlaskit/help-layout 4.1.11 → 4.1.13

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/help-layout
 
+## 4.1.13
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.1.12
+
+### Patch Changes
+
+- [`6455cf006b3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6455cf006b3) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving performance.
+
 ## 4.1.11
 
 ### Patch Changes

package/dist/cjs/analytics.js

@@ -1,20 +1,14 @@
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.withAnalyticsEvents = exports.withAnalyticsContext = exports.defaultAnalyticsAttributes = exports.createAndFire = void 0;
-
 var x = _interopRequireWildcard(require("@atlaskit/analytics-next"));
-
 var _version = require("./version.json");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var withAnalyticsEvents = x.withAnalyticsEvents;
 exports.withAnalyticsEvents = withAnalyticsEvents;
 var withAnalyticsContext = x.withAnalyticsContext;

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

@@ -1,40 +1,24 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.BackButton = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _reactIntlNext = require("react-intl-next");
-
 var _analyticsNext = require("@atlaskit/analytics-next");
-
 var _constants = require("@atlaskit/theme/constants");
-
 var _reactTransitionGroup = require("react-transition-group");
-
 var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-left"));
-
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
-
 var _version = require("../../version.json");
-
 var _messages = require("../../messages");
-
 var _constants2 = require("../constants");
-
 var _styled = require("./styled");
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 // Animation
 var defaultStyle = {
   transition: "left ".concat(_constants2.TRANSITION_DURATION_MS, "ms, opacity ").concat(_constants2.TRANSITION_DURATION_MS, "ms"),
@@ -51,26 +35,21 @@ var transitionStyles = {
     opacity: 0
   }
 };
-
 var BackButton = function BackButton(_ref) {
   var onClick = _ref.onClick,
-      _ref$isVisible = _ref.isVisible,
-      isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
-      formatMessage = _ref.intl.formatMessage;
-
+    _ref$isVisible = _ref.isVisible,
+    isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
+    formatMessage = _ref.intl.formatMessage;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
-      createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
-
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var handleOnClick = function handleOnClick(event) {
     if (onClick) {
       var _analyticsEvent = createAnalyticsEvent({
         action: 'clicked'
       });
-
       onClick(event, _analyticsEvent);
     }
   };
-
   return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
     in: isVisible,
     timeout: _constants2.TRANSITION_DURATION_MS,
@@ -93,9 +72,7 @@ var BackButton = function BackButton(_ref) {
     }, formatMessage(_messages.messages.help_panel_header_back)));
   });
 };
-
 exports.BackButton = BackButton;
-
 var BackButtonWithContext = function BackButtonWithContext(props) {
   return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
     data: {
@@ -105,7 +82,5 @@ var BackButtonWithContext = function BackButtonWithContext(props) {
     }
   }, /*#__PURE__*/_react.default.createElement(BackButton, props));
 };
-
 var _default = (0, _reactIntlNext.injectIntl)(BackButtonWithContext);
-
 exports.default = _default;

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

@@ -1,30 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.CloseButton = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _reactIntlNext = require("react-intl-next");
-
 var _analyticsNext = require("@atlaskit/analytics-next");
-
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
-
 var _close = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/close"));
-
 var _version = require("../../version.json");
-
 var _messages = require("../../messages");
-
 var _styled = require("./styled");
-
 /**
  * This function will return a CloseButton component only if the function
  * to be executed on the onClick event is passed as a parameter
@@ -33,21 +22,17 @@ var _styled = require("./styled");
  */
 var CloseButton = function CloseButton(_ref) {
   var onClick = _ref.onClick,
-      formatMessage = _ref.intl.formatMessage;
-
+    formatMessage = _ref.intl.formatMessage;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
-      createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
-
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var handleOnClick = function handleOnClick(event) {
     if (onClick) {
       var _analyticsEvent = createAnalyticsEvent({
         action: 'clicked'
       });
-
       onClick(event, _analyticsEvent);
     }
   };
-
   return /*#__PURE__*/_react.default.createElement(_styled.CloseButtonContainer, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: formatMessage(_messages.messages.help_panel_header_close),
     position: "left"
@@ -60,9 +45,7 @@ var CloseButton = function CloseButton(_ref) {
     })
   })));
 };
-
 exports.CloseButton = CloseButton;
-
 var CloseButtonWithContext = function CloseButtonWithContext(props) {
   return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
     data: {
@@ -72,7 +55,5 @@ var CloseButtonWithContext = function CloseButtonWithContext(props) {
     }
   }, /*#__PURE__*/_react.default.createElement(CloseButton, props));
 };
-
 var _default = (0, _reactIntlNext.injectIntl)(CloseButtonWithContext);
-
 exports.default = _default;

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

@@ -1,39 +1,29 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.HelpContent = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _reactIntlNext = require("react-intl-next");
-
 var _messages = require("../../messages");
-
 var _CloseButton = _interopRequireDefault(require("./CloseButton"));
-
 var _BackButton = _interopRequireDefault(require("./BackButton"));
-
 var _styled = require("./styled");
-
 var HelpContent = function HelpContent(_ref) {
   var headerTitle = _ref.headerTitle,
-      headerContent = _ref.headerContent,
-      _ref$isBackbuttonVisi = _ref.isBackbuttonVisible,
-      isBackbuttonVisible = _ref$isBackbuttonVisi === void 0 ? false : _ref$isBackbuttonVisi,
-      onCloseButtonClick = _ref.onCloseButtonClick,
-      onBackButtonClick = _ref.onBackButtonClick,
-      formatMessage = _ref.intl.formatMessage;
-
+    headerContent = _ref.headerContent,
+    _ref$isBackbuttonVisi = _ref.isBackbuttonVisible,
+    isBackbuttonVisible = _ref$isBackbuttonVisi === void 0 ? false : _ref$isBackbuttonVisi,
+    onCloseButtonClick = _ref.onCloseButtonClick,
+    onBackButtonClick = _ref.onBackButtonClick,
+    formatMessage = _ref.intl.formatMessage;
   var handleOnBackButtonClick = function handleOnBackButtonClick(event, analyticsEvent) {
     if (onBackButtonClick) {
       onBackButtonClick(event, analyticsEvent);
     }
   };
-
   return /*#__PURE__*/_react.default.createElement(_styled.HeaderContainer, null, /*#__PURE__*/_react.default.createElement(_BackButton.default, {
     onClick: handleOnBackButtonClick,
     isVisible: isBackbuttonVisible
@@ -41,9 +31,6 @@ var HelpContent = function HelpContent(_ref) {
     onClick: onCloseButtonClick
   }), headerContent && /*#__PURE__*/_react.default.createElement(_styled.HeaderContent, null, headerContent));
 };
-
 exports.HelpContent = HelpContent;
-
 var _default = (0, _reactIntlNext.injectIntl)(HelpContent);
-
 exports.default = _default;

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

@@ -1,49 +1,27 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 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 _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
 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"])), (0, _tokens.token)('color.background.neutral', colors.N10), HEADER_TITLE_BORDER_BOTTOM, (0, _tokens.token)('color.border', colors.N30));
-
+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);
-
 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)());
-
 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"])), (0, _tokens.token)('color.text.subtle', colors.N500), HEADER_TITLE_HEIGHT);
-
+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);
-
 exports.HeaderContent = HeaderContent;

package/dist/cjs/components/HelpLayout.js

@@ -1,46 +1,29 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.HelpLayout = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _analyticsNext = require("@atlaskit/analytics-next");
-
 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; } }
-
 var HelpLayout = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(HelpLayout, _React$PureComponent);
-
   var _super = _createSuper(HelpLayout);
-
   function HelpLayout() {
     (0, _classCallCheck2.default)(this, HelpLayout);
     return _super.apply(this, arguments);
   }
-
   (0, _createClass2.default)(HelpLayout, [{
     key: "render",
     value: function render() {
@@ -49,9 +32,6 @@ var HelpLayout = /*#__PURE__*/function (_React$PureComponent) {
   }]);
   return HelpLayout;
 }(_react.default.PureComponent);
-
 exports.HelpLayout = HelpLayout;
-
 var _default = (0, _analyticsNext.withAnalyticsContext)(_analytics.defaultAnalyticsAttributes)((0, _analyticsNext.withAnalyticsEvents)()(HelpLayout));
-
 exports.default = _default;

package/dist/cjs/components/HelpLayoutContent.js

@@ -1,33 +1,24 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.HelpContent = void 0;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _reactIntlNext = require("react-intl-next");
-
 var _Header = _interopRequireDefault(require("./Header"));
-
 var _messages = require("../messages");
-
 var _styled = require("./styled");
-
 var _excluded = ["isLoading", "footer", "children", "intl"];
-
 var HelpContent = function HelpContent(props) {
   var _props$isLoading = props.isLoading,
-      isLoading = _props$isLoading === void 0 ? false : _props$isLoading,
-      footer = props.footer,
-      children = props.children,
-      formatMessage = props.intl.formatMessage,
-      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+    isLoading = _props$isLoading === void 0 ? false : _props$isLoading,
+    footer = props.footer,
+    children = props.children,
+    formatMessage = props.intl.formatMessage,
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   return /*#__PURE__*/_react.default.createElement(_styled.Container, null, /*#__PURE__*/_react.default.createElement(_styled.Section, null, /*#__PURE__*/_react.default.createElement(_Header.default, rest), isLoading ? /*#__PURE__*/_react.default.createElement(_styled.LoadingContainer, {
     "aria-label": formatMessage(_messages.messages.help_loading),
     role: "img"
@@ -54,9 +45,6 @@ var HelpContent = function HelpContent(props) {
     contentWidth: "70%"
   })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children), footer ? /*#__PURE__*/_react.default.createElement(_styled.HelpFooter, null, footer) : null));
 };
-
 exports.HelpContent = HelpContent;
-
 var _default = (0, _reactIntlNext.injectIntl)(HelpContent);
-
 exports.default = _default;

package/dist/cjs/components/MessagesIntlProvider.js

@@ -1,28 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.MessagesIntlProvider = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _reactIntlNext = require("react-intl-next");
-
 var MessagesIntlProvider = function MessagesIntlProvider(_ref) {
   var _ref$locale = _ref.locale,
-      locale = _ref$locale === void 0 ? 'en' : _ref$locale,
-      children = _ref.children;
+    locale = _ref$locale === void 0 ? 'en' : _ref$locale,
+    children = _ref.children;
   return /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
     key: locale,
     locale: locale
   }, children);
 };
-
 exports.MessagesIntlProvider = MessagesIntlProvider;
-
 var _default = (0, _reactIntlNext.injectIntl)(MessagesIntlProvider);
-
 exports.default = _default;

package/dist/cjs/components/constants.js

@@ -9,7 +9,6 @@ var TRANSITION_DURATION_MS = 220;
 exports.TRANSITION_DURATION_MS = TRANSITION_DURATION_MS;
 var TRANSITION_STATUS;
 exports.TRANSITION_STATUS = TRANSITION_STATUS;
-
 (function (TRANSITION_STATUS) {
   TRANSITION_STATUS["UNMOUNTED"] = "unmounted";
   TRANSITION_STATUS["EXITED"] = "exited";

package/dist/cjs/components/styled.js

@@ -1,64 +1,40 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Section = exports.LoadingRectangle = exports.LoadingContainer = exports.HelpFooter = exports.DividerLine = exports.Container = void 0;
-
 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 _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-
 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"])), (0, _tokens.token)('elevation.surface', '#FFFFFF'));
-
+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"])), (0, _tokens.token)('color.border', 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 ", "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);
 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: ", "px 0;\n  box-sizing: border-box;\n  background-color: ", ";\n  border-top: ", "px solid ", ";\n  justify-content: space-between;\n"])), (0, _constants.gridSize)(), (0, _tokens.token)('color.background.neutral', colors.N10), FOOTER_BORDER_TOP, (0, _tokens.token)('color.border', 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)());
-
 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';
 }, function (props) {
   return props.contentWidth ? props.contentWidth : '100%';
-}, shimmer, (0, _tokens.token)('color.background.neutral', colors.N30), (0, _tokens.token)('color.background.neutral.subtle', colors.N30), (0, _tokens.token)('color.background.neutral', colors.N40), (0, _tokens.token)('color.background.neutral.subtle', colors.N30));
-
+}, 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, ")"));
 exports.LoadingRectangle = LoadingRectangle;

package/dist/cjs/i18n/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -149,51 +148,27 @@ Object.defineProperty(exports, "zh", {
     return _zh.default;
   }
 });
-
 var _zh = _interopRequireDefault(require("./zh"));
-
 var _cs = _interopRequireDefault(require("./cs"));
-
 var _da = _interopRequireDefault(require("./da"));
-
 var _nl = _interopRequireDefault(require("./nl"));
-
 var _en = _interopRequireDefault(require("./en"));
-
 var _en_GB = _interopRequireDefault(require("./en_GB"));
-
 var _et = _interopRequireDefault(require("./et"));
-
 var _fi = _interopRequireDefault(require("./fi"));
-
 var _fr = _interopRequireDefault(require("./fr"));
-
 var _de = _interopRequireDefault(require("./de"));
-
 var _hu = _interopRequireDefault(require("./hu"));
-
 var _is = _interopRequireDefault(require("./is"));
-
 var _it = _interopRequireDefault(require("./it"));
-
 var _ja = _interopRequireDefault(require("./ja"));
-
 var _ko = _interopRequireDefault(require("./ko"));
-
 var _nb = _interopRequireDefault(require("./nb"));
-
 var _pl = _interopRequireDefault(require("./pl"));
-
 var _pt_BR = _interopRequireDefault(require("./pt_BR"));
-
 var _pt_PT = _interopRequireDefault(require("./pt_PT"));
-
 var _ro = _interopRequireDefault(require("./ro"));
-
 var _ru = _interopRequireDefault(require("./ru"));
-
 var _sk = _interopRequireDefault(require("./sk"));
-
 var _es = _interopRequireDefault(require("./es"));
-
 var _sv = _interopRequireDefault(require("./sv"));

package/dist/cjs/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
     return _HelpLayout.default;
   }
 });
-
 var _HelpLayout = _interopRequireDefault(require("./components/HelpLayout"));

package/dist/cjs/messages.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.messages = void 0;
-
 var _reactIntlNext = require("react-intl-next");
-
 var messages = (0, _reactIntlNext.defineMessages)({
   help_loading: {
     id: 'helpPanel.loading',

package/dist/cjs/util/i18n-util.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getMessagesForLocale = void 0;
-
 var _i18n = require("../i18n");
-
 var localesMessagesMap = {
   cs: _i18n.cs,
   da: _i18n.da,
@@ -36,6 +34,7 @@ var localesMessagesMap = {
   sv: _i18n.sv,
   zh: _i18n.zh
 };
+
 /**
  * Tries to get the most specific messages bundle for a given locale.
  *
@@ -46,20 +45,15 @@ var localesMessagesMap = {
  *
  * @param locale string specifying the locale like 'en_GB', or 'fr'.
  */
-
 var getMessagesForLocale = function getMessagesForLocale(locale) {
   var messages = localesMessagesMap[locale];
-
   if (!messages) {
     var parentLocale = locale.split(/[-_]/)[0];
     messages = localesMessagesMap[parentLocale];
   }
-
   if (!messages) {
     messages = _i18n.en;
   }
-
   return messages;
 };
-
 exports.getMessagesForLocale = getMessagesForLocale;

package/dist/cjs/version.json

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

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

@@ -35,7 +35,6 @@ export const BackButton = ({
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
-
   const handleOnClick = event => {
     if (onClick) {
       const analyticsEvent = createAnalyticsEvent({
@@ -44,14 +43,14 @@ export const BackButton = ({
       onClick(event, analyticsEvent);
     }
   };
-
   return /*#__PURE__*/React.createElement(Transition, {
     in: isVisible,
     timeout: TRANSITION_DURATION_MS,
     mountOnEnter: true,
     unmountOnExit: true
   }, state => /*#__PURE__*/React.createElement(BackButtonContainer, {
-    style: { ...defaultStyle,
+    style: {
+      ...defaultStyle,
       ...transitionStyles[state]
     }
   }, /*#__PURE__*/React.createElement(Button, {
@@ -67,7 +66,6 @@ export const BackButton = ({
     })
   }, formatMessage(messages.help_panel_header_back))));
 };
-
 const BackButtonWithContext = props => {
   return /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: {
@@ -77,5 +75,4 @@ const BackButtonWithContext = props => {
     }
   }, /*#__PURE__*/React.createElement(BackButton, props));
 };
-
 export default injectIntl(BackButtonWithContext);

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

@@ -7,7 +7,6 @@ import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
 import { name as packageName, version as packageVersion } from '../../version.json';
 import { messages } from '../../messages';
 import { CloseButtonContainer } from './styled';
-
 /**
  * This function will return a CloseButton component only if the function
  * to be executed on the onClick event is passed as a parameter
@@ -23,7 +22,6 @@ export const CloseButton = ({
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
-
   const handleOnClick = event => {
     if (onClick) {
       const analyticsEvent = createAnalyticsEvent({
@@ -32,7 +30,6 @@ export const CloseButton = ({
       onClick(event, analyticsEvent);
     }
   };
-
   return /*#__PURE__*/React.createElement(CloseButtonContainer, null, /*#__PURE__*/React.createElement(Tooltip, {
     content: formatMessage(messages.help_panel_header_close),
     position: "left"
@@ -45,7 +42,6 @@ export const CloseButton = ({
     })
   })));
 };
-
 const CloseButtonWithContext = props => {
   return /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: {
@@ -55,5 +51,4 @@ const CloseButtonWithContext = props => {
     }
   }, /*#__PURE__*/React.createElement(CloseButton, props));
 };
-
 export default injectIntl(CloseButtonWithContext);

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

@@ -19,7 +19,6 @@ export const HelpContent = ({
       onBackButtonClick(event, analyticsEvent);
     }
   };
-
   return /*#__PURE__*/React.createElement(HeaderContainer, null, /*#__PURE__*/React.createElement(BackButton, {
     onClick: handleOnBackButtonClick,
     isVisible: isBackbuttonVisible

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

@@ -2,13 +2,12 @@
 import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 const HEADER_TITLE_HEIGHT = gridSize() * 7;
 const HEADER_TITLE_BORDER_BOTTOM = 2;
 export const HeaderContainer = styled.div`
-  background-color: ${token('color.background.neutral', colors.N10)};
+  background-color: ${`var(--ds-background-neutral, ${colors.N10})`};
   border-bottom: ${HEADER_TITLE_BORDER_BOTTOM}px solid
-    ${token('color.border', colors.N30)};
+    ${`var(--ds-border, ${colors.N30})`};
   justify-content: space-between;
   position: relative;
 `;
@@ -23,7 +22,7 @@ export const BackButtonContainer = styled.div`
   left: ${gridSize()}px;
 `;
 export const HeaderTitle = styled.div`
-  color: ${token('color.text.subtle', colors.N500)};
+  color: ${`var(--ds-text-subtle, ${colors.N500})`};
   text-align: center;
   font-size: 1rem;
   font-weight: 600;

package/dist/es2019/components/HelpLayout.js

@@ -7,6 +7,5 @@ export class HelpLayout extends React.PureComponent {
   render() {
     return /*#__PURE__*/React.createElement(MessagesIntlProvider, null, /*#__PURE__*/React.createElement(HelpContent, this.props));
   }
-
 }
 export default withAnalyticsContext(defaultAnalyticsAttributes)(withAnalyticsEvents()(HelpLayout));

package/dist/es2019/components/constants.js

@@ -1,7 +1,6 @@
 // Animation related consts
 export const TRANSITION_DURATION_MS = 220;
 export let TRANSITION_STATUS;
-
 (function (TRANSITION_STATUS) {
   TRANSITION_STATUS["UNMOUNTED"] = "unmounted";
   TRANSITION_STATUS["EXITED"] = "exited";

package/dist/es2019/components/styled.js

@@ -1,9 +1,9 @@
 /** @jsx jsx */
+
 import styled from '@emotion/styled';
 import { keyframes } from '@emotion/core';
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const Container = styled.div`
   position: absolute;
   top: 0;
@@ -12,7 +12,7 @@ export const Container = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
-  background-color: ${token('elevation.surface', '#FFFFFF')};
+  background-color: ${"var(--ds-surface, #FFFFFF)"};
 `;
 export const Section = styled.div`
   flex-grow: 1;
@@ -21,7 +21,7 @@ export const Section = styled.div`
   min-height: 0;
 `;
 export const DividerLine = styled.div`
-  background-color: ${token('color.border', colors.N30A)};
+  background-color: ${`var(--ds-border, ${colors.N30A})`};
   height: 2px;
   width: 100%;
   padding: 0 ${2 * gridSize()}px;
@@ -32,10 +32,11 @@ const FOOTER_BORDER_TOP = 2;
 export const HelpFooter = styled.div`
   padding: ${gridSize()}px 0;
   box-sizing: border-box;
-  background-color: ${token('color.background.neutral', colors.N10)};
-  border-top: ${FOOTER_BORDER_TOP}px solid ${token('color.border', colors.N30)};
+  background-color: ${`var(--ds-background-neutral, ${colors.N10})`};
+  border-top: ${FOOTER_BORDER_TOP}px solid ${`var(--ds-border, ${colors.N30})`};
   justify-content: space-between;
 `;
+
 /**
  * Loading
  */
@@ -63,12 +64,12 @@ export const LoadingRectangle = styled.div`
   animation-iteration-count: infinite;
   animation-name: ${shimmer};
   animation-timing-function: linear;
-  background-color: ${token('color.background.neutral', colors.N30)};
+  background-color: ${`var(--ds-background-neutral, ${colors.N30})`};
   background-image: linear-gradient(
     to right,
-    ${token('color.background.neutral.subtle', colors.N30)} 10%,
-    ${token('color.background.neutral', colors.N40)} 20%,
-    ${token('color.background.neutral.subtle', colors.N30)} 30%
+    ${`var(--ds-background-neutral-subtle, ${colors.N30})`} 10%,
+    ${`var(--ds-background-neutral, ${colors.N40})`} 20%,
+    ${`var(--ds-background-neutral-subtle, ${colors.N30})`} 30%
   );
   background-repeat: no-repeat;
 `;

package/dist/es2019/util/i18n-util.js

@@ -28,6 +28,7 @@ const localesMessagesMap = {
   sv,
   zh
 };
+
 /**
  * Tries to get the most specific messages bundle for a given locale.
  *
@@ -38,18 +39,14 @@ const localesMessagesMap = {
  *
  * @param locale string specifying the locale like 'en_GB', or 'fr'.
  */
-
 export const getMessagesForLocale = locale => {
   let messages = localesMessagesMap[locale];
-
   if (!messages) {
     const parentLocale = locale.split(/[-_]/)[0];
     messages = localesMessagesMap[parentLocale];
   }
-
   if (!messages) {
     messages = en;
   }
-
   return messages;
 };

package/dist/es2019/version.json

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

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

@@ -1,9 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
@@ -33,23 +30,19 @@ var transitionStyles = {
 };
 export var BackButton = function BackButton(_ref) {
   var onClick = _ref.onClick,
-      _ref$isVisible = _ref.isVisible,
-      isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
-      formatMessage = _ref.intl.formatMessage;
-
+    _ref$isVisible = _ref.isVisible,
+    isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
+    formatMessage = _ref.intl.formatMessage;
   var _useAnalyticsEvents = useAnalyticsEvents(),
-      createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
-
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var handleOnClick = function handleOnClick(event) {
     if (onClick) {
       var _analyticsEvent = createAnalyticsEvent({
         action: 'clicked'
       });
-
       onClick(event, _analyticsEvent);
     }
   };
-
   return /*#__PURE__*/React.createElement(Transition, {
     in: isVisible,
     timeout: TRANSITION_DURATION_MS,
@@ -72,7 +65,6 @@ export var BackButton = function BackButton(_ref) {
     }, formatMessage(messages.help_panel_header_back)));
   });
 };
-
 var BackButtonWithContext = function BackButtonWithContext(props) {
   return /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: {
@@ -82,5 +74,4 @@ var BackButtonWithContext = function BackButtonWithContext(props) {
     }
   }, /*#__PURE__*/React.createElement(BackButton, props));
 };
-
 export default injectIntl(BackButtonWithContext);

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

@@ -7,7 +7,6 @@ import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
 import { name as packageName, version as packageVersion } from '../../version.json';
 import { messages } from '../../messages';
 import { CloseButtonContainer } from './styled';
-
 /**
  * This function will return a CloseButton component only if the function
  * to be executed on the onClick event is passed as a parameter
@@ -16,21 +15,17 @@ import { CloseButtonContainer } from './styled';
  */
 export var CloseButton = function CloseButton(_ref) {
   var onClick = _ref.onClick,
-      formatMessage = _ref.intl.formatMessage;
-
+    formatMessage = _ref.intl.formatMessage;
   var _useAnalyticsEvents = useAnalyticsEvents(),
-      createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
-
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var handleOnClick = function handleOnClick(event) {
     if (onClick) {
       var _analyticsEvent = createAnalyticsEvent({
         action: 'clicked'
       });
-
       onClick(event, _analyticsEvent);
     }
   };
-
   return /*#__PURE__*/React.createElement(CloseButtonContainer, null, /*#__PURE__*/React.createElement(Tooltip, {
     content: formatMessage(messages.help_panel_header_close),
     position: "left"
@@ -43,7 +38,6 @@ export var CloseButton = function CloseButton(_ref) {
     })
   })));
 };
-
 var CloseButtonWithContext = function CloseButtonWithContext(props) {
   return /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: {
@@ -53,5 +47,4 @@ var CloseButtonWithContext = function CloseButtonWithContext(props) {
     }
   }, /*#__PURE__*/React.createElement(CloseButton, props));
 };
-
 export default injectIntl(CloseButtonWithContext);

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

@@ -6,19 +6,17 @@ import BackButton from './BackButton';
 import { HeaderContainer, HeaderTitle, HeaderContent } from './styled';
 export var HelpContent = function HelpContent(_ref) {
   var headerTitle = _ref.headerTitle,
-      headerContent = _ref.headerContent,
-      _ref$isBackbuttonVisi = _ref.isBackbuttonVisible,
-      isBackbuttonVisible = _ref$isBackbuttonVisi === void 0 ? false : _ref$isBackbuttonVisi,
-      onCloseButtonClick = _ref.onCloseButtonClick,
-      onBackButtonClick = _ref.onBackButtonClick,
-      formatMessage = _ref.intl.formatMessage;
-
+    headerContent = _ref.headerContent,
+    _ref$isBackbuttonVisi = _ref.isBackbuttonVisible,
+    isBackbuttonVisible = _ref$isBackbuttonVisi === void 0 ? false : _ref$isBackbuttonVisi,
+    onCloseButtonClick = _ref.onCloseButtonClick,
+    onBackButtonClick = _ref.onBackButtonClick,
+    formatMessage = _ref.intl.formatMessage;
   var handleOnBackButtonClick = function handleOnBackButtonClick(event, analyticsEvent) {
     if (onBackButtonClick) {
       onBackButtonClick(event, analyticsEvent);
     }
   };
-
   return /*#__PURE__*/React.createElement(HeaderContainer, null, /*#__PURE__*/React.createElement(BackButton, {
     onClick: handleOnBackButtonClick,
     isVisible: isBackbuttonVisible

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

@@ -1,16 +1,13 @@
 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';
-import { token } from '@atlaskit/tokens';
 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"])), token('color.background.neutral', colors.N10), HEADER_TITLE_BORDER_BOTTOM, token('color.border', colors.N30));
+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 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"])), token('color.text.subtle', colors.N500), HEADER_TITLE_HEIGHT);
+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);

package/dist/esm/components/HelpLayout.js

@@ -3,11 +3,8 @@ import _createClass from "@babel/runtime/helpers/createClass";
 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; } }
-
 import React from 'react';
 import { withAnalyticsEvents, withAnalyticsContext } from '@atlaskit/analytics-next';
 import { defaultAnalyticsAttributes } from '../analytics';
@@ -15,22 +12,17 @@ import MessagesIntlProvider from './MessagesIntlProvider';
 import HelpContent from './HelpLayoutContent';
 export var HelpLayout = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(HelpLayout, _React$PureComponent);
-
   var _super = _createSuper(HelpLayout);
-
   function HelpLayout() {
     _classCallCheck(this, HelpLayout);
-
     return _super.apply(this, arguments);
   }
-
   _createClass(HelpLayout, [{
     key: "render",
     value: function render() {
       return /*#__PURE__*/React.createElement(MessagesIntlProvider, null, /*#__PURE__*/React.createElement(HelpContent, this.props));
     }
   }]);
-
   return HelpLayout;
 }(React.PureComponent);
 export default withAnalyticsContext(defaultAnalyticsAttributes)(withAnalyticsEvents()(HelpLayout));

package/dist/esm/components/HelpLayoutContent.js

@@ -7,12 +7,11 @@ import { messages } from '../messages';
 import { Container, Section, HelpFooter, LoadingContainer, LoadingRectangle } from './styled';
 export var HelpContent = function HelpContent(props) {
   var _props$isLoading = props.isLoading,
-      isLoading = _props$isLoading === void 0 ? false : _props$isLoading,
-      footer = props.footer,
-      children = props.children,
-      formatMessage = props.intl.formatMessage,
-      rest = _objectWithoutProperties(props, _excluded);
-
+    isLoading = _props$isLoading === void 0 ? false : _props$isLoading,
+    footer = props.footer,
+    children = props.children,
+    formatMessage = props.intl.formatMessage,
+    rest = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Section, null, /*#__PURE__*/React.createElement(Header, rest), isLoading ? /*#__PURE__*/React.createElement(LoadingContainer, {
     "aria-label": formatMessage(messages.help_loading),
     role: "img"

package/dist/esm/components/MessagesIntlProvider.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { IntlProvider, injectIntl } from 'react-intl-next';
 export var MessagesIntlProvider = function MessagesIntlProvider(_ref) {
   var _ref$locale = _ref.locale,
-      locale = _ref$locale === void 0 ? 'en' : _ref$locale,
-      children = _ref.children;
+    locale = _ref$locale === void 0 ? 'en' : _ref$locale,
+    children = _ref.children;
   return /*#__PURE__*/React.createElement(IntlProvider, {
     key: locale,
     locale: locale

package/dist/esm/components/constants.js

@@ -1,7 +1,6 @@
 // Animation related consts
 export var TRANSITION_DURATION_MS = 220;
 export var TRANSITION_STATUS;
-
 (function (TRANSITION_STATUS) {
   TRANSITION_STATUS["UNMOUNTED"] = "unmounted";
   TRANSITION_STATUS["EXITED"] = "exited";

package/dist/esm/components/styled.js

@@ -1,18 +1,17 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-
 /** @jsx jsx */
+
 import styled from '@emotion/styled';
 import { keyframes } from '@emotion/core';
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
-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"])), token('elevation.surface', '#FFFFFF'));
+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"])), token('color.border', 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 ", "px;\n  margin-top: ", "px;\n  box-sizing: border-box;\n"])), "var(--ds-border, ".concat(colors.N30A, ")"), 2 * gridSize(), gridSize() * 2);
 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(), token('color.background.neutral', colors.N10), FOOTER_BORDER_TOP, token('color.border', colors.N30));
+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, ")"));
+
 /**
  * Loading
  */
@@ -25,4 +24,4 @@ export var LoadingRectangle = styled.div(_templateObject7 || (_templateObject7 =
   return props.marginTop ? props.marginTop : gridSize() + 'px';
 }, function (props) {
   return props.contentWidth ? props.contentWidth : '100%';
-}, shimmer, token('color.background.neutral', colors.N30), token('color.background.neutral.subtle', colors.N30), token('color.background.neutral', colors.N40), token('color.background.neutral.subtle', colors.N30));
+}, 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/util/i18n-util.js

@@ -28,6 +28,7 @@ var localesMessagesMap = {
   sv: sv,
   zh: zh
 };
+
 /**
  * Tries to get the most specific messages bundle for a given locale.
  *
@@ -38,18 +39,14 @@ var localesMessagesMap = {
  *
  * @param locale string specifying the locale like 'en_GB', or 'fr'.
  */
-
 export var getMessagesForLocale = function getMessagesForLocale(locale) {
   var messages = localesMessagesMap[locale];
-
   if (!messages) {
     var parentLocale = locale.split(/[-_]/)[0];
     messages = localesMessagesMap[parentLocale];
   }
-
   if (!messages) {
     messages = en;
   }
-
   return messages;
 };

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/help-layout",
-  "version": "4.1.11",
+  "version": "4.1.13",
   "description": "Layout for the atlaskit/help component.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
     "@atlaskit/button": "^16.5.0",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.13.0",
+    "@atlaskit/tokens": "^1.0.0",
     "@atlaskit/tooltip": "^17.6.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",