@atlaskit/onboarding 10.2.6 → 10.3.3

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

@@ -6,10 +6,11 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["container"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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; }
 
 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); }; }
 
@@ -23,7 +24,7 @@ import { DialogImage } from '../styled/dialog';
 import SpotlightCard from './spotlight-card';
 import ValueChanged from './value-changed';
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "10.2.6";
+var packageVersion = "10.3.3";
 
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   _inherits(SpotlightDialog, _Component);
@@ -132,7 +133,7 @@ var SpotlightDialog = /*#__PURE__*/function (_Component) {
           theme: function theme(parent) {
             var _parent = parent({}),
                 container = _parent.container,
-                others = _objectWithoutProperties(_parent, ["container"]);
+                others = _objectWithoutProperties(_parent, _excluded);
 
             return _objectSpread(_objectSpread({}, others), {}, {
               container: _objectSpread(_objectSpread(_objectSpread({}, container), style), animationStyles)

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

@@ -7,9 +7,9 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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; }
 
 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); }; }
 

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

@@ -6,9 +6,9 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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; }
 
 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); }; }
 

package/dist/esm/components/spotlight.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["dialogWidth", "pulse", "testId", "targetNode", "target"];
 import React from 'react';
 import SpotlightInner from './spotlight-inner';
 import { SpotlightConsumer } from './spotlight-manager';
