@atlaskit/spotlight 0.0.8 → 0.0.9

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/spotlight
 
+## 0.0.9
+
+### Patch Changes
+
+- [`d972e69e6461e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d972e69e6461e) -
+  Create Body component. Rework spacing of Spotlight card. Minor refactoring.
+
 ## 0.0.8
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "SpotlightActions", {
     return _actions.SpotlightActions;
   }
 });
+Object.defineProperty(exports, "SpotlightBody", {
+  enumerable: true,
+  get: function get() {
+    return _body.SpotlightBody;
+  }
+});
 Object.defineProperty(exports, "SpotlightControls", {
   enumerable: true,
   get: function get() {
@@ -76,6 +82,7 @@ Object.defineProperty(exports, "SpotlightSecondaryAction", {
   }
 });
 var _spotlight = require("./ui/spotlight");
+var _body = require("./ui/body");
 var _header = require("./ui/header");
 var _headline = require("./ui/headline");
 var _footer = require("./ui/footer");

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

@@ -0,0 +1 @@
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}

package/dist/cjs/ui/body/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.SpotlightBody = 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: "_18zrpxbi"
+};
+/**
+ * __SpotlightBody__
+ *
+ * `SpotlightBody` is required in a `Spotlight`. The content should be brief and direct to elaborate on the intent.
+ *
+ */
+var SpotlightBody = exports.SpotlightBody = /*#__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/footer/index.compiled.css

@@ -1,4 +1,3 @@
 ._1bsb1osq{width:100%}
-._85i5utpp{padding-block-end:var(--ds-space-150,9pt)}
 ._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}
 ._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}

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

@@ -12,7 +12,7 @@ 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: "_bozgpxbi _y4tiutpp _85i5utpp _1bsb1osq"
+  root: "_bozgpxbi _y4tiutpp _1bsb1osq"
 };
 /**
  * __SpotlightFooter__

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

@@ -1,4 +1,2 @@
-._1q51utpp{padding-block-start:var(--ds-space-150,9pt)}
-._85i5utpp{padding-block-end:var(--ds-space-150,9pt)}
 ._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}
 ._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}

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

@@ -12,7 +12,7 @@ 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: "_bozgpxbi _y4tiutpp _1q51utpp _85i5utpp"
+  root: "_bozgpxbi _y4tiutpp"
 };
 /**
  * __SpotlightHeader__

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

@@ -21,7 +21,6 @@ var SpotlightHeadline = exports.SpotlightHeadline = /*#__PURE__*/(0, _react.forw
   return /*#__PURE__*/_react.default.createElement(_heading.default, {
     ref: ref,
     testId: testId,
-    color: "color.text.inverse",
     size: "xsmall"
   }, children);
 });

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

@@ -36,7 +36,9 @@ var PopoverContent = exports.PopoverContent = function PopoverContent(_ref) {
     placement = _ref.placement;
   var _useContext = (0, _react.useContext)(_context.SpotlightContext),
     setPlacement = _useContext.setPlacement;
-  setPlacement(placement);
+  (0, _react.useEffect)(function () {
+    setPlacement(placement);
+  }, [placement, setPlacement]);
   return /*#__PURE__*/_react.default.createElement(_popper.Popper, {
     offset: [0, 0],
     placement: popperPlacementMap[placement]

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

@@ -1,13 +1,16 @@
 
-._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}._154imgjw{top:var(--ds-space-negative-200,-1pc)}
+._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)}
 ._1bsbaq3k{width:295px}
+._1e0c1txw{display:flex}
 ._1ltvmgjw{left:var(--ds-space-negative-200,-1pc)}
 ._1ltvu2gc{left:var(--ds-space-100,8px)}
 ._1xi2mgjw{right:var(--ds-space-negative-200,-1pc)}
 ._1xi2u2gc{right:var(--ds-space-100,8px)}
+._2lx21bp4{flex-direction:column}
 ._94n5mgjw{bottom:var(--ds-space-negative-200,-1pc)}
 ._94n5u2gc{bottom:var(--ds-space-100,8px)}
-._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}

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

@@ -10,12 +10,14 @@ require("./index.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _css = require("@atlaskit/css");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _context = require("../../controllers/context");
 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 _kqswstnw _1bsbaq3k _bfhkcdhy"
+  card: "_2rkopd34 _zulppxbi _1rjcutpp _kqswstnw _1bsbaq3k _1e0c1txw _2lx21bp4"
 };
 var placementStyles = {
   'top-start': "_94n5u2gc _1xi2mgjw",
@@ -39,10 +41,11 @@ var Spotlight = exports.Spotlight = /*#__PURE__*/(0, _react.forwardRef)(function
   var _useContext = (0, _react.useContext)(_context.SpotlightContext),
     placement = _useContext.placement;
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _runtime.ax)([styles.root])
-  }, /*#__PURE__*/React.createElement(_caret.Caret, null), /*#__PURE__*/React.createElement("div", {
-    ref: ref,
     "data-testid": testId,
-    className: (0, _runtime.ax)([styles.card, placementStyles[placement]])
+    ref: ref,
+    className: (0, _runtime.ax)([styles.root])
+  }, /*#__PURE__*/React.createElement(_caret.Caret, null), /*#__PURE__*/React.createElement(_compiled.Box, {
+    backgroundColor: "color.background.neutral.bold",
+    xcss: (0, _css.cx)(styles.card, placementStyles[placement])
   }, children));
 });

package/dist/es2019/index.js

@@ -1,4 +1,5 @@
 export { Spotlight } from './ui/spotlight';
+export { SpotlightBody } from './ui/body';
 export { SpotlightHeader } from './ui/header';
 export { SpotlightHeadline } from './ui/headline';
 export { SpotlightFooter } from './ui/footer';

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

@@ -0,0 +1 @@
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}

package/dist/es2019/ui/body/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: "_18zrpxbi"
+};
+/**
+ * __SpotlightBody__
+ *
+ * `SpotlightBody` is required in a `Spotlight`. The content should be brief and direct to elaborate on the intent.
+ *
+ */
+export const SpotlightBody = /*#__PURE__*/forwardRef(({
+  children,
+  testId
+}, ref) => {
+  return /*#__PURE__*/React.createElement(Box, {
+    ref: ref,
+    xcss: styles.root,
+    testId: testId
+  }, children);
+});

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

@@ -1,4 +1,3 @@
 ._1bsb1osq{width:100%}
-._85i5utpp{padding-block-end:var(--ds-space-150,9pt)}
 ._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}
 ._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}

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

@@ -4,7 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
 import { Flex } from '@atlaskit/primitives/compiled';
 const styles = {
-  root: "_bozgpxbi _y4tiutpp _85i5utpp _1bsb1osq"
+  root: "_bozgpxbi _y4tiutpp _1bsb1osq"
 };
 /**
  * __SpotlightFooter__

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

@@ -1,4 +1,2 @@
-._1q51utpp{padding-block-start:var(--ds-space-150,9pt)}
-._85i5utpp{padding-block-end:var(--ds-space-150,9pt)}
 ._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}
 ._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}

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

@@ -4,7 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
 import { Flex } from '@atlaskit/primitives/compiled';
 const styles = {
-  root: "_bozgpxbi _y4tiutpp _1q51utpp _85i5utpp"
+  root: "_bozgpxbi _y4tiutpp"
 };
 /**
  * __SpotlightHeader__

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

@@ -13,7 +13,6 @@ export const SpotlightHeadline = /*#__PURE__*/forwardRef(({
   return /*#__PURE__*/React.createElement(Heading, {
     ref: ref,
     testId: testId,
-    color: "color.text.inverse",
     size: "xsmall"
   }, children);
 });

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

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from "react";
 import { Popper } from '@atlaskit/popper';
 import { SpotlightContext } from '../../controllers/context';
 /**
@@ -30,7 +30,9 @@ export const PopoverContent = ({
   const {
     setPlacement
   } = useContext(SpotlightContext);
-  setPlacement(placement);
+  useEffect(() => {
+    setPlacement(placement);
+  }, [placement, setPlacement]);
   return /*#__PURE__*/React.createElement(Popper, {
     offset: [0, 0],
     placement: popperPlacementMap[placement]

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

@@ -1,13 +1,16 @@
 
-._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}._154imgjw{top:var(--ds-space-negative-200,-1pc)}
+._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)}
 ._1bsbaq3k{width:295px}
+._1e0c1txw{display:flex}
 ._1ltvmgjw{left:var(--ds-space-negative-200,-1pc)}
 ._1ltvu2gc{left:var(--ds-space-100,8px)}
 ._1xi2mgjw{right:var(--ds-space-negative-200,-1pc)}
 ._1xi2u2gc{right:var(--ds-space-100,8px)}
+._2lx21bp4{flex-direction:column}
 ._94n5mgjw{bottom:var(--ds-space-negative-200,-1pc)}
 ._94n5u2gc{bottom:var(--ds-space-100,8px)}
-._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}

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

@@ -3,11 +3,13 @@ import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useContext } from 'react';
+import { cx } from '@atlaskit/css';
+import { Box } from '@atlaskit/primitives/compiled';
 import { SpotlightContext } from '../../controllers/context';
 import { Caret } from './caret';
 const styles = {
   root: "_kqswh2mm",
-  card: "_2rkopd34 _kqswstnw _1bsbaq3k _bfhkcdhy"
+  card: "_2rkopd34 _zulppxbi _1rjcutpp _kqswstnw _1bsbaq3k _1e0c1txw _2lx21bp4"
 };
 const placementStyles = {
   'top-start': "_94n5u2gc _1xi2mgjw",
@@ -33,10 +35,11 @@ export const Spotlight = /*#__PURE__*/forwardRef(({
     placement
   } = useContext(SpotlightContext);
   return /*#__PURE__*/React.createElement("div", {
-    className: ax([styles.root])
-  }, /*#__PURE__*/React.createElement(Caret, null), /*#__PURE__*/React.createElement("div", {
-    ref: ref,
     "data-testid": testId,
-    className: ax([styles.card, placementStyles[placement]])
+    ref: ref,
+    className: ax([styles.root])
+  }, /*#__PURE__*/React.createElement(Caret, null), /*#__PURE__*/React.createElement(Box, {
+    backgroundColor: "color.background.neutral.bold",
+    xcss: cx(styles.card, placementStyles[placement])
   }, children));
 });

package/dist/esm/index.js

@@ -1,4 +1,5 @@
 export { Spotlight } from './ui/spotlight';
+export { SpotlightBody } from './ui/body';
 export { SpotlightHeader } from './ui/header';
 export { SpotlightHeadline } from './ui/headline';
 export { SpotlightFooter } from './ui/footer';

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

@@ -0,0 +1 @@
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}

package/dist/esm/ui/body/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: "_18zrpxbi"
+};
+/**
+ * __SpotlightBody__
+ *
+ * `SpotlightBody` is required in a `Spotlight`. The content should be brief and direct to elaborate on the intent.
+ *
+ */
+export var SpotlightBody = /*#__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/footer/index.compiled.css

@@ -1,4 +1,3 @@
 ._1bsb1osq{width:100%}
-._85i5utpp{padding-block-end:var(--ds-space-150,9pt)}
 ._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}
 ._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}

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

@@ -4,7 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
 import { Flex } from '@atlaskit/primitives/compiled';
 var styles = {
-  root: "_bozgpxbi _y4tiutpp _85i5utpp _1bsb1osq"
+  root: "_bozgpxbi _y4tiutpp _1bsb1osq"
 };
 /**
  * __SpotlightFooter__

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

@@ -1,4 +1,2 @@
-._1q51utpp{padding-block-start:var(--ds-space-150,9pt)}
-._85i5utpp{padding-block-end:var(--ds-space-150,9pt)}
 ._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}
 ._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}

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

@@ -4,7 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
 import { Flex } from '@atlaskit/primitives/compiled';
 var styles = {
-  root: "_bozgpxbi _y4tiutpp _1q51utpp _85i5utpp"
+  root: "_bozgpxbi _y4tiutpp"
 };
 /**
  * __SpotlightHeader__

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

@@ -12,7 +12,6 @@ export var SpotlightHeadline = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React.createElement(Heading, {
     ref: ref,
     testId: testId,
-    color: "color.text.inverse",
     size: "xsmall"
   }, children);
 });

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

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from "react";
 import { Popper } from '@atlaskit/popper';
 import { SpotlightContext } from '../../controllers/context';
 /**
@@ -28,7 +28,9 @@ export var PopoverContent = function PopoverContent(_ref) {
     placement = _ref.placement;
   var _useContext = useContext(SpotlightContext),
     setPlacement = _useContext.setPlacement;
-  setPlacement(placement);
+  useEffect(function () {
+    setPlacement(placement);
+  }, [placement, setPlacement]);
   return /*#__PURE__*/React.createElement(Popper, {
     offset: [0, 0],
     placement: popperPlacementMap[placement]

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

@@ -1,13 +1,16 @@
 
-._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}._154imgjw{top:var(--ds-space-negative-200,-1pc)}
+._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)}
 ._1bsbaq3k{width:295px}
+._1e0c1txw{display:flex}
 ._1ltvmgjw{left:var(--ds-space-negative-200,-1pc)}
 ._1ltvu2gc{left:var(--ds-space-100,8px)}
 ._1xi2mgjw{right:var(--ds-space-negative-200,-1pc)}
 ._1xi2u2gc{right:var(--ds-space-100,8px)}
+._2lx21bp4{flex-direction:column}
 ._94n5mgjw{bottom:var(--ds-space-negative-200,-1pc)}
 ._94n5u2gc{bottom:var(--ds-space-100,8px)}
-._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}

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

@@ -3,11 +3,13 @@ import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useContext } from 'react';
+import { cx } from '@atlaskit/css';
+import { Box } from '@atlaskit/primitives/compiled';
 import { SpotlightContext } from '../../controllers/context';
 import { Caret } from './caret';
 var styles = {
   root: "_kqswh2mm",
-  card: "_2rkopd34 _kqswstnw _1bsbaq3k _bfhkcdhy"
+  card: "_2rkopd34 _zulppxbi _1rjcutpp _kqswstnw _1bsbaq3k _1e0c1txw _2lx21bp4"
 };
 var placementStyles = {
   'top-start': "_94n5u2gc _1xi2mgjw",
@@ -31,10 +33,11 @@ export var Spotlight = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _useContext = useContext(SpotlightContext),
     placement = _useContext.placement;
   return /*#__PURE__*/React.createElement("div", {
-    className: ax([styles.root])
-  }, /*#__PURE__*/React.createElement(Caret, null), /*#__PURE__*/React.createElement("div", {
-    ref: ref,
     "data-testid": testId,
-    className: ax([styles.card, placementStyles[placement]])
+    ref: ref,
+    className: ax([styles.root])
+  }, /*#__PURE__*/React.createElement(Caret, null), /*#__PURE__*/React.createElement(Box, {
+    backgroundColor: "color.background.neutral.bold",
+    xcss: cx(styles.card, placementStyles[placement])
   }, children));
 });

package/dist/types/index.d.ts

@@ -1,4 +1,5 @@
 export { Spotlight, type SpotlightProps } from './ui/spotlight';
+export { SpotlightBody, type SpotlightBodyProps } from './ui/body';
 export { SpotlightHeader, type SpotlightHeaderProps } from './ui/header';
 export { SpotlightHeadline, type SpotlightHeadlineProps } from './ui/headline';
 export { SpotlightFooter, type SpotlightFooterProps } from './ui/footer';

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

@@ -0,0 +1,21 @@
+import React, { type ReactNode } from 'react';
+export interface SpotlightBodyProps {
+    /**
+     * 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;
+}
+/**
+ * __SpotlightBody__
+ *
+ * `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>>;

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

@@ -9,7 +9,7 @@ export interface SpotlightHeadlineProps {
     /**
      * A brief and direct title to quickly hook the user on the intent.
      */
-    children?: ReactNode;
+    children: ReactNode;
 }
 /**
  * __SpotlightHeadline__

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

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

package/dist/types/ui/spotlight/caret/index.d.ts

@@ -2,7 +2,6 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-/// <reference types="react" />
 export interface CaretProps {
     /**
      * A `testId` prop is provided for specified elements, which is a unique

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

@@ -1,4 +1,5 @@
 export { Spotlight, type SpotlightProps } from './ui/spotlight';
+export { SpotlightBody, type SpotlightBodyProps } from './ui/body';
 export { SpotlightHeader, type SpotlightHeaderProps } from './ui/header';
 export { SpotlightHeadline, type SpotlightHeadlineProps } from './ui/headline';
 export { SpotlightFooter, type SpotlightFooterProps } from './ui/footer';

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

@@ -0,0 +1,21 @@
+import React, { type ReactNode } from 'react';
+export interface SpotlightBodyProps {
+    /**
+     * 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;
+}
+/**
+ * __SpotlightBody__
+ *
+ * `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>>;

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

@@ -9,7 +9,7 @@ export interface SpotlightHeadlineProps {
     /**
      * A brief and direct title to quickly hook the user on the intent.
      */
-    children?: ReactNode;
+    children: ReactNode;
 }
 /**
  * __SpotlightHeadline__

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

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * @jsxRuntime classic
  * @jsx jsx

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/spotlight",
-	"version": "0.0.8",
+	"version": "0.0.9",
 	"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,7 +32,7 @@
 		"@atlaskit/button": "^23.3.0",
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^27.10.0",
+		"@atlaskit/icon": "^27.11.0",
 		"@atlaskit/popper": "^7.1.0",
 		"@atlaskit/primitives": "^14.11.0",
 		"@atlaskit/tokens": "^6.0.0",