@atlaskit/onboarding 10.4.0 → 10.5.0

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

@@ -1,106 +1,136 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["container"];
+var _excluded = ["text", "key"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-import React from 'react';
-import { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
+/** @jsx jsx */
+import React, { forwardRef } from 'react';
+import { css, jsx } from '@emotion/core';
+import Button, { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
+import Heading from '@atlaskit/heading';
 import { N0, N50A, N60A, P300 } from '@atlaskit/theme/colors';
-import Card from './card';
+import { createTheme } from '@atlaskit/theme/components';
+import { borderRadius, gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
+import { DialogActionItem, DialogActionItemContainer } from '../styled/dialog';
 import { spotlightButtonTheme } from './theme';
+var gridSize = getGridSize();
+var bodyStyles = css({
+  display: 'flex',
+  padding: "".concat(gridSize * 2, "px ").concat(gridSize * 2.5, "px"),
+  flexDirection: 'column'
+});
+var defaultHeaderStyles = css({
+  display: 'flex',
+  paddingBottom: "".concat(gridSize, "px"),
+  alignItems: 'baseline',
+  justifyContent: 'space-between'
+});
 
-var SpotlightCard = /*#__PURE__*/function (_React$Component) {
-  _inherits(SpotlightCard, _React$Component);
-
-  var _super = _createSuper(SpotlightCard);
+var DefaultHeader = function DefaultHeader(_ref) {
+  var children = _ref.children;
+  return jsx("div", {
+    css: defaultHeaderStyles
+  }, children);
+};
 
-  function SpotlightCard() {
-    _classCallCheck(this, SpotlightCard);
+var defaultFooterStyles = css({
+  display: 'flex',
+  paddingTop: "".concat(gridSize, "px"),
+  alignItems: 'center',
+  justifyContent: 'space-between'
+});
 
-    return _super.apply(this, arguments);
-  }
+var DefaultFooter = function DefaultFooter(_ref2) {
+  var children = _ref2.children;
+  return jsx("div", {
+    css: defaultFooterStyles
+  }, children);
+};
 
-  _createClass(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.createElement(ButtonTheme.Provider, {
-        value: spotlightButtonTheme
-      }, /*#__PURE__*/React.createElement(Card, {
-        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 = _objectWithoutProperties(_parent, _excluded);
+var containerStyles = css({
+  height: 'fit-content',
+  zIndex: layers.spotlight() + 1,
+  background: "var(--ds-background-discovery-bold, ".concat(P300, ")"),
+  borderRadius: "".concat(borderRadius(), "px"),
+  color: "var(--ds-text-inverse, ".concat(N0, ")"),
+  overflow: 'auto'
+});
+var containerShadowStyles = css({
+  boxShadow: "var(--ds-shadow-raised, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")
+});
+/**
+ * @deprecated
+ */
 
-          return _theme(function () {
-            return _objectSpread(_objectSpread({}, others), {}, {
-              container: _objectSpread({
-                background: "var(--ds-background-discovery-bold, ".concat(P300, ")"),
-                color: "var(--ds-text-inverse, ".concat(N0, ")"),
-                width: "".concat(Math.min(Math.max(width, 160), 600), "px"),
-                boxShadow: isFlat ? undefined : "var(--ds-shadow-raised, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")
-              }, container)
-            });
-          }, {});
-        }
-      }, children));
-    }
-  }]);
+var Theme = createTheme(function () {
+  return {
+    container: {}
+  };
+});
+/**
+ * @deprecated
+ */
 
-  return SpotlightCard;
-}(React.Component);
 /**
  * __Spotlight card__
  *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ * 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__*/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 jsx(ButtonTheme.Provider, {
+    value: spotlightButtonTheme
+  }, jsx(Theme.Provider, {
+    value: theme
+  }, jsx(Theme.Consumer, null, function (_ref3) {
+    var container = _ref3.container;
+    return 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' ? jsx("img", {
+      src: image,
+      alt: ""
+    }) : image, jsx("div", {
+      css: bodyStyles
+    }, heading || headingAfterElement ? jsx(Header, null, jsx(Heading, {
+      color: "inverse",
+      level: "h600",
+      as: "h4"
+    }, heading), headingAfterElement) : null, children, actions.length > 0 || actionsBeforeElement ? jsx(Footer, null, actionsBeforeElement || jsx("span", null), jsx(DialogActionItemContainer, null, actions.map(function (_ref4, idx) {
+      var text = _ref4.text,
+          key = _ref4.key,
+          rest = _objectWithoutProperties(_ref4, _excluded);
 
-
-_defineProperty(SpotlightCard, "defaultProps", {
-  width: 400,
-  isFlat: false,
-  components: {},
-  theme: function theme(themeFn) {
-    return themeFn();
-  }
+      return jsx(DialogActionItem, {
+        key: key || (typeof text === 'string' ? text : "".concat(idx))
+      }, jsx(Button, rest, text));
+    }))) : null));
+  })));
 });