@@ -22,7 +23,7 @@ var Spotlight = function Spotlight(_ref) {
       testId = _ref$testId === void 0 ? 'spotlight' : _ref$testId,
       targetNode = _ref.targetNode,
       target = _ref.target,
-      rest = _objectWithoutProperties(_ref, ["dialogWidth", "pulse", "testId", "targetNode", "target"]);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(SpotlightConsumer, null, function (_ref2) {
     var opened = _ref2.opened,

package/dist/esm/components/theme.js

@@ -1,243 +1,119 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _typeof from "@babel/runtime/helpers/typeof";
+var _excluded = ["buttonStyles"],
+    _excluded2 = ["buttonStyles"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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; }
 
 import * as colors from '@atlaskit/theme/colors';
 var spotlightTheme = {
   default: {
     background: {
-      default: {
-        light: colors.P400,
-        dark: colors.P400
-      },
-      hover: {
-        light: colors.P200,
-        dark: colors.P200
-      },
-      active: {
-        light: colors.P500,
-        dark: colors.P500
-      },
-      disabled: {
-        light: colors.P400,
-        dark: colors.P400
-      },
-      selected: {
-        light: colors.R500,
-        dark: colors.R500
-      },
-      focus: {
-        light: colors.P400,
-        dark: colors.P400
-      }
+      default: "var(--ds-background-subtleNeutral-resting, ".concat(colors.P400, ")"),
+      hover: "var(--ds-background-subtleNeutral-hover, ".concat(colors.P200, ")"),
+      active: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.P500, ")"),
+      disabled: "var(--ds-background-disabled, ".concat(colors.P400, ")"),
+      selected: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.R500, ")"),
+      focus: "var(--ds-background-subtleNeutral-resting, ".concat(colors.P400, ")")
     },
     boxShadow: {
-      focus: {
-        light: "".concat(colors.P100, " 0 0 0 2px"),
-        dark: "".concat(colors.P100, " 0 0 0 2px")
-      }
+      focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
     },
     color: {
-      default: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      hover: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      active: {
-        light: colors.N0,
-        dark: colors.N0
-      },
+      default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      hover: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      active: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
       disabled: {
-        light: colors.N0,
-        dark: colors.DN30
-      },
-      selected: {
-        light: colors.N0,
-        dark: colors.N0
+        light: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
+        dark: "var(--ds-text-disabled, ".concat(colors.DN30, ")")
       },
-      focus: {
-        light: colors.N0,
-        dark: colors.N0
-      }
+      selected: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
     },
     outline: {
-      focus: {
-        light: 'none',
-        dark: 'none'
-      }
+      focus: 'none'
     }
   },
   subtle: {
     background: {
-      default: {
-        light: 'none',
-        dark: 'none'
-      },
-      hover: {
-        light: colors.P200,
-        dark: colors.P200
-      },
-      active: {
-        light: colors.P500,
-        dark: colors.P500
-      },
-      disabled: {
-        light: 'none',
-        dark: 'none'
-      },
+      default: 'none',
+      hover: "var(--ds-background-subtleNeutral-hover, ".concat(colors.P200, ")"),
+      active: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.P500, ")"),
+      disabled: 'none',
       selected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: "var(--ds-background-selected-hover, ".concat(colors.N700, ")"),
+        dark: "var(--ds-background-selected-hover, ".concat(colors.DN0, ")")
       },
       focusSelected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: "var(--ds-background-selected-hover, ".concat(colors.N700, ")"),
+        dark: "var(--ds-background-selected-hover, ".concat(colors.DN0, ")")
       }
     },
     boxShadow: {
-      focus: {
-        light: "".concat(colors.P100, " 0 0 0 2px"),
-        dark: "".concat(colors.P100, " 0 0 0 2px")
-      }
+      focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
     },
     color: {
-      default: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      hover: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      active: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      disabled: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      selected: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      focus: {
-        light: colors.N0,
-        dark: colors.N0
-      }
+      default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      hover: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      active: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      disabled: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
+      selected: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
     },
     outline: {
-      focus: {
-        light: 'none',
-        dark: 'none'
-      }
+      focus: 'none'
     }
   },
   'subtle-link': {
     textDecoration: {
-      hover: {
-        light: "underline ".concat(colors.P75),
-        dark: "underline ".concat(colors.P75)
-      }
+      hover: "underline ".concat("var(--ds-text-discovery, ".concat(colors.P75, ")"))
     },
     textDecorationLine: {
-      active: {
-        light: 'none',
-        dark: 'none'
-      }
+      active: 'none'
     },
     boxShadow: {
-      focus: {
-        light: "".concat(colors.P100, " 0 0 0 2px"),
-        dark: "".concat(colors.P100, " 0 0 0 2px")
-      }
+      focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
     },
     color: {
-      default: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      hover: {
-        light: colors.P75,
-        dark: colors.P75
-      },
-      active: {
-        light: colors.P100,
-        dark: colors.P100
-      },
-      disabled: {
-        light: colors.P500,
-        dark: colors.P500
-      },
-      selected: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      focus: {
-        light: colors.N0,
-        dark: colors.N0
-      }
+      default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      hover: "var(--ds-text-onBold, ".concat(colors.P75, ")"),
+      active: "var(--ds-text-onBold, ".concat(colors.P100, ")"),
+      disabled: "var(--ds-text-discovery, ".concat(colors.P500, ")"),
+      selected: "var(--ds-text-selected, ".concat(colors.N0, ")"),
+      focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
     }
   }
 };
 var modalTheme = {
   primary: {
     background: {
-      default: {
-        light: colors.P400,
-        dark: colors.P400
-      },
-      hover: {
-        light: colors.P200,
-        dark: colors.P200
-      },
-      active: {
-        light: colors.P500,
-        dark: colors.P500
-      },
+      default: "var(--ds-background-boldDiscovery-resting, ".concat(colors.P400, ")"),
+      hover: "var(--ds-background-boldDiscovery-hover, ".concat(colors.P200, ")"),
+      active: "var(--ds-background-boldDiscovery-pressed, ".concat(colors.P500, ")"),
       disabled: {
-        light: colors.N30,
-        dark: colors.DN70
-      },
-      selected: {
-        light: colors.R500,
-        dark: colors.R500
+        light: "var(--ds-background-disabled, ".concat(colors.N30, ")"),
+        dark: "var(--ds-background-disabled, ".concat(colors.DN70, ")")
       },
-      focus: {
-        light: colors.P400,
-        dark: colors.P400
-      }
+      selected: "var(--ds-background-selected-hover, ".concat(colors.R500, ")"),
+      focus: "var(--ds-background-boldDiscovery-hover, ".concat(colors.P400, ")")
     },
     boxShadow: {
       focus: {
-        light: "".concat(colors.P100, " 0 0 0 2px"),
-        dark: "".concat(colors.P100, " 0 0 0 2px")
+        light: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")")),
+        dark: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
       }
     },
     color: {
-      default: {
-        light: colors.N0,
-        dark: colors.N0
-      },
+      default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
       disabled: {
-        light: colors.N0,
-        dark: colors.DN30
+        light: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
+        dark: "var(--ds-text-disabled, ".concat(colors.DN30, ")")
       },
-      selected: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      focus: {
-        light: colors.N0,
-        dark: colors.N0
-      }
+      selected: "var(--ds-text-selected, ".concat(colors.N0, ")"),
+      focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
     }
   }
 };
