@atlaskit/onboarding 10.6.7 → 10.6.9

package/dist/es2019/styled/target.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { css, jsx, keyframes } from '@emotion/react';
 import { P300 } from '@atlaskit/theme/colors';
@@ -15,18 +14,18 @@ const pulseKeyframes = keyframes({
   '66%, 100%': {
     boxShadow: `${baseShadow}, 0 0 0 10px rgba(101, 84, 192, 0.01)`
   }
-}); // This is needed for unit tests
-
+});
+// This is needed for unit tests
 export const pulseKeyframesName = pulseKeyframes.name;
 const animationStyles = css({
   animation: `${pulseKeyframes} 3000ms ${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).
 const baseStyles = css({
   zIndex: layers.spotlight() + 1
 });
-
 const Base = ({
   children,
   bgColor,
@@ -37,12 +36,14 @@ const Base = ({
 }) => jsx("div", _extends({
   css: baseStyles,
   "data-testid": testId,
-  style: { ...style,
+  style: {
+    ...style,
     backgroundColor: bgColor,
     borderRadius: radius ? `${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__
  *
@@ -50,13 +51,12 @@ const Base = ({
  *
  * @internal
  */
-
-
 export const TargetInner = ({
   children,
   pulse,
   ...props
-}) => // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}) =>
+// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 jsx(Base, _extends({}, props, {
   css: [pulse && animationStyles]
 }), children);
@@ -67,6 +67,7 @@ const targetOverlayStyles = css({
   top: 0,
   left: 0
 });
+
 /**
  * __Target overlay__
  *
@@ -75,13 +76,13 @@ const targetOverlayStyles = css({
  *
  * @internal
  */
-
 export const TargetOverlay = props => jsx("div", _extends({}, props, {
   css: targetOverlayStyles,
   style: {
     cursor: props.onClick ? 'pointer' : 'auto'
   }
 }));
+
 /**
  * __Spotlight pulse__
  *
@@ -91,13 +92,13 @@ export const TargetOverlay = props => jsx("div", _extends({}, props, {
  * - [Code](https://atlassian.design/components/onboarding/code)
  * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
-
 export const Pulse = ({
   children,
   pulse = true,
   testId,
   ...props
-}) => // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}) =>
+// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 jsx(Base, _extends({}, props, {
   css: [pulse && animationStyles],
   testId: testId

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

@@ -1,6 +1,5 @@
 import { useEffect, useLayoutEffect, useState } from 'react';
 import { bind } from 'bind-event-listener';
-
 const getElementRect = element => {
   const {
     height,
@@ -15,13 +14,12 @@ const getElementRect = element => {
     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 const useElementBox = element => {
   const [box, setBox] = useState({
     width: 0,
@@ -38,7 +36,6 @@ export const useElementBox = element => {
         setBox(getElementRect(element));
       });
     };
-
     return bind(window, {
       type: 'resize',
       listener: onResize
@@ -46,6 +43,7 @@ export const useElementBox = element => {
   }, [element]);
   return box;
 };
+
 /**
  * __Element box__
  *
@@ -53,7 +51,6 @@ export const useElementBox = element => {
  *
  * @internal
  */
-
 export const ElementBox = props => {
   const box = useElementBox(props.element);
   return props.children(box);

package/dist/es2019/version.json

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

package/dist/esm/components/animation.js

@@ -1,16 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 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; }
-
 import React from 'react';
 import { Transition } from 'react-transition-group';
 var duration = {
   enter: 0,
   exit: 100
 };
-
 /**
  * __Fade__
  *
@@ -20,8 +16,8 @@ var duration = {
  */
 export var Fade = function Fade(_ref) {
   var hasEntered = _ref.hasEntered,
-      children = _ref.children,
-      onExited = _ref.onExited;
+    children = _ref.children,
+    onExited = _ref.onExited;
   return /*#__PURE__*/React.createElement(Transition, {
     in: hasEntered,
     timeout: duration,
@@ -41,9 +37,7 @@ export var Fade = function Fade(_ref) {
         opacity: 0
       }
     };
-
     var style = _objectSpread(_objectSpread({}, base), anim[status]);
-
     return children(style);
   });
 };

package/dist/esm/components/clone.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import { TargetInner, TargetOverlay } from '../styled/target';
-
 function cloneAndOverrideStyles(node) {
   var shouldCloneChildren = true;
   var clonedNode = node.cloneNode(shouldCloneChildren);
   clonedNode.style.margin = '0';
-  clonedNode.style.position = 'static'; // The target may have other transforms applied. Avoid unintended side effects
+  clonedNode.style.position = 'static';
+  // The target may have other transforms applied. Avoid unintended side effects
   // by zeroing out "translate" rather than applying a value of "none".
-
   clonedNode.style.transform = 'translate(0, 0) translate3d(0, 0, 0)';
   return clonedNode;
 }
+
 /**
  * __Clone__
  *
@@ -19,17 +19,15 @@ function cloneAndOverrideStyles(node) {
  *
  * @internal
  */
-
-
 var Clone = function Clone(props) {
   var pulse = props.pulse,
-      style = props.style,
-      target = props.target,
-      targetBgColor = props.targetBgColor,
-      targetOnClick = props.targetOnClick,
-      targetNode = props.targetNode,
-      targetRadius = props.targetRadius,
-      testId = props.testId;
+    style = props.style,
+    target = props.target,
+    targetBgColor = props.targetBgColor,
+    targetOnClick = props.targetOnClick,
+    targetNode = props.targetNode,
+    targetRadius = props.targetRadius,
+    testId = props.testId;
   return /*#__PURE__*/React.createElement(TargetInner, {
     "data-testid": testId,
     pulse: pulse,
@@ -54,5 +52,4 @@ var Clone = function Clone(props) {
     } : undefined
   }));
 };
