@atlaskit/onboarding 11.1.1 → 11.1.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/onboarding
 
+## 11.1.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.1.2
+
+### Patch Changes
+
+- [#59147](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59147) [`f12e489f23b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f12e489f23b0) - Re-build and deploy packages to NPM to resolve React/Compiled not found error (HOT-106483).
+
 ## 11.1.1
 
 ### Patch Changes

package/dist/cjs/components/modal.js

@@ -16,6 +16,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
+var _react2 = require("@emotion/react");
 var _customThemeButton = _interopRequireWildcard(require("@atlaskit/button/custom-theme-button"));
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
 var _modal = require("../styled/modal");
@@ -25,7 +26,7 @@ var _excluded = ["text", "key"],
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 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; }
 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; } }
+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; } } /** @jsx jsx */
 // TODO: DSP-1250 - use a composable API consistent with normal modal dialog
 /**
  * __Benefits modal__
@@ -50,7 +51,7 @@ var BenefitsModal = exports.default = /*#__PURE__*/function (_Component) {
       var HeaderElement = props.header,
         src = props.image;
       var ImageElement = function ImageElement() {
-        return /*#__PURE__*/React.createElement(_modal.ModalImage, {
+        return (0, _react2.jsx)(_modal.ModalImage, {
           src: src,
           alt: ""
         });
@@ -63,18 +64,18 @@ var BenefitsModal = exports.default = /*#__PURE__*/function (_Component) {
         _props$experimental_s = props.experimental_shouldShowPrimaryButtonOnRight,
         experimental_shouldShowPrimaryButtonOnRight = _props$experimental_s === void 0 ? false : _props$experimental_s;
       var ActionsElement = function ActionsElement() {
-        return actionList ? /*#__PURE__*/React.createElement(_customThemeButton.Theme.Provider, {
+        return actionList ? (0, _react2.jsx)(_customThemeButton.Theme.Provider, {
           value: _theme.modalButtonTheme
-        }, /*#__PURE__*/React.createElement(_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 /*#__PURE__*/React.createElement(_modal.ModalActionItem, {
+          return (0, _react2.jsx)(_modal.ModalActionItem, {
             key: key || (typeof text === 'string' ? text : "".concat(idx))
-          }, /*#__PURE__*/React.createElement(_customThemeButton.default, (0, _extends2.default)({
+          }, (0, _react2.jsx)(_customThemeButton.default, (0, _extends2.default)({
             appearance: variant,
             autoFocus: !idx
           }, rest), text));
@@ -94,12 +95,12 @@ var BenefitsModal = exports.default = /*#__PURE__*/function (_Component) {
         props = (0, _objectWithoutProperties2.default)(_this$props, _excluded2);
       var Header = this.headerComponent(this.props);
       var Footer = this.footerComponent(this.props);
-      return /*#__PURE__*/React.createElement(_modalDialog.default, (0, _extends2.default)({
+      return (0, _react2.jsx)(_modalDialog.default, (0, _extends2.default)({
         autoFocus: true,
         shouldScrollInViewport: true,
         shouldCloseOnOverlayClick: false,
         shouldCloseOnEscapePress: false
-      }, props), /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/React.createElement(_modal.ModalBody, null, heading && /*#__PURE__*/React.createElement(_modal.ModalHeading, null, heading), children)), /*#__PURE__*/React.createElement(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

@@ -16,6 +16,7 @@ var _constants = require("@atlaskit/theme/constants");
 var _dialog = require("../styled/dialog");
 var _theme = require("./theme");
 var _excluded = ["text", "key"];
+/** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 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 bodyStyles = (0, _react2.css)({
@@ -34,7 +35,7 @@ var defaultHeaderStyles = (0, _react2.css)({
 });
 var DefaultHeader = function DefaultHeader(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/React.createElement("div", {
+  return (0, _react2.jsx)("div", {
     css: defaultHeaderStyles
   }, children);
 };
@@ -46,7 +47,7 @@ var defaultFooterStyles = (0, _react2.css)({
 });
 var DefaultFooter = function DefaultFooter(_ref2) {
   var children = _ref2.children;
-  return /*#__PURE__*/React.createElement("div", {
+  return (0, _react2.jsx)("div", {
     css: defaultFooterStyles
   }, children);
 };
@@ -90,9 +91,9 @@ 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 /*#__PURE__*/React.createElement(_customThemeButton.Theme.Provider, {
+  return (0, _react2.jsx)(_customThemeButton.Theme.Provider, {
     value: _theme.spotlightButtonTheme
-  }, /*#__PURE__*/React.createElement("div", {
+  }, (0, _react2.jsx)("div", {
     css: [containerStyles, !isFlat && containerShadowStyles],
     style: {
       minWidth: '160px',
@@ -101,24 +102,24 @@ var SpotlightCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     },
     ref: ref || innerRef,
     "data-testid": testId
-  }, typeof image === 'string' ? /*#__PURE__*/React.createElement("img", {
+  }, typeof image === 'string' ? (0, _react2.jsx)("img", {
     css: imageStyles,
     src: image,
     alt: ""
-  }) : image, /*#__PURE__*/React.createElement("div", {
+  }) : image, (0, _react2.jsx)("div", {
     css: bodyStyles
-  }, heading || headingAfterElement ? /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(_heading.default, {
+  }, heading || headingAfterElement ? (0, _react2.jsx)(Header, null, (0, _react2.jsx)(_heading.default, {
     id: headingId,
     color: "inverse",
     level: "h600",
     as: "h4"
-  }, heading), headingAfterElement) : null, children, actions.length > 0 || actionsBeforeElement ? /*#__PURE__*/React.createElement(Footer, null, actionsBeforeElement || /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement(_dialog.DialogActionItemContainer, null, actions.map(function (_ref3, 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 (_ref3, idx) {
     var text = _ref3.text,
       key = _ref3.key,
       rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
-    return /*#__PURE__*/React.createElement(_dialog.DialogActionItem, {
+    return (0, _react2.jsx)(_dialog.DialogActionItem, {
       key: key || (typeof text === 'string' ? text : "".concat(idx))
-    }, /*#__PURE__*/React.createElement(_customThemeButton.default, rest, text));
+    }, (0, _react2.jsx)(_customThemeButton.default, rest, text));
   }))) : null)));
 });
 SpotlightCard.displayName = 'SpotlightCard';

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.1.1";
+var packageVersion = "11.1.3";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);

package/dist/cjs/styled/blanket.js

@@ -10,7 +10,7 @@ var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 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; }
+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; } /** @jsx jsx */
 // 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)({
@@ -31,7 +31,7 @@ var blanketStyles = (0, _react.css)({
  * @internal
  */
 var Blanket = function Blanket(props) {
-  return /*#__PURE__*/React.createElement("div", {
+  return (0, _react.jsx)("div", {
     css: blanketStyles,
     style: _objectSpread(_objectSpread({}, props.style), {}, {
       backgroundColor: props.isTinted ? "var(--ds-blanket, ".concat(_colors.N100A, ")") : 'transparent'

package/dist/cjs/styled/dialog.js

@@ -9,6 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("@emotion/react");
 var _excluded = ["alt"];
+/** @jsx jsx */
 var imageStyles = (0, _react.css)({
   maxWidth: '100%',
   height: 'auto'
@@ -34,9 +35,8 @@ var DialogImage = exports.DialogImage = function DialogImage(_ref) {
   var alt = _ref.alt,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (
-    /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    React.createElement("img", (0, _extends2.default)({
+    (0, _react.jsx)("img", (0, _extends2.default)({
       css: imageStyles,
       alt: alt
     }, props))
@@ -52,7 +52,7 @@ var DialogImage = exports.DialogImage = function DialogImage(_ref) {
  */
 var DialogActionItemContainer = exports.DialogActionItemContainer = function DialogActionItemContainer(_ref2) {
   var children = _ref2.children;
-  return /*#__PURE__*/React.createElement("div", {
+  return (0, _react.jsx)("div", {
     css: actionItemContainerStyles
   }, children);
 };
@@ -66,7 +66,7 @@ var DialogActionItemContainer = exports.DialogActionItemContainer = function Dia
  */
 var DialogActionItem = exports.DialogActionItem = function DialogActionItem(_ref3) {
   var children = _ref3.children;
-  return /*#__PURE__*/React.createElement("div", {
+  return (0, _react.jsx)("div", {
     css: actionItemStyles
   }, children);
 };

package/dist/cjs/styled/modal.js

@@ -7,6 +7,7 @@ exports.ModalImage = exports.ModalHeading = exports.ModalBody = exports.ModalAct
 var _react = require("@emotion/react");
 var _typography = require("@atlaskit/theme/typography");
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
+/** @jsx jsx */
 
 var modalBodyStyles = (0, _react.css)({
   padding: "var(--ds-space-500, 40px)".concat(" ", "var(--ds-space-200, 16px)"),
@@ -52,7 +53,7 @@ var modalActionItemStyles = (0, _react.css)({
  */
 var ModalBody = exports.ModalBody = function ModalBody(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/React.createElement("div", {
+  return (0, _react.jsx)("div", {
     css: modalBodyStyles
   }, children);
 };
@@ -64,7 +65,7 @@ var ModalBody = exports.ModalBody = function ModalBody(_ref) {
  */
 var ModalHeading = exports.ModalHeading = function ModalHeading(_ref2) {
   var children = _ref2.children;
-  return /*#__PURE__*/React.createElement("h4", {
+  return (0, _react.jsx)("h4", {
     css: modalHeadingStyles
   }, children);
 };
@@ -77,7 +78,7 @@ var ModalHeading = exports.ModalHeading = function ModalHeading(_ref2) {
 var ModalImage = exports.ModalImage = function ModalImage(_ref3) {
   var alt = _ref3.alt,
     src = _ref3.src;
-  return /*#__PURE__*/React.createElement("img", {
+  return (0, _react.jsx)("img", {
     css: modalImageStyles,
     alt: alt,
     src: src
@@ -92,7 +93,7 @@ var ModalImage = exports.ModalImage = function ModalImage(_ref3) {
 var ModalActionContainer = exports.ModalActionContainer = function ModalActionContainer(_ref4) {
   var children = _ref4.children,
     shouldReverseButtonOrder = _ref4.shouldReverseButtonOrder;
-  return /*#__PURE__*/React.createElement("div", {
+  return (0, _react.jsx)("div", {
     css: [modalActionContainerStyles, shouldReverseButtonOrder && modalActionContainerReversedStyles]
   }, children);
 };
@@ -104,7 +105,7 @@ var ModalActionContainer = exports.ModalActionContainer = function ModalActionCo
  */
 var ModalActionItem = exports.ModalActionItem = function ModalActionItem(_ref5) {
   var children = _ref5.children;
-  return /*#__PURE__*/React.createElement("div", {
+  return (0, _react.jsx)("div", {
     css: modalActionItemStyles
   }, children);
 };

package/dist/cjs/styled/target.js

@@ -14,6 +14,7 @@ var _constants = require("@atlaskit/theme/constants");
 var _excluded = ["children", "bgColor", "radius", "style", "testId"],
   _excluded2 = ["children", "pulse"],
   _excluded3 = ["children", "pulse", "testId"];
+/** @jsx jsx */
 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; }
 // NOTE:
@@ -46,7 +47,7 @@ var Base = function Base(_ref) {
     style = _ref.style,
     testId = _ref.testId,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
+  return (0, _react.jsx)("div", (0, _extends2.default)({
     css: baseStyles,
     "data-testid": testId,
     style: _objectSpread(_objectSpread({}, style), {}, {
@@ -69,9 +70,8 @@ var TargetInner = exports.TargetInner = function TargetInner(_ref2) {
     pulse = _ref2.pulse,
     props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
   return (
-    /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    React.createElement(Base, (0, _extends2.default)({}, props, {
+    (0, _react.jsx)(Base, (0, _extends2.default)({}, props, {
       css: [pulse && animationStyles]
     }), children)
   );
@@ -95,7 +95,7 @@ var targetOverlayStyles = (0, _react.css)({
  * @internal
  */
 var TargetOverlay = exports.TargetOverlay = function TargetOverlay(props) {
-  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, props, {
+  return (0, _react.jsx)("div", (0, _extends2.default)({}, props, {
     css: targetOverlayStyles,
     style: {
       cursor: props.onClick ? 'pointer' : 'auto'
@@ -119,9 +119,8 @@ var Pulse = exports.Pulse = function Pulse(_ref3) {
     testId = _ref3.testId,
     props = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
   return (
-    /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    React.createElement(Base, (0, _extends2.default)({}, props, {
+    (0, _react.jsx)(Base, (0, _extends2.default)({}, props, {
       css: [pulse && animationStyles],
       testId: testId
     }), children)

package/dist/es2019/components/modal.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
 import { Component } from 'react';
+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';
@@ -25,7 +27,7 @@ export default class BenefitsModal extends Component {
         header: HeaderElement,
         image: src
       } = props;
-      const ImageElement = () => /*#__PURE__*/React.createElement(ModalImage, {
+      const ImageElement = () => jsx(ModalImage, {
         src: src,
         alt: ""
       });
@@ -37,9 +39,9 @@ export default class BenefitsModal extends Component {
         actions: actionList,
         experimental_shouldShowPrimaryButtonOnRight = false
       } = props;
-      const ActionsElement = () => actionList ? /*#__PURE__*/React.createElement(ButtonTheme.Provider, {
+      const ActionsElement = () => actionList ? jsx(ButtonTheme.Provider, {
         value: modalButtonTheme
-      }, /*#__PURE__*/React.createElement(ModalActionContainer, {
+      }, jsx(ModalActionContainer, {
         shouldReverseButtonOrder: experimental_shouldShowPrimaryButtonOnRight
       }, actionList.map(({
         text,
@@ -47,9 +49,9 @@ export default class BenefitsModal extends Component {
         ...rest
       }, idx) => {
         const variant = idx ? 'subtle-link' : 'primary';
-        return /*#__PURE__*/React.createElement(ModalActionItem, {
+        return jsx(ModalActionItem, {
           key: key || (typeof text === 'string' ? text : `${idx}`)
-        }, /*#__PURE__*/React.createElement(Button, _extends({
+        }, jsx(Button, _extends({
           appearance: variant,
           autoFocus: !idx
         }, rest), text));
@@ -66,11 +68,11 @@ export default class BenefitsModal extends Component {
     } = this.props;
     const Header = this.headerComponent(this.props);
     const Footer = this.footerComponent(this.props);
-    return /*#__PURE__*/React.createElement(Modal, _extends({
+    return jsx(Modal, _extends({
       autoFocus: true,
       shouldScrollInViewport: true,
       shouldCloseOnOverlayClick: false,
       shouldCloseOnEscapePress: false
-    }, props), /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Body, null, heading && /*#__PURE__*/React.createElement(Heading, null, heading), children)), /*#__PURE__*/React.createElement(Footer, null));
+    }, props), jsx(Header, null), jsx(ModalBody, null, jsx(Body, null, heading && jsx(Heading, null, heading), children)), jsx(Footer, null));
   }
 }

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

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 import { forwardRef } from 'react';
-import { css } from '@emotion/react';
+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';
@@ -22,7 +23,7 @@ const defaultHeaderStyles = css({
 });
 const DefaultHeader = ({
   children
-}) => /*#__PURE__*/React.createElement("div", {
+}) => jsx("div", {
   css: defaultHeaderStyles
 }, children);
 const defaultFooterStyles = css({
@@ -33,7 +34,7 @@ const defaultFooterStyles = css({
 });
 const DefaultFooter = ({
   children
-}) => /*#__PURE__*/React.createElement("div", {
+}) => jsx("div", {
   css: defaultFooterStyles
 }, children);
 const containerStyles = css({
@@ -75,9 +76,9 @@ const SpotlightCard = /*#__PURE__*/forwardRef((props, ref) => {
     Header = DefaultHeader,
     Footer = DefaultFooter
   } = components;
-  return /*#__PURE__*/React.createElement(ButtonTheme.Provider, {
+  return jsx(ButtonTheme.Provider, {
     value: spotlightButtonTheme
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     css: [containerStyles, !isFlat && containerShadowStyles],
     style: {
       minWidth: '160px',
@@ -86,25 +87,25 @@ const SpotlightCard = /*#__PURE__*/forwardRef((props, ref) => {
     },
     ref: ref || innerRef,
     "data-testid": testId
-  }, typeof image === 'string' ? /*#__PURE__*/React.createElement("img", {
+  }, typeof image === 'string' ? jsx("img", {
     css: imageStyles,
     src: image,
     alt: ""
-  }) : image, /*#__PURE__*/React.createElement("div", {
+  }) : image, jsx("div", {
     css: bodyStyles
-  }, heading || headingAfterElement ? /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(Heading, {
+  }, heading || headingAfterElement ? jsx(Header, null, jsx(Heading, {
     id: headingId,
     color: "inverse",
     level: "h600",
     as: "h4"
-  }, heading), headingAfterElement) : null, children, actions.length > 0 || actionsBeforeElement ? /*#__PURE__*/React.createElement(Footer, null, actionsBeforeElement || /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement(DialogActionItemContainer, null, actions.map(({
+  }, heading), headingAfterElement) : null, children, actions.length > 0 || actionsBeforeElement ? jsx(Footer, null, actionsBeforeElement || jsx("span", null), jsx(DialogActionItemContainer, null, actions.map(({
     text,
     key,
     ...rest
   }, idx) => {
-    return /*#__PURE__*/React.createElement(DialogActionItem, {
+    return jsx(DialogActionItem, {
       key: key || (typeof text === 'string' ? text : `${idx}`)
-    }, /*#__PURE__*/React.createElement(Button, rest, text));
+    }, jsx(Button, rest, text));
   }))) : null)));
 });
 SpotlightCard.displayName = 'SpotlightCard';

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

package/dist/es2019/styled/blanket.js

@@ -1,4 +1,5 @@
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { N100A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 // IE11 and Edge: z-index needed because fixed position calculates z-index relative
@@ -21,7 +22,7 @@ const blanketStyles = css({
  * @internal
  */
 const Blanket = props => {
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: blanketStyles,
     style: {
       ...props.style,

package/dist/es2019/styled/dialog.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { css } from '@emotion/react';
+/** @jsx jsx */
+
+import { css, jsx } from '@emotion/react';
 const imageStyles = css({
   maxWidth: '100%',
   height: 'auto'
@@ -25,9 +27,8 @@ export const DialogImage = ({
   alt,
   ...props
 }) =>
-/*#__PURE__*/
 // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-React.createElement("img", _extends({
+jsx("img", _extends({
   css: imageStyles,
   alt: alt
 }, props));
@@ -41,7 +42,7 @@ React.createElement("img", _extends({
  */
 export const DialogActionItemContainer = ({
   children
-}) => /*#__PURE__*/React.createElement("div", {
+}) => jsx("div", {
   css: actionItemContainerStyles
 }, children);
 
@@ -54,6 +55,6 @@ export const DialogActionItemContainer = ({
  */
 export const DialogActionItem = ({
   children
-}) => /*#__PURE__*/React.createElement("div", {
+}) => jsx("div", {
   css: actionItemStyles
 }, children);

package/dist/es2019/styled/modal.js

@@ -1,6 +1,7 @@
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
+/** @jsx jsx */
 
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { h600 } from '@atlaskit/theme/typography';
 const modalBodyStyles = css({
   padding: `${"var(--ds-space-500, 40px)"} ${"var(--ds-space-200, 16px)"}`,
@@ -46,7 +47,7 @@ const modalActionItemStyles = css({
  */
 export const ModalBody = ({
   children
-}) => /*#__PURE__*/React.createElement("div", {
+}) => jsx("div", {
   css: modalBodyStyles
 }, children);
 
@@ -58,7 +59,7 @@ export const ModalBody = ({
 export const ModalHeading = ({
   children
 }) => {
-  return /*#__PURE__*/React.createElement("h4", {
+  return jsx("h4", {
     css: modalHeadingStyles
   }, children);
 };
@@ -71,7 +72,7 @@ export const ModalHeading = ({
 export const ModalImage = ({
   alt,
   src
-}) => /*#__PURE__*/React.createElement("img", {
+}) => jsx("img", {
   css: modalImageStyles,
   alt: alt,
   src: src
@@ -85,7 +86,7 @@ export const ModalImage = ({
 export const ModalActionContainer = ({
   children,
   shouldReverseButtonOrder
-}) => /*#__PURE__*/React.createElement("div", {
+}) => jsx("div", {
   css: [modalActionContainerStyles, shouldReverseButtonOrder && modalActionContainerReversedStyles]
 }, children);
 
@@ -96,6 +97,6 @@ export const ModalActionContainer = ({
  */
 export const ModalActionItem = ({
   children
-}) => /*#__PURE__*/React.createElement("div", {
+}) => jsx("div", {
   css: modalActionItemStyles
 }, children);

package/dist/es2019/styled/target.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { css, keyframes } from '@emotion/react';
+/** @jsx jsx */
+
+import { css, jsx, keyframes } from '@emotion/react';
 import { P300 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 // NOTE:
@@ -32,7 +34,7 @@ const Base = ({
   style,
   testId,
   ...props
-}) => /*#__PURE__*/React.createElement("div", _extends({
+}) => jsx("div", _extends({
   css: baseStyles,
   "data-testid": testId,
   style: {
@@ -55,9 +57,8 @@ export const TargetInner = ({
   pulse,
   ...props
 }) =>
-/*#__PURE__*/
 // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-React.createElement(Base, _extends({}, props, {
+jsx(Base, _extends({}, props, {
   css: [pulse && animationStyles]
 }), children);
 const targetOverlayStyles = css({
@@ -78,7 +79,7 @@ const targetOverlayStyles = css({
  *
  * @internal
  */
-export const TargetOverlay = props => /*#__PURE__*/React.createElement("div", _extends({}, props, {
+export const TargetOverlay = props => jsx("div", _extends({}, props, {
   css: targetOverlayStyles,
   style: {
     cursor: props.onClick ? 'pointer' : 'auto'
@@ -100,9 +101,8 @@ export const Pulse = ({
   testId,
   ...props
 }) =>
-/*#__PURE__*/
 // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-React.createElement(Base, _extends({}, props, {
+jsx(Base, _extends({}, props, {
   css: [pulse && animationStyles],
   testId: testId
 }), children);

package/dist/esm/components/modal.js

@@ -11,7 +11,9 @@ var _excluded = ["text", "key"],
   _excluded2 = ["actions", "children", "heading"];
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+/** @jsx jsx */
 import { Component } from 'react';
+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';
@@ -41,7 +43,7 @@ var BenefitsModal = /*#__PURE__*/function (_Component) {
       var HeaderElement = props.header,
         src = props.image;
       var ImageElement = function ImageElement() {
-        return /*#__PURE__*/React.createElement(ModalImage, {
+        return jsx(ModalImage, {
           src: src,
           alt: ""
         });
@@ -54,18 +56,18 @@ var BenefitsModal = /*#__PURE__*/function (_Component) {
         _props$experimental_s = props.experimental_shouldShowPrimaryButtonOnRight,
         experimental_shouldShowPrimaryButtonOnRight = _props$experimental_s === void 0 ? false : _props$experimental_s;
       var ActionsElement = function ActionsElement() {
-        return actionList ? /*#__PURE__*/React.createElement(ButtonTheme.Provider, {
+        return actionList ? jsx(ButtonTheme.Provider, {
           value: modalButtonTheme
-        }, /*#__PURE__*/React.createElement(ModalActionContainer, {
+        }, jsx(ModalActionContainer, {
           shouldReverseButtonOrder: experimental_shouldShowPrimaryButtonOnRight
         }, actionList.map(function (_ref, idx) {
           var text = _ref.text,
             key = _ref.key,
             rest = _objectWithoutProperties(_ref, _excluded);
           var variant = idx ? 'subtle-link' : 'primary';
-          return /*#__PURE__*/React.createElement(ModalActionItem, {
+          return jsx(ModalActionItem, {
             key: key || (typeof text === 'string' ? text : "".concat(idx))
-          }, /*#__PURE__*/React.createElement(Button, _extends({
+          }, jsx(Button, _extends({
             appearance: variant,
             autoFocus: !idx
           }, rest), text));
@@ -85,12 +87,12 @@ var BenefitsModal = /*#__PURE__*/function (_Component) {
         props = _objectWithoutProperties(_this$props, _excluded2);
       var Header = this.headerComponent(this.props);
       var Footer = this.footerComponent(this.props);
-      return /*#__PURE__*/React.createElement(Modal, _extends({
+      return jsx(Modal, _extends({
         autoFocus: true,
         shouldScrollInViewport: true,
         shouldCloseOnOverlayClick: false,
         shouldCloseOnEscapePress: false
-      }, props), /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Body, null, heading && /*#__PURE__*/React.createElement(Heading, null, heading), children)), /*#__PURE__*/React.createElement(Footer, null));
+      }, props), jsx(Header, null), jsx(ModalBody, null, jsx(Body, null, heading && jsx(Heading, null, heading), children)), jsx(Footer, null));
     }
   }]);
   return BenefitsModal;

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

@@ -1,7 +1,8 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["text", "key"];
+/** @jsx jsx */
 import { forwardRef } from 'react';
-import { css } from '@emotion/react';
+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';
@@ -24,7 +25,7 @@ var defaultHeaderStyles = css({
 });
 var DefaultHeader = function DefaultHeader(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: defaultHeaderStyles
   }, children);
 };
@@ -36,7 +37,7 @@ var defaultFooterStyles = css({
 });
 var DefaultFooter = function DefaultFooter(_ref2) {
   var children = _ref2.children;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: defaultFooterStyles
   }, children);
 };
@@ -80,9 +81,9 @@ var SpotlightCard = /*#__PURE__*/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 /*#__PURE__*/React.createElement(ButtonTheme.Provider, {
+  return jsx(ButtonTheme.Provider, {
     value: spotlightButtonTheme
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     css: [containerStyles, !isFlat && containerShadowStyles],
     style: {
       minWidth: '160px',
@@ -91,24 +92,24 @@ var SpotlightCard = /*#__PURE__*/forwardRef(function (props, ref) {
     },
     ref: ref || innerRef,
     "data-testid": testId
-  }, typeof image === 'string' ? /*#__PURE__*/React.createElement("img", {
+  }, typeof image === 'string' ? jsx("img", {
     css: imageStyles,
     src: image,
     alt: ""
-  }) : image, /*#__PURE__*/React.createElement("div", {
+  }) : image, jsx("div", {
     css: bodyStyles
-  }, heading || headingAfterElement ? /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(Heading, {
+  }, heading || headingAfterElement ? jsx(Header, null, jsx(Heading, {
     id: headingId,
     color: "inverse",
     level: "h600",
     as: "h4"
-  }, heading), headingAfterElement) : null, children, actions.length > 0 || actionsBeforeElement ? /*#__PURE__*/React.createElement(Footer, null, actionsBeforeElement || /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement(DialogActionItemContainer, null, actions.map(function (_ref3, idx) {
+  }, heading), headingAfterElement) : null, children, actions.length > 0 || actionsBeforeElement ? jsx(Footer, null, actionsBeforeElement || jsx("span", null), jsx(DialogActionItemContainer, null, actions.map(function (_ref3, idx) {
     var text = _ref3.text,
       key = _ref3.key,
       rest = _objectWithoutProperties(_ref3, _excluded);
-    return /*#__PURE__*/React.createElement(DialogActionItem, {
+    return jsx(DialogActionItem, {
       key: key || (typeof text === 'string' ? text : "".concat(idx))
-    }, /*#__PURE__*/React.createElement(Button, rest, text));
+    }, jsx(Button, rest, text));
   }))) : null)));
 });
 SpotlightCard.displayName = 'SpotlightCard';

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.1.1";
+var packageVersion = "11.1.3";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   _inherits(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);

package/dist/esm/styled/blanket.js

@@ -1,7 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _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; }
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { N100A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 // IE11 and Edge: z-index needed because fixed position calculates z-index relative
@@ -24,7 +25,7 @@ var blanketStyles = css({
  * @internal
  */
 var Blanket = function Blanket(props) {
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: blanketStyles,
     style: _objectSpread(_objectSpread({}, props.style), {}, {
       backgroundColor: props.isTinted ? "var(--ds-blanket, ".concat(N100A, ")") : 'transparent'

package/dist/esm/styled/dialog.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["alt"];
-import { css } from '@emotion/react';
+/** @jsx jsx */
+
+import { css, jsx } from '@emotion/react';
 var imageStyles = css({
   maxWidth: '100%',
   height: 'auto'
@@ -27,9 +29,8 @@ export var DialogImage = function DialogImage(_ref) {
   var alt = _ref.alt,
     props = _objectWithoutProperties(_ref, _excluded);
   return (
-    /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    React.createElement("img", _extends({
+    jsx("img", _extends({
       css: imageStyles,
       alt: alt
     }, props))
@@ -45,7 +46,7 @@ export var DialogImage = function DialogImage(_ref) {
  */
 export var DialogActionItemContainer = function DialogActionItemContainer(_ref2) {
   var children = _ref2.children;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: actionItemContainerStyles
   }, children);
 };
@@ -59,7 +60,7 @@ export var DialogActionItemContainer = function DialogActionItemContainer(_ref2)
  */
 export var DialogActionItem = function DialogActionItem(_ref3) {
   var children = _ref3.children;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: actionItemStyles
   }, children);
 };

package/dist/esm/styled/modal.js

@@ -1,6 +1,7 @@
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
+/** @jsx jsx */
 
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { h600 } from '@atlaskit/theme/typography';
 var modalBodyStyles = css({
   padding: "var(--ds-space-500, 40px)".concat(" ", "var(--ds-space-200, 16px)"),
@@ -46,7 +47,7 @@ var modalActionItemStyles = css({
  */
 export var ModalBody = function ModalBody(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: modalBodyStyles
   }, children);
 };
@@ -58,7 +59,7 @@ export var ModalBody = function ModalBody(_ref) {
  */
 export var ModalHeading = function ModalHeading(_ref2) {
   var children = _ref2.children;
-  return /*#__PURE__*/React.createElement("h4", {
+  return jsx("h4", {
     css: modalHeadingStyles
   }, children);
 };
@@ -71,7 +72,7 @@ export var ModalHeading = function ModalHeading(_ref2) {
 export var ModalImage = function ModalImage(_ref3) {
   var alt = _ref3.alt,
     src = _ref3.src;
-  return /*#__PURE__*/React.createElement("img", {
+  return jsx("img", {
     css: modalImageStyles,
     alt: alt,
     src: src
@@ -86,7 +87,7 @@ export var ModalImage = function ModalImage(_ref3) {
 export var ModalActionContainer = function ModalActionContainer(_ref4) {
   var children = _ref4.children,
     shouldReverseButtonOrder = _ref4.shouldReverseButtonOrder;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: [modalActionContainerStyles, shouldReverseButtonOrder && modalActionContainerReversedStyles]
   }, children);
 };
@@ -98,7 +99,7 @@ export var ModalActionContainer = function ModalActionContainer(_ref4) {
  */
 export var ModalActionItem = function ModalActionItem(_ref5) {
   var children = _ref5.children;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: modalActionItemStyles
   }, children);
 };

package/dist/esm/styled/target.js

@@ -6,7 +6,9 @@ var _excluded = ["children", "bgColor", "radius", "style", "testId"],
   _excluded3 = ["children", "pulse", "testId"];
 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) { _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; }
-import { css, keyframes } from '@emotion/react';
+/** @jsx jsx */
+
+import { css, jsx, keyframes } from '@emotion/react';
 import { P300 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 // NOTE:
@@ -39,7 +41,7 @@ var Base = function Base(_ref) {
     style = _ref.style,
     testId = _ref.testId,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return jsx("div", _extends({
     css: baseStyles,
     "data-testid": testId,
     style: _objectSpread(_objectSpread({}, style), {}, {
@@ -62,9 +64,8 @@ export var TargetInner = function TargetInner(_ref2) {
     pulse = _ref2.pulse,
     props = _objectWithoutProperties(_ref2, _excluded2);
   return (
-    /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    React.createElement(Base, _extends({}, props, {
+    jsx(Base, _extends({}, props, {
       css: [pulse && animationStyles]
     }), children)
   );
@@ -88,7 +89,7 @@ var targetOverlayStyles = css({
  * @internal
  */
 export var TargetOverlay = function TargetOverlay(props) {
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+  return jsx("div", _extends({}, props, {
     css: targetOverlayStyles,
     style: {
       cursor: props.onClick ? 'pointer' : 'auto'
@@ -112,9 +113,8 @@ export var Pulse = function Pulse(_ref3) {
     testId = _ref3.testId,
     props = _objectWithoutProperties(_ref3, _excluded3);
   return (
-    /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    React.createElement(Base, _extends({}, props, {
+    jsx(Base, _extends({}, props, {
       css: [pulse && animationStyles],
       testId: testId
     }), children)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/onboarding",
-  "version": "11.1.1",
+  "version": "11.1.3",
   "description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -34,14 +34,14 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^16.17.0",
+    "@atlaskit/button": "^17.0.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/heading": "^1.4.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.29.0",
+    "@atlaskit/tokens": "^1.30.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",