@atlaskit/spotlight 0.0.9 → 0.0.11

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/spotlight
 
+## 0.0.11
+
+### Patch Changes
+
+- [#200012](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/200012)
+  [`fa829c42fc74f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fa829c42fc74f) -
+  Create SpotlightMedia component.
+
+## 0.0.10
+
+### Patch Changes
+
+- [#198989](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/198989)
+  [`c4a86f623352d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c4a86f623352d) -
+  Allow Spotlight to be dismissed. Implement basic Spotlight Tour functionality.
+
 ## 0.0.9
 
 ### Patch Changes

package/dist/cjs/controllers/context.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SpotlightContextProvider = exports.SpotlightContext = void 0;
+exports.TourContextProvider = exports.TourContext = exports.SpotlightContextProvider = exports.SpotlightContext = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -26,14 +26,67 @@ var SpotlightContextProvider = exports.SpotlightContextProvider = function Spotl
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     placement = _useState2[0],
     setPlacement = _useState2[1];
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line react/react-in-jsx-scope
-    _react.default.createElement(SpotlightContext.Provider, {
-      value: {
-        placement: placement,
-        setPlacement: setPlacement
-      }
-    }, children)
-  );
+  return /*#__PURE__*/_react.default.createElement(SpotlightContext.Provider, {
+    value: {
+      placement: placement,
+      setPlacement: setPlacement
+    }
+  }, children);
+};
+
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
+/**
+ * __Tour context__
+ *
+ * A tour context is a way of managing multiple spotlights as steps in the same tour.
+ *
+ */
+var TourContext = exports.TourContext = /*#__PURE__*/(0, _react.createContext)({
+  currentStep: 1,
+  setCurrentStep: function setCurrentStep() {
+    return undefined;
+  },
+  next: function next() {
+    return undefined;
+  },
+  prev: function prev() {
+    return undefined;
+  }
+});
+
+/**
+ * __Tour context provider__
+ *
+ * A tour context provider is a way of managing multiple spotlights as steps in the same tour.
+ *
+ */
+var TourContextProvider = exports.TourContextProvider = function TourContextProvider(_ref2) {
+  var children = _ref2.children;
+  var _useState3 = (0, _react.useState)(1),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    currentStep = _useState4[0],
+    setCurrentStep = _useState4[1];
+  var next = function next() {
+    if (!currentStep) {
+      setCurrentStep(1);
+      return;
+    }
+    setCurrentStep(currentStep + 1);
+  };
+  var prev = function prev() {
+    if (!currentStep) {
+      setCurrentStep(1);
+      return;
+    }
+    setCurrentStep(currentStep - 1);
+  };
+  return /*#__PURE__*/_react.default.createElement(TourContext.Provider, {
+    value: {
+      currentStep: currentStep,
+      setCurrentStep: setCurrentStep,
+      next: next,
+      prev: prev
+    }
+  }, children);
 };

package/dist/cjs/index.js

@@ -69,6 +69,12 @@ Object.defineProperty(exports, "SpotlightHeadline", {
     return _headline.SpotlightHeadline;
   }
 });
+Object.defineProperty(exports, "SpotlightMedia", {
+  enumerable: true,
+  get: function get() {
+    return _media.SpotlightMedia;
+  }
+});
 Object.defineProperty(exports, "SpotlightPrimaryAction", {
   enumerable: true,
   get: function get() {
@@ -81,6 +87,18 @@ Object.defineProperty(exports, "SpotlightSecondaryAction", {
     return _secondaryAction.SpotlightSecondaryAction;
   }
 });
+Object.defineProperty(exports, "TourContext", {
+  enumerable: true,
+  get: function get() {
+    return _context.TourContext;
+  }
+});
+Object.defineProperty(exports, "TourContextProvider", {
+  enumerable: true,
+  get: function get() {
+    return _context.TourContextProvider;
+  }
+});
 var _spotlight = require("./ui/spotlight");
 var _body = require("./ui/body");
 var _header = require("./ui/header");
@@ -91,6 +109,8 @@ var _primaryAction = require("./ui/primary-action");
 var _secondaryAction = require("./ui/secondary-action");
 var _controls = require("./ui/controls");
 var _dismissControl = require("./ui/dismiss-control");
+var _media = require("./ui/media");
 var _popoverProvider = require("./ui/popover-provider");
 var _popoverContent = require("./ui/popover-content");
-var _popoverTarget = require("./ui/popover-target");
+var _popoverTarget = require("./ui/popover-target");
+var _context = require("./controllers/context");

package/dist/cjs/ui/dismiss-control/index.js

@@ -17,13 +17,15 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  *
  */
 var SpotlightDismissControl = exports.SpotlightDismissControl = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var testId = _ref.testId;
+  var onClick = _ref.onClick,
+    testId = _ref.testId;
   return /*#__PURE__*/_react.default.createElement(_new.IconButton, {
-    testId: testId,
-    ref: ref,
     appearance: "default",
-    spacing: "compact",
     icon: _cross.default,
-    label: "Close"
+    label: "Close",
+    onClick: onClick,
+    ref: ref,
+    spacing: "compact",
+    testId: testId
   });
 });