-
-export default /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(SpotlightCard, _extends({}, props, {
-    innerRef: ref
-  }));
-});
+SpotlightCard.displayName = 'SpotlightCard';
+export default SpotlightCard;

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

@@ -1,4 +1,3 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -6,7 +5,6 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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; }
 
@@ -24,7 +22,7 @@ import { DialogImage } from '../styled/dialog';
 import SpotlightCard from './spotlight-card';
 import ValueChanged from './value-changed';
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "10.4.0";
+var packageVersion = "10.5.0";
 
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   _inherits(SpotlightDialog, _Component);
@@ -126,19 +124,11 @@ var SpotlightDialog = /*#__PURE__*/function (_Component) {
           disabled: focusLockDisabled,
           returnFocus: false,
           autoFocus: true
-        }, /*#__PURE__*/React.createElement(SpotlightCard, {
+        }, /*#__PURE__*/React.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 = _objectWithoutProperties(_parent, _excluded);
-
-            return _objectSpread(_objectSpread({}, others), {}, {
-              container: _objectSpread(_objectSpread(_objectSpread({}, container), style), animationStyles)
-            });
-          },
+          style: _objectSpread(_objectSpread({}, style), animationStyles)
+        }, /*#__PURE__*/React.createElement(SpotlightCard, {
+          testId: testId,
           width: dialogWidth,
           actions: actions,
           actionsBeforeElement: actionsBeforeElement,
@@ -152,7 +142,7 @@ var SpotlightDialog = /*#__PURE__*/function (_Component) {
           },
           heading: heading,
           headingAfterElement: headingAfterElement
-        }, children)));
+        }, children))));
       });
     }
   }]);

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

@@ -16,13 +16,12 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React, { createContext, PureComponent } from 'react';
 import memoizeOne from 'memoize-one';
+import noop from '@atlaskit/ds-lib/noop';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
 import Blanket from '../styled/blanket';
 import { Fade } from './animation';
 
-var noop = function noop() {};
-
 var _createContext = /*#__PURE__*/createContext(undefined),
     TargetConsumer = _createContext.Consumer,
     TargetProvider = _createContext.Provider;
@@ -45,9 +44,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/esm/components/spotlight-target.js

@@ -5,9 +5,11 @@ import { TargetConsumer } from './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/esm/components/spotlight-transition.js

@@ -11,9 +11,10 @@ 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';
+import noop from '@atlaskit/ds-lib/noop';
 var SpotlightTransitionContext = /*#__PURE__*/createContext({
   isOpen: true,
-  onExited: function onExited() {}
+  onExited: noop
 }); // checks if children exist and are truthy
 
 var hasChildren = function hasChildren(children) {
@@ -24,9 +25,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/esm/components/spotlight.js

@@ -8,11 +8,11 @@ import { SpotlightConsumer } from './spotlight-manager';
 /**
  * __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/esm/components/theme.js

@@ -146,6 +146,11 @@ function extract(newTheme, _ref) {
     return acc;
   }, {});
 }
+/**
+ * @deprecated
+ * Custom button themes are deprecated and will be removed in the future.
+ */
+
 
 export var spotlightButtonTheme = function spotlightButtonTheme(current, themeProps) {
   var _current = current(themeProps),
@@ -156,6 +161,11 @@ export var spotlightButtonTheme = function spotlightButtonTheme(current, themePr
     buttonStyles: _objectSpread(_objectSpread({}, buttonStyles), extract(spotlightTheme, themeProps))
   }, rest);
 };
+/**
+ * @deprecated
+ * Custom button themes are deprecated and will be removed in the future.
+ */
+
 export var modalButtonTheme = function modalButtonTheme(current, themeProps) {
   var _current2 = current(themeProps),
       buttonStyles = _current2.buttonStyles,

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

@@ -1,13 +1,7 @@
 import { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { SpotlightContext } from './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.
  */
 
 export default function useSpotlight() {

package/dist/esm/styled/target.js

@@ -19,7 +19,7 @@ var baseShadow = "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(P300,
 var easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
 var pulseKeyframes = 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)")
@@ -99,11 +99,13 @@ export 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)
  */
 
 export var Pulse = function Pulse(_ref3) {

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

@@ -1,5 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useEffect, useLayoutEffect, useState } from 'react';
+import { bind } from 'bind-event-listener';
 
 var getElementRect = function getElementRect(element) {
   var _element$getBoundingC = element.getBoundingClientRect(),
@@ -43,10 +44,10 @@ export var useElementBox = function useElementBox(element) {
       });
     };
 
