@atlaskit/onboarding 11.0.0 → 11.1.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/onboarding
 
+## 11.1.1
+
+### Patch Changes
+
+- [#58458](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58458) [`536478cdcf0b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/536478cdcf0b) - Tweaked ModalBody left and right padding to better align to the spacing scale.
+
+## 11.1.0
+
+### Minor Changes
+
+- [#58176](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58176) [`32032c9c1289`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/32032c9c1289) - [ux] Fix spotlight padding and font style issues on tabs.
+
 ## 11.0.0
 
 ### Major Changes

package/dist/cjs/components/clone.js

@@ -7,9 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _target = require("../styled/target");
+var computedStyleAttributesToClone = ['fontSize', 'fontWeight', 'lineHeight', 'padding', 'color', 'textOverflow'];
 function cloneAndOverrideStyles(node) {
   var shouldCloneChildren = true;
   var clonedNode = node.cloneNode(shouldCloneChildren);
+  var computedStyles = getComputedStyle(node);
+  computedStyleAttributesToClone.forEach(function (attribute) {
+    clonedNode.style[attribute] = computedStyles[attribute];
+  });
   clonedNode.style.margin = '0';
   clonedNode.style.position = 'static';
   // The target may have other transforms applied. Avoid unintended side effects

package/dist/cjs/components/modal.js

@@ -16,7 +16,6 @@ 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");
@@ -26,7 +25,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; } } /** @jsx jsx */
+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; } }
 // TODO: DSP-1250 - use a composable API consistent with normal modal dialog
 /**
  * __Benefits modal__
@@ -51,7 +50,7 @@ var BenefitsModal = exports.default = /*#__PURE__*/function (_Component) {
       var HeaderElement = props.header,
         src = props.image;
       var ImageElement = function ImageElement() {
-        return (0, _react2.jsx)(_modal.ModalImage, {
+        return /*#__PURE__*/React.createElement(_modal.ModalImage, {
           src: src,
           alt: ""
         });
@@ -64,18 +63,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 ? (0, _react2.jsx)(_customThemeButton.Theme.Provider, {
+        return actionList ? /*#__PURE__*/React.createElement(_customThemeButton.Theme.Provider, {
           value: _theme.modalButtonTheme
-        }, (0, _react2.jsx)(_modal.ModalActionContainer, {
+        }, /*#__PURE__*/React.createElement(_modal.ModalActionContainer, {
           shouldReverseButtonOrder: experimental_shouldShowPrimaryButtonOnRight
         }, actionList.map(function (_ref, idx) {
           var text = _ref.text,
             key = _ref.key,
             rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
           var variant = idx ? 'subtle-link' : 'primary';
-          return (0, _react2.jsx)(_modal.ModalActionItem, {
+          return /*#__PURE__*/React.createElement(_modal.ModalActionItem, {
             key: key || (typeof text === 'string' ? text : "".concat(idx))
-          }, (0, _react2.jsx)(_customThemeButton.default, (0, _extends2.default)({
+          }, /*#__PURE__*/React.createElement(_customThemeButton.default, (0, _extends2.default)({
             appearance: variant,
             autoFocus: !idx
           }, rest), text));
@@ -95,12 +94,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 (0, _react2.jsx)(_modalDialog.default, (0, _extends2.default)({
+      return /*#__PURE__*/React.createElement(_modalDialog.default, (0, _extends2.default)({
         autoFocus: true,
         shouldScrollInViewport: true,
         shouldCloseOnOverlayClick: false,
         shouldCloseOnEscapePress: false
-      }, 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));
+      }, 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));
     }
   }]);
   return BenefitsModal;

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

@@ -16,7 +16,6 @@ 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)({
@@ -35,7 +34,7 @@ var defaultHeaderStyles = (0, _react2.css)({
 });
 var DefaultHeader = function DefaultHeader(_ref) {
   var children = _ref.children;
-  return (0, _react2.jsx)("div", {
+  return /*#__PURE__*/React.createElement("div", {
     css: defaultHeaderStyles
   }, children);
 };
@@ -47,7 +46,7 @@ var defaultFooterStyles = (0, _react2.css)({
 });
 var DefaultFooter = function DefaultFooter(_ref2) {
   var children = _ref2.children;
-  return (0, _react2.jsx)("div", {
+  return /*#__PURE__*/React.createElement("div", {
     css: defaultFooterStyles
   }, children);
 };
@@ -91,9 +90,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 (0, _react2.jsx)(_customThemeButton.Theme.Provider, {
+  return /*#__PURE__*/React.createElement(_customThemeButton.Theme.Provider, {
     value: _theme.spotlightButtonTheme
-  }, (0, _react2.jsx)("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     css: [containerStyles, !isFlat && containerShadowStyles],
     style: {
       minWidth: '160px',
@@ -102,24 +101,24 @@ var SpotlightCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     },
     ref: ref || innerRef,
     "data-testid": testId
-  }, typeof image === 'string' ? (0, _react2.jsx)("img", {
+  }, typeof image === 'string' ? /*#__PURE__*/React.createElement("img", {
     css: imageStyles,
     src: image,
     alt: ""
-  }) : image, (0, _react2.jsx)("div", {
+  }) : image, /*#__PURE__*/React.createElement("div", {
     css: bodyStyles
-  }, heading || headingAfterElement ? (0, _react2.jsx)(Header, null, (0, _react2.jsx)(_heading.default, {
+  }, heading || headingAfterElement ? /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(_heading.default, {
     id: headingId,
     color: "inverse",
     level: "h600",
     as: "h4"
-  }, 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) {
+  }, 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) {
     var text = _ref3.text,
       key = _ref3.key,
       rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
-    return (0, _react2.jsx)(_dialog.DialogActionItem, {
+    return /*#__PURE__*/React.createElement(_dialog.DialogActionItem, {
       key: key || (typeof text === 'string' ? text : "".concat(idx))
-    }, (0, _react2.jsx)(_customThemeButton.default, rest, text));
+    }, /*#__PURE__*/React.createElement(_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.0.0";
+var packageVersion = "11.1.1";
 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; } /** @jsx jsx */
+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; }
 // 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 (0, _react.jsx)("div", {
+  return /*#__PURE__*/React.createElement("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,7 +9,6 @@ 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'
@@ -35,8 +34,9 @@ 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
-    (0, _react.jsx)("img", (0, _extends2.default)({
+    React.createElement("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 (0, _react.jsx)("div", {
+  return /*#__PURE__*/React.createElement("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 (0, _react.jsx)("div", {
+  return /*#__PURE__*/React.createElement("div", {
     css: actionItemStyles
   }, children);
 };

package/dist/cjs/styled/modal.js

@@ -7,10 +7,9 @@ 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-250, 20px)"),
+  padding: "var(--ds-space-500, 40px)".concat(" ", "var(--ds-space-200, 16px)"),
   textAlign: 'center'
 });
 
@@ -53,7 +52,7 @@ var modalActionItemStyles = (0, _react.css)({
  */
 var ModalBody = exports.ModalBody = function ModalBody(_ref) {
   var children = _ref.children;
-  return (0, _react.jsx)("div", {
+  return /*#__PURE__*/React.createElement("div", {
     css: modalBodyStyles
   }, children);
 };
@@ -65,7 +64,7 @@ var ModalBody = exports.ModalBody = function ModalBody(_ref) {
  */
 var ModalHeading = exports.ModalHeading = function ModalHeading(_ref2) {
   var children = _ref2.children;
-  return (0, _react.jsx)("h4", {
+  return /*#__PURE__*/React.createElement("h4", {
     css: modalHeadingStyles
   }, children);
 };
@@ -78,7 +77,7 @@ var ModalHeading = exports.ModalHeading = function ModalHeading(_ref2) {
 var ModalImage = exports.ModalImage = function ModalImage(_ref3) {
   var alt = _ref3.alt,
     src = _ref3.src;
-  return (0, _react.jsx)("img", {
+  return /*#__PURE__*/React.createElement("img", {
     css: modalImageStyles,
     alt: alt,
     src: src
@@ -93,7 +92,7 @@ var ModalImage = exports.ModalImage = function ModalImage(_ref3) {
 var ModalActionContainer = exports.ModalActionContainer = function ModalActionContainer(_ref4) {
   var children = _ref4.children,
     shouldReverseButtonOrder = _ref4.shouldReverseButtonOrder;
-  return (0, _react.jsx)("div", {
+  return /*#__PURE__*/React.createElement("div", {
     css: [modalActionContainerStyles, shouldReverseButtonOrder && modalActionContainerReversedStyles]
   }, children);
 };
@@ -105,7 +104,7 @@ var ModalActionContainer = exports.ModalActionContainer = function ModalActionCo
  */
 var ModalActionItem = exports.ModalActionItem = function ModalActionItem(_ref5) {
   var children = _ref5.children;
-  return (0, _react.jsx)("div", {
+  return /*#__PURE__*/React.createElement("div", {
     css: modalActionItemStyles
   }, children);
 };

package/dist/cjs/styled/target.js

@@ -14,7 +14,6 @@ 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:
@@ -47,7 +46,7 @@ var Base = function Base(_ref) {
     style = _ref.style,
     testId = _ref.testId,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _react.jsx)("div", (0, _extends2.default)({
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     css: baseStyles,
     "data-testid": testId,
     style: _objectSpread(_objectSpread({}, style), {}, {
@@ -70,8 +69,9 @@ 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
-    (0, _react.jsx)(Base, (0, _extends2.default)({}, props, {
+    React.createElement(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 (0, _react.jsx)("div", (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, props, {
     css: targetOverlayStyles,
     style: {
       cursor: props.onClick ? 'pointer' : 'auto'
@@ -119,8 +119,9 @@ 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
-    (0, _react.jsx)(Base, (0, _extends2.default)({}, props, {
+    React.createElement(Base, (0, _extends2.default)({}, props, {
       css: [pulse && animationStyles],
       testId: testId
     }), children)

package/dist/es2019/components/clone.js

@@ -1,8 +1,13 @@
 import React from 'react';
 import { TargetInner, TargetOverlay } from '../styled/target';
+const computedStyleAttributesToClone = ['fontSize', 'fontWeight', 'lineHeight', 'padding', 'color', 'textOverflow'];
 function cloneAndOverrideStyles(node) {
   const shouldCloneChildren = true;
   const clonedNode = node.cloneNode(shouldCloneChildren);
+  const computedStyles = getComputedStyle(node);
+  computedStyleAttributesToClone.forEach(attribute => {
+    clonedNode.style[attribute] = computedStyles[attribute];
+  });
   clonedNode.style.margin = '0';
   clonedNode.style.position = 'static';
   // The target may have other transforms applied. Avoid unintended side effects

package/dist/es2019/components/modal.js

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

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

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

package/dist/es2019/styled/blanket.js

@@ -1,5 +1,4 @@
-/** @jsx jsx */
-import { css, jsx } from '@emotion/react';
+import { css } 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
@@ -22,7 +21,7 @@ const blanketStyles = css({
  * @internal
  */
 const Blanket = props => {
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement("div", {
     css: blanketStyles,
     style: {
       ...props.style,

package/dist/es2019/styled/dialog.js

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

package/dist/es2019/styled/modal.js

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

package/dist/es2019/styled/target.js

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

package/dist/esm/components/clone.js

@@ -1,8 +1,13 @@
 import React from 'react';
 import { TargetInner, TargetOverlay } from '../styled/target';
+var computedStyleAttributesToClone = ['fontSize', 'fontWeight', 'lineHeight', 'padding', 'color', 'textOverflow'];
 function cloneAndOverrideStyles(node) {
   var shouldCloneChildren = true;
   var clonedNode = node.cloneNode(shouldCloneChildren);
+  var computedStyles = getComputedStyle(node);
+  computedStyleAttributesToClone.forEach(function (attribute) {
+    clonedNode.style[attribute] = computedStyles[attribute];
+  });
   clonedNode.style.margin = '0';
   clonedNode.style.position = 'static';
   // The target may have other transforms applied. Avoid unintended side effects

package/dist/esm/components/modal.js

@@ -11,9 +11,7 @@ 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';
@@ -43,7 +41,7 @@ var BenefitsModal = /*#__PURE__*/function (_Component) {
       var HeaderElement = props.header,
         src = props.image;
       var ImageElement = function ImageElement() {
-        return jsx(ModalImage, {
+        return /*#__PURE__*/React.createElement(ModalImage, {
           src: src,
           alt: ""
         });
@@ -56,18 +54,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 ? jsx(ButtonTheme.Provider, {
+        return actionList ? /*#__PURE__*/React.createElement(ButtonTheme.Provider, {
           value: modalButtonTheme
-        }, jsx(ModalActionContainer, {
+        }, /*#__PURE__*/React.createElement(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 jsx(ModalActionItem, {
+          return /*#__PURE__*/React.createElement(ModalActionItem, {
             key: key || (typeof text === 'string' ? text : "".concat(idx))
-          }, jsx(Button, _extends({
+          }, /*#__PURE__*/React.createElement(Button, _extends({
             appearance: variant,
             autoFocus: !idx
           }, rest), text));
@@ -87,12 +85,12 @@ var BenefitsModal = /*#__PURE__*/function (_Component) {
         props = _objectWithoutProperties(_this$props, _excluded2);
       var Header = this.headerComponent(this.props);
       var Footer = this.footerComponent(this.props);
-      return jsx(Modal, _extends({
+      return /*#__PURE__*/React.createElement(Modal, _extends({
         autoFocus: true,
         shouldScrollInViewport: true,
         shouldCloseOnOverlayClick: false,
         shouldCloseOnEscapePress: false
-      }, props), jsx(Header, null), jsx(ModalBody, null, jsx(Body, null, heading && jsx(Heading, null, heading), children)), jsx(Footer, null));
+      }, 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));
     }
   }]);
   return BenefitsModal;

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

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

package/dist/esm/styled/blanket.js

@@ -1,8 +1,7 @@
 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; }
-/** @jsx jsx */
-import { css, jsx } from '@emotion/react';
+import { css } 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
@@ -25,7 +24,7 @@ var blanketStyles = css({
  * @internal
  */
 var Blanket = function Blanket(props) {
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement("div", {
     css: blanketStyles,
     style: _objectSpread(_objectSpread({}, props.style), {}, {
       backgroundColor: props.isTinted ? "var(--ds-blanket, ".concat(N100A, ")") : 'transparent'

package/dist/esm/styled/dialog.js

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

package/dist/esm/styled/modal.js

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

package/dist/esm/styled/target.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/onboarding",
-  "version": "11.0.0",
+  "version": "11.1.1",
   "description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,7 +37,7 @@
     "@atlaskit/button": "^16.17.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/heading": "^1.4.0",
-    "@atlaskit/modal-dialog": "^12.9.0",
+    "@atlaskit/modal-dialog": "^12.10.0",
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/portal": "^4.4.0",
     "@atlaskit/theme": "^12.6.0",
@@ -59,6 +59,8 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
+    "@af/integration-testing": "*",
+    "@af/visual-regression": "*",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",