package/dist/cjs/ui/media/index.compiled.css

@@ -0,0 +1,2 @@
+._1bsbaq3k{width:295px}
+._4t3ihcro{height:135px}

package/dist/cjs/ui/media/index.js

@@ -0,0 +1,31 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpotlightMedia = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireWildcard(require("react"));
+var _compiled = require("@atlaskit/primitives/compiled");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var styles = {
+  root: "_1bsbaq3k _4t3ihcro"
+};
+/**
+ * __SpotlightMedia__
+ *
+ * `SpotlightMedia` is optional in a `Spotlight`.
+ *
+ */
+var SpotlightMedia = exports.SpotlightMedia = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var children = _ref.children,
+    testId = _ref.testId;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    ref: ref,
+    xcss: styles.root,
+    testId: testId
+  }, children);
+});

package/dist/cjs/ui/popover-content/index.compiled.css

@@ -0,0 +1,4 @@
+._3um015vq{visibility:hidden}
+._3um0ewfl{visibility:visible}
+._lcxv1wug{pointer-events:auto}
+._lcxvglyw{pointer-events:none}

package/dist/cjs/ui/popover-content/index.js

@@ -1,3 +1,4 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -5,10 +6,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PopoverContent = void 0;
+require("./index.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _popper = require("@atlaskit/popper");
 var _context = require("../../controllers/context");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var styles = {
+  visible: "_lcxv1wug _3um0ewfl",
+  hidden: "_lcxvglyw _3um015vq"
+};
 /**
  * The Spotlight card can be positioned in many different configurations, but the caret should always point to
  * the center of the target element. `@atlaskit/popper` uses `'top' | 'right' | 'bottom' | 'left'` values for
@@ -33,25 +41,25 @@ var popperPlacementMap = {
  */
 var PopoverContent = exports.PopoverContent = function PopoverContent(_ref) {
   var children = _ref.children,
-    placement = _ref.placement;
+    placement = _ref.placement,
+    _ref$isVisible = _ref.isVisible,
+    isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible;
   var _useContext = (0, _react.useContext)(_context.SpotlightContext),
     setPlacement = _useContext.setPlacement;
+  var visibility = isVisible ? 'visible' : 'hidden';
   (0, _react.useEffect)(function () {
     setPlacement(placement);
   }, [placement, setPlacement]);
-  return /*#__PURE__*/_react.default.createElement(_popper.Popper, {
+  return /*#__PURE__*/React.createElement(_popper.Popper, {
     offset: [0, 0],
     placement: popperPlacementMap[placement]
   }, function (_ref2) {
     var ref = _ref2.ref,
       style = _ref2.style;
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      _react.default.createElement("div", {
-        ref: ref,
-        style: style
-      }, children)
-    );
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref,
+      style: style,
+      className: (0, _runtime.ax)([styles[visibility]])
+    }, children);
   });
 };

package/dist/cjs/ui/spotlight/caret/index.compiled.css

@@ -1,4 +1,8 @@
-._1bsb7vkz{width:1pc}
-._4t3i7vkz{height:1pc}
+._13lit94y{border-top-left-radius:1px}
+._1bsbo7ao{width:15px}
+._1o0zt94y{border-bottom-right-radius:1px}
+._4t3io7ao{height:15px}
 ._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
+._mrkbt94y{border-bottom-left-radius:1px}
+._qrwqt94y{border-top-right-radius:1px}
 ._t9ecjyd4{transform:rotate(45deg)}

package/dist/cjs/ui/spotlight/caret/index.js

@@ -10,9 +10,18 @@ require("./index.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _context = require("../../../controllers/context");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
-  root: "_1bsb7vkz _4t3i7vkz _t9ecjyd4 _bfhkcdhy"
+  root: "_1bsbo7ao _4t3io7ao _t9ecjyd4 _bfhkcdhy",
+  'top-start': "_1o0zt94y",
+  'top-end': "_1o0zt94y",
+  'bottom-start': "_13lit94y",
+  'bottom-end': "_13lit94y",
+  'right-start': "_mrkbt94y",
+  'right-end': "_mrkbt94y",
+  'left-start': "_qrwqt94y",
+  'left-end': "_qrwqt94y"
 };
 /**
  * __Caret__
@@ -22,9 +31,11 @@ var styles = {
  */
 var Caret = exports.Caret = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var testId = _ref.testId;
+  var _useContext = (0, _react.useContext)(_context.SpotlightContext),
+    placement = _useContext.placement;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
     ref: ref,
-    className: (0, _runtime.ax)([styles.root])
+    className: (0, _runtime.ax)([styles.root, styles[placement]])
   });
 });

package/dist/cjs/ui/spotlight/index.compiled.css

@@ -1,16 +1,16 @@
 
 ._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}
 ._zulppxbi{gap:var(--ds-space-200,1pc)}
-._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._154imgjw{top:var(--ds-space-negative-200,-1pc)}
-._154iu2gc{top:var(--ds-space-100,8px)}
+._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._154i12x7{top:var(--ds-space-075,6px)}
+._154imgjw{top:var(--ds-space-negative-200,-1pc)}
 ._1bsbaq3k{width:295px}
 ._1e0c1txw{display:flex}
