@atlaskit/onboarding 10.2.3 → 10.3.0

package/dist/es2019/styled/target.js

@@ -0,0 +1,93 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { css, jsx, keyframes } from '@emotion/core';
+import { P300 } from '@atlaskit/theme/colors';
+import { layers } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+// NOTE:
+// Pulse color "rgb(101, 84, 192)" derived from "colors.P300"
+const baseShadow = token('shadow.overlay', `0 0 0 2px ${P300}`);
+const easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
+const pulseKeyframes = keyframes({
+  '0%, 33%': {
+    boxShadow: `${baseShadow}, 0 0 0 rgba(101, 84, 192, 1)`
+  },
+  '66%, 100%': {
+    boxShadow: `${baseShadow}, 0 0 0 10px rgba(101, 84, 192, 0.01)`
+  }
+});
+const animationStyles = css({
+  animation: `${pulseKeyframes} 3000ms ${easing} infinite`
+}); // IE11 and Edge: z-index needed because fixed position calculates z-index relative
+// to body instead of nearest stacking context (Portal in our case).
+
+const baseStyles = css({
+  zIndex: layers.spotlight() + 1
+});
+
+const Base = ({
+  children,
+  bgColor,
+  radius,
+  style,
+  ...props
+}) => jsx("div", _extends({
+  css: baseStyles,
+  style: { ...style,
+    backgroundColor: bgColor,
+    borderRadius: radius ? `${radius}px` : undefined
+  }
+}, props), children);
+/**
+ * __Target inner__
+ *
+ * Used to apply spotlight border and pulse to spotlight targets.
+ *
+ * @internal
+ */
+
+
+export const TargetInner = ({
+  children,
+  pulse,
+  ...props
+}) => jsx(Base, _extends({}, props, {
+  css: [pulse && animationStyles]
+}), children);
+const targetOverlayStyles = css({
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  top: 0,
+  left: 0
+});
+/**
+ * __Target overlay__
+ *
+ * Overlays a spotlight target, allowing for custom click events that are intended
+ * only for onboarding.
+ *
+ * @internal
+ */
+
+export const TargetOverlay = props => jsx("div", _extends({}, props, {
+  css: targetOverlayStyles,
+  style: {
+    cursor: props.onClick ? 'pointer' : 'auto'
+  }
+}));
+/**
+ * __Pulse__
+ *
+ * Allows consumers to apply the spotlight pulse effect in a custom way.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ */
+
+export const Pulse = ({
+  children,
+  ...props
+}) => jsx(Base, _extends({}, props, {
+  css: animationStyles
+}), children);

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

@@ -45,6 +45,14 @@ export const useElementBox = element => {
   }, [element]);
   return box;
 };