-
 export default Clone;

package/dist/esm/components/modal.js

@@ -8,20 +8,18 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["text", "key"],
-    _excluded2 = ["actions", "children", "heading"];
-
+  _excluded2 = ["actions", "children", "heading"];
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 /** @jsx jsx */
 import { Component } from 'react';
 import { jsx } from '@emotion/react';
 import Button, { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
 import Modal, { ModalBody } from '@atlaskit/modal-dialog';
 import { ModalBody as Body, ModalHeading as Heading, ModalActionContainer, ModalActionItem, ModalImage } from '../styled/modal';
-import { modalButtonTheme } from './theme'; // TODO: DSP-1250 - use a composable API consistent with normal modal dialog
+import { modalButtonTheme } from './theme';
 
+// TODO: DSP-1250 - use a composable API consistent with normal modal dialog
 /**
  * __Benefits modal__
  *
@@ -33,40 +31,30 @@ import { modalButtonTheme } from './theme'; // TODO: DSP-1250 - use a composable
  */
 var BenefitsModal = /*#__PURE__*/function (_Component) {
   _inherits(BenefitsModal, _Component);
-
   var _super = _createSuper(BenefitsModal);
-
   function BenefitsModal() {
     var _this;
-
     _classCallCheck(this, BenefitsModal);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
-
     _defineProperty(_assertThisInitialized(_this), "headerComponent", function (props) {
       var HeaderElement = props.header,
-          src = props.image;
-
+        src = props.image;
       var ImageElement = function ImageElement() {
         return jsx(ModalImage, {
           src: src,
           alt: ""
         });
       };
-
       return HeaderElement || ImageElement;
     });
-
     _defineProperty(_assertThisInitialized(_this), "footerComponent", function (props) {
       var FooterElement = props.footer,
-          actionList = props.actions,
-          _props$experimental_s = props.experimental_shouldShowPrimaryButtonOnRight,
-          experimental_shouldShowPrimaryButtonOnRight = _props$experimental_s === void 0 ? false : _props$experimental_s;
-
+        actionList = props.actions,
+        _props$experimental_s = props.experimental_shouldShowPrimaryButtonOnRight,
+        experimental_shouldShowPrimaryButtonOnRight = _props$experimental_s === void 0 ? false : _props$experimental_s;
       var ActionsElement = function ActionsElement() {
         return actionList ? jsx(ButtonTheme.Provider, {
           value: modalButtonTheme
@@ -74,9 +62,8 @@ var BenefitsModal = /*#__PURE__*/function (_Component) {
           shouldReverseButtonOrder: experimental_shouldShowPrimaryButtonOnRight
         }, actionList.map(function (_ref, idx) {
           var text = _ref.text,
-              key = _ref.key,
-              rest = _objectWithoutProperties(_ref, _excluded);
-
+            key = _ref.key,
+            rest = _objectWithoutProperties(_ref, _excluded);
           var variant = idx ? 'subtle-link' : 'primary';
           return jsx(ModalActionItem, {
             key: key || (typeof text === 'string' ? text : "".concat(idx))
@@ -86,22 +73,18 @@ var BenefitsModal = /*#__PURE__*/function (_Component) {
           }, rest), text));
         }))) : null;
       };
-
       return FooterElement || ActionsElement;
     });
-
     return _this;
   }
-
   _createClass(BenefitsModal, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          actions = _this$props.actions,
-          children = _this$props.children,
-          heading = _this$props.heading,
-          props = _objectWithoutProperties(_this$props, _excluded2);
-
+        actions = _this$props.actions,
+        children = _this$props.children,
+        heading = _this$props.heading,
+        props = _objectWithoutProperties(_this$props, _excluded2);
       var Header = this.headerComponent(this.props);
       var Footer = this.footerComponent(this.props);
       return jsx(Modal, _extends({
@@ -112,8 +95,6 @@ var BenefitsModal = /*#__PURE__*/function (_Component) {
       }, props), jsx(Header, null), jsx(ModalBody, null, jsx(Body, null, heading && jsx(Heading, null, heading), children)), jsx(Footer, null));
     }
   }]);
