@atlaskit/onboarding 11.2.0 → 11.2.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/onboarding
 
+## 11.2.2
+
+### Patch Changes
+
+- [#69022](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/69022) [`395c74147990`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/395c74147990) - Migrate packages to use declarative entry points
+
+## 11.2.1
+
+### Patch Changes
+
+- [#67032](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67032) [`038e62a39d23`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/038e62a39d23) - [ux] Ensure spotlight dialog always uses heading level 2. This will eventually become heading level 1 once the dialog becomes a true modal.
+
 ## 11.2.0
 
 ### Minor Changes

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() { 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 = "11.2.0";
+var packageVersion = "11.2.2";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);
@@ -138,6 +138,10 @@ var SpotlightDialog = /*#__PURE__*/function (_Component) {
           },
           heading: heading,
           headingAfterElement: headingAfterElement
+          // This should be heading level 1 since this is technically a modal, including a focus lock on the modal window.
+          // But because it is not a _true_ modal, we are setting it to `2` until that is fixed.
+          ,
+          headingLevel: 2
         }, children))));
       });
     }

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.2.0";
+const packageVersion = "11.2.2";
 class SpotlightDialog extends Component {
   constructor(...args) {
     super(...args);
@@ -109,6 +109,10 @@ class SpotlightDialog extends Component {
       },
       heading: heading,
       headingAfterElement: headingAfterElement
+      // This should be heading level 1 since this is technically a modal, including a focus lock on the modal window.
+      // But because it is not a _true_ modal, we are setting it to `2` until that is fixed.
+      ,
+      headingLevel: 2
     }, children)))));
   }
 }

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.2.0";
+var packageVersion = "11.2.2";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   _inherits(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);
@@ -128,6 +128,10 @@ var SpotlightDialog = /*#__PURE__*/function (_Component) {
           },
           heading: heading,
           headingAfterElement: headingAfterElement
+          // This should be heading level 1 since this is technically a modal, including a focus lock on the modal window.
+          // But because it is not a _true_ modal, we are setting it to `2` until that is fixed.
+          ,
+          headingLevel: 2
         }, children))));
       });
     }

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

@@ -1,19 +1,19 @@
 import { MouseEvent } from 'react';
 export interface CloneProps {
     /**
-     * Whether or not to display a pulse animation around the spotlighted element
+     * Whether or not to display a pulse animation around the spotlighted element.
      */
     pulse: boolean;
     /**
-     * An object containing the information used for positioning clone
+     * An object containing the information used for positioning clone.
      */
     style: Record<string, any>;
     /**
-     * The name of the SpotlightTarget
+     * The name of the SpotlightTarget.
      */
     target?: string;
     /**
-     * The spotlight target node
+     * The spotlight target node.
      */
     targetNode: HTMLElement;
     /**
@@ -21,14 +21,14 @@ export interface CloneProps {
      */
     targetBgColor?: string;
     /**
-     * Function to fire when a user clicks on the cloned target
+     * 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
+     * The border radius of the element being highlighted.
      */
     targetRadius?: number;
     /**

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

@@ -5,31 +5,31 @@ import { ModalFooterProps as FooterComponentProps, ModalHeaderProps as HeaderCom
 import { Actions } from '../types';
 type ModalProps = {
     /**
-     * Buttons to render in the footer
+     * Buttons to render in the footer.
      */
     actions?: Actions;
     /**
-     * The elements rendered in the modal
+     * The elements rendered in the modal.
      */
     children: ReactNode;
     /**
-     * Path to the the your image
+     * Path to the image.
      */
     image?: string;
     /**
-     * Optional element rendered above the body
+     * Optional element rendered above the body.
      */
     header?: ElementType<HeaderComponentProps>;
     /**
-     * Optional element rendered below the body
+     * Optional element rendered below the body.
      */
     footer?: ElementType<FooterComponentProps>;
     /**
-     * Heading text rendered above the body
+     * Heading text rendered above the body.
      */
     heading?: string;
     /**
-     * Boolean prop to confirm if primary button in the footer should be shown on the right
+     * Boolean prop to confirm if primary button in the footer should be shown on the right.
      */
     experimental_shouldShowPrimaryButtonOnRight?: boolean;
 };

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

