@atlaskit/onboarding 10.6.7 → 10.6.8

package/dist/esm/styled/modal.js

@@ -3,27 +3,28 @@ import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { borderRadius as getBorderRadius } from '@atlaskit/theme/constants';
 import { h600 } from '@atlaskit/theme/typography';
-var borderRadius = getBorderRadius(); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+var borderRadius = getBorderRadius();
 
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var lightH600Styles = css(h600({
   theme: {
     mode: 'light'
   }
-})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-
+}));
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var darkH600Styles = css(h600({
   theme: {
     mode: 'dark'
   }
 }));
 var modalBodyStyles = css({
-  padding: "var(--ds-scale-500, 40px)".concat(" ", "var(--ds-scale-250, 20px)"),
+  padding: "var(--ds-space-500, 40px)".concat(" ", "var(--ds-space-250, 20px)"),
   textAlign: 'center'
-}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+});
 
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var modalHeadingStyles = css({
-  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize}px``
-  marginBottom: "var(--ds-scale-100, 8px)",
+  marginBottom: "var(--ds-space-100, 8px)",
   color: 'inherit'
 });
 var modalImageStyles = css({
@@ -37,7 +38,7 @@ var modalImageStyles = css({
 });
 var modalActionContainerStyles = css({
   display: 'flex',
-  padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-500, 40px)", " 36px"),
+  padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-500, 40px)", " 36px"),
   justifyContent: 'center',
   flexDirection: 'row',
   flexFlow: 'wrap'
@@ -46,70 +47,68 @@ var modalActionContainerReversedStyles = css({
   flexDirection: 'row-reverse'
 });
 var modalActionItemStyles = css({
-  margin: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-050, 4px)", " ", "var(--ds-scale-050, 4px)")
+  margin: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-050, 4px)")
 });
+
 /**
  * __Modal body__
  *
  * @internal
  */
-
 export var ModalBody = function ModalBody(_ref) {
   var children = _ref.children;
   return jsx("div", {
     css: modalBodyStyles
   }, children);
 };
+
 /**
  * __Modal heading__
  *
  * @internal
  */
-
 export var ModalHeading = function ModalHeading(_ref2) {
   var children = _ref2.children;
-
   var _useGlobalTheme = useGlobalTheme(),
-      mode = _useGlobalTheme.mode;
-
+    mode = _useGlobalTheme.mode;
   return jsx("h4", {
     css: [mode === 'light' ? lightH600Styles : darkH600Styles, modalHeadingStyles]
   }, children);
 };
+
 /**
  * __Modal image__
  *
  * @internal
  */
-
 export var ModalImage = function ModalImage(_ref3) {
   var alt = _ref3.alt,
-      src = _ref3.src;
+    src = _ref3.src;
   return jsx("img", {
     css: modalImageStyles,
     alt: alt,
     src: src
   });
 };
+
 /**
  * __Modal action container__
  *
  * @internal
  */
-
 export var ModalActionContainer = function ModalActionContainer(_ref4) {
   var children = _ref4.children,
-      shouldReverseButtonOrder = _ref4.shouldReverseButtonOrder;
+    shouldReverseButtonOrder = _ref4.shouldReverseButtonOrder;
   return jsx("div", {
     css: [modalActionContainerStyles, shouldReverseButtonOrder && modalActionContainerReversedStyles]
   }, children);
 };
+
 /**
  * __Modal action item__
  *
  * @internal
  */
-
 export var ModalActionItem = function ModalActionItem(_ref5) {
   var children = _ref5.children;
   return jsx("div", {

package/dist/esm/styled/target.js

@@ -2,13 +2,10 @@ 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"];
-
+  _excluded2 = ["children", "pulse"],
+  _excluded3 = ["children", "pulse", "testId"];
 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 = 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/react';
 import { P300 } from '@atlaskit/theme/colors';
@@ -24,36 +21,36 @@ var pulseKeyframes = keyframes({
   '66%, 100%': {
     boxShadow: "".concat(baseShadow, ", 0 0 0 10px rgba(101, 84, 192, 0.01)")
   }
-}); // This is needed for unit tests
-
+});
+// 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
-// to body instead of nearest stacking context (Portal in our case).
+});
 
+// 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 = css({
   zIndex: layers.spotlight() + 1
 });