+._1ltv12x7{left:var(--ds-space-075,6px)}
 ._1ltvmgjw{left:var(--ds-space-negative-200,-1pc)}
-._1ltvu2gc{left:var(--ds-space-100,8px)}
+._1xi212x7{right:var(--ds-space-075,6px)}
 ._1xi2mgjw{right:var(--ds-space-negative-200,-1pc)}
-._1xi2u2gc{right:var(--ds-space-100,8px)}
 ._2lx21bp4{flex-direction:column}
+._94n512x7{bottom:var(--ds-space-075,6px)}
 ._94n5mgjw{bottom:var(--ds-space-negative-200,-1pc)}
-._94n5u2gc{bottom:var(--ds-space-100,8px)}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}

package/dist/cjs/ui/spotlight/index.js

@@ -20,14 +20,14 @@ var styles = {
   card: "_2rkopd34 _zulppxbi _1rjcutpp _kqswstnw _1bsbaq3k _1e0c1txw _2lx21bp4"
 };
 var placementStyles = {
-  'top-start': "_94n5u2gc _1xi2mgjw",
-  'top-end': "_94n5u2gc _1ltvmgjw",
-  'right-start': "_1ltvu2gc _94n5mgjw",
-  'right-end': "_1ltvu2gc _154imgjw",
-  'bottom-start': "_154iu2gc _1xi2mgjw",
-  'bottom-end': "_154iu2gc _1ltvmgjw",
-  'left-start': "_1xi2u2gc _94n5mgjw",
-  'left-end': "_1xi2u2gc _154imgjw"
+  'top-start': "_94n512x7 _1xi2mgjw",
+  'top-end': "_94n512x7 _1ltvmgjw",
+  'right-start': "_1ltv12x7 _94n5mgjw",
+  'right-end': "_1ltv12x7 _154imgjw",
+  'bottom-start': "_154i12x7 _1xi2mgjw",
+  'bottom-end': "_154i12x7 _1ltvmgjw",
+  'left-start': "_1xi212x7 _94n5mgjw",
+  'left-end': "_1xi212x7 _154imgjw"
 };
 /**
  * __Spotlight__

package/dist/es2019/controllers/context.js

@@ -13,14 +13,59 @@ export const SpotlightContextProvider = ({
   children
 }) => {
   const [placement, setPlacement] = useState('bottom-end');
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line react/react-in-jsx-scope
-    React.createElement(SpotlightContext.Provider, {
-      value: {
-        placement,
-        setPlacement
-      }
-    }, children)
-  );
+  return /*#__PURE__*/React.createElement(SpotlightContext.Provider, {
+    value: {
+      placement,
+      setPlacement
+    }
+  }, children);
+};
+
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
+/**
+ * __Tour context__
+ *
+ * A tour context is a way of managing multiple spotlights as steps in the same tour.
+ *
+ */
+export const TourContext = /*#__PURE__*/createContext({
+  currentStep: 1,
+  setCurrentStep: () => undefined,
+  next: () => undefined,
+  prev: () => undefined
+});
+
+/**
+ * __Tour context provider__
+ *
+ * A tour context provider is a way of managing multiple spotlights as steps in the same tour.
+ *
+ */
+export const TourContextProvider = ({
+  children
+}) => {
+  const [currentStep, setCurrentStep] = useState(1);
+  const next = () => {
+    if (!currentStep) {
+      setCurrentStep(1);
+      return;
+    }
+    setCurrentStep(currentStep + 1);
+  };
+  const prev = () => {
+    if (!currentStep) {
+      setCurrentStep(1);
+      return;
+    }
+    setCurrentStep(currentStep - 1);
+  };
+  return /*#__PURE__*/React.createElement(TourContext.Provider, {
+    value: {
+      currentStep,
+      setCurrentStep,
+      next,
+      prev
+    }
+  }, children);
 };

package/dist/es2019/index.js

@@ -8,6 +8,8 @@ export { SpotlightPrimaryAction } from './ui/primary-action';
 export { SpotlightSecondaryAction } from './ui/secondary-action';
 export { SpotlightControls } from './ui/controls';
 export { SpotlightDismissControl } from './ui/dismiss-control';
+export { SpotlightMedia } from './ui/media';
 export { PopoverProvider } from './ui/popover-provider';
 export { PopoverContent } from './ui/popover-content';
-export { PopoverTarget } from './ui/popover-target';
+export { PopoverTarget } from './ui/popover-target';
+export { TourContext, TourContextProvider } from './controllers/context';

package/dist/es2019/ui/dismiss-control/index.js

@@ -8,14 +8,16 @@ import CrossIcon from '@atlaskit/icon/core/cross';
  *
  */
 export const SpotlightDismissControl = /*#__PURE__*/forwardRef(({
+  onClick,
   testId
 }, ref) => {
   return /*#__PURE__*/React.createElement(IconButton, {
-    testId: testId,
-    ref: ref,
     appearance: "default",
-    spacing: "compact",
     icon: CrossIcon,
-    label: "Close"
+    label: "Close",
+    onClick: onClick,
+    ref: ref,
+    spacing: "compact",
+    testId: testId
   });
 });

