@atlaskit/onboarding 10.4.0 → 10.5.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/onboarding
 
+## 10.5.0
+
+### Minor Changes
+
+- [`0c0a8c64d54`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0c0a8c64d54) - Removes internal usage of the deprecated theme prop.
+
+### Patch Changes
+
+- [`a3241bd63a3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a3241bd63a3) - Updates jsdoc for all exported outputs of onboarding.
+- Updated dependencies
+
+## 10.4.2
+
+### Patch Changes
+
+- [`8a5bdb3c844`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8a5bdb3c844) - Upgrading internal dependency (bind-event-listener) for improved internal types
+
+## 10.4.1
+
+### Patch Changes
+
+- [`e4b612d1c48`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e4b612d1c48) - Internal migration to bind-event-listener for safer DOM Event cleanup
+
 ## 10.4.0
 
 ### Minor Changes

package/dist/cjs/components/modal.js

@@ -50,26 +50,24 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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 noop() {}
 /**
- * __Onboarding modal__
+ * __Benefits modal__
  *
- * If the product change is large enough,
- * this component can be used to outline the benefits of the change to the user.
+ * A benefits modal explains the benefits of a significant new feature or experience change.
  *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ * - [Examples](https://atlassian.design/components/onboarding/benefits-modal/examples)
+ * - [Code](https://atlassian.design/components/onboarding/benefits-modal/code)
+ * - [Usage](https://atlassian.design/components/onboarding/benefits-modal/usage)
  */
+var BenefitsModal = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(BenefitsModal, _Component);
 
+  var _super = _createSuper(BenefitsModal);
 
-var OnboardingModal = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(OnboardingModal, _Component);
-
-  var _super = _createSuper(OnboardingModal);
-
-  function OnboardingModal() {
+  function BenefitsModal() {
     var _this;
 
-    (0, _classCallCheck2.default)(this, OnboardingModal);
+    (0, _classCallCheck2.default)(this, BenefitsModal);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -119,7 +117,7 @@ var OnboardingModal = /*#__PURE__*/function (_Component) {
     return _this;
   }
 
-  (0, _createClass2.default)(OnboardingModal, [{
+  (0, _createClass2.default)(BenefitsModal, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
@@ -131,14 +129,13 @@ var OnboardingModal = /*#__PURE__*/function (_Component) {
       var Footer = this.footerComponent(this.props);
       return (0, _core.jsx)(_modalDialog.default, (0, _extends2.default)({
         autoFocus: true,
-        onClose: noop,
         shouldScrollInViewport: true,
         shouldCloseOnOverlayClick: false,
         shouldCloseOnEscapePress: false
       }, props), (0, _core.jsx)(Header, null), (0, _core.jsx)(_modalDialog.ModalBody, null, (0, _core.jsx)(_modal.ModalBody, null, heading && (0, _core.jsx)(_modal.ModalHeading, null, heading), children)), (0, _core.jsx)(Footer, null));
     }
   }]);
-  return OnboardingModal;
+  return BenefitsModal;
 }(_react.Component);
 
-exports.default = OnboardingModal;
+exports.default = BenefitsModal;

package/dist/cjs/components/spotlight-card.js

@@ -2,126 +2,159 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _core = require("@emotion/core");
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _customThemeButton = _interopRequireWildcard(require("@atlaskit/button/custom-theme-button"));
 
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _colors = require("@atlaskit/theme/colors");
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _components = require("@atlaskit/theme/components");
 
-var _react = _interopRequireDefault(require("react"));
+var _constants = require("@atlaskit/theme/constants");
 
-var _customThemeButton = require("@atlaskit/button/custom-theme-button");
+var _dialog = require("../styled/dialog");
 
-var _colors = require("@atlaskit/theme/colors");
+var _theme = require("./theme");
 
-var _card = _interopRequireDefault(require("./card"));
-
-var _theme2 = require("./theme");
-
-var _excluded = ["container"];
-
-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; }
-
-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 SpotlightCard = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(SpotlightCard, _React$Component);
-
-  var _super = _createSuper(SpotlightCard);
-
-  function SpotlightCard() {
-    (0, _classCallCheck2.default)(this, SpotlightCard);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2.default)(SpotlightCard, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          actions = _this$props.actions,
-          actionsBeforeElement = _this$props.actionsBeforeElement,
-          children = _this$props.children,
-          components = _this$props.components,
-          isFlat = _this$props.isFlat,
-          heading = _this$props.heading,
-          headingAfterElement = _this$props.headingAfterElement,
-          image = _this$props.image,
-          innerRef = _this$props.innerRef,
-          _theme = _this$props.theme,
-          width = _this$props.width,
-          testId = _this$props.testId;
-      return /*#__PURE__*/_react.default.createElement(_customThemeButton.Theme.Provider, {
-        value: _theme2.spotlightButtonTheme
-      }, /*#__PURE__*/_react.default.createElement(_card.default, {
-        testId: testId,
-        ref: innerRef,
-        heading: heading,
-        headingAfterElement: headingAfterElement,
-        actions: actions,
-        actionsBeforeElement: actionsBeforeElement,
-        components: components,
-        image: image // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-        ,
-        theme: function theme(parent) {
-          var _parent = parent({}),
-              container = _parent.container,
-              others = (0, _objectWithoutProperties2.default)(_parent, _excluded);
-
-          return _theme(function () {
-            return _objectSpread(_objectSpread({}, others), {}, {
-              container: _objectSpread({
-                background: "var(--ds-background-discovery-bold, ".concat(_colors.P300, ")"),
-                color: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
-                width: "".concat(Math.min(Math.max(width, 160), 600), "px"),
-                boxShadow: isFlat ? undefined : "var(--ds-shadow-raised, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")
-              }, container)
-            });
-          }, {});
-        }
-      }, children));
-    }
-  }]);
-  return SpotlightCard;
-}(_react.default.Component);
-/**
- * __Spotlight card__
- *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
- */
+var _excluded = ["text", "key"];
+
+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; }
 
-(0, _defineProperty2.default)(SpotlightCard, "defaultProps", {
-  width: 400,
-  isFlat: false,
-  components: {},
-  theme: function theme(themeFn) {
-    return themeFn();
-  }
+var gridSize = (0, _constants.gridSize)();
+var bodyStyles = (0, _core.css)({
+  display: 'flex',
+  padding: "".concat(gridSize * 2, "px ").concat(gridSize * 2.5, "px"),
+  flexDirection: 'column'
+});
+var defaultHeaderStyles = (0, _core.css)({
+  display: 'flex',
+  paddingBottom: "".concat(gridSize, "px"),
+  alignItems: 'baseline',
+  justifyContent: 'space-between'
 });
 
-var _default = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  return /*#__PURE__*/_react.default.createElement(SpotlightCard, (0, _extends2.default)({}, props, {
-    innerRef: ref
-  }));
+var DefaultHeader = function DefaultHeader(_ref) {
+  var children = _ref.children;
+  return (0, _core.jsx)("div", {
+    css: defaultHeaderStyles
+  }, children);
+};
+
+var defaultFooterStyles = (0, _core.css)({
+  display: 'flex',
+  paddingTop: "".concat(gridSize, "px"),
+  alignItems: 'center',
+  justifyContent: 'space-between'
 });
 
+var DefaultFooter = function DefaultFooter(_ref2) {
+  var children = _ref2.children;
+  return (0, _core.jsx)("div", {
+    css: defaultFooterStyles
+  }, children);
+};
+
+var containerStyles = (0, _core.css)({
+  height: 'fit-content',
+  zIndex: _constants.layers.spotlight() + 1,
+  background: "var(--ds-background-discovery-bold, ".concat(_colors.P300, ")"),
+  borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
+  color: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
+  overflow: 'auto'
+});
+var containerShadowStyles = (0, _core.css)({
+  boxShadow: "var(--ds-shadow-raised, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")
+});
+/**
+ * @deprecated
+ */
+
+var Theme = (0, _components.createTheme)(function () {
+  return {
+    container: {}
+  };
+});
+/**
+ * @deprecated
+ */
+
+/**
+ * __Spotlight card__
+ *
+ * A spotlight card is for onboarding messages that need a more flexible layout, or don't require a dialog.
+ *
+ * - [Examples](https://atlassian.design/components/onboarding/spotlight-card/examples)
+ * - [Code](https://atlassian.design/components/onboarding/spotlight-card/code)
+ * - [Usage](https://atlassian.design/components/onboarding/spotlight-card/usage)
+ */
+var SpotlightCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$actions = props.actions,
+      actions = _props$actions === void 0 ? [] : _props$actions,
+      actionsBeforeElement = props.actionsBeforeElement,
+      children = props.children,
+      _props$components = props.components,
+      components = _props$components === void 0 ? {} : _props$components,
+      heading = props.heading,
+      headingAfterElement = props.headingAfterElement,
+      image = props.image,
+      innerRef = props.innerRef,
+      isFlat = props.isFlat,
+      testId = props.testId,
+      theme = props.theme,
+      _props$width = props.width,
+      width = _props$width === void 0 ? 400 : _props$width;
+  var _components$Header = components.Header,
+      Header = _components$Header === void 0 ? DefaultHeader : _components$Header,
+      _components$Footer = components.Footer,
+      Footer = _components$Footer === void 0 ? DefaultFooter : _components$Footer;
+  return (0, _core.jsx)(_customThemeButton.Theme.Provider, {
+    value: _theme.spotlightButtonTheme
+  }, (0, _core.jsx)(Theme.Provider, {
+    value: theme
+  }, (0, _core.jsx)(Theme.Consumer, null, function (_ref3) {
+    var container = _ref3.container;
+    return (0, _core.jsx)("div", {
+      css: [containerStyles, !isFlat && containerShadowStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      container],
+      style: {
+        width: "".concat(Math.min(Math.max(width, 160), 600), "px")
+      },
+      ref: ref || innerRef,
+      "data-testid": testId
+    }, typeof image === 'string' ? (0, _core.jsx)("img", {
+      src: image,
+      alt: ""
+    }) : image, (0, _core.jsx)("div", {
+      css: bodyStyles
+    }, heading || headingAfterElement ? (0, _core.jsx)(Header, null, (0, _core.jsx)(_heading.default, {
+      color: "inverse",
+      level: "h600",
+      as: "h4"
+    }, heading), headingAfterElement) : null, children, actions.length > 0 || actionsBeforeElement ? (0, _core.jsx)(Footer, null, actionsBeforeElement || (0, _core.jsx)("span", null), (0, _core.jsx)(_dialog.DialogActionItemContainer, null, actions.map(function (_ref4, idx) {
+      var text = _ref4.text,
+          key = _ref4.key,
+          rest = (0, _objectWithoutProperties2.default)(_ref4, _excluded);
+      return (0, _core.jsx)(_dialog.DialogActionItem, {
+        key: key || (typeof text === 'string' ? text : "".concat(idx))
+      }, (0, _core.jsx)(_customThemeButton.default, rest, text));
+    }))) : null));
+  })));
+});
+SpotlightCard.displayName = 'SpotlightCard';
+var _default = SpotlightCard;
 exports.default = _default;

package/dist/cjs/components/spotlight-dialog.js

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -39,8 +37,6 @@ var _spotlightCard = _interopRequireDefault(require("./spotlight-card"));
 
 var _valueChanged = _interopRequireDefault(require("./value-changed"));
 
-var _excluded = ["container"];
-
 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; }
@@ -54,7 +50,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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 packageName = "@atlaskit/onboarding";
-var packageVersion = "10.4.0";
+var packageVersion = "10.5.0";
 
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialog, _Component);
@@ -154,19 +150,11 @@ var SpotlightDialog = /*#__PURE__*/function (_Component) {
           disabled: focusLockDisabled,
           returnFocus: false,
           autoFocus: true
-        }, /*#__PURE__*/_react.default.createElement(_spotlightCard.default, {
+        }, /*#__PURE__*/_react.default.createElement("div", {
           ref: ref,
-          testId: testId // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-          ,
-          theme: function theme(parent) {
-            var _parent = parent({}),
-                container = _parent.container,
-                others = (0, _objectWithoutProperties2.default)(_parent, _excluded);
-
-            return _objectSpread(_objectSpread({}, others), {}, {
-              container: _objectSpread(_objectSpread(_objectSpread({}, container), style), animationStyles)
-            });
-          },
+          style: _objectSpread(_objectSpread({}, style), animationStyles)
+        }, /*#__PURE__*/_react.default.createElement(_spotlightCard.default, {
+          testId: testId,
           width: dialogWidth,
           actions: actions,
           actionsBeforeElement: actionsBeforeElement,
@@ -180,7 +168,7 @@ var SpotlightDialog = /*#__PURE__*/function (_Component) {
           },
           heading: heading,
           headingAfterElement: headingAfterElement
-        }, children)));
+        }, children))));
       });
     }
   }]);

package/dist/cjs/components/spotlight-manager.js

@@ -27,6 +27,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 
 var _constants = require("@atlaskit/theme/constants");
@@ -47,16 +49,14 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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 noop = function noop() {};
-
 var _createContext = /*#__PURE__*/(0, _react.createContext)(undefined),
     TargetConsumer = _createContext.Consumer,
     TargetProvider = _createContext.Provider;
 
 exports.TargetConsumer = TargetConsumer;
 var SpotlightContext = /*#__PURE__*/(0, _react.createContext)({
-  opened: noop,
-  closed: noop,
+  opened: _noop.default,
+  closed: _noop.default,
   targets: {}
 });
 exports.SpotlightContext = SpotlightContext;
@@ -72,9 +72,11 @@ var Container = function Container(_ref) {
 /**
  * __Spotlight manager__
  *
- * Wraps usage of spotlight and manages progression through multiple spotlights.
+ * A spotlight manager manages the visibility of spotlights used to introduce new features to users through focused messages or multi-step tours.
  *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ * - [Examples](https://atlassian.design/components/onboarding/examples)
+ * - [Code](https://atlassian.design/components/onboarding/code)
+ * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
 
 

package/dist/cjs/components/spotlight-target.js

@@ -16,9 +16,11 @@ var _spotlightManager = require("./spotlight-manager");
 /**
  * __Spotlight target__
  *
- * Wraps an element, allowing it to be targeted by a spotlight.
+ * A spotlight target marks a component to be used for introducing new features to users through focused messages or multi-step tours.
  *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ * - [Examples](https://atlassian.design/components/onboarding/examples)
+ * - [Code](https://atlassian.design/components/onboarding/code)
+ * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
 var SpotlightTarget = function SpotlightTarget(_ref) {
   var children = _ref.children,

package/dist/cjs/components/spotlight-transition.js

@@ -25,6 +25,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+
 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; }
@@ -35,7 +37,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 var SpotlightTransitionContext = /*#__PURE__*/(0, _react.createContext)({
   isOpen: true,
-  onExited: function onExited() {}
+  onExited: _noop.default
 }); // checks if children exist and are truthy
 
 var hasChildren = function hasChildren(children) {
@@ -46,9 +48,11 @@ var hasChildren = function hasChildren(children) {
 /**
  * __Spotlight transition__
  *
- * Provides context used for fading animations.
+ * A spotlight transition holds onto spotlights so they can fade out when exiting the viewport.
  *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ * - [Examples](https://atlassian.design/components/onboarding/examples)
+ * - [Code](https://atlassian.design/components/onboarding/code)
+ * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
 
 

package/dist/cjs/components/spotlight.js

@@ -22,11 +22,11 @@ var _excluded = ["dialogWidth", "pulse", "testId", "targetNode", "target"];
 /**
  * __Spotlight__
  *
- * A spotlight gives visual focus to an element and is paired with a dialog.
+ * An onboarding spotlight introduces new features to users through focused messages or multi-step tours.
  *
- * Spotlights are used for onboarding and can be connected to create a tour.
- *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ * - [Examples](https://atlassian.design/components/onboarding/examples)
+ * - [Code](https://atlassian.design/components/onboarding/code)
+ * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
 var Spotlight = function Spotlight(_ref) {
   var _ref$dialogWidth = _ref.dialogWidth,

package/dist/cjs/components/theme.js

@@ -165,6 +165,11 @@ function extract(newTheme, _ref) {
     return acc;
   }, {});
 }
+/**
+ * @deprecated
+ * Custom button themes are deprecated and will be removed in the future.
+ */
+
 
 var spotlightButtonTheme = function spotlightButtonTheme(current, themeProps) {
   var _current = current(themeProps),
@@ -175,6 +180,11 @@ var spotlightButtonTheme = function spotlightButtonTheme(current, themeProps) {
     buttonStyles: _objectSpread(_objectSpread({}, buttonStyles), extract(spotlightTheme, themeProps))
   }, rest);
 };
+/**
+ * @deprecated
+ * Custom button themes are deprecated and will be removed in the future.
+ */
+
 
 exports.spotlightButtonTheme = spotlightButtonTheme;
 

package/dist/cjs/components/use-spotlight.js

@@ -10,13 +10,7 @@ var _react = require("react");
 var _spotlightManager = require("./spotlight-manager");
 
 /**
- * Enables advanced usage of spotlights.
- *
- * Provides the following methods:
- * - `isTargetRendered`
- *
- *    Checks if the given spotlight target is currently
- *    being rendered.
+ * Use spotlight hook returns information about available spotlight targets.
  */
 function useSpotlight() {
   var _useContext = (0, _react.useContext)(_spotlightManager.SpotlightContext),

package/dist/cjs/styled/target.js

@@ -33,7 +33,7 @@ var baseShadow = "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(_color
 var easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
 var pulseKeyframes = (0, _core.keyframes)({
   '0%, 33%': {
-    boxShadow: "".concat(baseShadow, ", 0 0 0 ").concat("var(--ds-border-discovery, rgba(101, 84, 192, 1))")
+    boxShadow: "".concat(baseShadow, ", 0 0 0 ", "var(--ds-border-discovery, rgba(101, 84, 192, 1))")
   },
   '66%, 100%': {
     boxShadow: "".concat(baseShadow, ", 0 0 0 10px rgba(101, 84, 192, 0.01)")
@@ -114,11 +114,13 @@ var TargetOverlay = function TargetOverlay(props) {
   }));
 };
 /**
- * __Pulse__
+ * __Spotlight pulse__
  *
- * Allows consumers to apply the spotlight pulse effect in a custom way.
+ * A spotlight pulse draws attention to a new feature.
  *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ * - [Examples](https://atlassian.design/components/onboarding/examples)
+ * - [Code](https://atlassian.design/components/onboarding/code)
+ * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
 
 

package/dist/cjs/utils/use-element-box.js

@@ -11,6 +11,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = require("react");
 
+var _bindEventListener = require("bind-event-listener");
+
 var getElementRect = function getElementRect(element) {
   var _element$getBoundingC = element.getBoundingClientRect(),
       height = _element$getBoundingC.height,
@@ -53,10 +55,10 @@ var useElementBox = function useElementBox(element) {
       });
     };
 
-    window.addEventListener('resize', onResize);
-    return function () {
-      window.removeEventListener('resize', onResize);
-    };
+    return (0, _bindEventListener.bind)(window, {
+      type: 'resize',
+      listener: onResize
+    });
   }, [element]);
   return box;
 };

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "10.4.0",
+	"version": "10.5.0",
 	"sideEffects": false
 }

package/dist/es2019/components/modal.js

@@ -9,18 +9,16 @@ import Modal, { ModalBody } from '@atlaskit/modal-dialog';
 import { ModalBody as Body, ModalHeading as Heading, ModalActionContainer, ModalActionItem, ModalImage } from '../styled/modal';
 import { modalButtonTheme } from './theme'; // TODO: DSP-1250 - use a composable API consistent with normal modal dialog
 
-function noop() {}
 /**
- * __Onboarding modal__
+ * __Benefits modal__
  *
- * If the product change is large enough,
- * this component can be used to outline the benefits of the change to the user.
+ * A benefits modal explains the benefits of a significant new feature or experience change.
  *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ * - [Examples](https://atlassian.design/components/onboarding/benefits-modal/examples)
+ * - [Code](https://atlassian.design/components/onboarding/benefits-modal/code)
+ * - [Usage](https://atlassian.design/components/onboarding/benefits-modal/usage)
  */
-
-
-export default class OnboardingModal extends Component {
+export default class BenefitsModal extends Component {
   constructor(...args) {
     super(...args);
 
@@ -78,7 +76,6 @@ export default class OnboardingModal extends Component {
     const Footer = this.footerComponent(this.props);
     return jsx(Modal, _extends({
       autoFocus: true,
-      onClose: noop,
       shouldScrollInViewport: true,
       shouldCloseOnOverlayClick: false,
       shouldCloseOnEscapePress: false