-
   return BenefitsModal;
 }(Component);
-
 export { BenefitsModal as default };

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

@@ -1,6 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["text", "key"];
-
 /** @jsx jsx */
 import React, { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -13,39 +12,33 @@ import { DialogActionItem, DialogActionItemContainer } from '../styled/dialog';
 import { spotlightButtonTheme } from './theme';
 var bodyStyles = css({
   display: 'flex',
-  padding: "var(--ds-scale-200, 16px)".concat(" ", "var(--ds-scale-250, 20px)"),
+  padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-250, 20px)"),
   flexDirection: 'column'
 });
 var defaultHeaderStyles = css({
   display: 'flex',
-  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize}px``
-  paddingBottom: "var(--ds-scale-100, 8px)",
+  paddingBottom: "var(--ds-space-100, 8px)",
   alignItems: 'baseline',
   justifyContent: 'space-between'
 });
-
 var DefaultHeader = function DefaultHeader(_ref) {
   var children = _ref.children;
   return jsx("div", {
     css: defaultHeaderStyles
   }, children);
 };
-
 var defaultFooterStyles = css({
   display: 'flex',
-  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize}px``
-  paddingTop: "var(--ds-scale-100, 8px)",
+  paddingTop: "var(--ds-space-100, 8px)",
   alignItems: 'center',
   justifyContent: 'space-between'
 });
-
 var DefaultFooter = function DefaultFooter(_ref2) {
   var children = _ref2.children;
   return jsx("div", {
     css: defaultFooterStyles
   }, children);
 };