@@ -3,26 +3,26 @@ import { ComponentType, ReactNode, Ref } from 'react';
 import { Actions } from '../types';
 interface SpotlightCardProps {
     /**
-     * Buttons to render in the footer
+     * Buttons to render in the footer.
      */
     actions?: Actions;
     /**
-     * An optional element rendered to the left of the footer actions
+     * An optional element rendered to the left of the footer actions.
      */
     actionsBeforeElement?: ReactNode;
     /**
-     * The content of the card
+     * The content of the card.
      */
     children?: ReactNode;
     /**
-     * The container elements rendered by the component
+     * The container elements rendered by the component.
      */
     components?: {
         Header?: ComponentType<any>;
         Footer?: ComponentType<any>;
     };
     /**
-     * The heading to be rendered above the body
+     * The heading to be rendered above the body content.
      */
     heading?: ReactNode;
     /**
@@ -31,15 +31,15 @@ interface SpotlightCardProps {
      */
     headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     /**
-     * An optional element rendered to the right of the heading
+     * An optional element rendered to the right of the heading, usually used to number steps in a multi-step flow.
      */
     headingAfterElement?: ReactNode;
     /**
-     * The image src to render above the heading
+     * The image src to render above the heading.
      */
     image?: string | ReactNode;
     /**
-     * Removes elevation styles if set
+     * Removes elevation styles if set.
      */
     isFlat?: boolean;
     /**
@@ -61,7 +61,7 @@ interface SpotlightCardProps {
      */
     testId?: string;
     /**
-     * The id of heading
+     * The ID of heading.
      */
     headingId?: string;
 }

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