package/dist/es2019/ui/media/index.compiled.css

@@ -0,0 +1,2 @@
+._1bsbaq3k{width:295px}
+._4t3ihcro{height:135px}

package/dist/es2019/ui/media/index.js

@@ -0,0 +1,24 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { forwardRef } from 'react';
+import { Box } from '@atlaskit/primitives/compiled';
+const styles = {
+  root: "_1bsbaq3k _4t3ihcro"
+};
+/**
+ * __SpotlightMedia__
+ *
+ * `SpotlightMedia` is optional in a `Spotlight`.
+ *
+ */
+export const SpotlightMedia = /*#__PURE__*/forwardRef(({
+  children,
+  testId
+}, ref) => {
+  return /*#__PURE__*/React.createElement(Box, {
+    ref: ref,
+    xcss: styles.root,
+    testId: testId
+  }, children);
+});

package/dist/es2019/ui/popover-content/index.compiled.css

@@ -0,0 +1,4 @@
+._3um015vq{visibility:hidden}
+._3um0ewfl{visibility:visible}
+._lcxv1wug{pointer-events:auto}
+._lcxvglyw{pointer-events:none}

package/dist/es2019/ui/popover-content/index.js

@@ -1,6 +1,14 @@
-import React, { useContext, useEffect } from "react";
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useContext, useEffect } from 'react';
 import { Popper } from '@atlaskit/popper';
 import { SpotlightContext } from '../../controllers/context';
+const styles = {
+  visible: "_lcxv1wug _3um0ewfl",
+  hidden: "_lcxvglyw _3um015vq"
+};
 /**
  * The Spotlight card can be positioned in many different configurations, but the caret should always point to
  * the center of the target element. `@atlaskit/popper` uses `'top' | 'right' | 'bottom' | 'left'` values for
@@ -25,11 +33,13 @@ const popperPlacementMap = {
  */
 export const PopoverContent = ({
   children,
-  placement
+  placement,
+  isVisible = true
 }) => {
   const {
     setPlacement
   } = useContext(SpotlightContext);
+  const visibility = isVisible ? 'visible' : 'hidden';
   useEffect(() => {
     setPlacement(placement);
   }, [placement, setPlacement]);
@@ -39,11 +49,9 @@ export const PopoverContent = ({
   }, ({
     ref,
     style
-  }) =>
-  /*#__PURE__*/
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-  React.createElement("div", {
+  }) => /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    style: style
+    style: style,
+    className: ax([styles[visibility]])
   }, children));
 };

package/dist/es2019/ui/spotlight/caret/index.compiled.css

@@ -1,4 +1,8 @@
-._1bsb7vkz{width:1pc}
-._4t3i7vkz{height:1pc}
+._13lit94y{border-top-left-radius:1px}
+._1bsbo7ao{width:15px}
+._1o0zt94y{border-bottom-right-radius:1px}
+._4t3io7ao{height:15px}
 ._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
+._mrkbt94y{border-bottom-left-radius:1px}
+._qrwqt94y{border-top-right-radius:1px}
 ._t9ecjyd4{transform:rotate(45deg)}

package/dist/es2019/ui/spotlight/caret/index.js

@@ -2,9 +2,18 @@
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useContext } from 'react';
+import { SpotlightContext } from '../../../controllers/context';
 const styles = {
-  root: "_1bsb7vkz _4t3i7vkz _t9ecjyd4 _bfhkcdhy"
+  root: "_1bsbo7ao _4t3io7ao _t9ecjyd4 _bfhkcdhy",
+  'top-start': "_1o0zt94y",
+  'top-end': "_1o0zt94y",
+  'bottom-start': "_13lit94y",
+  'bottom-end': "_13lit94y",
+  'right-start': "_mrkbt94y",
+  'right-end': "_mrkbt94y",
+  'left-start': "_qrwqt94y",
+  'left-end': "_qrwqt94y"
 };
 /**
  * __Caret__
@@ -15,9 +24,12 @@ const styles = {
 export const Caret = /*#__PURE__*/forwardRef(({
   testId
 }, ref) => {
+  const {
+    placement
+  } = useContext(SpotlightContext);
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
     ref: ref,
-    className: ax([styles.root])
+    className: ax([styles.root, styles[placement]])
   });
 });

package/dist/es2019/ui/spotlight/index.compiled.css

@@ -1,16 +1,16 @@
 
 ._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}
 ._zulppxbi{gap:var(--ds-space-200,1pc)}
-._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._154imgjw{top:var(--ds-space-negative-200,-1pc)}
-._154iu2gc{top:var(--ds-space-100,8px)}
+._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._154i12x7{top:var(--ds-space-075,6px)}
+._154imgjw{top:var(--ds-space-negative-200,-1pc)}
 ._1bsbaq3k{width:295px}
 ._1e0c1txw{display:flex}
+._1ltv12x7{left:var(--ds-space-075,6px)}
 ._1ltvmgjw{left:var(--ds-space-negative-200,-1pc)}
