@atlaskit/spotlight 0.9.0 → 0.9.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/spotlight
 
+## 0.9.2
+
+### Patch Changes
+
+- [`80f0a09eede30`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/80f0a09eede30) -
+  Fix bug where PopoverContent initially renders in the default position before updating to user
+  supplied position.
+
+## 0.9.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.9.0
 
 ### Minor Changes

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

@@ -2,7 +2,7 @@
 ._1pby1fw0{z-index:700}
 ._1yxnt94y{border-end-start-radius:1px}
 ._4t3io7ao{height:15px}
-._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
+._bfhk1aqn{background-color:var(--ds-background-neutral-bold,#292a2e)}
 ._kqswh2mm{position:relative}
 ._mkrzmhja{clip-path:polygon(0 0,100% 100%,0 100%)}
 ._t9ec1hke{transform:rotate(135deg)}

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

@@ -13,7 +13,7 @@ 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: "_bfhkcdhy _1yxnt94y _mkrzmhja _4t3io7ao _kqswh2mm _1bsbo7ao _1pby1fw0",
+  root: "_bfhk1aqn _1yxnt94y _mkrzmhja _4t3io7ao _kqswh2mm _1bsbo7ao _1pby1fw0",
   'top-start': "_t9ec71a3",
   'top-center': "_t9ec71a3",
   'top-end': "_t9ec71a3",

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

@@ -2,7 +2,7 @@
 ._2rko1mok{border-radius:var(--ds-radius-large,8px)}
 ._zulpu2gc{gap:var(--ds-space-100,8px)}._152t12x7{inset-block-start:var(--ds-space-075,6px)}
 ._152tmgjw{inset-block-start:var(--ds-space-negative-200,-1pc)}
-._16qs9g9j{box-shadow:var(--ds-shadow-overflow,0 0 8px #091e4228,0 0 1px #091e421e)}
+._16qs1nax{box-shadow:var(--ds-shadow-overflow,0 0 8px #1e1f2128,0 0 1px #1e1f211e)}
 ._1bsbaq3k{width:295px}
 ._1e0212x7{inset-inline-start:var(--ds-space-075,6px)}
 ._1e021qz4{inset-inline-start:-140px}

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

@@ -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: "_2rko1mok _zulpu2gc _kqswstnw _1bsbaq3k _1q51u2gc _85i5utpp _1e0c1txw _2lx21bp4 _16qs9g9j"
+  card: "_2rko1mok _zulpu2gc _kqswstnw _1bsbaq3k _1q51u2gc _85i5utpp _1e0c1txw _2lx21bp4 _16qs1nax"
 };
 var placementStyles = {
   'top-start': "_u7co12x7 _rjxpc7mi",

package/dist/cjs/ui/dismiss-control/index.compiled.css

@@ -1,6 +1,6 @@
 
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._1rjc12x7{padding-block:var(--ds-space-075,6px)}
-._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
+._bfhk1aqn{background-color:var(--ds-background-neutral-bold,#292a2e)}
 ._syaz15cr{color:var(--ds-text-inverse,#fff)}
-._irr31bsc:hover{background-color:var(--ds-background-neutral-bold-hovered,#2c3e5d)}._1di61b6k:active{background-color:var(--ds-background-neutral-bold-pressed,#172b4d)}
+._irr31ibz:hover{background-color:var(--ds-background-neutral-bold-hovered,#3b3d42)}._1di6of27:active{background-color:var(--ds-background-neutral-bold-pressed,#505258)}

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

@@ -16,7 +16,7 @@ var _compiled = require("@atlaskit/primitives/compiled");
 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: "_2rko12b0 _1rjc12x7 _syaz15cr _bfhkcdhy _irr31bsc _1di61b6k"
+  root: "_2rko12b0 _1rjc12x7 _syaz15cr _bfhk1aqn _irr31ibz _1di6of27"
 };
 /**
  * __SpotlightDismissControl__

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

@@ -116,7 +116,7 @@ var PopoverContent = exports.PopoverContent = function PopoverContent(props) {
     }
     secondaryAction.setAction(back);
   }, [back, secondaryAction]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useLayoutEffect)(function () {
     card.setPlacement(placement);
   }, [placement, card]);
   (0, _react.useEffect)(function () {

package/dist/cjs/ui/primary-action/index.compiled.css

@@ -1,8 +1,8 @@
 
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._1dqonqa1{border-style:solid}
-._1h6dz9xs{border-color:var(--ds-border-accent-gray,#758195)}
-._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
+._1h6d8yml{border-color:var(--ds-border-accent-gray,#7d818a)}
+._bfhk1aqn{background-color:var(--ds-background-neutral-bold,#292a2e)}
 ._syaz15cr{color:var(--ds-text-inverse,#fff)}
-._irr31bsc:hover{background-color:var(--ds-background-neutral-bold-hovered,#2c3e5d)}
-._1di61b6k:active{background-color:var(--ds-background-neutral-bold-pressed,#172b4d)}
+._irr31ibz:hover{background-color:var(--ds-background-neutral-bold-hovered,#3b3d42)}
+._1di6of27:active{background-color:var(--ds-background-neutral-bold-pressed,#505258)}

package/dist/cjs/ui/primary-action/index.js

@@ -14,7 +14,7 @@ var _compiled = require("@atlaskit/primitives/compiled");
 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: "_2rko12b0 _1dqonqa1 _189ee4h9 _1h6dz9xs _syaz15cr _bfhkcdhy _irr31bsc _1di61b6k"
+  root: "_2rko12b0 _1dqonqa1 _189ee4h9 _1h6d8yml _syaz15cr _bfhk1aqn _irr31ibz _1di6of27"
 };
 /**
  * __Spotlight primary action__

package/dist/cjs/ui/secondary-action/index.compiled.css

@@ -1,5 +1,5 @@
 
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
-._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
+._bfhk1aqn{background-color:var(--ds-background-neutral-bold,#292a2e)}
 ._syaz15cr{color:var(--ds-text-inverse,#fff)}
-._irr31bsc:hover{background-color:var(--ds-background-neutral-bold-hovered,#2c3e5d)}._1di61b6k:active{background-color:var(--ds-background-neutral-bold-pressed,#172b4d)}
+._irr31ibz:hover{background-color:var(--ds-background-neutral-bold-hovered,#3b3d42)}._1di6of27:active{background-color:var(--ds-background-neutral-bold-pressed,#505258)}

package/dist/cjs/ui/secondary-action/index.js

@@ -14,7 +14,7 @@ var _compiled = require("@atlaskit/primitives/compiled");
 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: "_2rko12b0 _syaz15cr _bfhkcdhy _irr31bsc _1di61b6k"
+  root: "_2rko12b0 _syaz15cr _bfhk1aqn _irr31ibz _1di6of27"
 };
 /**
  * __Spotlight secondary action__

package/dist/cjs/ui/show-more-control/index.compiled.css

@@ -1,6 +1,6 @@
 
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._1rjc12x7{padding-block:var(--ds-space-075,6px)}
-._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
+._bfhk1aqn{background-color:var(--ds-background-neutral-bold,#292a2e)}
 ._syaz15cr{color:var(--ds-text-inverse,#fff)}
-._irr31bsc:hover{background-color:var(--ds-background-neutral-bold-hovered,#2c3e5d)}._1di61b6k:active{background-color:var(--ds-background-neutral-bold-pressed,#172b4d)}
+._irr31ibz:hover{background-color:var(--ds-background-neutral-bold-hovered,#3b3d42)}._1di6of27:active{background-color:var(--ds-background-neutral-bold-pressed,#505258)}

package/dist/cjs/ui/show-more-control/index.js

@@ -15,7 +15,7 @@ var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/sh
 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: "_2rko12b0 _1rjc12x7 _syaz15cr _bfhkcdhy _irr31bsc _1di61b6k"
+  root: "_2rko12b0 _1rjc12x7 _syaz15cr _bfhk1aqn _irr31ibz _1di6of27"
 };
 /**
  * __SpotlightShowMoreControl__

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

@@ -2,7 +2,7 @@
 ._1pby1fw0{z-index:700}
 ._1yxnt94y{border-end-start-radius:1px}
 ._4t3io7ao{height:15px}
-._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
+._bfhk1aqn{background-color:var(--ds-background-neutral-bold,#292a2e)}
 ._kqswh2mm{position:relative}
 ._mkrzmhja{clip-path:polygon(0 0,100% 100%,0 100%)}
 ._t9ec1hke{transform:rotate(135deg)}

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

@@ -5,7 +5,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useContext } from 'react';
 import { SpotlightContext } from '../../../controllers/context';
 const styles = {
-  root: "_bfhkcdhy _1yxnt94y _mkrzmhja _4t3io7ao _kqswh2mm _1bsbo7ao _1pby1fw0",
+  root: "_bfhk1aqn _1yxnt94y _mkrzmhja _4t3io7ao _kqswh2mm _1bsbo7ao _1pby1fw0",
   'top-start': "_t9ec71a3",
   'top-center': "_t9ec71a3",
   'top-end': "_t9ec71a3",

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

@@ -2,7 +2,7 @@
 ._2rko1mok{border-radius:var(--ds-radius-large,8px)}
 ._zulpu2gc{gap:var(--ds-space-100,8px)}._152t12x7{inset-block-start:var(--ds-space-075,6px)}
 ._152tmgjw{inset-block-start:var(--ds-space-negative-200,-1pc)}
-._16qs9g9j{box-shadow:var(--ds-shadow-overflow,0 0 8px #091e4228,0 0 1px #091e421e)}
+._16qs1nax{box-shadow:var(--ds-shadow-overflow,0 0 8px #1e1f2128,0 0 1px #1e1f211e)}
 ._1bsbaq3k{width:295px}
 ._1e0212x7{inset-inline-start:var(--ds-space-075,6px)}
 ._1e021qz4{inset-inline-start:-140px}

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

@@ -9,7 +9,7 @@ import { SpotlightContext } from '../../controllers/context';
 import { Caret } from './caret';
 const styles = {
   root: "_kqswh2mm",
-  card: "_2rko1mok _zulpu2gc _kqswstnw _1bsbaq3k _1q51u2gc _85i5utpp _1e0c1txw _2lx21bp4 _16qs9g9j"
+  card: "_2rko1mok _zulpu2gc _kqswstnw _1bsbaq3k _1q51u2gc _85i5utpp _1e0c1txw _2lx21bp4 _16qs1nax"
 };
 const placementStyles = {
   'top-start': "_u7co12x7 _rjxpc7mi",

package/dist/es2019/ui/dismiss-control/index.compiled.css

@@ -1,6 +1,6 @@
 
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._1rjc12x7{padding-block:var(--ds-space-075,6px)}
-._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
+._bfhk1aqn{background-color:var(--ds-background-neutral-bold,#292a2e)}
 ._syaz15cr{color:var(--ds-text-inverse,#fff)}
-._irr31bsc:hover{background-color:var(--ds-background-neutral-bold-hovered,#2c3e5d)}._1di61b6k:active{background-color:var(--ds-background-neutral-bold-pressed,#172b4d)}
+._irr31ibz:hover{background-color:var(--ds-background-neutral-bold-hovered,#3b3d42)}._1di6of27:active{background-color:var(--ds-background-neutral-bold-pressed,#505258)}

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

@@ -7,7 +7,7 @@ import CrossIcon from '@atlaskit/icon/core/cross';
 import { Pressable } from '@atlaskit/primitives/compiled';
 import { SpotlightContext } from '../../controllers/context';
 const styles = {
-  root: "_2rko12b0 _1rjc12x7 _syaz15cr _bfhkcdhy _irr31bsc _1di61b6k"
+  root: "_2rko12b0 _1rjc12x7 _syaz15cr _bfhk1aqn _irr31ibz _1di6of27"
 };
 /**
  * __SpotlightDismissControl__

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

@@ -2,7 +2,7 @@
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useContext, useEffect, useRef } from 'react';
+import { useContext, useEffect, useLayoutEffect, useRef } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { Popper } from '@atlaskit/popper';
 import { SpotlightContext } from '../../controllers/context';
@@ -103,7 +103,7 @@ export const PopoverContent = props => {
     }
     secondaryAction.setAction(back);
   }, [back, secondaryAction]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     card.setPlacement(placement);
   }, [placement, card]);
   useEffect(() => {

package/dist/es2019/ui/primary-action/index.compiled.css

@@ -1,8 +1,8 @@
 
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._1dqonqa1{border-style:solid}
-._1h6dz9xs{border-color:var(--ds-border-accent-gray,#758195)}
-._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
+._1h6d8yml{border-color:var(--ds-border-accent-gray,#7d818a)}
+._bfhk1aqn{background-color:var(--ds-background-neutral-bold,#292a2e)}
 ._syaz15cr{color:var(--ds-text-inverse,#fff)}
-._irr31bsc:hover{background-color:var(--ds-background-neutral-bold-hovered,#2c3e5d)}
-._1di61b6k:active{background-color:var(--ds-background-neutral-bold-pressed,#172b4d)}
+._irr31ibz:hover{background-color:var(--ds-background-neutral-bold-hovered,#3b3d42)}
+._1di6of27:active{background-color:var(--ds-background-neutral-bold-pressed,#505258)}

package/dist/es2019/ui/primary-action/index.js

@@ -6,7 +6,7 @@ import { forwardRef, useContext } from 'react';
 import { Pressable, Text } from '@atlaskit/primitives/compiled';
 import { SpotlightContext } from '../../controllers/context';
 const styles = {
-  root: "_2rko12b0 _1dqonqa1 _189ee4h9 _1h6dz9xs _syaz15cr _bfhkcdhy _irr31bsc _1di61b6k"
+  root: "_2rko12b0 _1dqonqa1 _189ee4h9 _1h6d8yml _syaz15cr _bfhk1aqn _irr31ibz _1di6of27"
 };
 /**
  * __Spotlight primary action__

package/dist/es2019/ui/secondary-action/index.compiled.css

@@ -1,5 +1,5 @@
 
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
-._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
+._bfhk1aqn{background-color:var(--ds-background-neutral-bold,#292a2e)}
 ._syaz15cr{color:var(--ds-text-inverse,#fff)}
-._irr31bsc:hover{background-color:var(--ds-background-neutral-bold-hovered,#2c3e5d)}._1di61b6k:active{background-color:var(--ds-background-neutral-bold-pressed,#172b4d)}
+._irr31ibz:hover{background-color:var(--ds-background-neutral-bold-hovered,#3b3d42)}._1di6of27:active{background-color:var(--ds-background-neutral-bold-pressed,#505258)}

package/dist/es2019/ui/secondary-action/index.js

@@ -6,7 +6,7 @@ import { forwardRef, useContext } from 'react';
 import { Pressable, Text } from '@atlaskit/primitives/compiled';
 import { SpotlightContext } from '../../controllers/context';
 const styles = {
-  root: "_2rko12b0 _syaz15cr _bfhkcdhy _irr31bsc _1di61b6k"
+  root: "_2rko12b0 _syaz15cr _bfhk1aqn _irr31ibz _1di6of27"
 };
 /**
  * __Spotlight secondary action__

package/dist/es2019/ui/show-more-control/index.compiled.css

@@ -1,6 +1,6 @@
 
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._1rjc12x7{padding-block:var(--ds-space-075,6px)}
-._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
+._bfhk1aqn{background-color:var(--ds-background-neutral-bold,#292a2e)}
 ._syaz15cr{color:var(--ds-text-inverse,#fff)}
-._irr31bsc:hover{background-color:var(--ds-background-neutral-bold-hovered,#2c3e5d)}._1di61b6k:active{background-color:var(--ds-background-neutral-bold-pressed,#172b4d)}
+._irr31ibz:hover{background-color:var(--ds-background-neutral-bold-hovered,#3b3d42)}._1di6of27:active{background-color:var(--ds-background-neutral-bold-pressed,#505258)}

package/dist/es2019/ui/show-more-control/index.js

@@ -6,7 +6,7 @@ import { forwardRef } from 'react';
 import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
 import { Pressable } from '@atlaskit/primitives/compiled';
 const styles = {
-  root: "_2rko12b0 _1rjc12x7 _syaz15cr _bfhkcdhy _irr31bsc _1di61b6k"
+  root: "_2rko12b0 _1rjc12x7 _syaz15cr _bfhk1aqn _irr31ibz _1di6of27"
 };
 /**
  * __SpotlightShowMoreControl__

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

@@ -2,7 +2,7 @@
 ._1pby1fw0{z-index:700}
 ._1yxnt94y{border-end-start-radius:1px}
 ._4t3io7ao{height:15px}
-._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
+._bfhk1aqn{background-color:var(--ds-background-neutral-bold,#292a2e)}
 ._kqswh2mm{position:relative}
 ._mkrzmhja{clip-path:polygon(0 0,100% 100%,0 100%)}
 ._t9ec1hke{transform:rotate(135deg)}

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

@@ -5,7 +5,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useContext } from 'react';
 import { SpotlightContext } from '../../../controllers/context';
 var styles = {
-  root: "_bfhkcdhy _1yxnt94y _mkrzmhja _4t3io7ao _kqswh2mm _1bsbo7ao _1pby1fw0",
+  root: "_bfhk1aqn _1yxnt94y _mkrzmhja _4t3io7ao _kqswh2mm _1bsbo7ao _1pby1fw0",
   'top-start': "_t9ec71a3",
   'top-center': "_t9ec71a3",
   'top-end': "_t9ec71a3",

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

@@ -2,7 +2,7 @@
 ._2rko1mok{border-radius:var(--ds-radius-large,8px)}
 ._zulpu2gc{gap:var(--ds-space-100,8px)}._152t12x7{inset-block-start:var(--ds-space-075,6px)}
 ._152tmgjw{inset-block-start:var(--ds-space-negative-200,-1pc)}
-._16qs9g9j{box-shadow:var(--ds-shadow-overflow,0 0 8px #091e4228,0 0 1px #091e421e)}
+._16qs1nax{box-shadow:var(--ds-shadow-overflow,0 0 8px #1e1f2128,0 0 1px #1e1f211e)}
 ._1bsbaq3k{width:295px}
 ._1e0212x7{inset-inline-start:var(--ds-space-075,6px)}
 ._1e021qz4{inset-inline-start:-140px}

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

@@ -9,7 +9,7 @@ import { SpotlightContext } from '../../controllers/context';
 import { Caret } from './caret';
 var styles = {
   root: "_kqswh2mm",
-  card: "_2rko1mok _zulpu2gc _kqswstnw _1bsbaq3k _1q51u2gc _85i5utpp _1e0c1txw _2lx21bp4 _16qs9g9j"
+  card: "_2rko1mok _zulpu2gc _kqswstnw _1bsbaq3k _1q51u2gc _85i5utpp _1e0c1txw _2lx21bp4 _16qs1nax"
 };
 var placementStyles = {
   'top-start': "_u7co12x7 _rjxpc7mi",

package/dist/esm/ui/dismiss-control/index.compiled.css

@@ -1,6 +1,6 @@
 
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._1rjc12x7{padding-block:var(--ds-space-075,6px)}
-._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
+._bfhk1aqn{background-color:var(--ds-background-neutral-bold,#292a2e)}
 ._syaz15cr{color:var(--ds-text-inverse,#fff)}
-._irr31bsc:hover{background-color:var(--ds-background-neutral-bold-hovered,#2c3e5d)}._1di61b6k:active{background-color:var(--ds-background-neutral-bold-pressed,#172b4d)}
+._irr31ibz:hover{background-color:var(--ds-background-neutral-bold-hovered,#3b3d42)}._1di6of27:active{background-color:var(--ds-background-neutral-bold-pressed,#505258)}

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

@@ -7,7 +7,7 @@ import CrossIcon from '@atlaskit/icon/core/cross';
 import { Pressable } from '@atlaskit/primitives/compiled';
 import { SpotlightContext } from '../../controllers/context';
 var styles = {
-  root: "_2rko12b0 _1rjc12x7 _syaz15cr _bfhkcdhy _irr31bsc _1di61b6k"
+  root: "_2rko12b0 _1rjc12x7 _syaz15cr _bfhk1aqn _irr31ibz _1di6of27"
 };
 /**
  * __SpotlightDismissControl__

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

@@ -2,7 +2,7 @@
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useContext, useEffect, useRef } from 'react';
+import { useContext, useEffect, useLayoutEffect, useRef } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { Popper } from '@atlaskit/popper';
 import { SpotlightContext } from '../../controllers/context';
@@ -107,7 +107,7 @@ export var PopoverContent = function PopoverContent(props) {
     }
     secondaryAction.setAction(back);
   }, [back, secondaryAction]);
-  useEffect(function () {
+  useLayoutEffect(function () {
     card.setPlacement(placement);
   }, [placement, card]);
   useEffect(function () {

package/dist/esm/ui/primary-action/index.compiled.css

@@ -1,8 +1,8 @@
 
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._1dqonqa1{border-style:solid}
-._1h6dz9xs{border-color:var(--ds-border-accent-gray,#758195)}
-._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
+._1h6d8yml{border-color:var(--ds-border-accent-gray,#7d818a)}
+._bfhk1aqn{background-color:var(--ds-background-neutral-bold,#292a2e)}
 ._syaz15cr{color:var(--ds-text-inverse,#fff)}
-._irr31bsc:hover{background-color:var(--ds-background-neutral-bold-hovered,#2c3e5d)}
-._1di61b6k:active{background-color:var(--ds-background-neutral-bold-pressed,#172b4d)}
+._irr31ibz:hover{background-color:var(--ds-background-neutral-bold-hovered,#3b3d42)}
+._1di6of27:active{background-color:var(--ds-background-neutral-bold-pressed,#505258)}

package/dist/esm/ui/primary-action/index.js

@@ -6,7 +6,7 @@ import { forwardRef, useContext } from 'react';
 import { Pressable, Text } from '@atlaskit/primitives/compiled';
 import { SpotlightContext } from '../../controllers/context';
 var styles = {
-  root: "_2rko12b0 _1dqonqa1 _189ee4h9 _1h6dz9xs _syaz15cr _bfhkcdhy _irr31bsc _1di61b6k"
+  root: "_2rko12b0 _1dqonqa1 _189ee4h9 _1h6d8yml _syaz15cr _bfhk1aqn _irr31ibz _1di6of27"
 };
 /**
  * __Spotlight primary action__

package/dist/esm/ui/secondary-action/index.compiled.css

@@ -1,5 +1,5 @@
 
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
-._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
+._bfhk1aqn{background-color:var(--ds-background-neutral-bold,#292a2e)}
 ._syaz15cr{color:var(--ds-text-inverse,#fff)}
-._irr31bsc:hover{background-color:var(--ds-background-neutral-bold-hovered,#2c3e5d)}._1di61b6k:active{background-color:var(--ds-background-neutral-bold-pressed,#172b4d)}
+._irr31ibz:hover{background-color:var(--ds-background-neutral-bold-hovered,#3b3d42)}._1di6of27:active{background-color:var(--ds-background-neutral-bold-pressed,#505258)}

package/dist/esm/ui/secondary-action/index.js

@@ -6,7 +6,7 @@ import { forwardRef, useContext } from 'react';
 import { Pressable, Text } from '@atlaskit/primitives/compiled';
 import { SpotlightContext } from '../../controllers/context';
 var styles = {
-  root: "_2rko12b0 _syaz15cr _bfhkcdhy _irr31bsc _1di61b6k"
+  root: "_2rko12b0 _syaz15cr _bfhk1aqn _irr31ibz _1di6of27"
 };
 /**
  * __Spotlight secondary action__

package/dist/esm/ui/show-more-control/index.compiled.css

@@ -1,6 +1,6 @@
 
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._1rjc12x7{padding-block:var(--ds-space-075,6px)}
-._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
+._bfhk1aqn{background-color:var(--ds-background-neutral-bold,#292a2e)}
 ._syaz15cr{color:var(--ds-text-inverse,#fff)}
-._irr31bsc:hover{background-color:var(--ds-background-neutral-bold-hovered,#2c3e5d)}._1di61b6k:active{background-color:var(--ds-background-neutral-bold-pressed,#172b4d)}
+._irr31ibz:hover{background-color:var(--ds-background-neutral-bold-hovered,#3b3d42)}._1di6of27:active{background-color:var(--ds-background-neutral-bold-pressed,#505258)}

package/dist/esm/ui/show-more-control/index.js

@@ -6,7 +6,7 @@ import { forwardRef } from 'react';
 import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
 import { Pressable } from '@atlaskit/primitives/compiled';
 var styles = {
-  root: "_2rko12b0 _1rjc12x7 _syaz15cr _bfhkcdhy _irr31bsc _1di61b6k"
+  root: "_2rko12b0 _1rjc12x7 _syaz15cr _bfhk1aqn _irr31ibz _1di6of27"
 };
 /**
  * __SpotlightShowMoreControl__

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/spotlight",
-	"version": "0.9.0",
+	"version": "0.9.2",
 	"description": "A spotlight introduces users to points of interest, from focused messages to multi-step tours.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,7 +33,7 @@
 	"atlaskit:src": "src/index.tsx",
 	"dependencies": {
 		"@atlaskit/browser-apis": "^0.0.1",
-		"@atlaskit/button": "^23.5.0",
+		"@atlaskit/button": "^23.6.0",
 		"@atlaskit/css": "^0.15.0",
 		"@atlaskit/ds-lib": "^5.2.0",
 		"@atlaskit/heading": "^5.2.0",
@@ -41,7 +41,7 @@
 		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/popper": "^7.1.0",
 		"@atlaskit/primitives": "^16.1.0",
-		"@atlaskit/tokens": "^7.1.0",
+		"@atlaskit/tokens": "^8.0.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6",