@atlaskit/spotlight 0.1.0 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/spotlight
 
+## 0.2.1
+
+### Patch Changes
+
+- [`3b5b4a919aaaf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3b5b4a919aaaf) -
+  Internal changes to how border radius is applied.
+- Updated dependencies
+
+## 0.2.0
+
+### Minor Changes
+
+- [`7663adf335f3f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7663adf335f3f) -
+  Rename `Spotlight` to `SpotlightCard`. Removed `TourContext` - please use `useState` to manage
+  Spotlight visibility instead.
+
 ## 0.1.0
 
 ### Minor Changes

package/constellation/index/examples.mdx

@@ -14,9 +14,13 @@ Ideally, spotlights should only have a single step so as not to overwhelm users
 information. Try and combine or eliminate tasks where possible. Dismiss functionality is required.
 Don't force users to participate.
 
-To show/hide the `Spotlight`, simply use a `useState` to control the `isVisible` prop on
-`PopoverContent`. To position the `Spotlight`, use `PopoverProvider`, `PopoverTarget` and
-`PopoverContent` and set the
+By design `@atlaskit/spotlight` does not have a blanket, scroll-lock, focus-trap, or click-outside
+to dismiss functionality. This is to ensure the user is not hijacked into the spotlight experience,
+and can opt-in if they are interested.
+
+To show/hide the `SpotlightCard`, simply use a `useState` to control the `isVisible` prop on
+`PopoverContent`. To position the `SpotlightCard`, use `PopoverProvider`, `PopoverTarget` and
+`PopoverContent` and set the `placement` prop.
 
 <Example Component={SingleStepExample} packageName="@atlaskit/spinner" />
 
@@ -31,20 +35,16 @@ and therefore will cause the entire `App` to re-render every time a new spotligh
 
 ## Placements
 
-Spotlight placements are static — they do not change as the user scrolls, or if the `PopoverContent`
-overflows out of the viewport. Make sure to choose a placement that ensures the `Spotlight` is
+Spotlight placements are static. They do not change as the user scrolls, or if the `PopoverContent`
+overflows out of the viewport. Make sure to choose a placement that ensures the `SpotlightCard` is
 displayed in full.
 
-By design `@atlaskit/spotlight` does not have a blanket, scroll-lock, focus-trap, or click-outside
-to dismiss functionality. This is to ensure the user is not hijacked into the spotlight experience,
-and can opt-in if they are interested.
-
 <Example Component={PlacementsExample} packageName="@atlaskit/spinner" />
 
 ## Media
 
-Media is optional for a `Spotlight`. However if it is used it must be 295px width X 135px height.
-This is to ensure correct reflow on smaller viewports.
+Media is optional for a `SpotlightCard`. However if it is used it must be 295px width X 135px
+height. This is to ensure correct reflow on smaller viewports.
 
 Media can be an image, video, animation, or any other visual aid to communicate spotlight intent.
 
@@ -52,8 +52,8 @@ Media can be an image, video, animation, or any other visual aid to communicate
 
 ## Controls
 
