@atlaskit/onboarding 11.10.2 → 11.10.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/onboarding
 
+## 11.10.4
+
+### Patch Changes
+
+- [#125754](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/125754)
+  [`aa57c66a5b798`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/aa57c66a5b798) -
+  Migrating ipm-choreographer out of post-office and into platform. Fixing tests and lint checks for
+  ipm-choreographer, and adding a bugfix for Engagekit. Also, a minor change to @atlaskit/onboarding
+  to export the SpotlightProps interface.
+
+## 11.10.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.10.2
 
 ### Patch Changes

package/dist/cjs/components/modal.js

@@ -28,7 +28,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * @jsxRuntime classic
- */ /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 // TODO: DSP-1250 - use a composable API consistent with normal modal dialog
 /**
  * __Benefits modal__

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

@@ -17,8 +17,8 @@ var _theme = require("./theme");
 var _excluded = ["text", "key"];
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

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

@@ -27,7 +27,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "11.10.2";
+var packageVersion = "11.10.4";
 var SpotlightDialogComponent = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialogComponent, _Component);
   var _super = _createSuper(SpotlightDialogComponent);

package/dist/cjs/styled/blanket.js

@@ -12,7 +12,8 @@ var _constants = require("@atlaskit/theme/constants");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
  * @jsxRuntime classic
- */ /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 // 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, _react.css)({

package/dist/cjs/styled/dialog.js

@@ -11,8 +11,8 @@ var _react = require("@emotion/react");
 var _excluded = ["alt"];
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var imageStyles = (0, _react.css)({
   maxWidth: '100%',

package/dist/cjs/styled/modal.js

@@ -9,8 +9,8 @@ var _typography = require("@atlaskit/theme/typography");
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/styled/target.js

@@ -16,8 +16,8 @@ var _excluded = ["children", "bgColor", "radius", "style", "testId"],
   _excluded3 = ["children", "pulse", "testId"];
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }

package/dist/es2019/components/modal.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { Component } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

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

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { forwardRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

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 = "11.10.2";
+const packageVersion = "11.10.4";
 class SpotlightDialogComponent extends Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/components/spotlight.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import SpotlightInner from './spotlight-inner';
 import { SpotlightConsumer } from './spotlight-manager';
+
 /**
  * __Spotlight__
  *

package/dist/es2019/styled/blanket.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { N100A } from '@atlaskit/theme/colors';

package/dist/es2019/styled/dialog.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';

package/dist/es2019/styled/modal.js

@@ -1,8 +1,8 @@
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';

package/dist/es2019/styled/target.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx, keyframes } from '@emotion/react';

package/dist/esm/components/modal.js

@@ -13,8 +13,8 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { Component } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

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

@@ -2,8 +2,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["text", "key"];
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { forwardRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

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

@@ -17,7 +17,7 @@ import { DialogImage } from '../styled/dialog';
 import SpotlightCard from './spotlight-card';
 import ValueChanged from './value-changed';
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "11.10.2";
+var packageVersion = "11.10.4";
 var SpotlightDialogComponent = /*#__PURE__*/function (_Component) {
   _inherits(SpotlightDialogComponent, _Component);
   var _super = _createSuper(SpotlightDialogComponent);

package/dist/esm/components/spotlight.js

@@ -4,6 +4,7 @@ var _excluded = ["dialogWidth", "pulse", "testId", "targetNode", "target"];
 import React from 'react';
 import SpotlightInner from './spotlight-inner';
 import { SpotlightConsumer } from './spotlight-manager';
+
 /**
  * __Spotlight__
  *

package/dist/esm/styled/blanket.js

@@ -3,8 +3,8 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { N100A } from '@atlaskit/theme/colors';

package/dist/esm/styled/dialog.js

@@ -3,8 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["alt"];
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';

package/dist/esm/styled/modal.js

@@ -1,8 +1,8 @@
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';

package/dist/esm/styled/target.js

@@ -8,8 +8,8 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx, keyframes } from '@emotion/react';

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

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { Component, type ElementType, type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 import { type ModalFooterProps as FooterComponentProps, type ModalHeaderProps as HeaderComponentProps } from '@atlaskit/modal-dialog';

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

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { type ComponentType, type ReactNode, type Ref } from 'react';
 import { type Actions } from '../types';
 interface SpotlightCardProps {

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import { type ScrollLogicalPosition } from '../types';
+import { type ScrollLogicalPosition, type SpotlightProps } from '../types';
 import { type ElementBoundingBox } from '../utils/use-element-box';
-import { type SpotlightProps } from './spotlight';
 export interface SpotlightInnerProps extends SpotlightProps {
     /**
      * The spotlight target DOM element.

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

@@ -1,92 +1,5 @@
-import { type ComponentType, type MouseEvent, type ReactNode } from 'react';
-import { type Actions, type ScrollLogicalPosition } from '../types';
-export interface SpotlightProps {
-    /**
-     * Buttons to render in the footer.
-     */
-    actions?: Actions;
-    /**
-     * An optional node to be rendered beside the footer actions.
-     */
-    actionsBeforeElement?: ReactNode;
-    /**
-     * The elements rendered in the modal.
-     */
-    children?: ReactNode;
-    /**
-     * Where the dialog should appear, relative to the contents of the children.
-     */
-    dialogPlacement?: 'top left' | 'top center' | 'top right' | 'right top' | 'right middle' | 'right bottom' | 'bottom left' | 'bottom center' | 'bottom right' | 'left top' | 'left middle' | 'left bottom';
-    /**
-     * The width of the dialog in pixels. The minimum possible width is 160px and the maximum width is 600px.
-     */
-    dialogWidth?: number;
-    /**
-     * Optional element rendered below the body.
-     */
-    footer?: ComponentType<any>;
-    /**
-     * Optional element rendered above the body.
-     */
-    header?: ComponentType<any>;
-    /**
-     * Heading text rendered above the body.
-     */
-    heading?: string;
-    /**
-     * An optional element rendered to the right of the heading.
-     */
-    headingAfterElement?: ReactNode;
-    /**
-     * Path to the image.
-     */
-    image?: string;
-    /**
-     * Whether or not to display a pulse animation around the spotlighted element.
-     */
-    pulse?: boolean;
-    /**
-     * The name of the SpotlightTarget.
-     */
-    target?: string;
-    /**
-     * The spotlight target node.
-     */
-    targetNode?: HTMLElement;
-    /**
-     * The background color of the element being highlighted.
-     */
-    targetBgColor?: string;
-    /**
-     * Function to fire when a person clicks on the cloned target.
-     */
-    targetOnClick?: (eventData: {
-        event: MouseEvent<HTMLElement>;
-        target?: string;
-    }) => void;
-    /**
-     * The border radius of the element being highlighted.
-     */
-    targetRadius?: number;
-    /**
-     * Alternative element to render than the wrapped target.
-     */
-    targetReplacement?: ComponentType<any>;
-    /**
-    This prop is a unique string that appears as an attribute `data-testid` in the rendered HTML output serving as a hook for automated tests.
-    As this component is composed of multiple components we use this `testId` as a prefix:
-
-    - `"${testId}--dialog"` to identify the spotlight dialog
-    - `"${testId}--target"` to identify the spotlight target clone
-
-    Defaults to `"spotlight"`.
-   */
-    testId?: string;
-    /**
-     * Used set the 'block' attribute on scrollIntoView, which determines the vertical alignment of the target node to the nearest scrollable ancestor.
-     */
-    scrollPositionBlock?: ScrollLogicalPosition;
-}
+/// <reference types="react" />
+import { type SpotlightProps } from '../types';
 /**
  * __Spotlight__
  *

package/dist/types/styled/blanket.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 type BlanketProps = {
     isTinted?: boolean;

package/dist/types/styled/dialog.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { type ImgHTMLAttributes, type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 type DialogImageProps = ImgHTMLAttributes<HTMLImageElement>;

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

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 type ModalImageProps = {

package/dist/types/styled/target.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { type HTMLAttributes, type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 type BaseProps = React.HTMLAttributes<HTMLDivElement> & {

package/dist/types/types.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type ComponentType, type MouseEvent, type ReactNode } from 'react';
 import { type CustomThemeButtonProps } from '@atlaskit/button/types';
 interface Action extends Omit<CustomThemeButtonProps, 'children'> {
     key?: string;
@@ -6,3 +6,90 @@ interface Action extends Omit<CustomThemeButtonProps, 'children'> {
 }
 export type Actions = Action[];
 export type { ScrollLogicalPosition } from 'scroll-into-view-if-needed/typings/types';
+export interface SpotlightProps {
+    /**
+     * Buttons to render in the footer.
+     */
+    actions?: Actions;
+    /**
+     * An optional node to be rendered beside the footer actions.
+     */
+    actionsBeforeElement?: ReactNode;
+    /**
+     * The elements rendered in the modal.
+     */
+    children?: ReactNode;
+    /**
+     * Where the dialog should appear, relative to the contents of the children.
+     */
+    dialogPlacement?: 'top left' | 'top center' | 'top right' | 'right top' | 'right middle' | 'right bottom' | 'bottom left' | 'bottom center' | 'bottom right' | 'left top' | 'left middle' | 'left bottom';
+    /**
+     * The width of the dialog in pixels. The minimum possible width is 160px and the maximum width is 600px.
+     */
+    dialogWidth?: number;
+    /**
+     * Optional element rendered below the body.
+     */
+    footer?: ComponentType<any>;
+    /**
+     * Optional element rendered above the body.
+     */
+    header?: ComponentType<any>;
+    /**
+     * Heading text rendered above the body.
+     */
+    heading?: string;
+    /**
+     * An optional element rendered to the right of the heading.
+     */
+    headingAfterElement?: ReactNode;
+    /**
+     * Path to the image.
+     */
+    image?: string;
+    /**
+     * Whether or not to display a pulse animation around the spotlighted element.
+     */
+    pulse?: boolean;
+    /**
+     * The name of the SpotlightTarget.
+     */
+    target?: string;
+    /**
+     * The spotlight target node.
+     */
+    targetNode?: HTMLElement;
+    /**
+     * The background color of the element being highlighted.
+     */
+    targetBgColor?: string;
+    /**
+     * Function to fire when a person clicks on the cloned target.
+     */
+    targetOnClick?: (eventData: {
+        event: MouseEvent<HTMLElement>;
+        target?: string;
+    }) => void;
+    /**
+     * The border radius of the element being highlighted.
+     */
+    targetRadius?: number;
+    /**
+     * Alternative element to render than the wrapped target.
+     */
+    targetReplacement?: ComponentType<any>;
+    /**
+    This prop is a unique string that appears as an attribute `data-testid` in the rendered HTML output serving as a hook for automated tests.
+    As this component is composed of multiple components we use this `testId` as a prefix:
+
+    - `"${testId}--dialog"` to identify the spotlight dialog
+    - `"${testId}--target"` to identify the spotlight target clone
+
+    Defaults to `"spotlight"`.
+   */
+    testId?: string;
+    /**
+     * Used set the 'block' attribute on scrollIntoView, which determines the vertical alignment of the target node to the nearest scrollable ancestor.
+     */
+    scrollPositionBlock?: ScrollLogicalPosition;
+}

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

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { Component, type ElementType, type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 import { type ModalFooterProps as FooterComponentProps, type ModalHeaderProps as HeaderComponentProps } from '@atlaskit/modal-dialog';

package/dist/types-ts4.5/components/spotlight-card.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { type ComponentType, type ReactNode, type Ref } from 'react';
 import { type Actions } from '../types';
 interface SpotlightCardProps {

package/dist/types-ts4.5/components/spotlight-inner.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import { type ScrollLogicalPosition } from '../types';
+import { type ScrollLogicalPosition, type SpotlightProps } from '../types';
 import { type ElementBoundingBox } from '../utils/use-element-box';
-import { type SpotlightProps } from './spotlight';
 export interface SpotlightInnerProps extends SpotlightProps {
     /**
      * The spotlight target DOM element.

package/dist/types-ts4.5/components/spotlight.d.ts

@@ -1,92 +1,5 @@
-import { type ComponentType, type MouseEvent, type ReactNode } from 'react';
-import { type Actions, type ScrollLogicalPosition } from '../types';
-export interface SpotlightProps {
-    /**
-     * Buttons to render in the footer.
-     */
-    actions?: Actions;
-    /**
-     * An optional node to be rendered beside the footer actions.
-     */
-    actionsBeforeElement?: ReactNode;
-    /**
-     * The elements rendered in the modal.
-     */
-    children?: ReactNode;
-    /**
-     * Where the dialog should appear, relative to the contents of the children.
-     */
-    dialogPlacement?: 'top left' | 'top center' | 'top right' | 'right top' | 'right middle' | 'right bottom' | 'bottom left' | 'bottom center' | 'bottom right' | 'left top' | 'left middle' | 'left bottom';
-    /**
-     * The width of the dialog in pixels. The minimum possible width is 160px and the maximum width is 600px.
-     */
-    dialogWidth?: number;
-    /**
-     * Optional element rendered below the body.
-     */
-    footer?: ComponentType<any>;
-    /**
-     * Optional element rendered above the body.
-     */
-    header?: ComponentType<any>;
-    /**
-     * Heading text rendered above the body.
-     */
-    heading?: string;
-    /**
-     * An optional element rendered to the right of the heading.
-     */
-    headingAfterElement?: ReactNode;
-    /**
-     * Path to the image.
-     */
-    image?: string;
-    /**
-     * Whether or not to display a pulse animation around the spotlighted element.
-     */
-    pulse?: boolean;
-    /**
-     * The name of the SpotlightTarget.
-     */
-    target?: string;
-    /**
-     * The spotlight target node.
-     */
-    targetNode?: HTMLElement;
-    /**
-     * The background color of the element being highlighted.
-     */
-    targetBgColor?: string;
-    /**
-     * Function to fire when a person clicks on the cloned target.
-     */
-    targetOnClick?: (eventData: {
-        event: MouseEvent<HTMLElement>;
-        target?: string;
-    }) => void;
-    /**
-     * The border radius of the element being highlighted.
-     */
-    targetRadius?: number;
-    /**
-     * Alternative element to render than the wrapped target.
-     */
-    targetReplacement?: ComponentType<any>;
-    /**
-    This prop is a unique string that appears as an attribute `data-testid` in the rendered HTML output serving as a hook for automated tests.
-    As this component is composed of multiple components we use this `testId` as a prefix:
-
-    - `"${testId}--dialog"` to identify the spotlight dialog
-    - `"${testId}--target"` to identify the spotlight target clone
-
-    Defaults to `"spotlight"`.
-   */
-    testId?: string;
-    /**
-     * Used set the 'block' attribute on scrollIntoView, which determines the vertical alignment of the target node to the nearest scrollable ancestor.
-     */
-    scrollPositionBlock?: ScrollLogicalPosition;
-}
+/// <reference types="react" />
+import { type SpotlightProps } from '../types';
 /**
  * __Spotlight__
  *

package/dist/types-ts4.5/styled/blanket.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 type BlanketProps = {
     isTinted?: boolean;

package/dist/types-ts4.5/styled/dialog.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { type ImgHTMLAttributes, type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 type DialogImageProps = ImgHTMLAttributes<HTMLImageElement>;

package/dist/types-ts4.5/styled/modal.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 type ModalImageProps = {

package/dist/types-ts4.5/styled/target.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { type HTMLAttributes, type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 type BaseProps = React.HTMLAttributes<HTMLDivElement> & {

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

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type ComponentType, type MouseEvent, type ReactNode } from 'react';
 import { type CustomThemeButtonProps } from '@atlaskit/button/types';
 interface Action extends Omit<CustomThemeButtonProps, 'children'> {
     key?: string;
@@ -6,3 +6,90 @@ interface Action extends Omit<CustomThemeButtonProps, 'children'> {
 }
 export type Actions = Action[];
 export type { ScrollLogicalPosition } from 'scroll-into-view-if-needed/typings/types';
+export interface SpotlightProps {
+    /**
+     * Buttons to render in the footer.
+     */
+    actions?: Actions;
+    /**
+     * An optional node to be rendered beside the footer actions.
+     */
+    actionsBeforeElement?: ReactNode;
+    /**
+     * The elements rendered in the modal.
+     */
+    children?: ReactNode;
+    /**
+     * Where the dialog should appear, relative to the contents of the children.
+     */
+    dialogPlacement?: 'top left' | 'top center' | 'top right' | 'right top' | 'right middle' | 'right bottom' | 'bottom left' | 'bottom center' | 'bottom right' | 'left top' | 'left middle' | 'left bottom';
+    /**
+     * The width of the dialog in pixels. The minimum possible width is 160px and the maximum width is 600px.
+     */
+    dialogWidth?: number;
+    /**
+     * Optional element rendered below the body.
+     */
+    footer?: ComponentType<any>;
+    /**
+     * Optional element rendered above the body.
+     */
+    header?: ComponentType<any>;
+    /**
+     * Heading text rendered above the body.
+     */
+    heading?: string;
+    /**
+     * An optional element rendered to the right of the heading.
+     */
+    headingAfterElement?: ReactNode;
+    /**
+     * Path to the image.
+     */
+    image?: string;
+    /**
+     * Whether or not to display a pulse animation around the spotlighted element.
+     */
+    pulse?: boolean;
+    /**
+     * The name of the SpotlightTarget.
+     */
+    target?: string;
+    /**
+     * The spotlight target node.
+     */
+    targetNode?: HTMLElement;
+    /**
+     * The background color of the element being highlighted.
+     */
+    targetBgColor?: string;
+    /**
+     * Function to fire when a person clicks on the cloned target.
+     */
+    targetOnClick?: (eventData: {
+        event: MouseEvent<HTMLElement>;
+        target?: string;
+    }) => void;
+    /**
+     * The border radius of the element being highlighted.
+     */
+    targetRadius?: number;
+    /**
+     * Alternative element to render than the wrapped target.
+     */
+    targetReplacement?: ComponentType<any>;
+    /**
+    This prop is a unique string that appears as an attribute `data-testid` in the rendered HTML output serving as a hook for automated tests.
+    As this component is composed of multiple components we use this `testId` as a prefix:
+
+    - `"${testId}--dialog"` to identify the spotlight dialog
+    - `"${testId}--target"` to identify the spotlight target clone
+
+    Defaults to `"spotlight"`.
+   */
+    testId?: string;
+    /**
+     * Used set the 'block' attribute on scrollIntoView, which determines the vertical alignment of the target node to the nearest scrollable ancestor.
+     */
+    scrollPositionBlock?: ScrollLogicalPosition;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "11.10.2",
+	"version": "11.10.4",
 	"description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -41,7 +41,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^9.3.0",
-		"@atlaskit/button": "^18.4.0",
+		"@atlaskit/button": "^19.1.0",
 		"@atlaskit/ds-lib": "^2.3.0",
 		"@atlaskit/heading": "^2.4.0",
 		"@atlaskit/modal-dialog": "^12.14.0",
@@ -49,9 +49,9 @@
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popper": "^6.1.0",
 		"@atlaskit/portal": "^4.6.0",
-		"@atlaskit/primitives": "^11.0.0",
+		"@atlaskit/primitives": "^11.1.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.54.0",
+		"@atlaskit/tokens": "^1.56.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",