+/**
+ * __Element box__
+ *
+ * Allows consumption of `userElementBox` hook through render props.
+ *
+ * @internal
+ */
+
 export const ElementBox = props => {
   const box = useElementBox(props.element);
   return props.children(box);

package/dist/es2019/version.json

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

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

@@ -10,8 +10,16 @@ var duration = {
   enter: 0,
   exit: 100
 };
+
+/**
+ * __Fade__
+ *
+ * A fade in animation used for spotlights.
+ *
+ * @internal
+ */
 export var Fade = function Fade(_ref) {
-  var hasEntered = _ref.in,
+  var hasEntered = _ref.hasEntered,
       children = _ref.children,
       onExited = _ref.onExited;
   return /*#__PURE__*/React.createElement(Transition, {

package/dist/esm/components/card.js

@@ -0,0 +1,140 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import Button from '@atlaskit/button/custom-theme-button';
+import { createTheme, useGlobalTheme } from '@atlaskit/theme/components';
+import { borderRadius, gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
+import { h600 } from '@atlaskit/theme/typography';
+import { DialogActionItem, DialogActionItemContainer } from '../styled/dialog';
+var gridSize = getGridSize(); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var lightH600Styles = css(h600({
+  theme: {
+    mode: 'light'
+  }
+})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var darkH600Styles = css(h600({
+  theme: {
+    mode: 'dark'
+  }
+}));
+var Container = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      theme = _ref.theme,
+      props = _objectWithoutProperties(_ref, ["children", "theme"]);
+
+  return (// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    jsx("div", _extends({
+      css: theme,
+      ref: ref
+    }, props), children)
+  );
+});
+var bodyStyles = 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 = css({
+  color: 'inherit'
+});
+var defaultHeaderStyles = css({
+  display: 'flex',
+  paddingBottom: "".concat(gridSize, "px"),
+  alignItems: 'baseline',
+  justifyContent: 'space-between'
+});
+
+var DefaultHeader = function DefaultHeader(_ref2) {
+  var children = _ref2.children;
+  return jsx("div", {
+    css: defaultHeaderStyles
+  }, children);
+};
+
+var defaultFooterStyles = css({
+  display: 'flex',
+  paddingTop: "".concat(gridSize, "px"),
+  alignItems: 'center',
+  justifyContent: 'space-between'
+});
+
+var DefaultFooter = function DefaultFooter(_ref3) {
+  var children = _ref3.children;
+  return jsx("div", {
+    css: defaultFooterStyles
+  }, children);
+};
+
+var Theme = createTheme(function () {
+  return {
+    container: {
+      overflow: 'auto',
+      borderRadius: "".concat(borderRadius(), "px"),
+      height: 'fit-content',
+      zIndex: "".concat(layers.spotlight() + 1)
+    }
+  };
+});
+/**
+ * __Card__
+ *
+ * A card base for the spotlight card. The external `SpotlightCard` wraps this component.
+ *
+ * @internal
+ */
+
+var Card = /*#__PURE__*/React.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 = useGlobalTheme(),
+      mode = _useGlobalTheme.mode;
+
+  return jsx(Theme.Provider, {
+    value: theme
+  }, jsx(Theme.Consumer, null, function (_ref5) {
+    var container = _ref5.container;
+    return (// eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+      jsx(Container, {
+        theme: container,
+        ref: ref,
+        "data-testid": testId
+      }, typeof image === 'string' ? jsx("img", {
+        src: image,
+        alt: ""
+      }) : image, jsx("div", {
+        css: bodyStyles
+      }, heading || headingAfterElement ? jsx(Header, null, jsx("h4", {
+        css: [mode === 'light' ? lightH600Styles : darkH600Styles, headingStyles]
+      }, heading), headingAfterElement) : null, children, actions.length > 0 || actionsBeforeElement ? jsx(Footer, null, actionsBeforeElement || jsx("span", null), jsx(DialogActionItemContainer, null, actions.map(function (_ref6, idx) {
+        var text = _ref6.text,
+            key = _ref6.key,
+            rest = _objectWithoutProperties(_ref6, ["text", "key"]);
+
+        return jsx(DialogActionItem, {
+          key: key || (typeof text === 'string' ? text : "".concat(idx))
+        }, jsx(Button, rest, text));
+      }))) : null))
+    );
+  }));
+});
+export default Card;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TargetInner, TargetOverlay } from '../styled/Target';
+import { TargetInner, TargetOverlay } from '../styled/target';
 
 function cloneAndOverrideStyles(node) {
   var shouldCloneChildren = true;
@@ -11,6 +11,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,

package/dist/esm/components/index.js

@@ -1,9 +1,9 @@
-import Modal from './Modal';
-import Spotlight from './Spotlight';
-import SpotlightCard from './SpotlightCard';
-import SpotlightManager from './SpotlightManager';
-import SpotlightTarget from './SpotlightTarget';
-import SpotlightTransition from './SpotlightTransition';
-import useSpotlight from './useSpotlight';
+import Modal from './modal';
+import Spotlight from './spotlight';
+import SpotlightCard from './spotlight-card';
+import SpotlightManager from './spotlight-manager';
+import SpotlightTarget from './spotlight-target';
+import SpotlightTransition from './spotlight-transition';
+import useSpotlight from './use-spotlight';
 export { spotlightButtonTheme, modalButtonTheme } from './theme';
 export { Modal, Spotlight, SpotlightCard, SpotlightManager, SpotlightTarget, SpotlightTransition, useSpotlight };

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

@@ -12,13 +12,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; } }
 