-._1ltvu2gc{left:var(--ds-space-100,8px)}
+._1xi212x7{right:var(--ds-space-075,6px)}
 ._1xi2mgjw{right:var(--ds-space-negative-200,-1pc)}
-._1xi2u2gc{right:var(--ds-space-100,8px)}
 ._2lx21bp4{flex-direction:column}
+._94n512x7{bottom:var(--ds-space-075,6px)}
 ._94n5mgjw{bottom:var(--ds-space-negative-200,-1pc)}
-._94n5u2gc{bottom:var(--ds-space-100,8px)}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}

package/dist/es2019/ui/spotlight/index.js

@@ -12,14 +12,14 @@ const styles = {
   card: "_2rkopd34 _zulppxbi _1rjcutpp _kqswstnw _1bsbaq3k _1e0c1txw _2lx21bp4"
 };
 const placementStyles = {
-  'top-start': "_94n5u2gc _1xi2mgjw",
-  'top-end': "_94n5u2gc _1ltvmgjw",
-  'right-start': "_1ltvu2gc _94n5mgjw",
-  'right-end': "_1ltvu2gc _154imgjw",
-  'bottom-start': "_154iu2gc _1xi2mgjw",
-  'bottom-end': "_154iu2gc _1ltvmgjw",
-  'left-start': "_1xi2u2gc _94n5mgjw",
-  'left-end': "_1xi2u2gc _154imgjw"
+  'top-start': "_94n512x7 _1xi2mgjw",
+  'top-end': "_94n512x7 _1ltvmgjw",
+  'right-start': "_1ltv12x7 _94n5mgjw",
+  'right-end': "_1ltv12x7 _154imgjw",
+  'bottom-start': "_154i12x7 _1xi2mgjw",
+  'bottom-end': "_154i12x7 _1ltvmgjw",
+  'left-start': "_1xi212x7 _94n5mgjw",
+  'left-end': "_1xi212x7 _154imgjw"
 };
 /**
  * __Spotlight__

package/dist/esm/controllers/context.js

@@ -18,14 +18,67 @@ export var SpotlightContextProvider = function SpotlightContextProvider(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     placement = _useState2[0],
     setPlacement = _useState2[1];
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line react/react-in-jsx-scope
-    React.createElement(SpotlightContext.Provider, {
-      value: {
-        placement: placement,
-        setPlacement: setPlacement
-      }
-    }, children)
-  );
+  return /*#__PURE__*/React.createElement(SpotlightContext.Provider, {
+    value: {
+      placement: placement,
+      setPlacement: setPlacement
+    }
+  }, children);
+};
+
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
+/**
+ * __Tour context__
+ *
+ * A tour context is a way of managing multiple spotlights as steps in the same tour.
+ *
+ */
+export var TourContext = /*#__PURE__*/createContext({
+  currentStep: 1,
+  setCurrentStep: function setCurrentStep() {
+    return undefined;
+  },
+  next: function next() {
+    return undefined;
+  },
+  prev: function prev() {
+    return undefined;
+  }
+});
+
+/**
+ * __Tour context provider__
+ *
+ * A tour context provider is a way of managing multiple spotlights as steps in the same tour.
+ *
+ */
+export var TourContextProvider = function TourContextProvider(_ref2) {
+  var children = _ref2.children;
+  var _useState3 = useState(1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentStep = _useState4[0],
+    setCurrentStep = _useState4[1];
+  var next = function next() {
+    if (!currentStep) {
+      setCurrentStep(1);
+      return;
+    }
+    setCurrentStep(currentStep + 1);
+  };
+  var prev = function prev() {
+    if (!currentStep) {
+      setCurrentStep(1);
+      return;
+    }
+    setCurrentStep(currentStep - 1);
+  };
+  return /*#__PURE__*/React.createElement(TourContext.Provider, {
+    value: {
+      currentStep: currentStep,
+      setCurrentStep: setCurrentStep,
+      next: next,
+      prev: prev
+    }
+  }, children);
 };

package/dist/esm/index.js

@@ -8,6 +8,8 @@ export { SpotlightPrimaryAction } from './ui/primary-action';
 export { SpotlightSecondaryAction } from './ui/secondary-action';
 export { SpotlightControls } from './ui/controls';
 export { SpotlightDismissControl } from './ui/dismiss-control';
+export { SpotlightMedia } from './ui/media';
 export { PopoverProvider } from './ui/popover-provider';
 export { PopoverContent } from './ui/popover-content';
-export { PopoverTarget } from './ui/popover-target';
+export { PopoverTarget } from './ui/popover-target';
+export { TourContext, TourContextProvider } from './controllers/context';

package/dist/esm/ui/dismiss-control/index.js

@@ -8,13 +8,15 @@ import CrossIcon from '@atlaskit/icon/core/cross';
  *
  */
 export var SpotlightDismissControl = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var testId = _ref.testId;
+  var onClick = _ref.onClick,
+    testId = _ref.testId;
   return /*#__PURE__*/React.createElement(IconButton, {
-    testId: testId,
-    ref: ref,
     appearance: "default",
-    spacing: "compact",
     icon: CrossIcon,
-    label: "Close"
+    label: "Close",
+    onClick: onClick,
+    ref: ref,
+    spacing: "compact",
+    testId: testId
   });
 });