-`SpotlightDismissControl` is required for all `Spotlight` components. It **must** be the first
-focusable element on the `Spotlight` card. This means that when defining the controls,
+`SpotlightDismissControl` is required for all `SpotlightCard` components. It **must** be the first
+focusable element on the `SpotlightCard` card. This means that when defining the controls,
 `SpotlightDismissControl` should appear first in the DOM order:
 
 ```tsx
@@ -67,7 +67,8 @@ Internally, `SpotlighControls` applies `flex-direction: row-reverse;` so that
 `SpotlightDismissControl` visually displays after `SpotlightShowMoreControl` while maintaining
 correct tabbing order.
 
-`SpotlightShowMoreControl` is optional for `Spotlight` components. It should be used to allow users
-to opt out of a spotlight experience, or understand why they are seeing the spotlight experience.
+`SpotlightShowMoreControl` is optional for `SpotlightCard` components. It should be used to allow
+users to opt out of a spotlight experience, or understand why they are seeing the spotlight
+experience.
 
 <Example Component={ControlsExample} packageName="@atlaskit/spinner" />

package/constellation/index/props.mdx

@@ -5,7 +5,7 @@ description: A spotlight focuses attention on a specific part of the UI, like a
 props:
   packageName: '@atlaskit/spotlight'
   exports:
-    - Spotlight
+    - SpotlightCard
     - SpotlightActions
     - SpotlightBody
     - SpotlightControls
@@ -23,9 +23,9 @@ props:
     - PopoverTarget
 ---
 
-## Spotlight props
+## SpotlightCard props
 
-<TSMorphProps exportName="Spotlight" packageName="@atlaskit/spotlight" />
+<TSMorphProps exportName="SpotlightCard" packageName="@atlaskit/spotlight" />
 
 ## SpotlightActions props
 

package/constellation/index/usage.mdx

@@ -81,6 +81,29 @@ frequent spotlights, consider simplifying the core experience instead.
 - Keep content concise and avoid motion that could be disruptive.
 - Ensure the carat and spotlight are not truncated by the browser bounds.
 
+### Focus Management
+
+#### Single step spotlights
+
+The spotlight should **not** grab focus. Allow users to tab onto the spotlight in normal tabbing
+order. By default the tabbable elements in spotlight will be ordered directly after the target
+element to give screen-reader/keyboard users context about what the spotlight is related to.
+
+The first focusable element in the spotlight should **always** be the dismiss button at the top of
+the card. This will happen automatically even when a show-more button is visually ahead of it. So
+product engineers shouldn't need to do any additional work.
+
+#### Multi step spotlights
+
+The first spotlight in a tour should **not** grab focus. Allow users to tab onto the spotlight in
+normal tabbing order.
+
+The second (and subsequent step) spotlights **should** grab focus. This is because screen-reader
+users have no other method of knowing where the new spotlight steps are shown.
+
+Once the tour completes, focus should be returned to the target element for the first step. This
+allows screen-reader users to easily perform the actions just taught to them via the spotlight tour.
+
 ## Content Guidelines
 
 ## Headline

package/dist/cjs/controllers/context.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TourContextProvider = exports.TourContext = exports.SpotlightContextProvider = exports.SpotlightContext = void 0;
+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); }
@@ -32,61 +32,4 @@ var SpotlightContextProvider = exports.SpotlightContextProvider = function Spotl
       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

@@ -21,12 +21,6 @@ Object.defineProperty(exports, "PopoverTarget", {
     return _popoverTarget.PopoverTarget;
   }
 });
-Object.defineProperty(exports, "Spotlight", {
-  enumerable: true,
-  get: function get() {
-    return _spotlight.Spotlight;
-  }
-});
 Object.defineProperty(exports, "SpotlightActions", {
   enumerable: true,
   get: function get() {
@@ -39,6 +33,12 @@ Object.defineProperty(exports, "SpotlightBody", {
     return _body.SpotlightBody;
   }
 });
+Object.defineProperty(exports, "SpotlightCard", {
+  enumerable: true,
+  get: function get() {
+    return _card.SpotlightCard;
+  }
+});
 Object.defineProperty(exports, "SpotlightControls", {
   enumerable: true,
   get: function get() {
@@ -99,19 +99,7 @@ Object.defineProperty(exports, "SpotlightStepCount", {
     return _stepCount.SpotlightStepCount;
   }
 });
-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 _card = require("./ui/card");
 var _body = require("./ui/body");
 var _header = require("./ui/header");
 var _headline = require("./ui/headline");
@@ -126,5 +114,4 @@ var _showMoreControl = require("./ui/show-more-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 _context = require("./controllers/context");
+var _popoverTarget = require("./ui/popover-target");

package/dist/{es2019/ui/spotlight → cjs/ui/card}/index.compiled.css

@@ -1,5 +1,5 @@
 
-._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}
 ._zulppxbi{gap:var(--ds-space-200,1pc)}
 ._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._154i12x7{top:var(--ds-space-075,6px)}
 ._154imgjw{top:var(--ds-space-negative-200,-1pc)}

package/dist/cjs/ui/{spotlight → card}/index.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Spotlight = void 0;
+exports.SpotlightCard = void 0;
 require("./index.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
@@ -17,7 +17,7 @@ var _caret = require("./caret");
 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: "_kqswh2mm",
-  card: "_2rkopd34 _zulppxbi _1rjcutpp _kqswstnw _1bsbaq3k _1e0c1txw _2lx21bp4"
+  card: "_2rko1mok _zulppxbi _1rjcutpp _kqswstnw _1bsbaq3k _1e0c1txw _2lx21bp4"
 };
 var placementStyles = {
   'top-start': "_94n512x7 _1xi2mgjw",
@@ -35,7 +35,7 @@ var placementStyles = {
  * The base UI card that wraps composable spotlight components.
  *
  */
-var Spotlight = exports.Spotlight = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var SpotlightCard = exports.SpotlightCard = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
     testId = _ref.testId;
   var _useContext = (0, _react.useContext)(_context.SpotlightContext),

package/dist/es2019/controllers/context.js

@@ -19,53 +19,4 @@ export const SpotlightContextProvider = ({
       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

@@ -1,4 +1,4 @@
-export { Spotlight } from './ui/spotlight';
+export { SpotlightCard } from './ui/card';
 export { SpotlightBody } from './ui/body';
 export { SpotlightHeader } from './ui/header';
 export { SpotlightHeadline } from './ui/headline';
@@ -13,5 +13,4 @@ export { SpotlightShowMoreControl } from './ui/show-more-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 { TourContext, TourContextProvider } from './controllers/context';
+export { PopoverTarget } from './ui/popover-target';

package/dist/{esm/ui/spotlight → es2019/ui/card}/index.compiled.css

@@ -1,5 +1,5 @@
 
-._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}
 ._zulppxbi{gap:var(--ds-space-200,1pc)}
 ._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._154i12x7{top:var(--ds-space-075,6px)}
 ._154imgjw{top:var(--ds-space-negative-200,-1pc)}

package/dist/es2019/ui/{spotlight → card}/index.js

@@ -9,7 +9,7 @@ import { SpotlightContext } from '../../controllers/context';
 import { Caret } from './caret';
 const styles = {
   root: "_kqswh2mm",
-  card: "_2rkopd34 _zulppxbi _1rjcutpp _kqswstnw _1bsbaq3k _1e0c1txw _2lx21bp4"
+  card: "_2rko1mok _zulppxbi _1rjcutpp _kqswstnw _1bsbaq3k _1e0c1txw _2lx21bp4"
 };
 const placementStyles = {
   'top-start': "_94n512x7 _1xi2mgjw",
@@ -27,7 +27,7 @@ const placementStyles = {
  * The base UI card that wraps composable spotlight components.
  *
  */
-export const Spotlight = /*#__PURE__*/forwardRef(({
+export const SpotlightCard = /*#__PURE__*/forwardRef(({
   children,
   testId
 }, ref) => {

package/dist/esm/controllers/context.js

@@ -24,61 +24,4 @@ export var SpotlightContextProvider = function SpotlightContextProvider(_ref) {
       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

@@ -1,4 +1,4 @@
-export { Spotlight } from './ui/spotlight';
+export { SpotlightCard } from './ui/card';
 export { SpotlightBody } from './ui/body';
 export { SpotlightHeader } from './ui/header';
 export { SpotlightHeadline } from './ui/headline';
@@ -13,5 +13,4 @@ export { SpotlightShowMoreControl } from './ui/show-more-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 { TourContext, TourContextProvider } from './controllers/context';
+export { PopoverTarget } from './ui/popover-target';

package/dist/{cjs/ui/spotlight → esm/ui/card}/index.compiled.css

@@ -1,5 +1,5 @@
 
-._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}
 ._zulppxbi{gap:var(--ds-space-200,1pc)}
 ._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._154i12x7{top:var(--ds-space-075,6px)}
 ._154imgjw{top:var(--ds-space-negative-200,-1pc)}

package/dist/esm/ui/{spotlight → card}/index.js

@@ -9,7 +9,7 @@ import { SpotlightContext } from '../../controllers/context';
 import { Caret } from './caret';
 var styles = {
   root: "_kqswh2mm",
-  card: "_2rkopd34 _zulppxbi _1rjcutpp _kqswstnw _1bsbaq3k _1e0c1txw _2lx21bp4"
+  card: "_2rko1mok _zulppxbi _1rjcutpp _kqswstnw _1bsbaq3k _1e0c1txw _2lx21bp4"
 };
 var placementStyles = {
   'top-start': "_94n512x7 _1xi2mgjw",
@@ -27,7 +27,7 @@ var placementStyles = {
  * The base UI card that wraps composable spotlight components.
  *
  */
-export var Spotlight = /*#__PURE__*/forwardRef(function (_ref, ref) {
+export var SpotlightCard = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     testId = _ref.testId;
   var _useContext = useContext(SpotlightContext),

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

@@ -8,26 +8,4 @@ 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

@@ -1,4 +1,4 @@
-export { Spotlight, type SpotlightProps } from './ui/spotlight';
+export { SpotlightCard, type SpotlightCardProps } from './ui/card';
 export { SpotlightBody, type SpotlightBodyProps } from './ui/body';
 export { SpotlightHeader, type SpotlightHeaderProps } from './ui/header';
 export { SpotlightHeadline, type SpotlightHeadlineProps } from './ui/headline';
@@ -14,4 +14,3 @@ 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/spotlight → types/ui/card}/index.d.ts

@@ -3,7 +3,7 @@
  * @jsx jsx
  */
 import { type ReactNode } from 'react';
-export interface SpotlightProps {
+export interface SpotlightCardProps {
     /**
      * 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,
@@ -21,4 +21,4 @@ export interface SpotlightProps {
  * The base UI card that wraps composable spotlight components.
  *
  */
-export declare const Spotlight: import("react").ForwardRefExoticComponent<SpotlightProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SpotlightCard: import("react").ForwardRefExoticComponent<SpotlightCardProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -8,26 +8,4 @@ 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

@@ -1,4 +1,4 @@
-export { Spotlight, type SpotlightProps } from './ui/spotlight';
+export { SpotlightCard, type SpotlightCardProps } from './ui/card';
 export { SpotlightBody, type SpotlightBodyProps } from './ui/body';
 export { SpotlightHeader, type SpotlightHeaderProps } from './ui/header';
 export { SpotlightHeadline, type SpotlightHeadlineProps } from './ui/headline';
@@ -14,4 +14,3 @@ 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/spotlight → types-ts4.5/ui/card}/index.d.ts

@@ -3,7 +3,7 @@
  * @jsx jsx
  */
 import { type ReactNode } from 'react';
-export interface SpotlightProps {
+export interface SpotlightCardProps {
     /**
      * 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,
@@ -21,4 +21,4 @@ export interface SpotlightProps {
  * The base UI card that wraps composable spotlight components.
  *
  */
-export declare const Spotlight: import("react").ForwardRefExoticComponent<SpotlightProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SpotlightCard: import("react").ForwardRefExoticComponent<SpotlightCardProps & import("react").RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/spotlight",
-	"version": "0.1.0",
+	"version": "0.2.1",
 	"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",
@@ -32,11 +32,11 @@
 		"@atlaskit/button": "^23.4.0",
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^28.0.0",
+		"@atlaskit/icon": "^28.1.0",
 		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/popper": "^7.1.0",
-		"@atlaskit/primitives": "^14.11.0",
-		"@atlaskit/tokens": "^6.0.0",
+		"@atlaskit/primitives": "^14.12.0",
+		"@atlaskit/tokens": "^6.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3"
 	},