@atlaskit/onboarding 10.8.3 → 10.8.5

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/onboarding
 
+## 10.8.5
+
+### Patch Changes
+
+- [`599bfe90ee3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/599bfe90ee3) - Internal change to use shape tokens. There is no expected visual change.
+
+## 10.8.4
+
+### Patch Changes
+
+- [`df6aac8c5a6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/df6aac8c5a6) - When providing an image path to `SpotlightCard`, there is no longer an additional space that appears between the image and content padding.
+- Updated dependencies
+
 ## 10.8.3
 
 ### Patch Changes

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

@@ -25,6 +25,9 @@ var bodyStyles = (0, _react2.css)({
   padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-250, 20px)"),
   flexDirection: 'column'
 });
+var imageStyles = (0, _react2.css)({
+  display: 'block'
+});
 var defaultHeaderStyles = (0, _react2.css)({
   display: 'flex',
   paddingBottom: "var(--ds-space-100, 8px)",
@@ -53,7 +56,7 @@ var containerStyles = (0, _react2.css)({
   height: 'fit-content',
   zIndex: _constants.layers.spotlight() + 1,
   background: "var(--ds-background-discovery-bold, ".concat(_colors.P300, ")"),
-  borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
+  borderRadius: "var(--ds-border-radius, 3px)",
   color: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
   overflow: 'auto'
 });
@@ -111,7 +114,7 @@ var SpotlightCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var container = _ref3.container;
     return (0, _react2.jsx)("div", {
       css: [containerStyles, !isFlat && containerShadowStyles,
-      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       container],
       style: {
         width: "".concat(Math.min(Math.max(width, 160), 600), "px")
@@ -119,6 +122,7 @@ var SpotlightCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       ref: ref || innerRef,
       "data-testid": testId
     }, typeof image === 'string' ? (0, _react2.jsx)("img", {
+      css: imageStyles,
       src: image,
       alt: ""
     }) : image, (0, _react2.jsx)("div", {

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

@@ -27,7 +27,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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.3";
+var packageVersion = "10.8.5";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);

package/dist/cjs/styled/dialog.js

@@ -24,7 +24,6 @@ var actionItemContainerStyles = (0, _react.css)({
 var actionItemStyles = (0, _react.css)({
   margin: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)")
 });
-
 /**
  * __Dialog image__
  *

package/dist/cjs/styled/modal.js

@@ -6,19 +6,16 @@ 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 _constants = require("@atlaskit/theme/constants");
 var _typography = require("@atlaskit/theme/typography");
 /** @jsx jsx */
 
-var borderRadius = (0, _constants.borderRadius)();
-
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// 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 @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var darkH600Styles = (0, _react.css)((0, _typography.h600)({
   theme: {
     mode: 'dark'
@@ -28,8 +25,6 @@ var modalBodyStyles = (0, _react.css)({
   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
 var modalHeadingStyles = (0, _react.css)({
   marginBottom: "var(--ds-space-100, 8px)",
   color: 'inherit'
@@ -37,8 +32,8 @@ var modalHeadingStyles = (0, _react.css)({
 var modalImageStyles = (0, _react.css)({
   width: '100%',
   height: 'auto',
-  borderTopLeftRadius: "".concat(borderRadius, "px"),
-  borderTopRightRadius: "".concat(borderRadius, "px"),
+  borderTopLeftRadius: "var(--ds-border-radius, 3px)",
+  borderTopRightRadius: "var(--ds-border-radius, 3px)",
   '@media (min-width: 320px) and (max-width: 480px)': {
     borderRadius: 0
   }

package/dist/cjs/styled/target.js

@@ -82,9 +82,9 @@ var targetOverlayStyles = (0, _react.css)({
   width: '100%',
   height: '100%',
   position: 'absolute',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   top: 0,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   left: 0
 });
 

package/dist/cjs/version.json

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

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

@@ -5,7 +5,7 @@ import Button, { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-butt
 import Heading from '@atlaskit/heading';
 import { N0, N50A, N60A, P300 } from '@atlaskit/theme/colors';
 import { createTheme } from '@atlaskit/theme/components';
-import { borderRadius, layers } from '@atlaskit/theme/constants';
+import { layers } from '@atlaskit/theme/constants';
 import { DialogActionItem, DialogActionItemContainer } from '../styled/dialog';
 import { spotlightButtonTheme } from './theme';
 const bodyStyles = css({
@@ -13,6 +13,9 @@ const bodyStyles = css({
   padding: `${"var(--ds-space-200, 16px)"} ${"var(--ds-space-250, 20px)"}`,
   flexDirection: 'column'
 });
+const imageStyles = css({
+  display: 'block'
+});
 const defaultHeaderStyles = css({
   display: 'flex',
   paddingBottom: "var(--ds-space-100, 8px)",
@@ -39,7 +42,7 @@ const containerStyles = css({
   height: 'fit-content',
   zIndex: layers.spotlight() + 1,
   background: `var(--ds-background-discovery-bold, ${P300})`,
-  borderRadius: `${borderRadius()}px`,
+  borderRadius: "var(--ds-border-radius, 3px)",
   color: `var(--ds-text-inverse, ${N0})`,
   overflow: 'auto'
 });
@@ -95,7 +98,7 @@ const SpotlightCard = /*#__PURE__*/forwardRef((props, ref) => {
   }) => {
     return jsx("div", {
       css: [containerStyles, !isFlat && containerShadowStyles,
-      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       container],
       style: {
         width: `${Math.min(Math.max(width, 160), 600)}px`
@@ -103,6 +106,7 @@ const SpotlightCard = /*#__PURE__*/forwardRef((props, ref) => {
       ref: ref || innerRef,
       "data-testid": testId
     }, typeof image === 'string' ? jsx("img", {
+      css: imageStyles,
       src: image,
       alt: ""
     }) : image, jsx("div", {

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.3";
+const packageVersion = "10.8.5";
 class SpotlightDialog extends Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/styled/dialog.js

@@ -16,7 +16,6 @@ const actionItemContainerStyles = css({
 const actionItemStyles = css({
   margin: `${"var(--ds-space-0, 0px)"} ${"var(--ds-space-050, 4px)"}`
 });
-
 /**
  * __Dialog image__
  *

package/dist/es2019/styled/modal.js

@@ -2,17 +2,14 @@
 
 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';
-const borderRadius = getBorderRadius();
-
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 const lightH600Styles = css(h600({
   theme: {
     mode: 'light'
   }
 }));
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 const darkH600Styles = css(h600({
   theme: {
     mode: 'dark'
@@ -22,8 +19,6 @@ const modalBodyStyles = css({
   padding: `${"var(--ds-space-500, 40px)"} ${"var(--ds-space-250, 20px)"}`,
   textAlign: 'center'
 });
-
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 const modalHeadingStyles = css({
   marginBottom: "var(--ds-space-100, 8px)",
   color: 'inherit'
@@ -31,8 +26,8 @@ const modalHeadingStyles = css({
 const modalImageStyles = css({
   width: '100%',
   height: 'auto',
-  borderTopLeftRadius: `${borderRadius}px`,
-  borderTopRightRadius: `${borderRadius}px`,
+  borderTopLeftRadius: "var(--ds-border-radius, 3px)",
+  borderTopRightRadius: "var(--ds-border-radius, 3px)",
   '@media (min-width: 320px) and (max-width: 480px)': {
     borderRadius: 0
   }

package/dist/es2019/styled/target.js

@@ -65,9 +65,9 @@ const targetOverlayStyles = css({
   width: '100%',
   height: '100%',
   position: 'absolute',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   top: 0,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   left: 0
 });
 

package/dist/es2019/version.json

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

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

@@ -7,7 +7,7 @@ import Button, { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-butt
 import Heading from '@atlaskit/heading';
 import { N0, N50A, N60A, P300 } from '@atlaskit/theme/colors';
 import { createTheme } from '@atlaskit/theme/components';
-import { borderRadius, layers } from '@atlaskit/theme/constants';
+import { layers } from '@atlaskit/theme/constants';
 import { DialogActionItem, DialogActionItemContainer } from '../styled/dialog';
 import { spotlightButtonTheme } from './theme';
 var bodyStyles = css({
@@ -15,6 +15,9 @@ var bodyStyles = css({
   padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-250, 20px)"),
   flexDirection: 'column'
 });
+var imageStyles = css({
+  display: 'block'
+});
 var defaultHeaderStyles = css({
   display: 'flex',
   paddingBottom: "var(--ds-space-100, 8px)",
@@ -43,7 +46,7 @@ var containerStyles = css({
   height: 'fit-content',
   zIndex: layers.spotlight() + 1,
   background: "var(--ds-background-discovery-bold, ".concat(P300, ")"),
-  borderRadius: "".concat(borderRadius(), "px"),
+  borderRadius: "var(--ds-border-radius, 3px)",
   color: "var(--ds-text-inverse, ".concat(N0, ")"),
   overflow: 'auto'
 });
@@ -101,7 +104,7 @@ var SpotlightCard = /*#__PURE__*/forwardRef(function (props, ref) {
     var container = _ref3.container;
     return jsx("div", {
       css: [containerStyles, !isFlat && containerShadowStyles,
-      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       container],
       style: {
         width: "".concat(Math.min(Math.max(width, 160), 600), "px")
@@ -109,6 +112,7 @@ var SpotlightCard = /*#__PURE__*/forwardRef(function (props, ref) {
       ref: ref || innerRef,
       "data-testid": testId
     }, typeof image === 'string' ? jsx("img", {
+      css: imageStyles,
       src: image,
       alt: ""
     }) : image, jsx("div", {

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.3";
+var packageVersion = "10.8.5";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   _inherits(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);

package/dist/esm/styled/dialog.js

@@ -18,7 +18,6 @@ var actionItemContainerStyles = css({
 var actionItemStyles = css({
   margin: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)")
 });
-
 /**
  * __Dialog image__
  *

package/dist/esm/styled/modal.js

@@ -2,17 +2,14 @@
 
 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
+// eslint-disable-next-line @atlaskit/design-system/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 @atlaskit/design-system/consistent-css-prop-usage
 var darkH600Styles = css(h600({
   theme: {
     mode: 'dark'
@@ -22,8 +19,6 @@ var modalBodyStyles = css({
   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
 var modalHeadingStyles = css({
   marginBottom: "var(--ds-space-100, 8px)",
   color: 'inherit'
@@ -31,8 +26,8 @@ var modalHeadingStyles = css({
 var modalImageStyles = css({
   width: '100%',
   height: 'auto',
-  borderTopLeftRadius: "".concat(borderRadius, "px"),
-  borderTopRightRadius: "".concat(borderRadius, "px"),
+  borderTopLeftRadius: "var(--ds-border-radius, 3px)",
+  borderTopRightRadius: "var(--ds-border-radius, 3px)",
   '@media (min-width: 320px) and (max-width: 480px)': {
     borderRadius: 0
   }

package/dist/esm/styled/target.js

@@ -74,9 +74,9 @@ var targetOverlayStyles = css({
   width: '100%',
   height: '100%',
   position: 'absolute',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   top: 0,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   left: 0
 });
 

package/dist/esm/version.json

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

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { ImgHTMLAttributes, ReactNode } from 'react';
 import { jsx } from '@emotion/react';
+type DialogImageProps = ImgHTMLAttributes<HTMLImageElement>;
 /**
  * __Dialog image__
  *
@@ -8,7 +9,7 @@ import { jsx } from '@emotion/react';
  *
  * @internal
  */
-export declare const DialogImage: ({ alt, ...props }: ImgHTMLAttributes<HTMLImageElement>) => jsx.JSX.Element;
+export declare const DialogImage: ({ alt, ...props }: DialogImageProps) => jsx.JSX.Element;
 /**
  * __Dialog action item container__
  *
@@ -29,3 +30,4 @@ export declare const DialogActionItemContainer: ({ children, }: {
 export declare const DialogActionItem: ({ children }: {
     children: ReactNode;
 }) => jsx.JSX.Element;
+export {};

package/dist/types-ts4.5/styled/dialog.d.ts

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { ImgHTMLAttributes, ReactNode } from 'react';
 import { jsx } from '@emotion/react';
+type DialogImageProps = ImgHTMLAttributes<HTMLImageElement>;
 /**
  * __Dialog image__
  *
@@ -8,7 +9,7 @@ import { jsx } from '@emotion/react';
  *
  * @internal
  */
-export declare const DialogImage: ({ alt, ...props }: ImgHTMLAttributes<HTMLImageElement>) => jsx.JSX.Element;
+export declare const DialogImage: ({ alt, ...props }: DialogImageProps) => jsx.JSX.Element;
 /**
  * __Dialog action item container__
  *
@@ -29,3 +30,4 @@ export declare const DialogActionItemContainer: ({ children, }: {
 export declare const DialogActionItem: ({ children }: {
     children: ReactNode;
 }) => jsx.JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/onboarding",
-  "version": "10.8.3",
+  "version": "10.8.5",
   "description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,7 +26,7 @@
   "atlassian": {
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
-    "releaseModel": "scheduled",
+    "releaseModel": "continuous",
     "website": {
       "name": "Onboarding (spotlight)",
       "category": "Components"
@@ -34,14 +34,14 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^16.7.0",
+    "@atlaskit/button": "^16.8.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/heading": "^1.3.0",
-    "@atlaskit/modal-dialog": "^12.5.0",
+    "@atlaskit/modal-dialog": "^12.6.0",
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/portal": "^4.3.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.5.0",
+    "@atlaskit/tokens": "^1.11.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -62,7 +62,6 @@
     "@atlaskit/docs": "*",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/progress-indicator": "^9.5.0",
-    "@atlaskit/select": "^16.5.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",

package/report.api.md

@@ -19,6 +19,7 @@ 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';
@@ -29,6 +30,7 @@ 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)
@@ -91,7 +93,14 @@ type ModalProps = {
 export { ModalTransition };
 
 // @public
-export const Spotlight: React_2.FC<SpotlightProps>;
+export const Spotlight: ({
+  dialogWidth,
+  pulse,
+  testId,
+  targetNode,
+  target,
+  ...rest
+}: SpotlightProps) => JSX.Element;
 
 // @public @deprecated (undocumented)
 export const spotlightButtonTheme: (
@@ -100,8 +109,8 @@ export const spotlightButtonTheme: (
 ) => any;
 
 // @public
-export const SpotlightCard: React_2.ForwardRefExoticComponent<
-  SpotlightCardProps & React_2.RefAttributes<HTMLDivElement>
+export const SpotlightCard: ForwardRefExoticComponent<
+  SpotlightCardProps & RefAttributes<HTMLDivElement>
 >;
 
 // @public (undocumented)
@@ -213,10 +222,18 @@ interface SpotlightProps {
 }
 
 // @public
-export const SpotlightPulse: React.FC<TargetProps>;
+export const SpotlightPulse: ({
+  children,
+  pulse,
+  testId,
+  ...props
+}: TargetProps) => jsx.JSX.Element;
 
 // @public
-export const SpotlightTarget: React_2.FC<SpotlightTargetProps>;
+export const SpotlightTarget: ({
+  children,
+  name,
+}: SpotlightTargetProps) => JSX.Element;
 
 // @public (undocumented)
 interface SpotlightTargetProps {

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

@@ -0,0 +1,226 @@
+## 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?: 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)
+
+```