package/dist/esm/ui/media/index.compiled.css

@@ -0,0 +1,2 @@
+._1bsbaq3k{width:295px}
+._4t3ihcro{height:135px}

package/dist/esm/ui/media/index.js

@@ -0,0 +1,23 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { forwardRef } from 'react';
+import { Box } from '@atlaskit/primitives/compiled';
+var styles = {
+  root: "_1bsbaq3k _4t3ihcro"
+};
+/**
+ * __SpotlightMedia__
+ *
+ * `SpotlightMedia` is optional in a `Spotlight`.
+ *
+ */
+export var SpotlightMedia = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(Box, {
+    ref: ref,
+    xcss: styles.root,
+    testId: testId
+  }, children);
+});

package/dist/esm/ui/popover-content/index.compiled.css

@@ -0,0 +1,4 @@
+._3um015vq{visibility:hidden}
+._3um0ewfl{visibility:visible}
+._lcxv1wug{pointer-events:auto}
+._lcxvglyw{pointer-events:none}

package/dist/esm/ui/popover-content/index.js

@@ -1,6 +1,14 @@
-import React, { useContext, useEffect } from "react";
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useContext, useEffect } from 'react';
 import { Popper } from '@atlaskit/popper';
 import { SpotlightContext } from '../../controllers/context';
+var styles = {
+  visible: "_lcxv1wug _3um0ewfl",
+  hidden: "_lcxvglyw _3um015vq"
+};
 /**
  * The Spotlight card can be positioned in many different configurations, but the caret should always point to
  * the center of the target element. `@atlaskit/popper` uses `'top' | 'right' | 'bottom' | 'left'` values for
@@ -25,9 +33,12 @@ var popperPlacementMap = {
  */
 export var PopoverContent = function PopoverContent(_ref) {
   var children = _ref.children,
-    placement = _ref.placement;
+    placement = _ref.placement,
+    _ref$isVisible = _ref.isVisible,
+    isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible;
   var _useContext = useContext(SpotlightContext),
     setPlacement = _useContext.setPlacement;
+  var visibility = isVisible ? 'visible' : 'hidden';
   useEffect(function () {
     setPlacement(placement);
   }, [placement, setPlacement]);
@@ -37,13 +48,10 @@ export var PopoverContent = function PopoverContent(_ref) {
   }, function (_ref2) {
     var ref = _ref2.ref,
       style = _ref2.style;
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      React.createElement("div", {
-        ref: ref,
-        style: style
-      }, children)
-    );
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref,
+      style: style,
+      className: ax([styles[visibility]])
+    }, children);
   });
 };

package/dist/esm/ui/spotlight/caret/index.compiled.css

@@ -1,4 +1,8 @@
-._1bsb7vkz{width:1pc}
-._4t3i7vkz{height:1pc}
+._13lit94y{border-top-left-radius:1px}
+._1bsbo7ao{width:15px}
+._1o0zt94y{border-bottom-right-radius:1px}
+._4t3io7ao{height:15px}
 ._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
+._mrkbt94y{border-bottom-left-radius:1px}
+._qrwqt94y{border-top-right-radius:1px}
 ._t9ecjyd4{transform:rotate(45deg)}

package/dist/esm/ui/spotlight/caret/index.js

@@ -2,9 +2,18 @@
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useContext } from 'react';
+import { SpotlightContext } from '../../../controllers/context';
 var styles = {
-  root: "_1bsb7vkz _4t3i7vkz _t9ecjyd4 _bfhkcdhy"
+  root: "_1bsbo7ao _4t3io7ao _t9ecjyd4 _bfhkcdhy",
+  'top-start': "_1o0zt94y",
+  'top-end': "_1o0zt94y",
+  'bottom-start': "_13lit94y",
+  'bottom-end': "_13lit94y",
+  'right-start': "_mrkbt94y",
+  'right-end': "_mrkbt94y",
+  'left-start': "_qrwqt94y",
+  'left-end': "_qrwqt94y"
 };
 /**
  * __Caret__
@@ -14,9 +23,11 @@ var styles = {
  */
 export var Caret = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var testId = _ref.testId;
+  var _useContext = useContext(SpotlightContext),
+    placement = _useContext.placement;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
     ref: ref,
-    className: ax([styles.root])
+    className: ax([styles.root, styles[placement]])
   });
 });

package/dist/esm/ui/spotlight/index.compiled.css

@@ -1,16 +1,16 @@
 
 ._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}
 ._zulppxbi{gap:var(--ds-space-200,1pc)}
-._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._154imgjw{top:var(--ds-space-negative-200,-1pc)}
-._154iu2gc{top:var(--ds-space-100,8px)}
+._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._154i12x7{top:var(--ds-space-075,6px)}
+._154imgjw{top:var(--ds-space-negative-200,-1pc)}
 ._1bsbaq3k{width:295px}
 ._1e0c1txw{display:flex}
+._1ltv12x7{left:var(--ds-space-075,6px)}
 ._1ltvmgjw{left:var(--ds-space-negative-200,-1pc)}
