@atlaskit/onboarding 10.8.11 → 11.0.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/onboarding
 
+## 11.0.0
+
+### Major Changes
+
+- [#54210](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/54210) [`524ec7b6505d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/524ec7b6505d) - Removed all remaining legacy theming logic from the Onboarding component.
+
+## 10.8.12
+
+### Patch Changes
+
+- [#43073](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43073) [`2d760e89b53`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2d760e89b53) - headingId is the id of heading in spotlightCard, which is used as the value of aria-labelledby attribute of `<div>` element containing the modal dialog heading for screen reader recognising the dialog
+
 ## 10.8.11
 
 ### Patch Changes

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

@@ -12,7 +12,6 @@ var _react2 = require("@emotion/react");
 var _customThemeButton = _interopRequireWildcard(require("@atlaskit/button/custom-theme-button"));
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _colors = require("@atlaskit/theme/colors");
-var _components = require("@atlaskit/theme/components");
 var _constants = require("@atlaskit/theme/constants");
 var _dialog = require("../styled/dialog");
 var _theme = require("./theme");
@@ -30,9 +29,9 @@ var imageStyles = (0, _react2.css)({
 });
 var defaultHeaderStyles = (0, _react2.css)({
   display: 'flex',
-  paddingBottom: "var(--ds-space-100, 8px)",
   alignItems: 'baseline',
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
+  paddingBlockEnd: "var(--ds-space-100, 8px)"
 });
 var DefaultHeader = function DefaultHeader(_ref) {
   var children = _ref.children;
@@ -42,9 +41,9 @@ var DefaultHeader = function DefaultHeader(_ref) {
 };
 var defaultFooterStyles = (0, _react2.css)({
   display: 'flex',
-  paddingTop: "var(--ds-space-100, 8px)",
   alignItems: 'center',
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
+  paddingBlockStart: "var(--ds-space-100, 8px)"
 });
 var DefaultFooter = function DefaultFooter(_ref2) {
   var children = _ref2.children;
@@ -63,20 +62,6 @@ var containerStyles = (0, _react2.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), ")")
 });
-
-/**
- * @deprecated
- */
-var Theme = (0, _components.createTheme)(function () {
-  return {
-    container: {}
-  };
-});
-
-/**
- * @deprecated
- */
-
 /**
  * __Spotlight card__
  *
@@ -99,49 +84,43 @@ var SpotlightCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     innerRef = props.innerRef,
     isFlat = props.isFlat,
     testId = props.testId,
-    theme = props.theme,
     _props$width = props.width,
-    width = _props$width === void 0 ? 400 : _props$width;
+    width = _props$width === void 0 ? 400 : _props$width,
+    headingId = props.headingId;
   var _components$Header = components.Header,
     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, {
     value: _theme.spotlightButtonTheme
-  }, (0, _react2.jsx)(Theme.Provider, {
-    value: theme
-  }, (0, _react2.jsx)(Theme.Consumer, null, function (_ref3) {
-    var container = _ref3.container;
-    return (0, _react2.jsx)("div", {
-      css: [containerStyles, !isFlat && containerShadowStyles,
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      container],
-      style: {
-        minWidth: '160px',
-        maxWidth: '600px',
-        width: typeof width === 'string' ? width : "".concat(width, "px")
-      },
-      ref: ref || innerRef,
-      "data-testid": testId
-    }, typeof image === 'string' ? (0, _react2.jsx)("img", {
-      css: imageStyles,
-      src: image,
-      alt: ""
-    }) : image, (0, _react2.jsx)("div", {
-      css: bodyStyles
-    }, 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, _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, _react2.jsx)(_dialog.DialogActionItem, {
-        key: key || (typeof text === 'string' ? text : "".concat(idx))
-      }, (0, _react2.jsx)(_customThemeButton.default, rest, text));
-    }))) : null));
-  })));
+  }, (0, _react2.jsx)("div", {
+    css: [containerStyles, !isFlat && containerShadowStyles],
+    style: {
+      minWidth: '160px',
+      maxWidth: '600px',
+      width: typeof width === 'string' ? width : "".concat(width, "px")
+    },
+    ref: ref || innerRef,
+    "data-testid": testId
+  }, typeof image === 'string' ? (0, _react2.jsx)("img", {
+    css: imageStyles,
+    src: image,
+    alt: ""
+  }) : image, (0, _react2.jsx)("div", {
+    css: bodyStyles
+  }, 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 ? (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 (0, _react2.jsx)(_dialog.DialogActionItem, {
+      key: key || (typeof text === 'string' ? text : "".concat(idx))
+    }, (0, _react2.jsx)(_customThemeButton.default, rest, text));
+  }))) : null)));
 });
 SpotlightCard.displayName = 'SpotlightCard';
 var _default = exports.default = 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 = "10.8.11";
+var packageVersion = "11.0.0";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);

package/dist/cjs/styled/blanket.js

@@ -8,15 +8,9 @@ exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-var _components = require("@atlaskit/theme/components");
 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 */
-var backgroundColor = (0, _components.themed)({
-  light: "var(--ds-blanket, ".concat(_colors.N100A, ")"),
-  dark: "var(--ds-blanket, ".concat(_colors.DN90A, ")")
-});
-
 // 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)({
@@ -37,13 +31,10 @@ var blanketStyles = (0, _react.css)({
  * @internal
  */
 var Blanket = function Blanket(props) {
-  var theme = (0, _components.useGlobalTheme)();
   return (0, _react.jsx)("div", {
     css: blanketStyles,
     style: _objectSpread(_objectSpread({}, props.style), {}, {
-      backgroundColor: props.isTinted ? backgroundColor({
-        theme: theme
-      }) : 'transparent'
+      backgroundColor: props.isTinted ? "var(--ds-blanket, ".concat(_colors.N100A, ")") : 'transparent'
     })
   });
 };

package/dist/cjs/styled/modal.js

@@ -5,37 +5,29 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ModalImage = exports.ModalHeading = exports.ModalBody = exports.ModalActionItem = exports.ModalActionContainer = void 0;
 var _react = require("@emotion/react");
-var _components = require("@atlaskit/theme/components");
 var _typography = require("@atlaskit/theme/typography");
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
 /** @jsx jsx */
 
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-var lightH600Styles = (0, _react.css)((0, _typography.h600)({
-  theme: {
-    mode: 'light'
-  }
-}));
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-var darkH600Styles = (0, _react.css)((0, _typography.h600)({
-  theme: {
-    mode: 'dark'
-  }
-}));
 var modalBodyStyles = (0, _react.css)({
   padding: "var(--ds-space-500, 40px)".concat(" ", "var(--ds-space-250, 20px)"),
   textAlign: 'center'
 });
-var modalHeadingStyles = (0, _react.css)({
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+var modalHeadingStyles = (0, _react.css)([(0, _react.css)((0, _typography.h600)({
+  theme: {
+    mode: 'light'
+  }
+})), {
   marginBottom: "var(--ds-space-100, 8px)",
   color: 'inherit'
-});
+}]);
 var modalImageStyles = (0, _react.css)({
   width: '100%',
   height: 'auto',
-  borderTopLeftRadius: "var(--ds-border-radius, 3px)",
-  borderTopRightRadius: "var(--ds-border-radius, 3px)",
-  // TODO: Use new breakpoints
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  borderStartEndRadius: "var(--ds-border-radius, 3px)",
+  borderStartStartRadius: "var(--ds-border-radius, 3px)",
   '@media (min-width: 320px) and (max-width: 480px)': {
     borderRadius: 0
   }
@@ -73,10 +65,8 @@ var ModalBody = exports.ModalBody = function ModalBody(_ref) {
  */
 var ModalHeading = exports.ModalHeading = function ModalHeading(_ref2) {
   var children = _ref2.children;
-  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
-    mode = _useGlobalTheme.mode;
   return (0, _react.jsx)("h4", {
-    css: [mode === 'light' ? lightH600Styles : darkH600Styles, modalHeadingStyles]
+    css: modalHeadingStyles
   }, children);
 };
 

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

@@ -4,7 +4,6 @@ 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';
-import { createTheme } from '@atlaskit/theme/components';
 import { layers } from '@atlaskit/theme/constants';
 import { DialogActionItem, DialogActionItemContainer } from '../styled/dialog';
 import { spotlightButtonTheme } from './theme';
@@ -18,9 +17,9 @@ const imageStyles = css({
 });
 const defaultHeaderStyles = css({
   display: 'flex',
-  paddingBottom: "var(--ds-space-100, 8px)",
   alignItems: 'baseline',
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
+  paddingBlockEnd: "var(--ds-space-100, 8px)"
 });
 const DefaultHeader = ({
   children
@@ -29,9 +28,9 @@ const DefaultHeader = ({
 }, children);
 const defaultFooterStyles = css({
   display: 'flex',
-  paddingTop: "var(--ds-space-100, 8px)",
   alignItems: 'center',
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
+  paddingBlockStart: "var(--ds-space-100, 8px)"
 });
 const DefaultFooter = ({
   children
@@ -49,18 +48,6 @@ const containerStyles = css({
 const containerShadowStyles = css({
   boxShadow: `var(--ds-shadow-raised, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`
 });
-
-/**
- * @deprecated
- */
-const Theme = createTheme(() => ({
-  container: {}
-}));
-
-/**
- * @deprecated
- */
-
 /**
  * __Spotlight card__
  *
@@ -82,8 +69,8 @@ const SpotlightCard = /*#__PURE__*/forwardRef((props, ref) => {
     innerRef,
     isFlat,
     testId,
-    theme,
-    width = 400
+    width = 400,
+    headingId
   } = props;
   const {
     Header = DefaultHeader,
@@ -91,42 +78,35 @@ const SpotlightCard = /*#__PURE__*/forwardRef((props, ref) => {
   } = components;
   return jsx(ButtonTheme.Provider, {
     value: spotlightButtonTheme
-  }, jsx(Theme.Provider, {
-    value: theme
-  }, jsx(Theme.Consumer, null, ({
-    container
-  }) => {
-    return jsx("div", {
-      css: [containerStyles, !isFlat && containerShadowStyles,
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      container],
-      style: {
-        minWidth: '160px',
-        maxWidth: '600px',
-        width: typeof width === 'string' ? width : `${width}px`
-      },
-      ref: ref || innerRef,
-      "data-testid": testId
-    }, typeof image === 'string' ? jsx("img", {
-      css: imageStyles,
-      src: image,
-      alt: ""
-    }) : image, jsx("div", {
-      css: bodyStyles
-    }, heading || headingAfterElement ? jsx(Header, null, jsx(Heading, {
-      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(({
-      text,
-      key,
-      ...rest
-    }, idx) => {
-      return jsx(DialogActionItem, {
-        key: key || (typeof text === 'string' ? text : `${idx}`)
-      }, jsx(Button, rest, text));
-    }))) : null));
-  })));
+  }, jsx("div", {
+    css: [containerStyles, !isFlat && containerShadowStyles],
+    style: {
+      minWidth: '160px',
+      maxWidth: '600px',
+      width: typeof width === 'string' ? width : `${width}px`
+    },
+    ref: ref || innerRef,
+    "data-testid": testId
+  }, typeof image === 'string' ? jsx("img", {
+    css: imageStyles,
+    src: image,
+    alt: ""
+  }) : image, jsx("div", {
+    css: bodyStyles
+  }, heading || headingAfterElement ? jsx(Header, null, jsx(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(({
+    text,
+    key,
+    ...rest
+  }, idx) => {
+    return jsx(DialogActionItem, {
+      key: key || (typeof text === 'string' ? text : `${idx}`)
+    }, jsx(Button, rest, text));
+  }))) : null)));
 });
 SpotlightCard.displayName = 'SpotlightCard';
 export default 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 = "10.8.11";
+const packageVersion = "11.0.0";
 class SpotlightDialog extends Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/styled/blanket.js

@@ -1,13 +1,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
-import { DN90A, N100A } from '@atlaskit/theme/colors';
-import { themed, useGlobalTheme } from '@atlaskit/theme/components';
+import { N100A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
-const backgroundColor = themed({
-  light: `var(--ds-blanket, ${N100A})`,
-  dark: `var(--ds-blanket, ${DN90A})`
-});
-
 // IE11 and Edge: z-index needed because fixed position calculates z-index relative
 // to body instead of nearest stacking context (Portal in our case).
 const blanketStyles = css({
@@ -28,14 +22,11 @@ const blanketStyles = css({
  * @internal
  */
 const Blanket = props => {
-  const theme = useGlobalTheme();
   return jsx("div", {
     css: blanketStyles,
     style: {
       ...props.style,
-      backgroundColor: props.isTinted ? backgroundColor({
-        theme
-      }) : 'transparent'
+      backgroundColor: props.isTinted ? `var(--ds-blanket, ${N100A})` : 'transparent'
     }
   });
 };

package/dist/es2019/styled/modal.js

@@ -1,35 +1,27 @@
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { h600 } from '@atlaskit/theme/typography';
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-const lightH600Styles = css(h600({
-  theme: {
-    mode: 'light'
-  }
-}));
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-const darkH600Styles = css(h600({
-  theme: {
-    mode: 'dark'
-  }
-}));
 const modalBodyStyles = css({
   padding: `${"var(--ds-space-500, 40px)"} ${"var(--ds-space-250, 20px)"}`,
   textAlign: 'center'
 });
-const modalHeadingStyles = css({
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+const modalHeadingStyles = css([css(h600({
+  theme: {
+    mode: 'light'
+  }
+})), {
   marginBottom: "var(--ds-space-100, 8px)",
   color: 'inherit'
-});
+}]);
 const modalImageStyles = css({
   width: '100%',
   height: 'auto',
-  borderTopLeftRadius: "var(--ds-border-radius, 3px)",
-  borderTopRightRadius: "var(--ds-border-radius, 3px)",
-  // TODO: Use new breakpoints
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  borderStartEndRadius: "var(--ds-border-radius, 3px)",
+  borderStartStartRadius: "var(--ds-border-radius, 3px)",
   '@media (min-width: 320px) and (max-width: 480px)': {
     borderRadius: 0
   }
@@ -67,11 +59,8 @@ export const ModalBody = ({
 export const ModalHeading = ({
   children
 }) => {
-  const {
-    mode
-  } = useGlobalTheme();
   return jsx("h4", {
-    css: [mode === 'light' ? lightH600Styles : darkH600Styles, modalHeadingStyles]
+    css: modalHeadingStyles
   }, children);
 };
 

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

@@ -6,7 +6,6 @@ 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';
-import { createTheme } from '@atlaskit/theme/components';
 import { layers } from '@atlaskit/theme/constants';
 import { DialogActionItem, DialogActionItemContainer } from '../styled/dialog';
 import { spotlightButtonTheme } from './theme';
@@ -20,9 +19,9 @@ var imageStyles = css({
 });
 var defaultHeaderStyles = css({
   display: 'flex',
-  paddingBottom: "var(--ds-space-100, 8px)",
   alignItems: 'baseline',
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
+  paddingBlockEnd: "var(--ds-space-100, 8px)"
 });
 var DefaultHeader = function DefaultHeader(_ref) {
   var children = _ref.children;
@@ -32,9 +31,9 @@ var DefaultHeader = function DefaultHeader(_ref) {
 };
 var defaultFooterStyles = css({
   display: 'flex',
-  paddingTop: "var(--ds-space-100, 8px)",
   alignItems: 'center',
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
+  paddingBlockStart: "var(--ds-space-100, 8px)"
 });
 var DefaultFooter = function DefaultFooter(_ref2) {
   var children = _ref2.children;
@@ -53,20 +52,6 @@ var containerStyles = css({
 var containerShadowStyles = css({
   boxShadow: "var(--ds-shadow-raised, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")
 });
-
-/**
- * @deprecated
- */
-var Theme = createTheme(function () {
-  return {
-    container: {}
-  };
-});
-
-/**
- * @deprecated
- */
-
 /**
  * __Spotlight card__
  *
@@ -89,49 +74,43 @@ var SpotlightCard = /*#__PURE__*/forwardRef(function (props, ref) {
     innerRef = props.innerRef,
     isFlat = props.isFlat,
     testId = props.testId,
-    theme = props.theme,
     _props$width = props.width,
-    width = _props$width === void 0 ? 400 : _props$width;
+    width = _props$width === void 0 ? 400 : _props$width,
+    headingId = props.headingId;
   var _components$Header = components.Header,
     Header = _components$Header === void 0 ? DefaultHeader : _components$Header,
     _components$Footer = components.Footer,
     Footer = _components$Footer === void 0 ? DefaultFooter : _components$Footer;
   return jsx(ButtonTheme.Provider, {
     value: spotlightButtonTheme
-  }, jsx(Theme.Provider, {
-    value: theme
-  }, jsx(Theme.Consumer, null, function (_ref3) {
-    var container = _ref3.container;
-    return jsx("div", {
-      css: [containerStyles, !isFlat && containerShadowStyles,
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      container],
-      style: {
-        minWidth: '160px',
-        maxWidth: '600px',
-        width: typeof width === 'string' ? width : "".concat(width, "px")
-      },
-      ref: ref || innerRef,
-      "data-testid": testId
-    }, typeof image === 'string' ? jsx("img", {
-      css: imageStyles,
-      src: image,
-      alt: ""
-    }) : image, jsx("div", {
-      css: bodyStyles
-    }, heading || headingAfterElement ? jsx(Header, null, jsx(Heading, {
-      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 (_ref4, idx) {
-      var text = _ref4.text,
-        key = _ref4.key,
-        rest = _objectWithoutProperties(_ref4, _excluded);
-      return jsx(DialogActionItem, {
-        key: key || (typeof text === 'string' ? text : "".concat(idx))
-      }, jsx(Button, rest, text));
-    }))) : null));
-  })));
+  }, jsx("div", {
+    css: [containerStyles, !isFlat && containerShadowStyles],
+    style: {
+      minWidth: '160px',
+      maxWidth: '600px',
+      width: typeof width === 'string' ? width : "".concat(width, "px")
+    },
+    ref: ref || innerRef,
+    "data-testid": testId
+  }, typeof image === 'string' ? jsx("img", {
+    css: imageStyles,
+    src: image,
+    alt: ""
+  }) : image, jsx("div", {
+    css: bodyStyles
+  }, heading || headingAfterElement ? jsx(Header, null, jsx(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) {
+    var text = _ref3.text,
+      key = _ref3.key,
+      rest = _objectWithoutProperties(_ref3, _excluded);
+    return jsx(DialogActionItem, {
+      key: key || (typeof text === 'string' ? text : "".concat(idx))
+    }, jsx(Button, rest, text));
+  }))) : null)));
 });
 SpotlightCard.displayName = 'SpotlightCard';
 export default 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 = "10.8.11";
+var packageVersion = "11.0.0";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   _inherits(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);

package/dist/esm/styled/blanket.js

@@ -3,14 +3,8 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
-import { DN90A, N100A } from '@atlaskit/theme/colors';
-import { themed, useGlobalTheme } from '@atlaskit/theme/components';
+import { N100A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
-var backgroundColor = themed({
-  light: "var(--ds-blanket, ".concat(N100A, ")"),
-  dark: "var(--ds-blanket, ".concat(DN90A, ")")
-});
-
 // 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 = css({
@@ -31,13 +25,10 @@ var blanketStyles = css({
  * @internal
  */
 var Blanket = function Blanket(props) {
-  var theme = useGlobalTheme();
   return jsx("div", {
     css: blanketStyles,
     style: _objectSpread(_objectSpread({}, props.style), {}, {
-      backgroundColor: props.isTinted ? backgroundColor({
-        theme: theme
-      }) : 'transparent'
+      backgroundColor: props.isTinted ? "var(--ds-blanket, ".concat(N100A, ")") : 'transparent'
     })
   });
 };

package/dist/esm/styled/modal.js

@@ -1,35 +1,27 @@
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { h600 } from '@atlaskit/theme/typography';
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-var lightH600Styles = css(h600({
-  theme: {
-    mode: 'light'
-  }
-}));
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-var darkH600Styles = css(h600({
-  theme: {
-    mode: 'dark'
-  }
-}));
 var modalBodyStyles = css({
   padding: "var(--ds-space-500, 40px)".concat(" ", "var(--ds-space-250, 20px)"),
   textAlign: 'center'
 });
-var modalHeadingStyles = css({
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+var modalHeadingStyles = css([css(h600({
+  theme: {
+    mode: 'light'
+  }
+})), {
   marginBottom: "var(--ds-space-100, 8px)",
   color: 'inherit'
-});
+}]);
 var modalImageStyles = css({
   width: '100%',
   height: 'auto',
-  borderTopLeftRadius: "var(--ds-border-radius, 3px)",
-  borderTopRightRadius: "var(--ds-border-radius, 3px)",
-  // TODO: Use new breakpoints
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  borderStartEndRadius: "var(--ds-border-radius, 3px)",
+  borderStartStartRadius: "var(--ds-border-radius, 3px)",
   '@media (min-width: 320px) and (max-width: 480px)': {
     borderRadius: 0
   }
@@ -67,10 +59,8 @@ export var ModalBody = function ModalBody(_ref) {
  */
 export var ModalHeading = function ModalHeading(_ref2) {
   var children = _ref2.children;
-  var _useGlobalTheme = useGlobalTheme(),
-    mode = _useGlobalTheme.mode;
   return jsx("h4", {
-    css: [mode === 'light' ? lightH600Styles : darkH600Styles, modalHeadingStyles]
+    css: modalHeadingStyles
   }, children);
 };
 

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

@@ -1,16 +1,6 @@
 /** @jsx jsx */
 import { ComponentType, ReactNode, Ref } from 'react';
-import { ThemeProp } from '@atlaskit/theme/components';
 import { Actions } from '../types';
-/**
- * @deprecated
- */
-interface CardTokens {
-    /**
-     * @deprecated
-     */
-    container: Record<string, string | undefined>;
-}
 interface SpotlightCardProps {
     /**
      * Buttons to render in the footer
@@ -47,11 +37,6 @@ interface SpotlightCardProps {
      * Removes elevation styles if set
      */
     isFlat?: boolean;
-    /**
-     * @deprecated
-     * Theme prop is deprecated and will be removed in the future.
-     */
-    theme?: ThemeProp<CardTokens, {}>;
     /**
      * Specifies the width of the card component. Accepts either a number or the string '100%'.
      * When a number is provided, the width is set in pixels. When '100%' is provided, the width
@@ -70,6 +55,10 @@ interface SpotlightCardProps {
      * serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * The id of heading
+     */
+    headingId?: string;
 }
 /**
  * __Spotlight card__

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

@@ -1,16 +1,6 @@
 /** @jsx jsx */
 import { ComponentType, ReactNode, Ref } from 'react';
-import { ThemeProp } from '@atlaskit/theme/components';
 import { Actions } from '../types';
-/**
- * @deprecated
- */
-interface CardTokens {
-    /**
-     * @deprecated
-     */
-    container: Record<string, string | undefined>;
-}
 interface SpotlightCardProps {
     /**
      * Buttons to render in the footer
@@ -47,11 +37,6 @@ interface SpotlightCardProps {
      * Removes elevation styles if set
      */
     isFlat?: boolean;
-    /**
-     * @deprecated
-     * Theme prop is deprecated and will be removed in the future.
-     */
-    theme?: ThemeProp<CardTokens, {}>;
     /**
      * Specifies the width of the card component. Accepts either a number or the string '100%'.
      * When a number is provided, the width is set in pixels. When '100%' is provided, the width
@@ -70,6 +55,10 @@ interface SpotlightCardProps {
      * serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * The id of heading
+     */
+    headingId?: string;
 }
 /**
  * __Spotlight card__

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/onboarding",
-  "version": "10.8.11",
+  "version": "11.0.0",
   "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.10.0",
+    "@atlaskit/button": "^16.17.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/heading": "^1.4.0",
-    "@atlaskit/modal-dialog": "^12.8.0",
+    "@atlaskit/modal-dialog": "^12.9.0",
     "@atlaskit/popper": "^5.5.0",
-    "@atlaskit/portal": "^4.3.0",
+    "@atlaskit/portal": "^4.4.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.28.0",
+    "@atlaskit/tokens": "^1.29.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -67,6 +67,7 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@types/exenv": "^1.2.0",
     "@types/react-node-resolver": "^2.0.0",
+    "@types/react-transition-group": "^2.0.6",
     "raf-stub": "^2.0.1",
     "react-dom": "^16.8.0",
     "react-lorem-component": "^0.13.0",

package/report.api.md

@@ -124,6 +124,7 @@ interface SpotlightCardProps {
   };
   heading?: ReactNode;
   headingAfterElement?: ReactNode;
+  headingId?: string;
   image?: ReactNode | string;
   // @deprecated (undocumented)
   innerRef?: Ref<HTMLDivElement> | null;

package/tmp/api-report-tmp.d.ts

@@ -1,226 +0,0 @@
-## API Report File for "@atlaskit/onboarding"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-import { Component } from 'react';
-import { ComponentType } from 'react';
-import { CustomThemeButtonProps } from '@atlaskit/button/types';
-import { ElementType } from 'react';
-import { ForwardRefExoticComponent } from 'react';
-import { jsx } from '@emotion/react';
-import { MemoizedFn } from 'memoize-one';
-import { ModalFooterProps } from '@atlaskit/modal-dialog';
-import { ModalHeaderProps } from '@atlaskit/modal-dialog';
-import { default as ModalTransition } from '@atlaskit/modal-dialog/modal-transition';
-import { MouseEvent as MouseEvent_2 } from 'react';
-import { PureComponent } from 'react';
-import { default as React_2 } from 'react';
-import { ReactNode } from 'react';
-import { Ref } from 'react';
-import { RefAttributes } from 'react';
-import { ThemeProp } from '@atlaskit/theme/components';
-
-// @public (undocumented)
-interface Action extends Omit<CustomThemeButtonProps, 'children'> {
-    // (undocumented)
-    key?: string;
-    // (undocumented)
-    text?: ReactNode;
-}
-
-// @public (undocumented)
-type Actions = Action[];
-
-// @public (undocumented)
-type BaseProps = React.HTMLAttributes<HTMLDivElement> & {
-    bgColor?: string;
-    radius?: number;
-    className?: string;
-    testId?: string;
-    children?: ReactNode;
-};
-
-// @public @deprecated (undocumented)
-interface CardTokens {
-    // @deprecated (undocumented)
-    container: Record<string, string | undefined>;
-}
-
-// @public
-export class Modal extends Component<ModalProps> {
-    // (undocumented)
-    footerComponent: (props: ModalProps) => (() => jsx.JSX.Element | null) | ElementType<ModalFooterProps>;
-    // (undocumented)
-    headerComponent: (props: ModalProps) => (() => jsx.JSX.Element) | ElementType<ModalHeaderProps>;
-    // (undocumented)
-    render(): jsx.JSX.Element;
-}
-
-// @public @deprecated (undocumented)
-export const modalButtonTheme: (current: any, themeProps: Record<string, any>) => any;
-
-// @public (undocumented)
-type ModalProps = {
-    actions?: Actions;
-    children: ReactNode;
-    image?: string;
-    header?: ElementType<ModalHeaderProps>;
-    footer?: ElementType<ModalFooterProps>;
-    heading?: string;
-    experimental_shouldShowPrimaryButtonOnRight?: boolean;
-};
-
-export { ModalTransition }
-
-// @public
-export const Spotlight: ({ dialogWidth, pulse, testId, targetNode, target, ...rest }: SpotlightProps) => JSX.Element;
-
-// @public @deprecated (undocumented)
-export const spotlightButtonTheme: (current: any, themeProps: Record<string, any>) => any;
-
-// @public
-export const SpotlightCard: ForwardRefExoticComponent<SpotlightCardProps & RefAttributes<HTMLDivElement>>;
-
-// @public (undocumented)
-interface SpotlightCardProps {
-    actions?: Actions;
-    actionsBeforeElement?: ReactNode;
-    children?: ReactNode;
-    components?: {
-        Header?: ComponentType<any>;
-        Footer?: ComponentType<any>;
-    };
-    heading?: ReactNode;
-    headingAfterElement?: ReactNode;
-    image?: ReactNode | string;
-    // @deprecated (undocumented)
-    innerRef?: Ref<HTMLDivElement> | null;
-    isFlat?: boolean;
-    testId?: string;
-    // @deprecated (undocumented)
-    theme?: ThemeProp<CardTokens, {}>;
-    width?: '100%' | number;
-}
-
-// @public
-export class SpotlightManager extends PureComponent<SpotlightManagerProps, {
-    spotlightCount: number;
-    targets: {
-        [key: string]: HTMLElement | void;
-    };
-}> {
-    // (undocumented)
-    componentDidMount(): void;
-    // (undocumented)
-    static defaultProps: {
-        blanketIsTinted: boolean;
-    };
-    // (undocumented)
-    getStateProviderValue: MemoizedFn<(this: any, targets: any) => {
-    opened: () => void;
-    closed: () => void;
-    targets: any;
-    }>;
-    // (undocumented)
-    render(): JSX.Element;
-    // (undocumented)
-    spotlightClose: () => void;
-    // (undocumented)
-    spotlightOpen: () => void;
-    // (undocumented)
-    state: {
-        spotlightCount: number;
-        targets: {};
-    };
-    // (undocumented)
-    targetRef: (name: string) => (element: HTMLElement | void) => void;
-}
-
-// @public (undocumented)
-interface SpotlightManagerProps {
-    blanketIsTinted?: boolean;
-    children: ReactNode;
-    // @deprecated (undocumented)
-    component?: ElementType;
-}
-
-// @public (undocumented)
-interface SpotlightProps {
-    actions?: Actions;
-    actionsBeforeElement?: ReactNode;
-    children?: ReactNode;
-    dialogPlacement?: 'bottom center' | 'bottom left' | 'bottom right' | 'left bottom' | 'left middle' | 'left top' | 'right bottom' | 'right middle' | 'right top' | 'top center' | 'top left' | 'top right';
-    dialogWidth?: number;
-    footer?: ComponentType<any>;
-    header?: ComponentType<any>;
-    heading?: string;
-    headingAfterElement?: ReactNode;
-    image?: string;
-    pulse?: boolean;
-    target?: string;
-    targetBgColor?: string;
-    targetNode?: HTMLElement;
-    targetOnClick?: (eventData: {
-        event: MouseEvent_2<HTMLElement>;
-        target?: string;
-    }) => void;
-    targetRadius?: number;
-    targetReplacement?: ComponentType<any>;
-    testId?: string;
-}
-
-// @public
-export const SpotlightPulse: ({ children, pulse, testId, ...props }: TargetProps) => jsx.JSX.Element;
-
-// @public
-export const SpotlightTarget: ({ children, name }: SpotlightTargetProps) => JSX.Element;
-
-// @public (undocumented)
-interface SpotlightTargetProps {
-    children: ReactNode;
-    name: string;
-}
-
-// @public
-export class SpotlightTransition extends React_2.Component<SpotlightTransitionProps, State> {
-    // (undocumented)
-    static getDerivedStateFromProps(props: SpotlightTransitionProps, state: State): {
-        currentChildren: React_2.ReactNode;
-    };
-    // (undocumented)
-    onExited: () => void;
-    // (undocumented)
-    render(): JSX.Element;
-    // (undocumented)
-    state: {
-        currentChildren: undefined;
-    };
-}
-
-// @public (undocumented)
-interface SpotlightTransitionProps {
-    children?: ReactNode;
-}
-
-// @public (undocumented)
-interface State {
-    // (undocumented)
-    currentChildren: ReactNode;
-}
-
-// @public (undocumented)
-type TargetProps = Omit<BaseProps, 'css'> & {
-    pulse?: boolean;
-    testId?: string;
-};
-
-// @public
-export function useSpotlight(): {
-    isTargetRendered: (target: string) => boolean;
-};
-
-// (No @packageDocumentation comment for this package)
-
-```