@@ -3,15 +3,15 @@ import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { Actions } from '../types';
 export interface SpotlightDialogProps extends WithAnalyticsEventsProps {
     /**
-     * Buttons to render in the footer
+     * Buttons to render in the footer.
      */
     actions?: Actions;
     /**
-     * An optional element rendered beside the footer actions
+     * An optional element rendered beside the footer actions.
      */
     actionsBeforeElement?: ReactNode;
     /**
-     * The elements rendered in the modal
+     * The elements rendered in the modal.
      */
     children?: ReactNode;
     /**
@@ -19,35 +19,35 @@ export interface SpotlightDialogProps extends WithAnalyticsEventsProps {
      */
     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. Min 160 - Max 600
+     * 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
+     * Optional element rendered below the body.
      */
     footer?: ComponentType<any>;
     /**
-     * Optional element rendered above the body
+     * Optional element rendered above the body.
      */
     header?: ComponentType<any>;
     /**
-     * Heading text rendered above the body
+     * Heading text rendered above the body.
      */
     heading?: string;
     /**
-     * An optional element rendered to the right of the heading
+     * An optional element rendered to the right of the heading.
      */
     headingAfterElement?: ReactNode;
     /**
-     * Path to the  image
+     * Path to the image.
      */
     image?: string;
     /**
-     * The spotlight target node
+     * The spotlight target node.
      */
     targetNode: HTMLElement;
     /**
-     * js object containing the animation styles to apply to component
+     * Javascript object containing the animation styles to apply to component.
      */
     animationStyles: Object;
     /**

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

@@ -3,15 +3,15 @@ import { ElementBoundingBox } from '../utils/use-element-box';
 import { SpotlightProps } from './spotlight';
 export interface SpotlightInnerProps extends SpotlightProps {
     /**
-     * The spotlight target dom element
+     * The spotlight target DOM element.
      */
     targetNode: HTMLElement;
     /**
-     * Called when the component has been mounted
+     * Called when the component has been mounted.
      */
     onOpened: () => any;
     /**
-     * Called when the component has been unmounted
+     * Called when the component has been unmounted.
      */
     onClosed: () => any;
     /**
@@ -21,7 +21,7 @@ export interface SpotlightInnerProps extends SpotlightProps {
      */
     pulse: boolean;
     /**
-     * The width of the dialog in pixels. Min 160 - Max 600.
+     * The width of the dialog in pixels. The minimum possible width is 160px and the maximum width is 600px.
      *
      * Same as `SpotlightProps` but required instead of optional.
      */

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

@@ -18,11 +18,11 @@ export { TargetConsumer };
 export { SpotlightContext, SpotlightStateConsumer as SpotlightConsumer };
 interface SpotlightManagerProps {
     /**
-     * Boolean prop for toggling blanket transparency
+     * Boolean prop for toggling blanket transparency.
      */
     blanketIsTinted?: boolean;
     /**
-     * Typically the app, or a section of the app
+     * Typically the app, or a section of the app.
      */
     children: ReactNode;
     /**

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

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
 interface SpotlightTargetProps {
     /**
-     * A single child
+     * A single child.
      */
     children: ReactNode;
     /**
-     * The name to reference from Spotlight
+     * The name to reference from Spotlight.
      */
     name: string;
 }

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

@@ -2,15 +2,15 @@ import { ComponentType, MouseEvent, ReactNode } from 'react';
 import { Actions } from '../types';
 export interface SpotlightProps {
     /**
-     * Buttons to render in the footer
+     * Buttons to render in the footer.
      */
     actions?: Actions;
     /**
-     * An optional node to be rendered beside the footer actions
+     * An optional node to be rendered beside the footer actions.
      */
     actionsBeforeElement?: ReactNode;
     /**
-     * The elements rendered in the modal
+     * The elements rendered in the modal.
      */
     children?: ReactNode;
     /**
@@ -18,58 +18,58 @@ export interface SpotlightProps {
      */
     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. Min 160 - Max 600
+     * 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
+     * Optional element rendered below the body.
      */
     footer?: ComponentType<any>;
     /**
-     * Optional element rendered above the body
+     * Optional element rendered above the body.
      */
     header?: ComponentType<any>;
     /**
-     * Heading text rendered above the body
+     * Heading text rendered above the body.
      */
     heading?: string;
     /**
-     * An optional element rendered to the right of the heading
+     * An optional element rendered to the right of the heading.
      */
     headingAfterElement?: ReactNode;
     /**
-     * Path to the the your image
+     * Path to the image.
      */
     image?: string;
     /**
-     * Whether or not to display a pulse animation around the spotlighted element
+     * Whether or not to display a pulse animation around the spotlighted element.
      */
     pulse?: boolean;
     /**
-     * The name of the SpotlightTarget
+     * The name of the SpotlightTarget.
      */
     target?: string;
     /**
-     * The spotlight target node
+     * The spotlight target node.
      */
     targetNode?: HTMLElement;
     /**
-     * The background color of the element being highlighted
+     * The background color of the element being highlighted.
      */
     targetBgColor?: string;
     /**
-     * Function to fire when a user clicks on the cloned target
+     * 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
+     * The border radius of the element being highlighted.
      */
     targetRadius?: number;
     /**
-     * Alternative element to render than the wrapped target
+     * Alternative element to render than the wrapped target.
      */
     targetReplacement?: ComponentType<any>;
     /**

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

@@ -1,19 +1,19 @@
 import { MouseEvent } from 'react';
 export interface CloneProps {
     /**
-     * Whether or not to display a pulse animation around the spotlighted element
+     * Whether or not to display a pulse animation around the spotlighted element.
      */
     pulse: boolean;
     /**
-     * An object containing the information used for positioning clone
+     * An object containing the information used for positioning clone.
      */
     style: Record<string, any>;
     /**
-     * The name of the SpotlightTarget
+     * The name of the SpotlightTarget.
      */
     target?: string;
     /**
-     * The spotlight target node
+     * The spotlight target node.
      */
     targetNode: HTMLElement;
     /**
@@ -21,14 +21,14 @@ export interface CloneProps {
      */
     targetBgColor?: string;
     /**
-     * Function to fire when a user clicks on the cloned target
+     * 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
+     * The border radius of the element being highlighted.
      */
     targetRadius?: number;
     /**

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

@@ -5,31 +5,31 @@ import { ModalFooterProps as FooterComponentProps, ModalHeaderProps as HeaderCom
 import { Actions } from '../types';
 type ModalProps = {
     /**
-     * Buttons to render in the footer
+     * Buttons to render in the footer.
      */
     actions?: Actions;
     /**
-     * The elements rendered in the modal
+     * The elements rendered in the modal.
      */
     children: ReactNode;
     /**
-     * Path to the the your image
+     * Path to the image.
      */
     image?: string;
     /**
-     * Optional element rendered above the body
+     * Optional element rendered above the body.
      */
     header?: ElementType<HeaderComponentProps>;
     /**
-     * Optional element rendered below the body
+     * Optional element rendered below the body.
      */
     footer?: ElementType<FooterComponentProps>;
     /**
-     * Heading text rendered above the body
+     * Heading text rendered above the body.
      */
     heading?: string;
     /**
-     * Boolean prop to confirm if primary button in the footer should be shown on the right
+     * Boolean prop to confirm if primary button in the footer should be shown on the right.
      */
     experimental_shouldShowPrimaryButtonOnRight?: boolean;
 };

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

@@ -3,26 +3,26 @@ import { ComponentType, ReactNode, Ref } from 'react';
 import { Actions } from '../types';
 interface SpotlightCardProps {
     /**
-     * Buttons to render in the footer
+     * Buttons to render in the footer.
      */
     actions?: Actions;
     /**
-     * An optional element rendered to the left of the footer actions
+     * An optional element rendered to the left of the footer actions.
      */
     actionsBeforeElement?: ReactNode;
     /**
-     * The content of the card
+     * The content of the card.
      */
     children?: ReactNode;
     /**
-     * The container elements rendered by the component
+     * The container elements rendered by the component.
      */
     components?: {
         Header?: ComponentType<any>;
         Footer?: ComponentType<any>;
     };
     /**
-     * The heading to be rendered above the body
+     * The heading to be rendered above the body content.
      */
     heading?: ReactNode;
     /**
@@ -31,15 +31,15 @@ interface SpotlightCardProps {
      */
     headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     /**
-     * An optional element rendered to the right of the heading
+     * An optional element rendered to the right of the heading, usually used to number steps in a multi-step flow.
      */
     headingAfterElement?: ReactNode;
     /**
-     * The image src to render above the heading
+     * The image src to render above the heading.
      */
     image?: string | ReactNode;
     /**
-     * Removes elevation styles if set
+     * Removes elevation styles if set.
      */
     isFlat?: boolean;
     /**
@@ -61,7 +61,7 @@ interface SpotlightCardProps {
      */
     testId?: string;
     /**
-     * The id of heading
+     * The ID of heading.
      */
     headingId?: string;
 }

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

@@ -3,15 +3,15 @@ import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { Actions } from '../types';
 export interface SpotlightDialogProps extends WithAnalyticsEventsProps {
     /**
-     * Buttons to render in the footer
+     * Buttons to render in the footer.
      */
     actions?: Actions;
     /**
-     * An optional element rendered beside the footer actions
+     * An optional element rendered beside the footer actions.
      */
     actionsBeforeElement?: ReactNode;
     /**
-     * The elements rendered in the modal
+     * The elements rendered in the modal.
      */
     children?: ReactNode;
     /**
@@ -19,35 +19,35 @@ export interface SpotlightDialogProps extends WithAnalyticsEventsProps {
      */
     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. Min 160 - Max 600
+     * 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
+     * Optional element rendered below the body.
      */
     footer?: ComponentType<any>;
     /**
-     * Optional element rendered above the body
+     * Optional element rendered above the body.
      */
     header?: ComponentType<any>;
     /**
-     * Heading text rendered above the body
+     * Heading text rendered above the body.
      */
     heading?: string;
     /**
-     * An optional element rendered to the right of the heading
+     * An optional element rendered to the right of the heading.
      */
     headingAfterElement?: ReactNode;
     /**
-     * Path to the  image
+     * Path to the image.
      */
     image?: string;
     /**
-     * The spotlight target node
+     * The spotlight target node.
      */
     targetNode: HTMLElement;
     /**
-     * js object containing the animation styles to apply to component
+     * Javascript object containing the animation styles to apply to component.
      */
     animationStyles: Object;
     /**

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

@@ -3,15 +3,15 @@ import { ElementBoundingBox } from '../utils/use-element-box';
 import { SpotlightProps } from './spotlight';
 export interface SpotlightInnerProps extends SpotlightProps {
     /**
-     * The spotlight target dom element
+     * The spotlight target DOM element.
      */
     targetNode: HTMLElement;
     /**
-     * Called when the component has been mounted
+     * Called when the component has been mounted.
      */
     onOpened: () => any;
     /**
-     * Called when the component has been unmounted
+     * Called when the component has been unmounted.
      */
     onClosed: () => any;
     /**
@@ -21,7 +21,7 @@ export interface SpotlightInnerProps extends SpotlightProps {
      */
     pulse: boolean;
     /**
-     * The width of the dialog in pixels. Min 160 - Max 600.
+     * The width of the dialog in pixels. The minimum possible width is 160px and the maximum width is 600px.
      *
      * Same as `SpotlightProps` but required instead of optional.
      */

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

@@ -18,11 +18,11 @@ export { TargetConsumer };
 export { SpotlightContext, SpotlightStateConsumer as SpotlightConsumer };
 interface SpotlightManagerProps {
     /**
-     * Boolean prop for toggling blanket transparency
+     * Boolean prop for toggling blanket transparency.
      */
     blanketIsTinted?: boolean;
     /**
-     * Typically the app, or a section of the app
+     * Typically the app, or a section of the app.
      */
     children: ReactNode;
     /**

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

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
 interface SpotlightTargetProps {
     /**
-     * A single child
+     * A single child.
      */
     children: ReactNode;
     /**
-     * The name to reference from Spotlight
+     * The name to reference from Spotlight.
      */
     name: string;
 }

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

@@ -2,15 +2,15 @@ import { ComponentType, MouseEvent, ReactNode } from 'react';
 import { Actions } from '../types';
 export interface SpotlightProps {
     /**
-     * Buttons to render in the footer
+     * Buttons to render in the footer.
      */
     actions?: Actions;
     /**
-     * An optional node to be rendered beside the footer actions
+     * An optional node to be rendered beside the footer actions.
      */
     actionsBeforeElement?: ReactNode;
     /**
-     * The elements rendered in the modal
+     * The elements rendered in the modal.
      */
     children?: ReactNode;
     /**
@@ -18,58 +18,58 @@ export interface SpotlightProps {
      */
     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. Min 160 - Max 600
+     * 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
+     * Optional element rendered below the body.
      */
     footer?: ComponentType<any>;
     /**
-     * Optional element rendered above the body
+     * Optional element rendered above the body.
      */
     header?: ComponentType<any>;
     /**
-     * Heading text rendered above the body
+     * Heading text rendered above the body.
      */
     heading?: string;
     /**
-     * An optional element rendered to the right of the heading
+     * An optional element rendered to the right of the heading.
      */
     headingAfterElement?: ReactNode;
     /**
-     * Path to the the your image
+     * Path to the image.
      */
     image?: string;
     /**
-     * Whether or not to display a pulse animation around the spotlighted element
+     * Whether or not to display a pulse animation around the spotlighted element.
      */
     pulse?: boolean;
     /**
-     * The name of the SpotlightTarget
+     * The name of the SpotlightTarget.
      */
     target?: string;
     /**
-     * The spotlight target node
+     * The spotlight target node.
      */
     targetNode?: HTMLElement;
     /**
-     * The background color of the element being highlighted
+     * The background color of the element being highlighted.
      */
     targetBgColor?: string;
     /**
-     * Function to fire when a user clicks on the cloned target
+     * 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
+     * The border radius of the element being highlighted.
      */
     targetRadius?: number;
     /**
-     * Alternative element to render than the wrapped target
+     * Alternative element to render than the wrapped target.
      */
     targetReplacement?: ComponentType<any>;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/onboarding",
-  "version": "11.2.0",
+  "version": "11.2.2",
   "description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -22,10 +22,13 @@
   },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
+  "af:exports": {
+    ".": "./src/index.tsx",
+    "./types": "./src/types.tsx"
+  },
   "homepage": "https://atlassian.design/components/onboarding/",
   "atlassian": {
     "team": "Design System Team",
-    "deprecatedAutoEntryPoints": true,
     "releaseModel": "continuous",
     "website": {
       "name": "Onboarding (spotlight)",
@@ -34,14 +37,14 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^17.1.0",
+    "@atlaskit/button": "^17.2.0",
     "@atlaskit/ds-lib": "^2.2.0",
-    "@atlaskit/heading": "^1.4.0",
+    "@atlaskit/heading": "^1.5.0",
     "@atlaskit/modal-dialog": "^12.10.0",
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/portal": "^4.4.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.32.0",
+    "@atlaskit/tokens": "^1.34.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -94,4 +97,4 @@
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+}