-._1ltvu2gc{left:var(--ds-space-100,8px)}
+._1xi212x7{right:var(--ds-space-075,6px)}
 ._1xi2mgjw{right:var(--ds-space-negative-200,-1pc)}
-._1xi2u2gc{right:var(--ds-space-100,8px)}
 ._2lx21bp4{flex-direction:column}
+._94n512x7{bottom:var(--ds-space-075,6px)}
 ._94n5mgjw{bottom:var(--ds-space-negative-200,-1pc)}
-._94n5u2gc{bottom:var(--ds-space-100,8px)}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}

package/dist/esm/ui/spotlight/index.js

@@ -12,14 +12,14 @@ var styles = {
   card: "_2rkopd34 _zulppxbi _1rjcutpp _kqswstnw _1bsbaq3k _1e0c1txw _2lx21bp4"
 };
 var placementStyles = {
-  'top-start': "_94n5u2gc _1xi2mgjw",
-  'top-end': "_94n5u2gc _1ltvmgjw",
-  'right-start': "_1ltvu2gc _94n5mgjw",
-  'right-end': "_1ltvu2gc _154imgjw",
-  'bottom-start': "_154iu2gc _1xi2mgjw",
-  'bottom-end': "_154iu2gc _1ltvmgjw",
-  'left-start': "_1xi2u2gc _94n5mgjw",
-  'left-end': "_1xi2u2gc _154imgjw"
+  'top-start': "_94n512x7 _1xi2mgjw",
+  'top-end': "_94n512x7 _1ltvmgjw",
+  'right-start': "_1ltv12x7 _94n5mgjw",
+  'right-end': "_1ltv12x7 _154imgjw",
+  'bottom-start': "_154i12x7 _1xi2mgjw",
+  'bottom-end': "_154i12x7 _1ltvmgjw",
+  'left-start': "_1xi212x7 _94n5mgjw",
+  'left-end': "_1xi212x7 _154imgjw"
 };
 /**
  * __Spotlight__

package/dist/types/controllers/context.d.ts

@@ -8,4 +8,26 @@ export declare const SpotlightContext: React.Context<SpotlightContextType>;
 export declare const SpotlightContextProvider: ({ children }: {
     children: ReactNode;
 }) => React.JSX.Element;
+interface TourContextType {
+    currentStep: number | undefined;
+    setCurrentStep: Dispatch<SetStateAction<number | undefined>>;
+    next: () => void;
+    prev: () => void;
+}
+/**
+ * __Tour context__
+ *
+ * A tour context is a way of managing multiple spotlights as steps in the same tour.
+ *
+ */
+export declare const TourContext: React.Context<TourContextType>;
+/**
+ * __Tour context provider__
+ *
+ * A tour context provider is a way of managing multiple spotlights as steps in the same tour.
+ *
+ */
+export declare const TourContextProvider: ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;
 export {};

package/dist/types/index.d.ts

@@ -8,6 +8,8 @@ export { SpotlightPrimaryAction, type SpotlightPrimaryActionProps } from './ui/p
 export { SpotlightSecondaryAction, type SpotlightSecondaryActionProps, } from './ui/secondary-action';
 export { SpotlightControls, type SpotlightControlsProps } from './ui/controls';
 export { SpotlightDismissControl, type SpotlightDismissControlProps } from './ui/dismiss-control';
+export { SpotlightMedia, type SpotlightMediaProps } from './ui/media';
 export { PopoverProvider } from './ui/popover-provider';
 export { PopoverContent } from './ui/popover-content';
 export { PopoverTarget } from './ui/popover-target';
+export { TourContext, TourContextProvider } from './controllers/context';

package/dist/types/ui/body/index.d.ts

@@ -18,4 +18,4 @@ export interface SpotlightBodyProps {
  * `SpotlightBody` is required in a `Spotlight`. The content should be brief and direct to elaborate on the intent.
  *
  */
-export declare const SpotlightBody: React.ForwardRefExoticComponent<SpotlightBodyProps & React.RefAttributes<HTMLHeadingElement>>;
+export declare const SpotlightBody: React.ForwardRefExoticComponent<SpotlightBodyProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/ui/dismiss-control/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type IconButtonProps } from '@atlaskit/button/new';
 export interface SpotlightDismissControlProps {
     /**
      * A `testId` prop is provided for specified elements, which is a unique
@@ -6,6 +7,10 @@ export interface SpotlightDismissControlProps {
      * serving as a hook for automated tests
      */
     testId?: string;
+    /**
+     * The action to take when the button is clicked.
+     */
+    onClick?: IconButtonProps['onClick'];
 }
 /**
  * __SpotlightDismissControl__

package/dist/types/ui/media/index.d.ts

@@ -0,0 +1,21 @@
+import React, { type ReactNode } from 'react';
+export interface SpotlightMediaProps {
+    /**
+     * 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,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
+    /**
+     * Textual content is required for all spotlights. It should be brief and direct
+     * to quickly elaborate on the intent.
+     */
+    children: ReactNode;
+}
+/**
+ * __SpotlightMedia__
+ *
+ * `SpotlightMedia` is optional in a `Spotlight`.
+ *
+ */
+export declare const SpotlightMedia: React.ForwardRefExoticComponent<SpotlightMediaProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/ui/popover-content/index.d.ts

