@atlaskit/onboarding 10.5.4 → 10.6.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/onboarding
 
+## 10.6.1
+
+### Patch Changes
+
+- [`9de88fa1e1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9de88fa1e1e) - Internal changes to include spacing tokens in component implementations.
+
+## 10.6.0
+
+### Minor Changes
+
+- [`e0015d4e201`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e0015d4e201) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+### Patch Changes
+
+- [`05efb20bca8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/05efb20bca8) - Fixes an issue with the Spotlight target element height when this is determined by a parent element.
+- Updated dependencies
+
 ## 10.5.4
 
 ### Patch Changes

package/dist/cjs/components/clone.js

@@ -52,6 +52,7 @@ var Clone = function Clone(props) {
       __html: cloneAndOverrideStyles(targetNode).outerHTML
     },
     style: {
+      height: '100%',
       pointerEvents: 'none'
     }
   }), /*#__PURE__*/_react.default.createElement(_target.TargetOverlay, {

package/dist/cjs/components/modal.js

@@ -29,7 +29,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _customThemeButton = _interopRequireWildcard(require("@atlaskit/button/custom-theme-button"));
 
@@ -79,7 +79,7 @@ var BenefitsModal = /*#__PURE__*/function (_Component) {
           src = props.image;
 
       var ImageElement = function ImageElement() {
-        return (0, _core.jsx)(_modal.ModalImage, {
+        return (0, _react2.jsx)(_modal.ModalImage, {
           src: src,
           alt: ""
         });
@@ -94,18 +94,18 @@ var BenefitsModal = /*#__PURE__*/function (_Component) {
           experimental_shouldShowPrimaryButtonOnRight = _props$experimental_s === void 0 ? false : _props$experimental_s;
 
       var ActionsElement = function ActionsElement() {
-        return actionList ? (0, _core.jsx)(_customThemeButton.Theme.Provider, {
+        return actionList ? (0, _react2.jsx)(_customThemeButton.Theme.Provider, {
           value: _theme.modalButtonTheme
-        }, (0, _core.jsx)(_modal.ModalActionContainer, {
+        }, (0, _react2.jsx)(_modal.ModalActionContainer, {
           shouldReverseButtonOrder: experimental_shouldShowPrimaryButtonOnRight
         }, actionList.map(function (_ref, idx) {
           var text = _ref.text,
               key = _ref.key,
               rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
           var variant = idx ? 'subtle-link' : 'primary';
-          return (0, _core.jsx)(_modal.ModalActionItem, {
+          return (0, _react2.jsx)(_modal.ModalActionItem, {
             key: key || (typeof text === 'string' ? text : "".concat(idx))
-          }, (0, _core.jsx)(_customThemeButton.default, (0, _extends2.default)({
+          }, (0, _react2.jsx)(_customThemeButton.default, (0, _extends2.default)({
             appearance: variant,
             autoFocus: !idx
           }, rest), text));
@@ -127,12 +127,12 @@ var BenefitsModal = /*#__PURE__*/function (_Component) {
           props = (0, _objectWithoutProperties2.default)(_this$props, _excluded2);
       var Header = this.headerComponent(this.props);
       var Footer = this.footerComponent(this.props);
-      return (0, _core.jsx)(_modalDialog.default, (0, _extends2.default)({
+      return (0, _react2.jsx)(_modalDialog.default, (0, _extends2.default)({
         autoFocus: true,
         shouldScrollInViewport: true,
         shouldCloseOnOverlayClick: false,
         shouldCloseOnEscapePress: false
-      }, props), (0, _core.jsx)(Header, null), (0, _core.jsx)(_modalDialog.ModalBody, null, (0, _core.jsx)(_modal.ModalBody, null, heading && (0, _core.jsx)(_modal.ModalHeading, null, heading), children)), (0, _core.jsx)(Footer, null));
+      }, props), (0, _react2.jsx)(Header, null), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)(_modal.ModalBody, null, heading && (0, _react2.jsx)(_modal.ModalHeading, null, heading), children)), (0, _react2.jsx)(Footer, null));
     }
   }]);
   return BenefitsModal;

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

@@ -13,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _customThemeButton = _interopRequireWildcard(require("@atlaskit/button/custom-theme-button"));
 
@@ -35,41 +35,42 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var gridSize = (0, _constants.gridSize)();
-var bodyStyles = (0, _core.css)({
+var bodyStyles = (0, _react2.css)({
   display: 'flex',
-  padding: "".concat(gridSize * 2, "px ").concat(gridSize * 2.5, "px"),
+  padding: "var(--ds-scale-200, 16px)".concat(" ", "var(--ds-scale-250, 20px)"),
   flexDirection: 'column'
 });
-var defaultHeaderStyles = (0, _core.css)({
+var defaultHeaderStyles = (0, _react2.css)({
   display: 'flex',
-  paddingBottom: "".concat(gridSize, "px"),
+  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize}px``
+  paddingBottom: "var(--ds-scale-100, 8px)",
   alignItems: 'baseline',
   justifyContent: 'space-between'
 });
 
 var DefaultHeader = function DefaultHeader(_ref) {
   var children = _ref.children;
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     css: defaultHeaderStyles
   }, children);
 };
 
-var defaultFooterStyles = (0, _core.css)({
+var defaultFooterStyles = (0, _react2.css)({
   display: 'flex',
-  paddingTop: "".concat(gridSize, "px"),
+  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize}px``
+  paddingTop: "var(--ds-scale-100, 8px)",
   alignItems: 'center',
   justifyContent: 'space-between'
 });
 
 var DefaultFooter = function DefaultFooter(_ref2) {
   var children = _ref2.children;
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     css: defaultFooterStyles
   }, children);
 };
 
-var containerStyles = (0, _core.css)({
+var containerStyles = (0, _react2.css)({
   height: 'fit-content',
   zIndex: _constants.layers.spotlight() + 1,
   background: "var(--ds-background-discovery-bold, ".concat(_colors.P300, ")"),
@@ -77,7 +78,7 @@ var containerStyles = (0, _core.css)({
   color: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
   overflow: 'auto'
 });
-var containerShadowStyles = (0, _core.css)({
+var containerShadowStyles = (0, _react2.css)({
   boxShadow: "var(--ds-shadow-raised, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")
 });
 /**
@@ -122,13 +123,13 @@ var SpotlightCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       Header = _components$Header === void 0 ? DefaultHeader : _components$Header,
       _components$Footer = components.Footer,
       Footer = _components$Footer === void 0 ? DefaultFooter : _components$Footer;
-  return (0, _core.jsx)(_customThemeButton.Theme.Provider, {
+  return (0, _react2.jsx)(_customThemeButton.Theme.Provider, {
     value: _theme.spotlightButtonTheme
-  }, (0, _core.jsx)(Theme.Provider, {
+  }, (0, _react2.jsx)(Theme.Provider, {
     value: theme
-  }, (0, _core.jsx)(Theme.Consumer, null, function (_ref3) {
+  }, (0, _react2.jsx)(Theme.Consumer, null, function (_ref3) {
     var container = _ref3.container;
-    return (0, _core.jsx)("div", {
+    return (0, _react2.jsx)("div", {
       css: [containerStyles, !isFlat && containerShadowStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
       container],
       style: {
@@ -136,22 +137,22 @@ var SpotlightCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       },
       ref: ref || innerRef,
       "data-testid": testId
-    }, typeof image === 'string' ? (0, _core.jsx)("img", {
+    }, typeof image === 'string' ? (0, _react2.jsx)("img", {
       src: image,
       alt: ""
-    }) : image, (0, _core.jsx)("div", {
+    }) : image, (0, _react2.jsx)("div", {
       css: bodyStyles
-    }, heading || headingAfterElement ? (0, _core.jsx)(Header, null, (0, _core.jsx)(_heading.default, {
+    }, heading || headingAfterElement ? (0, _react2.jsx)(Header, null, (0, _react2.jsx)(_heading.default, {
       color: "inverse",
       level: "h600",
       as: "h4"
-    }, heading), headingAfterElement) : null, children, actions.length > 0 || actionsBeforeElement ? (0, _core.jsx)(Footer, null, actionsBeforeElement || (0, _core.jsx)("span", null), (0, _core.jsx)(_dialog.DialogActionItemContainer, null, actions.map(function (_ref4, idx) {
+    }, heading), headingAfterElement) : null, children, actions.length > 0 || actionsBeforeElement ? (0, _react2.jsx)(Footer, null, actionsBeforeElement || (0, _react2.jsx)("span", null), (0, _react2.jsx)(_dialog.DialogActionItemContainer, null, actions.map(function (_ref4, idx) {
       var text = _ref4.text,
           key = _ref4.key,
           rest = (0, _objectWithoutProperties2.default)(_ref4, _excluded);
-      return (0, _core.jsx)(_dialog.DialogActionItem, {
+      return (0, _react2.jsx)(_dialog.DialogActionItem, {
         key: key || (typeof text === 'string' ? text : "".concat(idx))
-      }, (0, _core.jsx)(_customThemeButton.default, rest, text));
+      }, (0, _react2.jsx)(_customThemeButton.default, rest, text));
     }))) : null));
   })));
 });

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

@@ -50,7 +50,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "10.5.4";
+var packageVersion = "10.6.1";
 
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialog, _Component);

package/dist/cjs/styled/blanket.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -27,7 +27,7 @@ var backgroundColor = (0, _components.themed)({
 }); // IE11 and Edge: z-index needed because fixed position calculates z-index relative
 // to body instead of nearest stacking context (Portal in our case).
 
-var blanketStyles = (0, _core.css)({
+var blanketStyles = (0, _react.css)({
   position: 'fixed',
   zIndex: _constants.layers.spotlight(),
   top: 0,
@@ -50,7 +50,7 @@ var blanketStyles = (0, _core.css)({
  */
 var Blanket = function Blanket(props) {
   var theme = (0, _components.useGlobalTheme)();
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: blanketStyles,
     style: _objectSpread(_objectSpread({}, props.style), {}, {
       backgroundColor: props.isTinted ? backgroundColor({

package/dist/cjs/styled/dialog.js

@@ -11,26 +11,23 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _core = require("@emotion/core");
-
-var _constants = require("@atlaskit/theme/constants");
+var _react = require("@emotion/react");
 
 var _excluded = ["alt"];
-var gridSize = (0, _constants.gridSize)();
-var imageStyles = (0, _core.css)({
+var imageStyles = (0, _react.css)({
   maxWidth: '100%',
   height: 'auto'
 });
-var actionItemContainerStyles = (0, _core.css)({
+var actionItemContainerStyles = (0, _react.css)({
   display: 'flex',
-  margin: "0 -".concat(gridSize / 2, "px"),
+  margin: "var(--ds-scale-0, 0px)".concat(" -4px"),
 
   /* When there is more than one action, place primary action visually on the
   right, but keep it's position as the first focusable element in the DOM */
   flexDirection: 'row-reverse'
 });
-var actionItemStyles = (0, _core.css)({
-  margin: "0 ".concat(gridSize / 2, "px")
+var actionItemStyles = (0, _react.css)({
+  margin: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-050, 4px)")
 });
 /**
  * __Dialog image__
@@ -43,7 +40,7 @@ var actionItemStyles = (0, _core.css)({
 var DialogImage = function DialogImage(_ref) {
   var alt = _ref.alt,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _core.jsx)("img", (0, _extends2.default)({
+  return (0, _react.jsx)("img", (0, _extends2.default)({
     css: imageStyles,
     alt: alt
   }, props));
@@ -61,7 +58,7 @@ exports.DialogImage = DialogImage;
 
 var DialogActionItemContainer = function DialogActionItemContainer(_ref2) {
   var children = _ref2.children;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: actionItemContainerStyles
   }, children);
 };
@@ -78,7 +75,7 @@ exports.DialogActionItemContainer = DialogActionItemContainer;
 
 var DialogActionItem = function DialogActionItem(_ref3) {
   var children = _ref3.children;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: actionItemStyles
   }, children);
 };

package/dist/cjs/styled/modal.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ModalImage = exports.ModalHeading = exports.ModalBody = exports.ModalActionItem = exports.ModalActionContainer = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _components = require("@atlaskit/theme/components");
 
@@ -14,31 +14,30 @@ var _constants = require("@atlaskit/theme/constants");
 var _typography = require("@atlaskit/theme/typography");
 
 /** @jsx jsx */
-var gridSize = (0, _constants.gridSize)();
-var borderRadius = (0, _constants.borderRadius)();
-var actionItemBottomMargin = gridSize / 2; // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+var borderRadius = (0, _constants.borderRadius)(); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 
-var lightH600Styles = (0, _core.css)((0, _typography.h600)({
+var lightH600Styles = (0, _react.css)((0, _typography.h600)({
   theme: {
     mode: 'light'
   }
 })); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 
-var darkH600Styles = (0, _core.css)((0, _typography.h600)({
+var darkH600Styles = (0, _react.css)((0, _typography.h600)({
   theme: {
     mode: 'dark'
   }
 }));
-var modalBodyStyles = (0, _core.css)({
-  padding: '40px 20px',
+var modalBodyStyles = (0, _react.css)({
+  padding: "var(--ds-scale-500, 40px)".concat(" ", "var(--ds-scale-250, 20px)"),
   textAlign: 'center'
 }); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 
-var modalHeadingStyles = (0, _core.css)({
-  marginBottom: "".concat(gridSize, "px"),
+var modalHeadingStyles = (0, _react.css)({
+  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize}px``
+  marginBottom: "var(--ds-scale-100, 8px)",
   color: 'inherit'
 });
-var modalImageStyles = (0, _core.css)({
+var modalImageStyles = (0, _react.css)({
   width: '100%',
   height: 'auto',
   borderTopLeftRadius: "".concat(borderRadius, "px"),
@@ -47,18 +46,18 @@ var modalImageStyles = (0, _core.css)({
     borderRadius: 0
   }
 });
-var modalActionContainerStyles = (0, _core.css)({
+var modalActionContainerStyles = (0, _react.css)({
   display: 'flex',
-  padding: "0 40px ".concat(40 - actionItemBottomMargin, "px"),
+  padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-500, 40px)", " 36px"),
   justifyContent: 'center',
   flexDirection: 'row',
   flexFlow: 'wrap'
 });
-var modalActionContainerReversedStyles = (0, _core.css)({
+var modalActionContainerReversedStyles = (0, _react.css)({
   flexDirection: 'row-reverse'
 });
-var modalActionItemStyles = (0, _core.css)({
-  margin: "0 ".concat(gridSize / 2, "px ").concat(actionItemBottomMargin, "px")
+var modalActionItemStyles = (0, _react.css)({
+  margin: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-050, 4px)", " ", "var(--ds-scale-050, 4px)")
 });
 /**
  * __Modal body__
@@ -68,7 +67,7 @@ var modalActionItemStyles = (0, _core.css)({
 
 var ModalBody = function ModalBody(_ref) {
   var children = _ref.children;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: modalBodyStyles
   }, children);
 };
@@ -87,7 +86,7 @@ var ModalHeading = function ModalHeading(_ref2) {
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
       mode = _useGlobalTheme.mode;
 
-  return (0, _core.jsx)("h4", {
+  return (0, _react.jsx)("h4", {
     css: [mode === 'light' ? lightH600Styles : darkH600Styles, modalHeadingStyles]
   }, children);
 };
@@ -103,7 +102,7 @@ exports.ModalHeading = ModalHeading;
 var ModalImage = function ModalImage(_ref3) {
   var alt = _ref3.alt,
       src = _ref3.src;
-  return (0, _core.jsx)("img", {
+  return (0, _react.jsx)("img", {
     css: modalImageStyles,
     alt: alt,
     src: src
@@ -121,7 +120,7 @@ exports.ModalImage = ModalImage;
 var ModalActionContainer = function ModalActionContainer(_ref4) {
   var children = _ref4.children,
       shouldReverseButtonOrder = _ref4.shouldReverseButtonOrder;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: [modalActionContainerStyles, shouldReverseButtonOrder && modalActionContainerReversedStyles]
   }, children);
 };
@@ -136,7 +135,7 @@ exports.ModalActionContainer = ModalActionContainer;
 
 var ModalActionItem = function ModalActionItem(_ref5) {
   var children = _ref5.children;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: modalActionItemStyles
   }, children);
 };

package/dist/cjs/styled/target.js

@@ -13,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -31,7 +31,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // Pulse color "rgb(101, 84, 192)" derived from "colors.P300"
 var baseShadow = "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(_colors.P300, ")"));
 var easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
-var pulseKeyframes = (0, _core.keyframes)({
+var pulseKeyframes = (0, _react.keyframes)({
   '0%, 33%': {
     boxShadow: "".concat(baseShadow, ", 0 0 0 ", "var(--ds-border-discovery, rgba(101, 84, 192, 1))")
   },
@@ -42,12 +42,12 @@ var pulseKeyframes = (0, _core.keyframes)({
 
 var pulseKeyframesName = pulseKeyframes.name;
 exports.pulseKeyframesName = pulseKeyframesName;
-var animationStyles = (0, _core.css)({
+var animationStyles = (0, _react.css)({
   animation: "".concat(pulseKeyframes, " 3000ms ").concat(easing, " infinite")
 }); // IE11 and Edge: z-index needed because fixed position calculates z-index relative
 // to body instead of nearest stacking context (Portal in our case).
 
-var baseStyles = (0, _core.css)({
+var baseStyles = (0, _react.css)({
   zIndex: _constants.layers.spotlight() + 1
 });
 
@@ -58,7 +58,7 @@ var Base = function Base(_ref) {
       style = _ref.style,
       testId = _ref.testId,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _core.jsx)("div", (0, _extends2.default)({
+  return (0, _react.jsx)("div", (0, _extends2.default)({
     css: baseStyles,
     "data-testid": testId,
     style: _objectSpread(_objectSpread({}, style), {}, {
@@ -82,14 +82,14 @@ var TargetInner = function TargetInner(_ref2) {
       pulse = _ref2.pulse,
       props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
   return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    (0, _core.jsx)(Base, (0, _extends2.default)({}, props, {
+    (0, _react.jsx)(Base, (0, _extends2.default)({}, props, {
       css: [pulse && animationStyles]
     }), children)
   );
 };
 
 exports.TargetInner = TargetInner;
-var targetOverlayStyles = (0, _core.css)({
+var targetOverlayStyles = (0, _react.css)({
   width: '100%',
   height: '100%',
   position: 'absolute',
@@ -106,7 +106,7 @@ var targetOverlayStyles = (0, _core.css)({
  */
 
 var TargetOverlay = function TargetOverlay(props) {
-  return (0, _core.jsx)("div", (0, _extends2.default)({}, props, {
+  return (0, _react.jsx)("div", (0, _extends2.default)({}, props, {
     css: targetOverlayStyles,
     style: {
       cursor: props.onClick ? 'pointer' : 'auto'
@@ -133,7 +133,7 @@ var Pulse = function Pulse(_ref3) {
       testId = _ref3.testId,
       props = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
   return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    (0, _core.jsx)(Base, (0, _extends2.default)({}, props, {
+    (0, _react.jsx)(Base, (0, _extends2.default)({}, props, {
       css: [pulse && animationStyles],
       testId: testId
     }), children)

package/dist/cjs/version.json

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

package/dist/es2019/components/clone.js

@@ -44,6 +44,7 @@ const Clone = props => {
       __html: cloneAndOverrideStyles(targetNode).outerHTML
     },
     style: {
+      height: '100%',
       pointerEvents: 'none'
     }
   }), /*#__PURE__*/React.createElement(TargetOverlay, {

package/dist/es2019/components/modal.js

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import { Component } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import Button, { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
 import Modal, { ModalBody } from '@atlaskit/modal-dialog';
 import { ModalBody as Body, ModalHeading as Heading, ModalActionContainer, ModalActionItem, ModalImage } from '../styled/modal';

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

@@ -1,22 +1,22 @@
 /** @jsx jsx */
 import React, { forwardRef } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import Button, { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
 import Heading from '@atlaskit/heading';
 import { N0, N50A, N60A, P300 } from '@atlaskit/theme/colors';
 import { createTheme } from '@atlaskit/theme/components';
-import { borderRadius, gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
+import { borderRadius, layers } from '@atlaskit/theme/constants';
 import { DialogActionItem, DialogActionItemContainer } from '../styled/dialog';
 import { spotlightButtonTheme } from './theme';
-const gridSize = getGridSize();
 const bodyStyles = css({
   display: 'flex',
-  padding: `${gridSize * 2}px ${gridSize * 2.5}px`,
+  padding: `${"var(--ds-scale-200, 16px)"} ${"var(--ds-scale-250, 20px)"}`,
   flexDirection: 'column'
 });
 const defaultHeaderStyles = css({
   display: 'flex',
-  paddingBottom: `${gridSize}px`,
+  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize}px``
+  paddingBottom: "var(--ds-scale-100, 8px)",
   alignItems: 'baseline',
   justifyContent: 'space-between'
 });
@@ -29,7 +29,8 @@ const DefaultHeader = ({
 
 const defaultFooterStyles = css({
   display: 'flex',
-  paddingTop: `${gridSize}px`,
+  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize}px``
+  paddingTop: "var(--ds-scale-100, 8px)",
   alignItems: 'center',
   justifyContent: 'space-between'
 });

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

@@ -7,7 +7,7 @@ import { DialogImage } from '../styled/dialog';
 import SpotlightCard from './spotlight-card';
 import ValueChanged from './value-changed';
 const packageName = "@atlaskit/onboarding";
-const packageVersion = "10.5.4";
+const packageVersion = "10.6.1";
 
 class SpotlightDialog extends Component {
   constructor(...args) {

package/dist/es2019/styled/blanket.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { DN90A, N100A } from '@atlaskit/theme/colors';
 import { themed, useGlobalTheme } from '@atlaskit/theme/components';
 import { layers } from '@atlaskit/theme/constants';

package/dist/es2019/styled/dialog.js

@@ -1,23 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { gridSize as getGridSize } from '@atlaskit/theme/constants';
-const gridSize = getGridSize();
+import { css, jsx } from '@emotion/react';
 const imageStyles = css({
   maxWidth: '100%',
   height: 'auto'
 });
 const actionItemContainerStyles = css({
   display: 'flex',
-  margin: `0 -${gridSize / 2}px`,
+  margin: `${"var(--ds-scale-0, 0px)"} -4px`,
 
   /* When there is more than one action, place primary action visually on the
   right, but keep it's position as the first focusable element in the DOM */
   flexDirection: 'row-reverse'
 });
 const actionItemStyles = css({
-  margin: `0 ${gridSize / 2}px`
+  margin: `${"var(--ds-scale-0, 0px)"} ${"var(--ds-scale-050, 4px)"}`
 });
 /**
  * __Dialog image__

package/dist/es2019/styled/modal.js

@@ -1,11 +1,9 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
-import { borderRadius as getBorderRadius, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { borderRadius as getBorderRadius } from '@atlaskit/theme/constants';
 import { h600 } from '@atlaskit/theme/typography';
-const gridSize = getGridSize();
-const borderRadius = getBorderRadius();
-const actionItemBottomMargin = gridSize / 2; // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+const borderRadius = getBorderRadius(); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 
 const lightH600Styles = css(h600({
   theme: {
@@ -19,12 +17,13 @@ const darkH600Styles = css(h600({
   }
 }));
 const modalBodyStyles = css({
-  padding: '40px 20px',
+  padding: `${"var(--ds-scale-500, 40px)"} ${"var(--ds-scale-250, 20px)"}`,
   textAlign: 'center'
 }); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 
 const modalHeadingStyles = css({
-  marginBottom: `${gridSize}px`,
+  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize}px``
+  marginBottom: "var(--ds-scale-100, 8px)",
   color: 'inherit'
 });
 const modalImageStyles = css({
@@ -38,7 +37,7 @@ const modalImageStyles = css({
 });
 const modalActionContainerStyles = css({
   display: 'flex',
-  padding: `0 40px ${40 - actionItemBottomMargin}px`,
+  padding: `${"var(--ds-scale-0, 0px)"} ${"var(--ds-scale-500, 40px)"} 36px`,
   justifyContent: 'center',
   flexDirection: 'row',
   flexFlow: 'wrap'
@@ -47,7 +46,7 @@ const modalActionContainerReversedStyles = css({
   flexDirection: 'row-reverse'
 });
 const modalActionItemStyles = css({
-  margin: `0 ${gridSize / 2}px ${actionItemBottomMargin}px`
+  margin: `${"var(--ds-scale-0, 0px)"} ${"var(--ds-scale-050, 4px)"} ${"var(--ds-scale-050, 4px)"}`
 });
 /**
  * __Modal body__

package/dist/es2019/styled/target.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { css, jsx, keyframes } from '@emotion/core';
+import { css, jsx, keyframes } from '@emotion/react';
 import { P300 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 // NOTE:

package/dist/es2019/version.json

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

package/dist/esm/components/clone.js

@@ -42,6 +42,7 @@ var Clone = function Clone(props) {
       __html: cloneAndOverrideStyles(targetNode).outerHTML
     },
     style: {
+      height: '100%',
       pointerEvents: 'none'
     }
   }), /*#__PURE__*/React.createElement(TargetOverlay, {

package/dist/esm/components/modal.js

@@ -16,7 +16,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 /** @jsx jsx */
 import { Component } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import Button, { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
 import Modal, { ModalBody } from '@atlaskit/modal-dialog';
 import { ModalBody as Body, ModalHeading as Heading, ModalActionContainer, ModalActionItem, ModalImage } from '../styled/modal';

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

@@ -3,23 +3,23 @@ var _excluded = ["text", "key"];
 
 /** @jsx jsx */
 import React, { forwardRef } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import Button, { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
 import Heading from '@atlaskit/heading';
 import { N0, N50A, N60A, P300 } from '@atlaskit/theme/colors';
 import { createTheme } from '@atlaskit/theme/components';
-import { borderRadius, gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
+import { borderRadius, layers } from '@atlaskit/theme/constants';
 import { DialogActionItem, DialogActionItemContainer } from '../styled/dialog';
 import { spotlightButtonTheme } from './theme';
-var gridSize = getGridSize();
 var bodyStyles = css({
   display: 'flex',
-  padding: "".concat(gridSize * 2, "px ").concat(gridSize * 2.5, "px"),
+  padding: "var(--ds-scale-200, 16px)".concat(" ", "var(--ds-scale-250, 20px)"),
   flexDirection: 'column'
 });
 var defaultHeaderStyles = css({
   display: 'flex',
-  paddingBottom: "".concat(gridSize, "px"),
+  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize}px``
+  paddingBottom: "var(--ds-scale-100, 8px)",
   alignItems: 'baseline',
   justifyContent: 'space-between'
 });
@@ -33,7 +33,8 @@ var DefaultHeader = function DefaultHeader(_ref) {
 
 var defaultFooterStyles = css({
   display: 'flex',
-  paddingTop: "".concat(gridSize, "px"),
+  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize}px``
+  paddingTop: "var(--ds-scale-100, 8px)",
   alignItems: 'center',
   justifyContent: 'space-between'
 });

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

@@ -22,7 +22,7 @@ import { DialogImage } from '../styled/dialog';
 import SpotlightCard from './spotlight-card';
 import ValueChanged from './value-changed';
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "10.5.4";
+var packageVersion = "10.6.1";
 
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   _inherits(SpotlightDialog, _Component);

package/dist/esm/styled/blanket.js

@@ -5,7 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { DN90A, N100A } from '@atlaskit/theme/colors';
 import { themed, useGlobalTheme } from '@atlaskit/theme/components';
 import { layers } from '@atlaskit/theme/constants';

package/dist/esm/styled/dialog.js

@@ -3,23 +3,21 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["alt"];
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { gridSize as getGridSize } from '@atlaskit/theme/constants';
-var gridSize = getGridSize();
+import { css, jsx } from '@emotion/react';
 var imageStyles = css({
   maxWidth: '100%',
   height: 'auto'
 });
 var actionItemContainerStyles = css({
   display: 'flex',
-  margin: "0 -".concat(gridSize / 2, "px"),
+  margin: "var(--ds-scale-0, 0px)".concat(" -4px"),
 
   /* When there is more than one action, place primary action visually on the
   right, but keep it's position as the first focusable element in the DOM */
   flexDirection: 'row-reverse'
 });
 var actionItemStyles = css({
-  margin: "0 ".concat(gridSize / 2, "px")
+  margin: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-050, 4px)")
 });
 /**
  * __Dialog image__

package/dist/esm/styled/modal.js

@@ -1,11 +1,9 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
-import { borderRadius as getBorderRadius, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { borderRadius as getBorderRadius } from '@atlaskit/theme/constants';
 import { h600 } from '@atlaskit/theme/typography';
-var gridSize = getGridSize();
-var borderRadius = getBorderRadius();
-var actionItemBottomMargin = gridSize / 2; // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+var borderRadius = getBorderRadius(); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 
 var lightH600Styles = css(h600({
   theme: {
@@ -19,12 +17,13 @@ var darkH600Styles = css(h600({
   }
 }));
 var modalBodyStyles = css({
-  padding: '40px 20px',
+  padding: "var(--ds-scale-500, 40px)".concat(" ", "var(--ds-scale-250, 20px)"),
   textAlign: 'center'
 }); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 
 var modalHeadingStyles = css({
-  marginBottom: "".concat(gridSize, "px"),
+  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize}px``
+  marginBottom: "var(--ds-scale-100, 8px)",
   color: 'inherit'
 });
 var modalImageStyles = css({
@@ -38,7 +37,7 @@ var modalImageStyles = css({
 });
 var modalActionContainerStyles = css({
   display: 'flex',
-  padding: "0 40px ".concat(40 - actionItemBottomMargin, "px"),
+  padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-500, 40px)", " 36px"),
   justifyContent: 'center',
   flexDirection: 'row',
   flexFlow: 'wrap'
@@ -47,7 +46,7 @@ var modalActionContainerReversedStyles = css({
   flexDirection: 'row-reverse'
 });
 var modalActionItemStyles = css({
-  margin: "0 ".concat(gridSize / 2, "px ").concat(actionItemBottomMargin, "px")
+  margin: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-050, 4px)", " ", "var(--ds-scale-050, 4px)")
 });
 /**
  * __Modal body__

package/dist/esm/styled/target.js

@@ -10,7 +10,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @jsx jsx */
-import { css, jsx, keyframes } from '@emotion/core';
+import { css, jsx, keyframes } from '@emotion/react';
 import { P300 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 // NOTE:

package/dist/esm/version.json

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

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

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { Component, ElementType, ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 import { ModalFooterProps as FooterComponentProps, ModalHeaderProps as HeaderComponentProps } from '@atlaskit/modal-dialog';
 import { Actions } from '../types';
 declare type ModalProps = {
@@ -42,8 +43,8 @@ declare type ModalProps = {
  * - [Usage](https://atlassian.design/components/onboarding/benefits-modal/usage)
  */
 export default class BenefitsModal extends Component<ModalProps> {
-    headerComponent: (props: ModalProps) => ElementType<HeaderComponentProps> | (() => JSX.Element);
-    footerComponent: (props: ModalProps) => ElementType<FooterComponentProps> | (() => JSX.Element | null);
-    render(): JSX.Element;
+    headerComponent: (props: ModalProps) => ElementType<HeaderComponentProps> | (() => jsx.JSX.Element);
+    footerComponent: (props: ModalProps) => ElementType<FooterComponentProps> | (() => jsx.JSX.Element | null);
+    render(): jsx.JSX.Element;
 }
 export {};

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

@@ -57,5 +57,5 @@ export interface SpotlightDialogProps extends WithAnalyticsEventsProps {
      */
     testId?: string;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Omit<SpotlightDialogProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "footer" | "header" | "image" | "testId" | "analyticsContext" | "key" | "actions" | "heading" | "targetNode" | "actionsBeforeElement" | "headingAfterElement" | "dialogPlacement" | "dialogWidth" | "animationStyles"> & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Omit<SpotlightDialogProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "footer" | "header" | "image" | "key" | "testId" | "analyticsContext" | "actions" | "heading" | "targetNode" | "actionsBeforeElement" | "headingAfterElement" | "dialogPlacement" | "dialogWidth" | "animationStyles"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.0/components/modal.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { Component, ElementType, ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 import { ModalFooterProps as FooterComponentProps, ModalHeaderProps as HeaderComponentProps } from '@atlaskit/modal-dialog';
 import { Actions } from '../types';
 declare type ModalProps = {
@@ -42,8 +43,8 @@ declare type ModalProps = {
  * - [Usage](https://atlassian.design/components/onboarding/benefits-modal/usage)
  */
 export default class BenefitsModal extends Component<ModalProps> {
-    headerComponent: (props: ModalProps) => ElementType<HeaderComponentProps> | (() => JSX.Element);
-    footerComponent: (props: ModalProps) => ElementType<FooterComponentProps> | (() => JSX.Element | null);
-    render(): JSX.Element;
+    headerComponent: (props: ModalProps) => ElementType<HeaderComponentProps> | (() => jsx.JSX.Element);
+    footerComponent: (props: ModalProps) => ElementType<FooterComponentProps> | (() => jsx.JSX.Element | null);
+    render(): jsx.JSX.Element;
 }
 export {};

package/dist/types-ts4.0/components/spotlight-dialog.d.ts

@@ -57,5 +57,5 @@ export interface SpotlightDialogProps extends WithAnalyticsEventsProps {
      */
     testId?: string;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Omit<SpotlightDialogProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "footer" | "header" | "image" | "testId" | "analyticsContext" | "key" | "actions" | "heading" | "targetNode" | "actionsBeforeElement" | "headingAfterElement" | "dialogPlacement" | "dialogWidth" | "animationStyles"> & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Omit<SpotlightDialogProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "footer" | "header" | "image" | "key" | "testId" | "analyticsContext" | "actions" | "heading" | "targetNode" | "actionsBeforeElement" | "headingAfterElement" | "dialogPlacement" | "dialogWidth" | "animationStyles"> & React.RefAttributes<any>>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/onboarding",
-  "version": "10.5.4",
+  "version": "10.6.1",
   "description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -15,7 +15,8 @@
   "typesVersions": {
     ">=4.0 <4.5": {
       "*": [
-        "dist/types-ts4.0/*"
+        "dist/types-ts4.0/*",
+        "dist/types-ts4.0/index.d.ts"
       ]
     }
   },
@@ -23,6 +24,7 @@
   "atlaskit:src": "src/index.tsx",
   "homepage": "https://atlassian.design/components/onboarding/",
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
     "releaseModel": "scheduled",
@@ -36,13 +38,13 @@
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/heading": "^0.1.14",
-    "@atlaskit/modal-dialog": "^12.3.0",
+    "@atlaskit/modal-dialog": "^12.4.0",
     "@atlaskit/popper": "^5.0.0",
     "@atlaskit/portal": "^4.0.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9",
+    "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
     "exenv": "^1.2.2",
     "memoize-one": "^6.0.0",
@@ -57,9 +59,9 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/avatar": "^21.0.0",
+    "@atlaskit/avatar": "^21.1.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/icon": "^21.11.0",
     "@atlaskit/progress-indicator": "^9.3.0",
     "@atlaskit/select": "^15.7.0",
     "@atlaskit/ssr": "*",
@@ -80,6 +82,7 @@
     "@repo/internal": {
       "dom-events": "use-bind-event-listener",
       "analytics": "analytics-next",
+      "design-tokens": "spacing",
       "theming": "tokens",
       "styling": [
         "static",

package/report.api.md

@@ -1,6 +1,8 @@
-## API Report File for "@atlaskit/onboarding"
+## API Report File for "@atlaskit/onboarding".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
 /// <reference types="react" />
@@ -9,6 +11,7 @@ import { Component } from 'react';
 import { ComponentType } from 'react';
 import { CustomThemeButtonProps } from '@atlaskit/button/types';
 import { ElementType } from 'react';
+import { jsx } from '@emotion/react';
 import { MemoizedFn } from 'memoize-one';
 import { ModalFooterProps } from '@atlaskit/modal-dialog';
 import { ModalHeaderProps } from '@atlaskit/modal-dialog';
@@ -34,28 +37,39 @@ declare type BaseProps = React.HTMLAttributes<HTMLDivElement> & {
   testId?: string;
 };
 
+/**
+ * @deprecated
+ */
 declare interface CardTokens {
+  /**
+   * @deprecated
+   */
   container: Record<string, string | undefined>;
 }
 
 /**
- * __Onboarding modal__
+ * __Benefits modal__
  *
- * If the product change is large enough,
- * this component can be used to outline the benefits of the change to the user.
+ * A benefits modal explains the benefits of a significant new feature or experience change.
  *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ * - [Examples](https://atlassian.design/components/onboarding/benefits-modal/examples)
+ * - [Code](https://atlassian.design/components/onboarding/benefits-modal/code)
+ * - [Usage](https://atlassian.design/components/onboarding/benefits-modal/usage)
  */
 export declare class Modal extends Component<ModalProps> {
   headerComponent: (
     props: ModalProps,
-  ) => ElementType<ModalHeaderProps> | (() => JSX.Element);
+  ) => ElementType<ModalHeaderProps> | (() => jsx.JSX.Element);
   footerComponent: (
     props: ModalProps,
-  ) => ElementType<ModalFooterProps> | (() => JSX.Element | null);
-  render(): JSX.Element;
+  ) => ElementType<ModalFooterProps> | (() => jsx.JSX.Element | null);
+  render(): jsx.JSX.Element;
 }
 
+/**
+ * @deprecated
+ * Custom button themes are deprecated and will be removed in the future.
+ */
 export declare const modalButtonTheme: (
   current: any,
   themeProps: Record<string, any>,
@@ -97,21 +111,34 @@ export { ModalTransition };
 /**
  * __Spotlight__
  *
- * A spotlight gives visual focus to an element and is paired with a dialog.
+ * An onboarding spotlight introduces new features to users through focused messages or multi-step tours.
  *
- * Spotlights are used for onboarding and can be connected to create a tour.
- *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ * - [Examples](https://atlassian.design/components/onboarding/examples)
+ * - [Code](https://atlassian.design/components/onboarding/code)
+ * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
 export declare const Spotlight: React_2.FC<SpotlightProps>;
 
+/**
+ * @deprecated
+ * Custom button themes are deprecated and will be removed in the future.
+ */
 export declare const spotlightButtonTheme: (
   current: any,
   themeProps: Record<string, any>,
 ) => any;
 
+/**
+ * __Spotlight card__
+ *
+ * A spotlight card is for onboarding messages that need a more flexible layout, or don't require a dialog.
+ *
+ * - [Examples](https://atlassian.design/components/onboarding/spotlight-card/examples)
+ * - [Code](https://atlassian.design/components/onboarding/spotlight-card/code)
+ * - [Usage](https://atlassian.design/components/onboarding/spotlight-card/usage)
+ */
 export declare const SpotlightCard: React_2.ForwardRefExoticComponent<
-  SpotlightCardProps & React_2.RefAttributes<HTMLElement>
+  SpotlightCardProps & React_2.RefAttributes<HTMLDivElement>
 >;
 
 declare interface SpotlightCardProps {
@@ -151,14 +178,19 @@ declare interface SpotlightCardProps {
    */
   isFlat?: boolean;
   /**
-   * The theme of the card
+   * @deprecated
+   * Theme prop is deprecated and will be removed in the future.
    */
   theme?: ThemeProp<CardTokens, {}>;
   /**
-   * Width of the card in pixels
+   * Width of the card in pixels.
    */
   width?: number;
-  innerRef?: Ref<HTMLElement> | null;
+  /**
+   * @deprecated
+   * Use `ref` instead.
+   */
+  innerRef?: Ref<HTMLDivElement> | null;
   /**
    * A `testId` prop is provided for specified elements,
    * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
@@ -170,9 +202,11 @@ declare interface SpotlightCardProps {
 /**
  * __Spotlight manager__
  *
- * Wraps usage of spotlight and manages progression through multiple spotlights.
+ * A spotlight manager manages the visibility of spotlights used to introduce new features to users through focused messages or multi-step tours.
  *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ * - [Examples](https://atlassian.design/components/onboarding/examples)
+ * - [Code](https://atlassian.design/components/onboarding/code)
+ * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
 export declare class SpotlightManager extends PureComponent<
   SpotlightManagerProps,
@@ -218,7 +252,7 @@ declare interface SpotlightManagerProps {
   children: ReactNode;
   /**
    * @deprecated
-   * Replaces the wrapping fragment with component
+   * Component is deprecated and will be removed in the future.
    */
   component?: ElementType;
 }
@@ -320,20 +354,24 @@ declare interface SpotlightProps {
 }
 
 /**
- * __Pulse__
+ * __Spotlight pulse__
  *
- * Allows consumers to apply the spotlight pulse effect in a custom way.
+ * A spotlight pulse draws attention to a new feature.
  *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ * - [Examples](https://atlassian.design/components/onboarding/examples)
+ * - [Code](https://atlassian.design/components/onboarding/code)
+ * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
 export declare const SpotlightPulse: React.FC<TargetProps>;
 
 /**
  * __Spotlight target__
  *
- * Wraps an element, allowing it to be targeted by a spotlight.
+ * A spotlight target marks a component to be used for introducing new features to users through focused messages or multi-step tours.
  *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ * - [Examples](https://atlassian.design/components/onboarding/examples)
+ * - [Code](https://atlassian.design/components/onboarding/code)
+ * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
 export declare const SpotlightTarget: React_2.FC<SpotlightTargetProps>;
 
@@ -351,9 +389,11 @@ declare interface SpotlightTargetProps {
 /**
  * __Spotlight transition__
  *
- * Provides context used for fading animations.
+ * A spotlight transition holds onto spotlights so they can fade out when exiting the viewport.
  *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ * - [Examples](https://atlassian.design/components/onboarding/examples)
+ * - [Code](https://atlassian.design/components/onboarding/code)
+ * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
 export declare class SpotlightTransition extends React_2.Component<
   SpotlightTransitionProps,
@@ -390,13 +430,7 @@ declare type TargetProps = Omit<BaseProps, 'css'> & {
 };
 
 /**
- * Enables advanced usage of spotlights.
- *
- * Provides the following methods:
- * - `isTargetRendered`
- *
- *    Checks if the given spotlight target is currently
- *    being rendered.
+ * Use spotlight hook returns information about available spotlight targets.
  */
 export declare function useSpotlight(): {
   isTargetRendered: (target: string) => boolean;