@atlaskit/onboarding 10.5.3 → 10.6.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/onboarding
 
+## 10.6.0
+
+### Minor Changes
+
+- [`e0015d4e201`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e0015d4e201) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+### Patch Changes
+
+- [`05efb20bca8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/05efb20bca8) - Fixes an issue with the Spotlight target element height when this is determined by a parent element.
+- Updated dependencies
+
+## 10.5.4
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
 ## 10.5.3
 
 ### Patch Changes

package/dist/cjs/components/clone.js

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

package/dist/cjs/components/modal.js

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

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

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

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

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

package/dist/cjs/styled/blanket.js

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

package/dist/cjs/styled/dialog.js

@@ -11,17 +11,17 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
 var _excluded = ["alt"];
 var gridSize = (0, _constants.gridSize)();
-var imageStyles = (0, _core.css)({
+var imageStyles = (0, _react.css)({
   maxWidth: '100%',
   height: 'auto'
 });
-var actionItemContainerStyles = (0, _core.css)({
+var actionItemContainerStyles = (0, _react.css)({
   display: 'flex',
   margin: "0 -".concat(gridSize / 2, "px"),
 
@@ -29,7 +29,7 @@ var actionItemContainerStyles = (0, _core.css)({
   right, but keep it's position as the first focusable element in the DOM */
   flexDirection: 'row-reverse'
 });
-var actionItemStyles = (0, _core.css)({
+var actionItemStyles = (0, _react.css)({
   margin: "0 ".concat(gridSize / 2, "px")
 });
 /**
@@ -43,7 +43,7 @@ var actionItemStyles = (0, _core.css)({
 var DialogImage = function DialogImage(_ref) {
   var alt = _ref.alt,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _core.jsx)("img", (0, _extends2.default)({
+  return (0, _react.jsx)("img", (0, _extends2.default)({
     css: imageStyles,
     alt: alt
   }, props));
@@ -61,7 +61,7 @@ exports.DialogImage = DialogImage;
 
 var DialogActionItemContainer = function DialogActionItemContainer(_ref2) {
   var children = _ref2.children;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: actionItemContainerStyles
   }, children);
 };
@@ -78,7 +78,7 @@ exports.DialogActionItemContainer = DialogActionItemContainer;
 
 var DialogActionItem = function DialogActionItem(_ref3) {
   var children = _ref3.children;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: actionItemStyles
   }, children);
 };

package/dist/cjs/styled/modal.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ModalImage = exports.ModalHeading = exports.ModalBody = exports.ModalActionItem = exports.ModalActionContainer = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _components = require("@atlaskit/theme/components");
 
@@ -18,27 +18,27 @@ var gridSize = (0, _constants.gridSize)();
 var borderRadius = (0, _constants.borderRadius)();
 var actionItemBottomMargin = gridSize / 2; // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 
-var lightH600Styles = (0, _core.css)((0, _typography.h600)({
+var lightH600Styles = (0, _react.css)((0, _typography.h600)({
   theme: {
     mode: 'light'
   }
 })); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 
-var darkH600Styles = (0, _core.css)((0, _typography.h600)({
+var darkH600Styles = (0, _react.css)((0, _typography.h600)({
   theme: {
     mode: 'dark'
   }
 }));
-var modalBodyStyles = (0, _core.css)({
+var modalBodyStyles = (0, _react.css)({
   padding: '40px 20px',
   textAlign: 'center'
 }); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 
-var modalHeadingStyles = (0, _core.css)({
+var modalHeadingStyles = (0, _react.css)({
   marginBottom: "".concat(gridSize, "px"),
   color: 'inherit'
 });
-var modalImageStyles = (0, _core.css)({
+var modalImageStyles = (0, _react.css)({
   width: '100%',
   height: 'auto',
   borderTopLeftRadius: "".concat(borderRadius, "px"),
@@ -47,17 +47,17 @@ var modalImageStyles = (0, _core.css)({
     borderRadius: 0
   }
 });
-var modalActionContainerStyles = (0, _core.css)({
+var modalActionContainerStyles = (0, _react.css)({
   display: 'flex',
   padding: "0 40px ".concat(40 - actionItemBottomMargin, "px"),
   justifyContent: 'center',
   flexDirection: 'row',
   flexFlow: 'wrap'
 });
-var modalActionContainerReversedStyles = (0, _core.css)({
+var modalActionContainerReversedStyles = (0, _react.css)({
   flexDirection: 'row-reverse'
 });
-var modalActionItemStyles = (0, _core.css)({
+var modalActionItemStyles = (0, _react.css)({
   margin: "0 ".concat(gridSize / 2, "px ").concat(actionItemBottomMargin, "px")
 });
 /**
@@ -68,7 +68,7 @@ var modalActionItemStyles = (0, _core.css)({
 
 var ModalBody = function ModalBody(_ref) {
   var children = _ref.children;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: modalBodyStyles
   }, children);
 };
@@ -87,7 +87,7 @@ var ModalHeading = function ModalHeading(_ref2) {
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
       mode = _useGlobalTheme.mode;
 
-  return (0, _core.jsx)("h4", {
+  return (0, _react.jsx)("h4", {
     css: [mode === 'light' ? lightH600Styles : darkH600Styles, modalHeadingStyles]
   }, children);
 };
@@ -103,7 +103,7 @@ exports.ModalHeading = ModalHeading;
 var ModalImage = function ModalImage(_ref3) {
   var alt = _ref3.alt,
       src = _ref3.src;
-  return (0, _core.jsx)("img", {
+  return (0, _react.jsx)("img", {
     css: modalImageStyles,
     alt: alt,
     src: src
@@ -121,7 +121,7 @@ exports.ModalImage = ModalImage;
 var ModalActionContainer = function ModalActionContainer(_ref4) {
   var children = _ref4.children,
       shouldReverseButtonOrder = _ref4.shouldReverseButtonOrder;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: [modalActionContainerStyles, shouldReverseButtonOrder && modalActionContainerReversedStyles]
   }, children);
 };
@@ -136,7 +136,7 @@ exports.ModalActionContainer = ModalActionContainer;
 
 var ModalActionItem = function ModalActionItem(_ref5) {
   var children = _ref5.children;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: modalActionItemStyles
   }, children);
 };

package/dist/cjs/styled/target.js

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

package/dist/cjs/version.json

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

package/dist/es2019/components/clone.js

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

package/dist/es2019/components/modal.js

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

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React, { forwardRef } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import Button, { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
 import Heading from '@atlaskit/heading';
 import { N0, N50A, N60A, P300 } from '@atlaskit/theme/colors';

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

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

package/dist/es2019/styled/blanket.js

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

package/dist/es2019/styled/dialog.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 const gridSize = getGridSize();
 const imageStyles = css({

package/dist/es2019/styled/modal.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { borderRadius as getBorderRadius, gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { h600 } from '@atlaskit/theme/typography';

package/dist/es2019/styled/target.js

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

package/dist/es2019/version.json

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

package/dist/esm/components/clone.js

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

package/dist/esm/components/modal.js

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

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

@@ -3,7 +3,7 @@ var _excluded = ["text", "key"];
 
 /** @jsx jsx */
 import React, { forwardRef } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import Button, { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
 import Heading from '@atlaskit/heading';
 import { N0, N50A, N60A, P300 } from '@atlaskit/theme/colors';

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

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

package/dist/esm/styled/blanket.js

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

package/dist/esm/styled/dialog.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["alt"];
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 var gridSize = getGridSize();
 var imageStyles = css({

package/dist/esm/styled/modal.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { borderRadius as getBorderRadius, gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { h600 } from '@atlaskit/theme/typography';

package/dist/esm/styled/target.js

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