-
 var containerStyles = css({
   height: 'fit-content',
   zIndex: layers.spotlight() + 1,
@@ -57,15 +50,16 @@ 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
  */
@@ -81,24 +75,24 @@ var Theme = createTheme(function () {
  */
 var SpotlightCard = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$actions = props.actions,
-      actions = _props$actions === void 0 ? [] : _props$actions,
-      actionsBeforeElement = props.actionsBeforeElement,
-      children = props.children,
-      _props$components = props.components,
-      components = _props$components === void 0 ? {} : _props$components,
-      heading = props.heading,
-      headingAfterElement = props.headingAfterElement,
-      image = props.image,
-      innerRef = props.innerRef,
-      isFlat = props.isFlat,
-      testId = props.testId,
-      theme = props.theme,
-      _props$width = props.width,
-      width = _props$width === void 0 ? 400 : _props$width;
+    actions = _props$actions === void 0 ? [] : _props$actions,
+    actionsBeforeElement = props.actionsBeforeElement,
+    children = props.children,
+    _props$components = props.components,
+    components = _props$components === void 0 ? {} : _props$components,
+    heading = props.heading,
+    headingAfterElement = props.headingAfterElement,
+    image = props.image,
+    innerRef = props.innerRef,
+    isFlat = props.isFlat,
+    testId = props.testId,
+    theme = props.theme,
+    _props$width = props.width,
+    width = _props$width === void 0 ? 400 : _props$width;
   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;
+    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, {
@@ -106,7 +100,8 @@ var SpotlightCard = /*#__PURE__*/forwardRef(function (props, ref) {
   }, jsx(Theme.Consumer, null, function (_ref3) {
     var container = _ref3.container;
     return jsx("div", {
-      css: [containerStyles, !isFlat && containerShadowStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      css: [containerStyles, !isFlat && containerShadowStyles,
+      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
       container],
       style: {
         width: "".concat(Math.min(Math.max(width, 160), 600), "px")
@@ -124,9 +119,8 @@ var SpotlightCard = /*#__PURE__*/forwardRef(function (props, ref) {
       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);
-
+        key = _ref4.key,
+        rest = _objectWithoutProperties(_ref4, _excluded);
       return jsx(DialogActionItem, {
         key: key || (typeof text === 'string' ? text : "".concat(idx))
       }, jsx(Button, rest, text));

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

@@ -5,15 +5,10 @@ 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";
-
 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; }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 import React, { Component } from 'react';
 import FocusLock from 'react-focus-lock';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -22,36 +17,26 @@ import { DialogImage } from '../styled/dialog';
 import SpotlightCard from './spotlight-card';
 import ValueChanged from './value-changed';
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "10.6.7";
-
+var packageVersion = "10.6.9";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   _inherits(SpotlightDialog, _Component);
-
   var _super = _createSuper(SpotlightDialog);
-
   function SpotlightDialog() {
     var _this;
-
     _classCallCheck(this, SpotlightDialog);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
-
     _defineProperty(_assertThisInitialized(_this), "state", {
       focusLockDisabled: true
     });
-
     return _this;
   }
-
   _createClass(SpotlightDialog, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
-
       this.focusLockTimeoutId = window.setTimeout(function () {
         // we delay the enabling of the focus lock to avoid the scroll position
         // jumping around in some situations
@@ -69,19 +54,19 @@ var SpotlightDialog = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          actions = _this$props.actions,
-          actionsBeforeElement = _this$props.actionsBeforeElement,
-          animationStyles = _this$props.animationStyles,
-          children = _this$props.children,
-          dialogPlacement = _this$props.dialogPlacement,
-          dialogWidth = _this$props.dialogWidth,
-          footer = _this$props.footer,
-          header = _this$props.header,
-          heading = _this$props.heading,
-          headingAfterElement = _this$props.headingAfterElement,
-          image = _this$props.image,
-          targetNode = _this$props.targetNode,
-          testId = _this$props.testId;
+        actions = _this$props.actions,
+        actionsBeforeElement = _this$props.actionsBeforeElement,
+        animationStyles = _this$props.animationStyles,
+        children = _this$props.children,
+        dialogPlacement = _this$props.dialogPlacement,
+        dialogWidth = _this$props.dialogWidth,
+        footer = _this$props.footer,
+        header = _this$props.header,
+        heading = _this$props.heading,
+        headingAfterElement = _this$props.headingAfterElement,
+        image = _this$props.image,
+        targetNode = _this$props.targetNode,
+        testId = _this$props.testId;
       var focusLockDisabled = this.state.focusLockDisabled;
       var translatedPlacement = dialogPlacement ? {
         'top left': 'top-start',
@@ -96,10 +81,11 @@ var SpotlightDialog = /*#__PURE__*/function (_Component) {
         'left top': 'left-start',
         'left middle': 'left',
         'left bottom': 'left-end'
-      }[dialogPlacement] : undefined; // If there's no room on either side of the popper, it will extend off-screen.
+      }[dialogPlacement] : undefined;
+
+      // If there's no room on either side of the popper, it will extend off-screen.
       //  This looks buggy when scroll-lock and focus is placed on the dialog, so we
       //  customise popper so it overflows the spotlight instead with altAxis=true.
-
       var modifiers = [{
         name: 'preventOverflow',
         options: {
@@ -115,8 +101,8 @@ var SpotlightDialog = /*#__PURE__*/function (_Component) {
         placement: translatedPlacement
       }, function (_ref) {
         var ref = _ref.ref,
-            style = _ref.style,
-            update = _ref.update;
+          style = _ref.style,
+          update = _ref.update;
         return /*#__PURE__*/React.createElement(ValueChanged, {
           value: dialogWidth,
           onChange: update
@@ -146,10 +132,8 @@ var SpotlightDialog = /*#__PURE__*/function (_Component) {
       });
     }
   }]);
-
   return SpotlightDialog;
 }(Component);
-
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({
   componentName: 'spotlight',