@atlaskit/onboarding 10.2.3 → 10.3.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @atlaskit/onboarding
 
+## 10.3.0
+
+### Minor Changes
+
+- [`50081f13de7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/50081f13de7) - Instrumented `@atlaskit/onboarding` with the 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.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 10.2.6
+
+### Patch Changes
+
+- [`b85e7ce12cd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b85e7ce12cd) - Internal upgrade of memoize-one to 6.0.0
+
+## 10.2.5
+
+### Patch Changes
+
+- [`34282240102`](https://bitbucket.org/atlassian/atlassian-frontend/commits/34282240102) - Adds explicit type to button usages components.
+
+## 10.2.4
+
+### Patch Changes
+
+- [`d77725f926f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d77725f926f) - Replaced usage of `styled-components` with `@emotion/core`.
+- [`cf853e39278`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf853e39278) - Internal changes to remove `@atlaskit/theme/math` usage.
+- Updated dependencies
+
 ## 10.2.3
 
 ### Patch Changes

package/dist/cjs/components/{Animation.js → animation.js}

@@ -22,8 +22,15 @@ var duration = {
   exit: 100
 };
 
+/**
+ * __Fade__
+ *
+ * A fade in animation used for spotlights.
+ *
+ * @internal
+ */
 var Fade = function Fade(_ref) {
-  var hasEntered = _ref.in,
+  var hasEntered = _ref.hasEntered,
       children = _ref.children,
       onExited = _ref.onExited;
   return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {

package/dist/cjs/components/card.js

@@ -0,0 +1,159 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+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 _react = _interopRequireDefault(require("react"));
+
+var _core = require("@emotion/core");
+
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+
+var _components = require("@atlaskit/theme/components");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _typography = require("@atlaskit/theme/typography");
+
+var _dialog = require("../styled/dialog");
+
+/** @jsx jsx */
+var gridSize = (0, _constants.gridSize)(); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var lightH600Styles = (0, _core.css)((0, _typography.h600)({
+  theme: {
+    mode: 'light'
+  }
+})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var darkH600Styles = (0, _core.css)((0, _typography.h600)({
+  theme: {
+    mode: 'dark'
+  }
+}));
+
+var Container = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      theme = _ref.theme,
+      props = (0, _objectWithoutProperties2.default)(_ref, ["children", "theme"]);
+  return (// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    (0, _core.jsx)("div", (0, _extends2.default)({
+      css: theme,
+      ref: ref
+    }, props), children)
+  );
+});
+
+var bodyStyles = (0, _core.css)({
+  display: 'flex',
+  padding: "".concat(gridSize * 2, "px ").concat(gridSize * 2.5, "px"),
+  flexDirection: 'column'
+}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var headingStyles = (0, _core.css)({
+  color: 'inherit'
+});
+var defaultHeaderStyles = (0, _core.css)({
+  display: 'flex',
+  paddingBottom: "".concat(gridSize, "px"),
+  alignItems: 'baseline',
+  justifyContent: 'space-between'
+});
+
+var DefaultHeader = function DefaultHeader(_ref2) {
+  var children = _ref2.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(_ref3) {
+  var children = _ref3.children;
+  return (0, _core.jsx)("div", {
+    css: defaultFooterStyles
+  }, children);
+};
+
+var Theme = (0, _components.createTheme)(function () {
+  return {
+    container: {
+      overflow: 'auto',
+      borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
+      height: 'fit-content',
+      zIndex: "".concat(_constants.layers.spotlight() + 1)
+    }
+  };
+});
+/**
+ * __Card__
+ *
+ * A card base for the spotlight card. The external `SpotlightCard` wraps this component.
+ *
+ * @internal
+ */
+
+var Card = /*#__PURE__*/_react.default.forwardRef(function (_ref4, ref) {
+  var _ref4$actions = _ref4.actions,
+      actions = _ref4$actions === void 0 ? [] : _ref4$actions,
+      actionsBeforeElement = _ref4.actionsBeforeElement,
+      children = _ref4.children,
+      _ref4$components = _ref4.components,
+      components = _ref4$components === void 0 ? {} : _ref4$components,
+      image = _ref4.image,
+      heading = _ref4.heading,
+      headingAfterElement = _ref4.headingAfterElement,
+      theme = _ref4.theme,
+      testId = _ref4.testId;
+  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;
+
+  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
+      mode = _useGlobalTheme.mode;
+
+  return (0, _core.jsx)(Theme.Provider, {
+    value: theme
+  }, (0, _core.jsx)(Theme.Consumer, null, function (_ref5) {
+    var container = _ref5.container;
+    return (// eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+      (0, _core.jsx)(Container, {
+        theme: container,
+        ref: ref,
+        "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)("h4", {
+        css: [mode === 'light' ? lightH600Styles : darkH600Styles, headingStyles]
+      }, 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 (_ref6, idx) {
+        var text = _ref6.text,
+            key = _ref6.key,
+            rest = (0, _objectWithoutProperties2.default)(_ref6, ["text", "key"]);
+        return (0, _core.jsx)(_dialog.DialogActionItem, {
+          key: key || (typeof text === 'string' ? text : "".concat(idx))
+        }, (0, _core.jsx)(_customThemeButton.default, rest, text));
+      }))) : null))
+    );
+  }));
+});
+
+var _default = Card;
+exports.default = _default;

package/dist/cjs/components/{Clone.js → clone.js}

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Target = require("../styled/Target");
+var _target = require("../styled/target");
 
 function cloneAndOverrideStyles(node) {
   var shouldCloneChildren = true;
@@ -21,6 +21,15 @@ function cloneAndOverrideStyles(node) {
   clonedNode.style.transform = 'translate(0, 0) translate3d(0, 0, 0)';
   return clonedNode;
 }
+/**
+ * __Clone__
+ *
+ * Used for cloning spotlight targets. The clone is positioned on top of the spotlight target with
+ * a pulsing animation.
+ *
+ * @internal
+ */
+
 
 var Clone = function Clone(props) {
   var pulse = props.pulse,
@@ -31,7 +40,7 @@ var Clone = function Clone(props) {
       targetNode = props.targetNode,
       targetRadius = props.targetRadius,
       testId = props.testId;
-  return /*#__PURE__*/_react.default.createElement(_Target.TargetInner, {
+  return /*#__PURE__*/_react.default.createElement(_target.TargetInner, {
     "data-testid": testId,
     pulse: pulse,
     bgColor: targetBgColor,
@@ -45,7 +54,7 @@ var Clone = function Clone(props) {
     style: {
       pointerEvents: 'none'
     }
-  }), /*#__PURE__*/_react.default.createElement(_Target.TargetOverlay, {
+  }), /*#__PURE__*/_react.default.createElement(_target.TargetOverlay, {
     onClick: targetOnClick ? function (event) {
       return targetOnClick({
         event: event,

package/dist/cjs/components/index.js

@@ -8,37 +8,37 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
   get: function get() {
-    return _Modal.default;
+    return _modal.default;
   }
 });
 Object.defineProperty(exports, "Spotlight", {
   enumerable: true,
   get: function get() {
-    return _Spotlight.default;
+    return _spotlight.default;
   }
 });
 Object.defineProperty(exports, "SpotlightCard", {
   enumerable: true,
   get: function get() {
-    return _SpotlightCard.default;
+    return _spotlightCard.default;
   }
 });
 Object.defineProperty(exports, "SpotlightManager", {
   enumerable: true,
   get: function get() {
-    return _SpotlightManager.default;
+    return _spotlightManager.default;
   }
 });
 Object.defineProperty(exports, "SpotlightTarget", {
   enumerable: true,
   get: function get() {
-    return _SpotlightTarget.default;
+    return _spotlightTarget.default;
   }
 });
 Object.defineProperty(exports, "SpotlightTransition", {
   enumerable: true,
   get: function get() {
-    return _SpotlightTransition.default;
+    return _spotlightTransition.default;
   }
 });
 Object.defineProperty(exports, "useSpotlight", {
@@ -60,18 +60,18 @@ Object.defineProperty(exports, "modalButtonTheme", {
   }
 });
 
-var _Modal = _interopRequireDefault(require("./Modal"));
+var _modal = _interopRequireDefault(require("./modal"));
 
-var _Spotlight = _interopRequireDefault(require("./Spotlight"));
+var _spotlight = _interopRequireDefault(require("./spotlight"));
 
-var _SpotlightCard = _interopRequireDefault(require("./SpotlightCard"));
+var _spotlightCard = _interopRequireDefault(require("./spotlight-card"));
 
-var _SpotlightManager = _interopRequireDefault(require("./SpotlightManager"));
+var _spotlightManager = _interopRequireDefault(require("./spotlight-manager"));
 
-var _SpotlightTarget = _interopRequireDefault(require("./SpotlightTarget"));
+var _spotlightTarget = _interopRequireDefault(require("./spotlight-target"));
 
-var _SpotlightTransition = _interopRequireDefault(require("./SpotlightTransition"));
+var _spotlightTransition = _interopRequireDefault(require("./spotlight-transition"));
 
-var _useSpotlight = _interopRequireDefault(require("./useSpotlight"));
+var _useSpotlight = _interopRequireDefault(require("./use-spotlight"));
 
 var _theme = require("./theme");

package/dist/cjs/components/{Modal.js → modal.js}

@@ -27,13 +27,15 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
+
+var _core = require("@emotion/core");
 
 var _customThemeButton = _interopRequireWildcard(require("@atlaskit/button/custom-theme-button"));
 
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
 
-var _Modal = require("../styled/Modal");
+var _modal = require("../styled/modal");
 
 var _theme = require("./theme");
 
@@ -46,6 +48,15 @@ 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__
+ *
+ * If the product change is large enough,
+ * this component can be used to outline the benefits of the change to the user.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ */
+
 
 var OnboardingModal = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(OnboardingModal, _Component);
@@ -67,9 +78,9 @@ var OnboardingModal = /*#__PURE__*/function (_Component) {
           src = props.image;
 
       var ImageElement = function ImageElement() {
-        return /*#__PURE__*/_react.default.createElement(_Modal.Image, {
-          alt: "",
-          src: src
+        return (0, _core.jsx)(_modal.ModalImage, {
+          src: src,
+          alt: ""
         });
       };
 
@@ -82,18 +93,18 @@ var OnboardingModal = /*#__PURE__*/function (_Component) {
           experimental_shouldShowPrimaryButtonOnRight = _props$experimental_s === void 0 ? false : _props$experimental_s;
 
       var ActionsElement = function ActionsElement() {
-        return actionList ? /*#__PURE__*/_react.default.createElement(_customThemeButton.Theme.Provider, {
+        return actionList ? (0, _core.jsx)(_customThemeButton.Theme.Provider, {
           value: _theme.modalButtonTheme
-        }, /*#__PURE__*/_react.default.createElement(_Modal.Actions, {
+        }, (0, _core.jsx)(_modal.ModalActionContainer, {
           shouldReverseButtonOrder: experimental_shouldShowPrimaryButtonOnRight
         }, actionList.map(function (_ref, idx) {
           var text = _ref.text,
               key = _ref.key,
               rest = (0, _objectWithoutProperties2.default)(_ref, ["text", "key"]);
           var variant = idx ? 'subtle-link' : 'primary';
-          return /*#__PURE__*/_react.default.createElement(_Modal.ActionItem, {
+          return (0, _core.jsx)(_modal.ModalActionItem, {
             key: key || (typeof text === 'string' ? text : "".concat(idx))
-          }, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, (0, _extends2.default)({
+          }, (0, _core.jsx)(_customThemeButton.default, (0, _extends2.default)({
             appearance: variant,
             autoFocus: !idx
           }, rest), text));
@@ -115,13 +126,13 @@ var OnboardingModal = /*#__PURE__*/function (_Component) {
           props = (0, _objectWithoutProperties2.default)(_this$props, ["actions", "children", "heading"]);
       var Header = this.headerComponent(this.props);
       var Footer = this.footerComponent(this.props);
-      return /*#__PURE__*/_react.default.createElement(_modalDialog.default, (0, _extends2.default)({
+      return (0, _core.jsx)(_modalDialog.default, (0, _extends2.default)({
         autoFocus: true,
         onClose: noop,
         shouldScrollInViewport: true,
         shouldCloseOnOverlayClick: false,
         shouldCloseOnEscapePress: false
-      }, props), /*#__PURE__*/_react.default.createElement(Header, null), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement(_Modal.Body, null, heading && /*#__PURE__*/_react.default.createElement(_Modal.Heading, null, heading), children)), /*#__PURE__*/_react.default.createElement(Footer, null));
+      }, 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;

package/dist/cjs/components/{SpotlightCard.js → spotlight-card.js}

@@ -29,7 +29,9 @@ var _customThemeButton = require("@atlaskit/button/custom-theme-button");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _Card = _interopRequireDefault(require("./Card"));
+var _tokens = require("@atlaskit/tokens");
+
+var _card = _interopRequireDefault(require("./card"));
 
 var _theme2 = require("./theme");
 
@@ -69,7 +71,7 @@ var SpotlightCard = /*#__PURE__*/function (_React$Component) {
           testId = _this$props.testId;
       return /*#__PURE__*/_react.default.createElement(_customThemeButton.Theme.Provider, {
         value: _theme2.spotlightButtonTheme
-      }, /*#__PURE__*/_react.default.createElement(_Card.default, {
+      }, /*#__PURE__*/_react.default.createElement(_card.default, {
         testId: testId,
         ref: innerRef,
         heading: heading,
@@ -77,7 +79,8 @@ var SpotlightCard = /*#__PURE__*/function (_React$Component) {
         actions: actions,
         actionsBeforeElement: actionsBeforeElement,
         components: components,
-        image: image,
+        image: image // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+        ,
         theme: function theme(parent) {
           var _parent = parent({}),
               container = _parent.container,
@@ -86,10 +89,10 @@ var SpotlightCard = /*#__PURE__*/function (_React$Component) {
           return _theme(function () {
             return _objectSpread(_objectSpread({}, others), {}, {
               container: _objectSpread({
-                background: _colors.P300,
-                color: _colors.N0,
+                background: (0, _tokens.token)('color.background.boldDiscovery.resting', _colors.P300),
+                color: (0, _tokens.token)('color.text.onBold', _colors.N0),
                 width: "".concat(Math.min(Math.max(width, 160), 600), "px"),
-                boxShadow: isFlat ? undefined : "0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A)
+                boxShadow: isFlat ? undefined : (0, _tokens.token)('shadow.card', "0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A))
               }, container)
             });
           }, {});
@@ -99,6 +102,12 @@ var SpotlightCard = /*#__PURE__*/function (_React$Component) {
   }]);
   return SpotlightCard;
 }(_react.default.Component);
+/**
+ * __Spotlight card__
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ */
+
 
 (0, _defineProperty2.default)(SpotlightCard, "defaultProps", {
   width: 400,

package/dist/cjs/components/{SpotlightDialog.js → spotlight-dialog.js}

@@ -33,11 +33,11 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _popper = require("@atlaskit/popper");
 
-var _Dialog = require("../styled/Dialog");
+var _dialog = require("../styled/dialog");
 
-var _SpotlightCard = _interopRequireDefault(require("./SpotlightCard"));
+var _spotlightCard = _interopRequireDefault(require("./spotlight-card"));
 
-var _ValueChanged = _interopRequireDefault(require("./ValueChanged"));
+var _valueChanged = _interopRequireDefault(require("./value-changed"));
 
 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); }
 
@@ -52,7 +52,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.2.3";
+var packageVersion = "10.3.0";
 
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialog, _Component);
@@ -145,16 +145,17 @@ var SpotlightDialog = /*#__PURE__*/function (_Component) {
         var ref = _ref.ref,
             style = _ref.style,
             update = _ref.update;
-        return /*#__PURE__*/_react.default.createElement(_ValueChanged.default, {
+        return /*#__PURE__*/_react.default.createElement(_valueChanged.default, {
           value: dialogWidth,
           onChange: update
         }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, {
           disabled: focusLockDisabled,
           returnFocus: false,
           autoFocus: true
-        }, /*#__PURE__*/_react.default.createElement(_SpotlightCard.default, {
+        }, /*#__PURE__*/_react.default.createElement(_spotlightCard.default, {
           ref: ref,
-          testId: testId,
+          testId: testId // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+          ,
           theme: function theme(parent) {
             var _parent = parent({}),
                 container = _parent.container,
@@ -167,7 +168,7 @@ var SpotlightDialog = /*#__PURE__*/function (_Component) {
           width: dialogWidth,
           actions: actions,
           actionsBeforeElement: actionsBeforeElement,
-          image: image && /*#__PURE__*/_react.default.createElement(_Dialog.Image, {
+          image: image && /*#__PURE__*/_react.default.createElement(_dialog.DialogImage, {
             alt: heading,
             src: image
           }),

package/dist/cjs/components/{SpotlightInner.js → spotlight-inner.js}

@@ -39,13 +39,13 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _useElementBox = require("../utils/use-element-box");
 
-var _Animation = require("./Animation");
+var _animation = require("./animation");
 
-var _Clone = _interopRequireDefault(require("./Clone"));
+var _clone = _interopRequireDefault(require("./clone"));
 
-var _SpotlightDialog = _interopRequireDefault(require("./SpotlightDialog"));
+var _spotlightDialog = _interopRequireDefault(require("./spotlight-dialog"));
 
-var _SpotlightTransition = require("./SpotlightTransition");
+var _spotlightTransition = require("./spotlight-transition");
 
 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; }
 
@@ -55,6 +55,13 @@ 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; } }
 
+/**
+ * __Spotlight inner__
+ *
+ * Renders the spotlight target clone and dialog.
+ *
+ * @internal
+ */
 var SpotlightInner = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(SpotlightInner, _React$Component);
 
@@ -126,7 +133,7 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
           testId = _this$props.testId,
           TargetReplacement = _this$props.targetReplacement;
       var replacementElement = this.state.replacementElement;
-      return /*#__PURE__*/_react.default.createElement(_SpotlightTransition.SpotlightTransitionConsumer, null, function (_ref) {
+      return /*#__PURE__*/_react.default.createElement(_spotlightTransition.SpotlightTransitionConsumer, null, function (_ref) {
         var isOpen = _ref.isOpen,
             onExited = _ref.onExited;
         return /*#__PURE__*/_react.default.createElement(_portal.default, {
@@ -146,7 +153,7 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
         })) : /*#__PURE__*/_react.default.createElement(_useElementBox.ElementBox, {
           element: targetNode
         }, function (box) {
-          return /*#__PURE__*/_react.default.createElement(_Clone.default, {
+          return /*#__PURE__*/_react.default.createElement(_clone.default, {
             testId: "".concat(testId, "--target"),
             pulse: pulse,
             target: target,
@@ -156,11 +163,11 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
             targetOnClick: targetOnClick,
             targetRadius: targetRadius
           });
-        }), TargetReplacement && !replacementElement ? null : /*#__PURE__*/_react.default.createElement(_Animation.Fade, {
-          in: isOpen,
+        }), TargetReplacement && !replacementElement ? null : /*#__PURE__*/_react.default.createElement(_animation.Fade, {
+          hasEntered: isOpen,
           onExited: onExited
         }, function (animationStyles) {
-          return /*#__PURE__*/_react.default.createElement(_SpotlightDialog.default, {
+          return /*#__PURE__*/_react.default.createElement(_spotlightDialog.default, {
             testId: "".concat(testId, "--dialog"),
             actions: _this2.props.actions,
             actionsBeforeElement: _this2.props.actionsBeforeElement,

package/dist/cjs/components/{SpotlightManager.js → spotlight-manager.js}

@@ -31,9 +31,9 @@ var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _Blanket = _interopRequireDefault(require("../styled/Blanket"));
+var _blanket = _interopRequireDefault(require("../styled/blanket"));
 
-var _Animation = require("./Animation");
+var _animation = require("./animation");
 
 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); }
 
@@ -69,6 +69,14 @@ var Container = function Container(_ref) {
       children = _ref.children;
   return /*#__PURE__*/_react.default.createElement(Wrapper, null, children);
 };
+/**
+ * __Spotlight manager__
+ *
+ * Wraps usage of spotlight and manages progression through multiple spotlights.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ */
+
 
 var SpotlightManager = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(SpotlightManager, _PureComponent);
@@ -145,12 +153,12 @@ var SpotlightManager = /*#__PURE__*/function (_PureComponent) {
         value: this.targetRef
       }, /*#__PURE__*/_react.default.createElement(Container, {
         component: Tag || _react.default.Fragment
-      }, /*#__PURE__*/_react.default.createElement(_Animation.Fade, {
-        in: this.state.spotlightCount > 0
+      }, /*#__PURE__*/_react.default.createElement(_animation.Fade, {
+        hasEntered: this.state.spotlightCount > 0
       }, function (animationStyles) {
         return /*#__PURE__*/_react.default.createElement(_portal.default, {
           zIndex: _constants.layers.spotlight()
-        }, /*#__PURE__*/_react.default.createElement(_Blanket.default, {
+        }, /*#__PURE__*/_react.default.createElement(_blanket.default, {
           style: animationStyles,
           isTinted: blanketIsTinted
         }));

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

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNodeResolver = _interopRequireDefault(require("react-node-resolver"));
+
+var _spotlightManager = require("./spotlight-manager");
+
+/**
+ * __Spotlight target__
+ *
+ * Wraps an element, allowing it to be targeted by a spotlight.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ */
+var SpotlightTarget = function SpotlightTarget(_ref) {
+  var children = _ref.children,
+      name = _ref.name;
+  return /*#__PURE__*/_react.default.createElement(_spotlightManager.TargetConsumer, null, function (targetRef) {
+    return targetRef ? /*#__PURE__*/_react.default.createElement(_reactNodeResolver.default, {
+      innerRef: targetRef(name)
+    }, children) : children;
+  });
+};
+
+var _default = SpotlightTarget;
+exports.default = _default;