-
 var Base = function Base(_ref) {
   var children = _ref.children,
-      bgColor = _ref.bgColor,
-      radius = _ref.radius,
-      style = _ref.style,
-      testId = _ref.testId,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    bgColor = _ref.bgColor,
+    radius = _ref.radius,
+    style = _ref.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
-    }) // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-
+    })
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, props), children);
 };
+
 /**
  * __Target inner__
  *
@@ -61,14 +58,12 @@ var Base = function Base(_ref) {
  *
  * @internal
  */
-
-
 export var TargetInner = function TargetInner(_ref2) {
   var children = _ref2.children,
-      pulse = _ref2.pulse,
-      props = _objectWithoutProperties(_ref2, _excluded2);
-
-  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    pulse = _ref2.pulse,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  return (
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     jsx(Base, _extends({}, props, {
       css: [pulse && animationStyles]
     }), children)
@@ -81,6 +76,7 @@ var targetOverlayStyles = css({
   top: 0,
   left: 0
 });
+
 /**
  * __Target overlay__
  *
@@ -89,7 +85,6 @@ var targetOverlayStyles = css({
  *
  * @internal
  */
-
 export var TargetOverlay = function TargetOverlay(props) {
   return jsx("div", _extends({}, props, {
     css: targetOverlayStyles,
@@ -98,6 +93,7 @@ export var TargetOverlay = function TargetOverlay(props) {
     }
   }));
 };
+
 /**
  * __Spotlight pulse__
  *
@@ -107,15 +103,14 @@ export var TargetOverlay = function TargetOverlay(props) {
  * - [Code](https://atlassian.design/components/onboarding/code)
  * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
-
 export var Pulse = function Pulse(_ref3) {
   var children = _ref3.children,
-      _ref3$pulse = _ref3.pulse,
-      pulse = _ref3$pulse === void 0 ? true : _ref3$pulse,
-      testId = _ref3.testId,
-      props = _objectWithoutProperties(_ref3, _excluded3);
-
-  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    _ref3$pulse = _ref3.pulse,
+    pulse = _ref3$pulse === void 0 ? true : _ref3$pulse,
+    testId = _ref3.testId,
+    props = _objectWithoutProperties(_ref3, _excluded3);
+  return (
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     jsx(Base, _extends({}, props, {
       css: [pulse && animationStyles],
       testId: testId

package/dist/esm/utils/use-element-box.js

@@ -1,14 +1,12 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useEffect, useLayoutEffect, useState } from 'react';
 import { bind } from 'bind-event-listener';
-
 var getElementRect = function getElementRect(element) {
   var _element$getBoundingC = element.getBoundingClientRect(),
-      height = _element$getBoundingC.height,
-      left = _element$getBoundingC.left,
-      top = _element$getBoundingC.top,
-      width = _element$getBoundingC.width;
-
+    height = _element$getBoundingC.height,
+    left = _element$getBoundingC.left,
+    top = _element$getBoundingC.top,
+    width = _element$getBoundingC.width;
   return {
     height: height,
     left: left,
@@ -16,24 +14,22 @@ var getElementRect = function getElementRect(element) {
     width: width
   };
 };
+
 /**
  * Will listen to the document resizing to see if an element has moved positions.
  * Not using ResizeObserver because of IE11 support.
  * @param element HTMLElement to watch when resizing.
  */
-
-
 export var useElementBox = function useElementBox(element) {
   var _useState = useState({
-    width: 0,
-    height: 0,
-    left: 0,
-    top: 0
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      box = _useState2[0],
-      setBox = _useState2[1];
-
+      width: 0,
+      height: 0,
+      left: 0,
+      top: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    box = _useState2[0],
+    setBox = _useState2[1];
   useLayoutEffect(function () {
     setBox(getElementRect(element));
   }, [element]);
@@ -43,7 +39,6 @@ export var useElementBox = function useElementBox(element) {
         setBox(getElementRect(element));
       });
     };
-
     return bind(window, {
       type: 'resize',
       listener: onResize
@@ -51,6 +46,7 @@ export var useElementBox = function useElementBox(element) {
   }, [element]);
   return box;
 };
+
 /**
  * __Element box__
  *
@@ -58,7 +54,6 @@ export var useElementBox = function useElementBox(element) {
  *
  * @internal
  */
-
 export var ElementBox = function ElementBox(props) {
   var box = useElementBox(props.element);
   return props.children(box);

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/onboarding",
-  "version": "10.6.7",
+  "version": "10.6.8",
   "description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"