-    window.addEventListener('resize', onResize);
-    return function () {
-      window.removeEventListener('resize', onResize);
-    };
+    return bind(window, {
+      type: 'resize',
+      listener: onResize
+    });
   }, [element]);
   return box;
 };

package/dist/esm/version.json

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

package/dist/types/components/modal.d.ts

@@ -33,14 +33,15 @@ declare type ModalProps = {
     experimental_shouldShowPrimaryButtonOnRight?: boolean;
 };
 /**
- * __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<ModalProps> {
+export default class BenefitsModal extends Component<ModalProps> {
     headerComponent: (props: ModalProps) => ElementType<HeaderComponentProps> | (() => JSX.Element);
     footerComponent: (props: ModalProps) => ElementType<FooterComponentProps> | (() => JSX.Element | null);
     render(): JSX.Element;

package/dist/types/components/spotlight-card.d.ts

@@ -1,7 +1,16 @@
+/** @jsx jsx */
 import React, { ComponentType, ReactNode, Ref } from 'react';
 import { ThemeProp } from '@atlaskit/theme/components';
 import { Actions } from '../types';
-import { CardTokens } from './card';
+/**
+ * @deprecated
+ */
+interface CardTokens {
+    /**
+     * @deprecated
+     */
+    container: Record<string, string | undefined>;
+}
 interface SpotlightCardProps {
     /**
      * Buttons to render in the footer
@@ -39,14 +48,19 @@ interface SpotlightCardProps {
      */
     isFlat?: boolean;
     /**
-     * The theme of the card
+     * @deprecated
+     * Theme prop is deprecated and will be removed in the future.
      */
     theme?: ThemeProp<CardTokens, {}>;
     /**
-     * Width of the card in pixels
+     * Width of the card in pixels.
      */
     width?: number;
-    innerRef?: Ref<HTMLElement> | null;
+    /**
+     * @deprecated
+     * Use `ref` instead.
+     */
+    innerRef?: Ref<HTMLDivElement> | null;
     /**
      * A `testId` prop is provided for specified elements,
      * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
@@ -54,10 +68,14 @@ interface SpotlightCardProps {
      */
     testId?: string;
 }
-declare const _default: React.ForwardRefExoticComponent<SpotlightCardProps & React.RefAttributes<HTMLElement>>;
 /**
  * __Spotlight card__
  *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ * 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)
  */
-export default _default;
+declare const SpotlightCard: React.ForwardRefExoticComponent<SpotlightCardProps & React.RefAttributes<HTMLDivElement>>;
+export default SpotlightCard;

package/dist/types/components/spotlight-manager.d.ts

@@ -27,16 +27,18 @@ interface SpotlightManagerProps {
     children: ReactNode;
     /**
      * @deprecated
-     * Replaces the wrapping fragment with component
+     * Component is deprecated and will be removed in the future.
      */
     component?: ElementType;
 }
 /**
  * __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)
  */
 export default class SpotlightManager extends PureComponent<SpotlightManagerProps, {
     spotlightCount: number;

package/dist/types/components/spotlight-target.d.ts

@@ -12,9 +12,11 @@ interface SpotlightTargetProps {
 /**
  * __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)
  */
 declare const SpotlightTarget: React.FC<SpotlightTargetProps>;
 export default SpotlightTarget;

package/dist/types/components/spotlight-transition.d.ts

@@ -16,9 +16,11 @@ interface SpotlightTransitionContextModel {
 /**
  * __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)
  */
 declare class SpotlightTransition extends React.Component<SpotlightTransitionProps, State> {
     static getDerivedStateFromProps(props: SpotlightTransitionProps, state: State): {

package/dist/types/components/spotlight.d.ts

@@ -86,11 +86,11 @@ export interface SpotlightProps {
 /**
  * __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)
  */
 declare const Spotlight: React.FC<SpotlightProps>;
 export default Spotlight;

package/dist/types/components/theme.d.ts

@@ -1,2 +1,10 @@
+/**
+ * @deprecated
+ * Custom button themes are deprecated and will be removed in the future.
+ */
 export declare const spotlightButtonTheme: (current: any, themeProps: Record<string, any>) => any;
+/**
+ * @deprecated
+ * Custom button themes are deprecated and will be removed in the future.
+ */
 export declare const modalButtonTheme: (current: any, themeProps: Record<string, any>) => any;

package/dist/types/components/use-spotlight.d.ts

@@ -1,11 +1,5 @@
 /**
- * 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.
  */
 export default function useSpotlight(): {
     isTargetRendered: (target: string) => boolean;