@@ -1,11 +1,18 @@
-import React, { type ReactNode } from "react";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
 import type { Placement } from '../../types';
+interface PopoverContentProps {
+    placement: Placement;
+    isVisible?: boolean;
+    children: ReactNode;
+}
 /**
  * __PopoverContent__
  *
  * A `PopoverContent` is the element that is shown as a popover.
  */
-export declare const PopoverContent: ({ children, placement }: {
-    children: ReactNode;
-    placement: Placement;
-}) => React.JSX.Element;
+export declare const PopoverContent: ({ children, placement, isVisible }: PopoverContentProps) => JSX.Element;
+export {};

package/dist/types-ts4.5/controllers/context.d.ts

@@ -8,4 +8,26 @@ export declare const SpotlightContext: React.Context<SpotlightContextType>;
 export declare const SpotlightContextProvider: ({ children }: {
     children: ReactNode;
 }) => React.JSX.Element;
+interface TourContextType {
+    currentStep: number | undefined;
+    setCurrentStep: Dispatch<SetStateAction<number | undefined>>;
+    next: () => void;
+    prev: () => void;
+}
+/**
+ * __Tour context__
+ *
+ * A tour context is a way of managing multiple spotlights as steps in the same tour.
+ *
+ */
+export declare const TourContext: React.Context<TourContextType>;
+/**
+ * __Tour context provider__
+ *
+ * A tour context provider is a way of managing multiple spotlights as steps in the same tour.
+ *
+ */
+export declare const TourContextProvider: ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/index.d.ts

@@ -8,6 +8,8 @@ export { SpotlightPrimaryAction, type SpotlightPrimaryActionProps } from './ui/p
 export { SpotlightSecondaryAction, type SpotlightSecondaryActionProps, } from './ui/secondary-action';
 export { SpotlightControls, type SpotlightControlsProps } from './ui/controls';
 export { SpotlightDismissControl, type SpotlightDismissControlProps } from './ui/dismiss-control';
+export { SpotlightMedia, type SpotlightMediaProps } from './ui/media';
 export { PopoverProvider } from './ui/popover-provider';
 export { PopoverContent } from './ui/popover-content';
 export { PopoverTarget } from './ui/popover-target';
+export { TourContext, TourContextProvider } from './controllers/context';

package/dist/types-ts4.5/ui/body/index.d.ts

@@ -18,4 +18,4 @@ export interface SpotlightBodyProps {
  * `SpotlightBody` is required in a `Spotlight`. The content should be brief and direct to elaborate on the intent.
  *
  */
-export declare const SpotlightBody: React.ForwardRefExoticComponent<SpotlightBodyProps & React.RefAttributes<HTMLHeadingElement>>;
+export declare const SpotlightBody: React.ForwardRefExoticComponent<SpotlightBodyProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types-ts4.5/ui/dismiss-control/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type IconButtonProps } from '@atlaskit/button/new';
 export interface SpotlightDismissControlProps {
     /**
      * A `testId` prop is provided for specified elements, which is a unique
@@ -6,6 +7,10 @@ export interface SpotlightDismissControlProps {
      * serving as a hook for automated tests
      */
     testId?: string;
+    /**
+     * The action to take when the button is clicked.
+     */
+    onClick?: IconButtonProps['onClick'];
 }
 /**
  * __SpotlightDismissControl__

package/dist/types-ts4.5/ui/media/index.d.ts

@@ -0,0 +1,21 @@
+import React, { type ReactNode } from 'react';
+export interface SpotlightMediaProps {
+    /**
+     * 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,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
+    /**
+     * Textual content is required for all spotlights. It should be brief and direct
+     * to quickly elaborate on the intent.
+     */
+    children: ReactNode;
+}
+/**
+ * __SpotlightMedia__
+ *
+ * `SpotlightMedia` is optional in a `Spotlight`.
+ *
+ */
+export declare const SpotlightMedia: React.ForwardRefExoticComponent<SpotlightMediaProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types-ts4.5/ui/popover-content/index.d.ts

@@ -1,11 +1,18 @@
-import React, { type ReactNode } from "react";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
 import type { Placement } from '../../types';
+interface PopoverContentProps {
+    placement: Placement;
+    isVisible?: boolean;
+    children: ReactNode;
+}
 /**
  * __PopoverContent__
  *
  * A `PopoverContent` is the element that is shown as a popover.
  */
-export declare const PopoverContent: ({ children, placement }: {
-    children: ReactNode;
-    placement: Placement;
-}) => React.JSX.Element;
+export declare const PopoverContent: ({ children, placement, isVisible }: PopoverContentProps) => JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/spotlight",
-	"version": "0.0.9",
+	"version": "0.0.11",
 	"description": "A spotlight introduces users to various points of interest across Atlassian through focused messages or multi-step tours.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,6 +33,7 @@
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^27.11.0",
+		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/popper": "^7.1.0",
 		"@atlaskit/primitives": "^14.11.0",
 		"@atlaskit/tokens": "^6.0.0",