-import React, { Component } from 'react';
+/** @jsx jsx */
+import { Component } from 'react';
+import { jsx } from '@emotion/core';
 import Button, { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
 import Modal, { ModalBody } from '@atlaskit/modal-dialog';
-import { ActionItem, Body, Heading, Image, Actions as ModalActions } from '../styled/Modal';
+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__
+ *
+ * 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) {
   _inherits(OnboardingModal, _Component);
@@ -41,9 +52,9 @@ var OnboardingModal = /*#__PURE__*/function (_Component) {
           src = props.image;
 
       var ImageElement = function ImageElement() {
-        return /*#__PURE__*/React.createElement(Image, {
-          alt: "",
-          src: src
+        return jsx(ModalImage, {
+          src: src,
+          alt: ""
         });
       };
 
@@ -57,9 +68,9 @@ var OnboardingModal = /*#__PURE__*/function (_Component) {
           experimental_shouldShowPrimaryButtonOnRight = _props$experimental_s === void 0 ? false : _props$experimental_s;
 
       var ActionsElement = function ActionsElement() {
-        return actionList ? /*#__PURE__*/React.createElement(ButtonTheme.Provider, {
+        return actionList ? jsx(ButtonTheme.Provider, {
           value: modalButtonTheme
-        }, /*#__PURE__*/React.createElement(ModalActions, {
+        }, jsx(ModalActionContainer, {
           shouldReverseButtonOrder: experimental_shouldShowPrimaryButtonOnRight
         }, actionList.map(function (_ref, idx) {
           var text = _ref.text,
@@ -67,9 +78,9 @@ var OnboardingModal = /*#__PURE__*/function (_Component) {
               rest = _objectWithoutProperties(_ref, ["text", "key"]);
 
           var variant = idx ? 'subtle-link' : 'primary';
-          return /*#__PURE__*/React.createElement(ActionItem, {
+          return jsx(ModalActionItem, {
             key: key || (typeof text === 'string' ? text : "".concat(idx))
-          }, /*#__PURE__*/React.createElement(Button, _extends({
+          }, jsx(Button, _extends({
             appearance: variant,
             autoFocus: !idx
           }, rest), text));
@@ -93,13 +104,13 @@ var OnboardingModal = /*#__PURE__*/function (_Component) {
 
       var Header = this.headerComponent(this.props);
       var Footer = this.footerComponent(this.props);
-      return /*#__PURE__*/React.createElement(Modal, _extends({
+      return jsx(Modal, _extends({
         autoFocus: true,
         onClose: noop,
         shouldScrollInViewport: true,
         shouldCloseOnOverlayClick: false,
         shouldCloseOnEscapePress: false
-      }, props), /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Body, null, heading && /*#__PURE__*/React.createElement(Heading, null, heading), children)), /*#__PURE__*/React.createElement(Footer, null));
+      }, props), jsx(Header, null), jsx(ModalBody, null, jsx(Body, null, heading && jsx(Heading, null, heading), children)), jsx(Footer, null));
     }
   }]);
 

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

@@ -18,7 +18,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
 import { N0, N50A, N60A, P300 } from '@atlaskit/theme/colors';
-import Card from './Card';
+import { token } from '@atlaskit/tokens';
+import Card from './card';
 import { spotlightButtonTheme } from './theme';
 
 var SpotlightCard = /*#__PURE__*/function (_React$Component) {
@@ -58,7 +59,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,
@@ -67,10 +69,10 @@ var SpotlightCard = /*#__PURE__*/function (_React$Component) {
           return _theme(function () {
             return _objectSpread(_objectSpread({}, others), {}, {
               container: _objectSpread({
-                background: P300,
-                color: N0,
+                background: token('color.background.boldDiscovery.resting', P300),
+                color: token('color.text.onBold', N0),
                 width: "".concat(Math.min(Math.max(width, 160), 600), "px"),
-                boxShadow: isFlat ? undefined : "0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A)
+                boxShadow: isFlat ? undefined : token('shadow.card', "0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A))
               }, container)
             });
           }, {});
@@ -81,6 +83,12 @@ var SpotlightCard = /*#__PURE__*/function (_React$Component) {
 
   return SpotlightCard;
 }(React.Component);
+/**
+ * __Spotlight card__
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ */
+
 
 _defineProperty(SpotlightCard, "defaultProps", {
   width: 400,

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

@@ -19,11 +19,11 @@ import React, { Component } from 'react';
 import FocusLock from 'react-focus-lock';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { Popper } from '@atlaskit/popper';
-import { Image } from '../styled/Dialog';
-import SpotlightCard from './SpotlightCard';
-import ValueChanged from './ValueChanged';
+import { DialogImage } from '../styled/dialog';
+import SpotlightCard from './spotlight-card';
+import ValueChanged from './value-changed';
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "10.2.3";
+var packageVersion = "10.3.0";
 
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   _inherits(SpotlightDialog, _Component);
@@ -127,7 +127,8 @@ var SpotlightDialog = /*#__PURE__*/function (_Component) {
           autoFocus: true
         }, /*#__PURE__*/React.createElement(SpotlightCard, {
           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,
@@ -140,7 +141,7 @@ var SpotlightDialog = /*#__PURE__*/function (_Component) {
           width: dialogWidth,
           actions: actions,
           actionsBeforeElement: actionsBeforeElement,
-          image: image && /*#__PURE__*/React.createElement(Image, {
+          image: image && /*#__PURE__*/React.createElement(DialogImage, {
             alt: heading,
             src: image
           }),

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

@@ -23,11 +23,18 @@ import scrollIntoView from 'scroll-into-view-if-needed';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
 import { ElementBox } from '../utils/use-element-box';
-import { Fade } from './Animation';
-import Clone from './Clone';
-import SpotlightDialog from './SpotlightDialog';
-import { SpotlightTransitionConsumer } from './SpotlightTransition';
-
+import { Fade } from './animation';
+import Clone from './clone';
+import SpotlightDialog from './spotlight-dialog';
+import { SpotlightTransitionConsumer } from './spotlight-transition';
+
+/**
+ * __Spotlight inner__
+ *
+ * Renders the spotlight target clone and dialog.
+ *
+ * @internal
+ */
 var SpotlightInner = /*#__PURE__*/function (_React$Component) {
   _inherits(SpotlightInner, _React$Component);
 
@@ -133,7 +140,7 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
             targetRadius: targetRadius
           });
         }), TargetReplacement && !replacementElement ? null : /*#__PURE__*/React.createElement(Fade, {
-          in: isOpen,
+          hasEntered: isOpen,
           onExited: onExited
         }, function (animationStyles) {
           return /*#__PURE__*/React.createElement(SpotlightDialog, {

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

@@ -18,8 +18,8 @@ import React, { createContext, PureComponent } from 'react';
 import memoizeOne from 'memoize-one';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
-import Blanket from '../styled/Blanket';
-import { Fade } from './Animation';
+import Blanket from '../styled/blanket';
+import { Fade } from './animation';
 
 var noop = function noop() {};
 
@@ -42,6 +42,14 @@ var Container = function Container(_ref) {
       children = _ref.children;
   return /*#__PURE__*/React.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) {
   _inherits(SpotlightManager, _PureComponent);
@@ -125,7 +133,7 @@ var SpotlightManager = /*#__PURE__*/function (_PureComponent) {
       }, /*#__PURE__*/React.createElement(Container, {
         component: Tag || React.Fragment
       }, /*#__PURE__*/React.createElement(Fade, {
-        in: this.state.spotlightCount > 0
+        hasEntered: this.state.spotlightCount > 0
       }, function (animationStyles) {
         return /*#__PURE__*/React.createElement(Portal, {
           zIndex: layers.spotlight()

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import NodeResolver from 'react-node-resolver';
+import { TargetConsumer } from './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.createElement(TargetConsumer, null, function (targetRef) {
+    return targetRef ? /*#__PURE__*/React.createElement(NodeResolver, {
+      innerRef: targetRef(name)
+    }, children) : children;
+  });
+};
+
+export default SpotlightTarget;

package/dist/esm/components/{SpotlightTransition.js → spotlight-transition.js}

@@ -11,7 +11,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; } }
 
 import React, { createContext } from 'react';
-var TransitionContext = /*#__PURE__*/createContext({
+var SpotlightTransitionContext = /*#__PURE__*/createContext({
   isOpen: true,
   onExited: function onExited() {}
 }); // checks if children exist and are truthy
@@ -21,16 +21,24 @@ var hasChildren = function hasChildren(children) {
     return !!child;
   }).filter(Boolean).length > 0;
 };
+/**
+ * __Spotlight transition__
+ *
+ * Provides context used for fading animations.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ */
 
-var Transition = /*#__PURE__*/function (_React$Component) {
-  _inherits(Transition, _React$Component);
 
-  var _super = _createSuper(Transition);
+var SpotlightTransition = /*#__PURE__*/function (_React$Component) {
+  _inherits(SpotlightTransition, _React$Component);
 
-  function Transition() {
+  var _super = _createSuper(SpotlightTransition);
+
+  function SpotlightTransition() {
     var _this;
 
-    _classCallCheck(this, Transition);
+    _classCallCheck(this, SpotlightTransition);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -51,10 +59,10 @@ var Transition = /*#__PURE__*/function (_React$Component) {
     return _this;
   }
 
-  _createClass(Transition, [{
+  _createClass(SpotlightTransition, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(TransitionContext.Provider, {
+      return /*#__PURE__*/React.createElement(SpotlightTransitionContext.Provider, {
         value: {
           onExited: this.onExited,
           isOpen: hasChildren(this.props.children)
@@ -72,8 +80,16 @@ var Transition = /*#__PURE__*/function (_React$Component) {
     }
   }]);
 
-  return Transition;
+  return SpotlightTransition;
 }(React.Component);
+/**
+ * __Spotlight transition consumer__
+ *
+ * Used to consume the spotlight transition context through render props.
+ *
+ * @internal
+ */
+
 
-export var SpotlightTransitionConsumer = TransitionContext.Consumer;
-export default Transition;
+export var SpotlightTransitionConsumer = SpotlightTransitionContext.Consumer;
+export default SpotlightTransition;