@@ -274,7 +150,7 @@ function extract(newTheme, _ref) {
 export var spotlightButtonTheme = function spotlightButtonTheme(current, themeProps) {
   var _current = current(themeProps),
       buttonStyles = _current.buttonStyles,
-      rest = _objectWithoutProperties(_current, ["buttonStyles"]);
+      rest = _objectWithoutProperties(_current, _excluded);
 
   return _objectSpread({
     buttonStyles: _objectSpread(_objectSpread({}, buttonStyles), extract(spotlightTheme, themeProps))
@@ -283,7 +159,7 @@ export var spotlightButtonTheme = function spotlightButtonTheme(current, themePr
 export var modalButtonTheme = function modalButtonTheme(current, themeProps) {
   var _current2 = current(themeProps),
       buttonStyles = _current2.buttonStyles,
-      rest = _objectWithoutProperties(_current2, ["buttonStyles"]);
+      rest = _objectWithoutProperties(_current2, _excluded2);
 
   return _objectSpread({
     buttonStyles: _objectSpread(_objectSpread({}, buttonStyles), extract(modalTheme, themeProps))

package/dist/esm/styled/blanket.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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';
@@ -10,8 +10,8 @@ import { DN90A, N100A } from '@atlaskit/theme/colors';
 import { themed, useGlobalTheme } from '@atlaskit/theme/components';
 import { layers } from '@atlaskit/theme/constants';
 var backgroundColor = themed({
-  light: N100A,
-  dark: DN90A
+  light: "var(--ds-background-blanket, ".concat(N100A, ")"),
+  dark: "var(--ds-background-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).
 

package/dist/esm/styled/dialog.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["alt"];
 
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
@@ -30,7 +31,7 @@ var actionItemStyles = css({
 
 export var DialogImage = function DialogImage(_ref) {
   var alt = _ref.alt,
-      props = _objectWithoutProperties(_ref, ["alt"]);
+      props = _objectWithoutProperties(_ref, _excluded);
 
   return jsx("img", _extends({
     css: imageStyles,

package/dist/esm/styled/target.js

@@ -1,10 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "bgColor", "radius", "style", "testId"],
+    _excluded2 = ["children", "pulse"],
+    _excluded3 = ["children", "pulse", "testId"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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';
@@ -12,7 +15,7 @@ import { P300 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 // NOTE:
 // Pulse color "rgb(101, 84, 192)" derived from "colors.P300"
-var baseShadow = "0 0 0 2px ".concat(P300);
+var baseShadow = "var(--ds-overlay, ".concat("0 0 0 2px ".concat(P300), ")");
 var easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
 var pulseKeyframes = keyframes({
   '0%, 33%': {
@@ -21,7 +24,9 @@ var pulseKeyframes = keyframes({
   '66%, 100%': {
     boxShadow: "".concat(baseShadow, ", 0 0 0 10px rgba(101, 84, 192, 0.01)")
   }
-});
+}); // This is needed for unit tests
+
+export var pulseKeyframesName = pulseKeyframes.name;
 var animationStyles = css({
   animation: "".concat(pulseKeyframes, " 3000ms ").concat(easing, " infinite")
 }); // IE11 and Edge: z-index needed because fixed position calculates z-index relative
@@ -36,10 +41,12 @@ var Base = function Base(_ref) {
       bgColor = _ref.bgColor,
       radius = _ref.radius,
       style = _ref.style,
-      props = _objectWithoutProperties(_ref, ["children", "bgColor", "radius", "style"]);
+      testId = _ref.testId,
+      props = _objectWithoutProperties(_ref, _excluded);
 
   return jsx("div", _extends({
     css: baseStyles,
+    "data-testid": testId,
     style: _objectSpread(_objectSpread({}, style), {}, {
       backgroundColor: bgColor,
       borderRadius: radius ? "".concat(radius, "px") : undefined
@@ -58,7 +65,7 @@ var Base = function Base(_ref) {
 export var TargetInner = function TargetInner(_ref2) {
   var children = _ref2.children,
       pulse = _ref2.pulse,
-      props = _objectWithoutProperties(_ref2, ["children", "pulse"]);
+      props = _objectWithoutProperties(_ref2, _excluded2);
 
   return jsx(Base, _extends({}, props, {
     css: [pulse && animationStyles]
@@ -98,9 +105,13 @@ export var TargetOverlay = function TargetOverlay(props) {
 
 export var Pulse = function Pulse(_ref3) {
   var children = _ref3.children,
-      props = _objectWithoutProperties(_ref3, ["children"]);
+      _ref3$pulse = _ref3.pulse,
+      pulse = _ref3$pulse === void 0 ? true : _ref3$pulse,
+      testId = _ref3.testId,
+      props = _objectWithoutProperties(_ref3, _excluded3);
 
   return jsx(Base, _extends({}, props, {
-    css: animationStyles
+    css: [pulse && animationStyles],
+    testId: testId
   }), children);
 };

package/dist/esm/version.json

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

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

@@ -41,8 +41,8 @@ declare type ModalProps = {
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
  */
 export default class OnboardingModal extends Component<ModalProps> {
-    headerComponent: (props: ModalProps) => "symbol" | "object" | "clipPath" | "filter" | "mask" | "marker" | "small" | "ruby" | "table" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "template" | import("react").ComponentClass<HeaderComponentProps, any> | import("react").FunctionComponent<HeaderComponentProps> | (() => JSX.Element);
-    footerComponent: (props: ModalProps) => "symbol" | "object" | "clipPath" | "filter" | "mask" | "marker" | "small" | "ruby" | "table" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "template" | import("react").ComponentClass<FooterComponentProps, any> | import("react").FunctionComponent<FooterComponentProps> | (() => JSX.Element | null);
+    headerComponent: (props: ModalProps) => "symbol" | "object" | "clipPath" | "filter" | "mask" | "marker" | "small" | "ruby" | "table" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass<HeaderComponentProps, any> | import("react").FunctionComponent<HeaderComponentProps> | (() => JSX.Element);
+    footerComponent: (props: ModalProps) => "symbol" | "object" | "clipPath" | "filter" | "mask" | "marker" | "small" | "ruby" | "table" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass<FooterComponentProps, any> | import("react").FunctionComponent<FooterComponentProps> | (() => JSX.Element | null);
     render(): JSX.Element;
 }
 export {};

package/dist/types/styled/target.d.ts

@@ -3,10 +3,13 @@ declare type BaseProps = React.HTMLAttributes<HTMLDivElement> & {
     bgColor?: string;
     radius?: number;
     className?: string;
+    testId?: string;
 };
 declare type TargetProps = Omit<BaseProps, 'css'> & {
     pulse?: boolean;
+    testId?: string;
 };
+export declare const pulseKeyframesName: string;
 /**
  * __Target inner__
  *