@atlaskit/help-layout 3.0.2 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,69 @@
 # @atlaskit/help-layout
 
+## 4.1.0
+
+### Minor Changes
+
+- [`b03b488246c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b03b488246c) - [ux] Added new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+## 4.0.1
+
+### Patch Changes
+
+- [`78c9f070230`](https://bitbucket.org/atlassian/atlassian-frontend/commits/78c9f070230) - Bump algoliasearch version from ^3.33.0 to ^3.35.1. In @atlaskit/help we updated the example 3 and moved Algolia API related code to it's own react hook
+
+## 4.0.0
+
+### Major Changes
+
+- [`47f58da5946`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47f58da5946) - ED-13322, ED-13324, ED-13326, ED-13323, ED-13204: Upgrade and support react-intl@^5.18.1 including breaking API changes, types and tests in atlassian-frontend packages
+
+  What changed: Upgraded our react-intl support from ^2.6.0 to ^5.18.1. This means editor packages now rely on consumers installing ^5.18.1, otherwise editor usage of react-intl will mismatch with actual installed react-intl APIs.
+  Why change was made: As part of a coordinated upgrade effort across AF packages, as react-intl v2 is quite dated.
+  How consumer should update their code: Ensure react-intl ^5.18.1 is installed in consuming applications.
+
+  Upgrade guide: To consume atlassian-frontend packages that use react-intl5 setup a second provider for the new version, using an npm alias
+
+  ```js
+  "react-intl": "^2.6.0",
+  "react-intl-next": "npm:react-intl@^5.18.1",
+  ```
+
+  ```js
+  import { IntlProvider } from 'react-intl';
+  import { IntlProvider as IntlNextProvider } from 'react-intl-next';
+
+  return (
+    <IntlProvider
+      key={locale}
+      data-test-language={locale}
+      locale={locale}
+      defaultLocale={DEFAULT_LOCALE}
+      messages={messages}
+    >
+      <IntlNextProvider
+        key={locale}
+        data-test-language={locale}
+        locale={locale}
+        defaultLocale={DEFAULT_LOCALE}
+        messages={messages}
+      >
+        {children}
+      </IntlNextProvider>
+    </IntlProvider>
+  );
+  ```
+
+## 3.0.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.0.2
 
 ### Patch Changes

package/dist/cjs/analytics.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultAnalyticsAttributes = exports.createAndFire = exports.withAnalyticsContext = exports.withAnalyticsEvents = void 0;
+exports.withAnalyticsEvents = exports.withAnalyticsContext = exports.defaultAnalyticsAttributes = exports.createAndFire = void 0;
 
 var x = _interopRequireWildcard(require("@atlaskit/analytics-next"));
 

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

@@ -2,32 +2,26 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.BackButton = void 0;
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
-var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
-
 var _constants = require("@atlaskit/theme/constants");
 
 var _reactTransitionGroup = require("react-transition-group");
 
 var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-left"));
 
-var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 
 var _version = require("../../version.json");
 
@@ -37,19 +31,11 @@ var _constants2 = require("../constants");
 
 var _styled = require("./styled");
 
-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 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-var buttonTheme = {
-  color: colors.N500,
-  fontWeight: 500
-}; // Animation
+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"),
   left: "".concat((0, _constants.gridSize)() * 3, "px"),
@@ -93,22 +79,13 @@ var BackButton = function BackButton(_ref) {
   }, function (state) {
     return /*#__PURE__*/_react.default.createElement(_styled.BackButtonContainer, {
       style: _objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state])
-    }, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+    }, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
       onClick: function onClick(event) {
         if (state === 'entered') {
           handleOnClick(event);
         }
       },
       appearance: "subtle",
-      theme: function theme(currentTheme, themeProps) {
-        var _currentTheme = currentTheme(themeProps),
-            buttonStyles = _currentTheme.buttonStyles,
-            rest = (0, _objectWithoutProperties2.default)(_currentTheme, ["buttonStyles"]);
-
-        return _objectSpread({
-          buttonStyles: _objectSpread(_objectSpread({}, buttonStyles), buttonTheme)
-        }, rest);
-      },
       iconBefore: /*#__PURE__*/_react.default.createElement(_arrowLeft.default, {
         label: "",
         size: "medium"
@@ -129,6 +106,6 @@ var BackButtonWithContext = function BackButtonWithContext(props) {
   }, /*#__PURE__*/_react.default.createElement(BackButton, props));
 };
 
-var _default = (0, _reactIntl.injectIntl)(BackButtonWithContext);
+var _default = (0, _reactIntlNext.injectIntl)(BackButtonWithContext);
 
 exports.default = _default;

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

@@ -9,13 +9,13 @@ exports.default = exports.CloseButton = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
-var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 
 var _close = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/close"));
 
@@ -51,7 +51,7 @@ var CloseButton = function CloseButton(_ref) {
   return /*#__PURE__*/_react.default.createElement(_styled.CloseButtonContainer, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: formatMessage(_messages.messages.help_panel_header_close),
     position: "left"
-  }, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+  }, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
     onClick: handleOnClick,
     appearance: "subtle",
     iconBefore: /*#__PURE__*/_react.default.createElement(_close.default, {
@@ -73,6 +73,6 @@ var CloseButtonWithContext = function CloseButtonWithContext(props) {
   }, /*#__PURE__*/_react.default.createElement(CloseButton, props));
 };
 
-var _default = (0, _reactIntl.injectIntl)(CloseButtonWithContext);
+var _default = (0, _reactIntlNext.injectIntl)(CloseButtonWithContext);
 
 exports.default = _default;

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

@@ -9,7 +9,7 @@ exports.default = exports.HelpContent = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _messages = require("../../messages");
 
@@ -44,6 +44,6 @@ var HelpContent = function HelpContent(_ref) {
 
 exports.HelpContent = HelpContent;
 
-var _default = (0, _reactIntl.injectIntl)(HelpContent);
+var _default = (0, _reactIntlNext.injectIntl)(HelpContent);
 
 exports.default = _default;

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HeaderContent = exports.HeaderTitle = exports.BackButtonContainer = exports.CloseButtonContainer = exports.HeaderContainer = void 0;
+exports.HeaderTitle = exports.HeaderContent = exports.HeaderContainer = exports.CloseButtonContainer = exports.BackButtonContainer = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -17,6 +17,8 @@ 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); }
@@ -26,7 +28,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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  justify-content: space-between;\n  position: relative;\n"])), colors.N10, HEADER_TITLE_BORDER_BOTTOM, 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"])), (0, _tokens.token)('color.background.neutral', colors.N10), HEADER_TITLE_BORDER_BOTTOM, (0, _tokens.token)('color.border', colors.N30));
 
 exports.HeaderContainer = HeaderContainer;
 
@@ -38,7 +40,7 @@ var BackButtonContainer = _styled.default.div(_templateObject3 || (_templateObje
 
 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"])), 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"])), (0, _tokens.token)('color.text.subtle', colors.N500), HEADER_TITLE_HEIGHT);
 
 exports.HeaderTitle = HeaderTitle;
 

package/dist/cjs/components/HelpLayoutContent.js

@@ -11,7 +11,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _Header = _interopRequireDefault(require("./Header"));
 
@@ -19,13 +19,15 @@ 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, ["isLoading", "footer", "children", "intl"]);
+      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"
@@ -55,6 +57,6 @@ var HelpContent = function HelpContent(props) {
 
 exports.HelpContent = HelpContent;
 
-var _default = (0, _reactIntl.injectIntl)(HelpContent);
+var _default = (0, _reactIntlNext.injectIntl)(HelpContent);
 
 exports.default = _default;

package/dist/cjs/components/MessagesIntlProvider.js

@@ -9,20 +9,20 @@ exports.default = exports.MessagesIntlProvider = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
-
-var _i18nUtil = require("../util/i18n-util");
+var _reactIntlNext = require("react-intl-next");
 
 var MessagesIntlProvider = function MessagesIntlProvider(_ref) {
-  var intl = _ref.intl,
+  var _ref$locale = _ref.locale,
+      locale = _ref$locale === void 0 ? 'en' : _ref$locale,
       children = _ref.children;
-  return /*#__PURE__*/_react.default.createElement(_reactIntl.IntlProvider, {
-    messages: (0, _i18nUtil.getMessagesForLocale)(intl.locale)
+  return /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
+    key: locale,
+    locale: locale
   }, children);
 };
 
 exports.MessagesIntlProvider = MessagesIntlProvider;
 
-var _default = (0, _reactIntl.injectIntl)(MessagesIntlProvider);
+var _default = (0, _reactIntlNext.injectIntl)(MessagesIntlProvider);
 
 exports.default = _default;

package/dist/cjs/components/styled.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LoadingRectangle = exports.LoadingContainer = exports.HelpFooter = exports.DividerLine = exports.Section = exports.Container = void 0;
+exports.Section = exports.LoadingRectangle = exports.LoadingContainer = exports.HelpFooter = exports.DividerLine = exports.Container = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -19,13 +19,15 @@ 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: #ffffff;\n"])));
+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'));
 
 exports.Container = Container;
 
@@ -33,12 +35,12 @@ var Section = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _t
 
 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"])), 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"])), (0, _tokens.token)('color.border', 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)(), colors.N10, FOOTER_BORDER_TOP, 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
  */
@@ -57,6 +59,6 @@ var LoadingRectangle = _styled.default.div(_templateObject7 || (_templateObject7
   return props.marginTop ? props.marginTop : (0, _constants.gridSize)() + 'px';
 }, function (props) {
   return props.contentWidth ? props.contentWidth : '100%';
-}, shimmer, colors.N30, colors.N30, colors.N40, colors.N30);
+}, 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));
 
 exports.LoadingRectangle = LoadingRectangle;

package/dist/cjs/i18n/index.js

@@ -5,12 +5,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "zh", {
-  enumerable: true,
-  get: function get() {
-    return _zh.default;
-  }
-});
 Object.defineProperty(exports, "cs", {
   enumerable: true,
   get: function get() {
@@ -23,10 +17,10 @@ Object.defineProperty(exports, "da", {
     return _da.default;
   }
 });
-Object.defineProperty(exports, "nl", {
+Object.defineProperty(exports, "de", {
   enumerable: true,
   get: function get() {
-    return _nl.default;
+    return _de.default;
   }
 });
 Object.defineProperty(exports, "en", {
@@ -41,6 +35,12 @@ Object.defineProperty(exports, "en_GB", {
     return _en_GB.default;
   }
 });
+Object.defineProperty(exports, "es", {
+  enumerable: true,
+  get: function get() {
+    return _es.default;
+  }
+});
 Object.defineProperty(exports, "et", {
   enumerable: true,
   get: function get() {
@@ -59,12 +59,6 @@ Object.defineProperty(exports, "fr", {
     return _fr.default;
   }
 });
-Object.defineProperty(exports, "de", {
-  enumerable: true,
-  get: function get() {
-    return _de.default;
-  }
-});
 Object.defineProperty(exports, "hu", {
   enumerable: true,
   get: function get() {
@@ -101,6 +95,12 @@ Object.defineProperty(exports, "nb", {
     return _nb.default;
   }
 });
+Object.defineProperty(exports, "nl", {
+  enumerable: true,
+  get: function get() {
+    return _nl.default;
+  }
+});
 Object.defineProperty(exports, "pl", {
   enumerable: true,
   get: function get() {
@@ -137,16 +137,16 @@ Object.defineProperty(exports, "sk", {
     return _sk.default;
   }
 });
-Object.defineProperty(exports, "es", {
+Object.defineProperty(exports, "sv", {
   enumerable: true,
   get: function get() {
-    return _es.default;
+    return _sv.default;
   }
 });
-Object.defineProperty(exports, "sv", {
+Object.defineProperty(exports, "zh", {
   enumerable: true,
   get: function get() {
-    return _sv.default;
+    return _zh.default;
   }
 });
 

package/dist/cjs/messages.js

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

package/dist/cjs/version.json

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

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

@@ -1,20 +1,15 @@
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
-import * as colors from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { Transition } from 'react-transition-group';
 import ArrowleftIcon from '@atlaskit/icon/glyph/arrow-left';
-import Button from '@atlaskit/button/custom-theme-button';
+import Button from '@atlaskit/button/standard-button';
 import { name as packageName, version as packageVersion } from '../../version.json';
 import { messages } from '../../messages';
 import { TRANSITION_DURATION_MS } from '../constants';
 import { BackButtonContainer } from './styled';
-const buttonTheme = {
-  color: colors.N500,
-  fontWeight: 500
-}; // Animation
-
+// Animation
 const defaultStyle = {
   transition: `left ${TRANSITION_DURATION_MS}ms, opacity ${TRANSITION_DURATION_MS}ms`,
   left: `${gridSize() * 3}px`,
@@ -66,18 +61,6 @@ export const BackButton = ({
       }
     },
     appearance: "subtle",
-    theme: (currentTheme, themeProps) => {
-      const {
-        buttonStyles,
-        ...rest
-      } = currentTheme(themeProps);
-      return {
-        buttonStyles: { ...buttonStyles,
-          ...buttonTheme
-        },
-        ...rest
-      };
-    },
     iconBefore: /*#__PURE__*/React.createElement(ArrowleftIcon, {
       label: "",
       size: "medium"

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import Tooltip from '@atlaskit/tooltip';
-import Button from '@atlaskit/button/custom-theme-button';
+import Button from '@atlaskit/button/standard-button';
 import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
 import { name as packageName, version as packageVersion } from '../../version.json';
 import { messages } from '../../messages';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { messages } from '../../messages';
 import CloseButton from './CloseButton';
 import BackButton from './BackButton';

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

@@ -2,11 +2,13 @@
 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: ${colors.N10};
-  border-bottom: ${HEADER_TITLE_BORDER_BOTTOM}px solid ${colors.N30};
+  background-color: ${token('color.background.neutral', colors.N10)};
+  border-bottom: ${HEADER_TITLE_BORDER_BOTTOM}px solid
+    ${token('color.border', colors.N30)};
   justify-content: space-between;
   position: relative;
 `;
@@ -21,7 +23,7 @@ export const BackButtonContainer = styled.div`
   left: ${gridSize()}px;
 `;
 export const HeaderTitle = styled.div`
-  color: ${colors.N500};
+  color: ${token('color.text.subtle', colors.N500)};
   text-align: center;
   font-size: 1rem;
   font-weight: 600;

package/dist/es2019/components/HelpLayoutContent.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import Header from './Header';
 import { messages } from '../messages';
 import { Container, Section, HelpFooter, LoadingContainer, LoadingRectangle } from './styled';

package/dist/es2019/components/MessagesIntlProvider.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { IntlProvider, injectIntl } from 'react-intl';
-import { getMessagesForLocale } from '../util/i18n-util';
+import { IntlProvider, injectIntl } from 'react-intl-next';
 export const MessagesIntlProvider = ({
-  intl,
+  locale = 'en',
   children
 }) => /*#__PURE__*/React.createElement(IntlProvider, {
-  messages: getMessagesForLocale(intl.locale)
+  key: locale,
+  locale: locale
 }, children);
 export default injectIntl(MessagesIntlProvider);

package/dist/es2019/components/styled.js

@@ -3,6 +3,7 @@ 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;
@@ -11,7 +12,7 @@ export const Container = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
-  background-color: #ffffff;
+  background-color: ${token('elevation.surface', '#FFFFFF')};
 `;
 export const Section = styled.div`
   flex-grow: 1;
@@ -20,7 +21,7 @@ export const Section = styled.div`
   min-height: 0;
 `;
 export const DividerLine = styled.div`
-  background-color: ${colors.N30A};
+  background-color: ${token('color.border', colors.N30A)};
   height: 2px;
   width: 100%;
   padding: 0 ${2 * gridSize()}px;
@@ -31,8 +32,8 @@ const FOOTER_BORDER_TOP = 2;
 export const HelpFooter = styled.div`
   padding: ${gridSize()}px 0;
   box-sizing: border-box;
-  background-color: ${colors.N10};
-  border-top: ${FOOTER_BORDER_TOP}px solid ${colors.N30};
+  background-color: ${token('color.background.neutral', colors.N10)};
+  border-top: ${FOOTER_BORDER_TOP}px solid ${token('color.border', colors.N30)};
   justify-content: space-between;
 `;
 /**
@@ -62,12 +63,12 @@ export const LoadingRectangle = styled.div`
   animation-iteration-count: infinite;
   animation-name: ${shimmer};
   animation-timing-function: linear;
-  background-color: ${colors.N30};
+  background-color: ${token('color.background.neutral', colors.N30)};
   background-image: linear-gradient(
     to right,
-    ${colors.N30} 10%,
-    ${colors.N40} 20%,
-    ${colors.N30} 30%
+    ${token('color.background.neutral.subtle', colors.N30)} 10%,
+    ${token('color.background.neutral', colors.N40)} 20%,
+    ${token('color.background.neutral.subtle', colors.N30)} 30%
   );
   background-repeat: no-repeat;
 `;