@atlaskit/onboarding 13.0.4 → 14.0.0

package/dist/esm/styled/dialog.js

@@ -1,26 +1,18 @@
+/* dialog.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["alt"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-import { css, jsx } from '@emotion/react';
-var imageStyles = css({
-  maxWidth: '100%',
-  height: 'auto'
-});
-var actionItemContainerStyles = css({
-  display: 'flex',
-  margin: "var(--ds-space-0, 0px)".concat(" -4px"),
-  /* When there is more than one action, place primary action visually on the
-   right, but keep it's position as the first focusable element in the DOM */
-  flexDirection: 'row-reverse'
-});
-var actionItemStyles = css({
-  margin: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)")
-});
+import "./dialog.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Box } from '@atlaskit/primitives/compiled';
+var imageStyles = null;
+var actionItemContainerStyles = {
+  root: "_1e0c1txw _2lx21sbv _6rthze3t _1pfhze3t _12l2r5cr _ahbqr5cr"
+};
+var actionItemStyles = {
+  root: "_6rthze3t _1pfhze3t _12l21b66 _ahbq1b66"
+};
 
 /**
  * __Dialog image__
@@ -32,13 +24,11 @@ var actionItemStyles = css({
 export var DialogImage = function DialogImage(_ref) {
   var alt = _ref.alt,
     props = _objectWithoutProperties(_ref, _excluded);
-  return (
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    jsx("img", _extends({
-      css: imageStyles,
-      alt: alt
-    }, props))
-  );
+  return /*#__PURE__*/React.createElement("img", _extends({
+    alt: alt
+  }, props, {
+    className: ax(["_p12f1osq _4t3i1wug"])
+  }));
 };
 
 /**
@@ -50,8 +40,8 @@ export var DialogImage = function DialogImage(_ref) {
  */
 export var DialogActionItemContainer = function DialogActionItemContainer(_ref2) {
   var children = _ref2.children;
-  return jsx("div", {
-    css: actionItemContainerStyles
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: actionItemContainerStyles.root
   }, children);
 };
 
@@ -64,7 +54,7 @@ export var DialogActionItemContainer = function DialogActionItemContainer(_ref2)
  */
 export var DialogActionItem = function DialogActionItem(_ref3) {
   var children = _ref3.children;
-  return jsx("div", {
-    css: actionItemStyles
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: actionItemStyles.root
   }, children);
 };

package/dist/esm/styled/modal.compiled.css

@@ -0,0 +1,26 @@
+._11c8lodh{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._12l21b66{margin-inline-end:var(--ds-space-050,4px)}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1n261g80{flex-wrap:wrap}
+._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
+._1q511jfw{padding-block-start:var(--ds-space-500,40px)}
+._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
+._1s1g1sit{border-start-start-radius:var(--ds-border-radius,3px)}
+._2lx21sbv{flex-direction:row-reverse}
+._2lx2vrvc{flex-direction:row}
+._4t3i1wug{height:auto}
+._5fbc1sit{border-start-end-radius:var(--ds-border-radius,3px)}
+._6rth1b66{margin-block-end:var(--ds-space-050,4px)}
+._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
+._85i514no{padding-block-end:36px}
+._85i51jfw{padding-block-end:var(--ds-space-500,40px)}
+._ahbq1b66{margin-inline-start:var(--ds-space-050,4px)}
+._bozg1jfw{padding-inline-start:var(--ds-space-500,40px)}
+._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}
+._syaz1kw7{color:inherit}
+._y3gn1h6o{text-align:center}
+._y4ti1jfw{padding-inline-end:var(--ds-space-500,40px)}
+._y4tipxbi{padding-inline-end:var(--ds-space-200,1pc)}
+@media (min-width:320px) and (max-width:480px){._j722idpf{border-radius:0}}

package/dist/esm/styled/modal.js

@@ -1,43 +1,18 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-import { css, jsx } from '@emotion/react';
-var modalBodyStyles = css({
-  padding: "var(--ds-space-500, 40px)".concat(" ", "var(--ds-space-200, 16px)"),
-  textAlign: 'center'
-});
+/* modal.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./modal.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Box } from '@atlaskit/primitives/compiled';
+var modalBodyStyles = null;
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-array-arguments -- Ignored via go/DSP-18766
-var modalHeadingStyles = css({
-  color: 'inherit',
-  font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  marginBlockEnd: "var(--ds-space-100, 8px)"
-});
-var modalImageStyles = css({
-  width: '100%',
-  height: 'auto',
-  borderStartEndRadius: "var(--ds-border-radius, 3px)",
-  borderStartStartRadius: "var(--ds-border-radius, 3px)",
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
-  '@media (min-width: 320px) and (max-width: 480px)': {
-    borderRadius: 0
-  }
-});
-var modalActionContainerStyles = css({
-  display: 'flex',
-  padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-500, 40px)", " 36px"),
-  justifyContent: 'center',
-  flexDirection: 'row',
-  flexFlow: 'wrap'
-});
-var modalActionContainerReversedStyles = css({
-  flexDirection: 'row-reverse'
-});
-var modalActionItemStyles = css({
-  margin: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-050, 4px)")
-});
+var modalHeadingStyles = null;
+var modalImageStyles = null;
+var modalActionContainerStyles = null;
+var modalActionContainerReversedStyles = null;
+var modalActionItemStyles = {
+  root: "_6rth1b66 _1pfhze3t _12l21b66 _ahbq1b66"
+};
 
 /**
  * __Modal body__
@@ -46,8 +21,8 @@ var modalActionItemStyles = css({
  */
 export var ModalBody = function ModalBody(_ref) {
   var children = _ref.children;
-  return jsx("div", {
-    css: modalBodyStyles
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_85i51jfw _1q511jfw _y4tipxbi _bozgpxbi _y3gn1h6o"])
   }, children);
 };
 
@@ -59,13 +34,10 @@ export var ModalBody = function ModalBody(_ref) {
 export var ModalHeading = function ModalHeading(_ref2) {
   var children = _ref2.children,
     id = _ref2.id;
-  return (
-    // eslint-disable-next-line @atlaskit/design-system/use-heading
-    jsx("h1", {
-      css: modalHeadingStyles,
-      id: id
-    }, children)
-  );
+  return /*#__PURE__*/React.createElement("h1", {
+    id: id,
+    className: ax(["_11c8lodh _syaz1kw7 _6rthu2gc"])
+  }, children);
 };
 
 /**
@@ -76,10 +48,10 @@ export var ModalHeading = function ModalHeading(_ref2) {
 export var ModalImage = function ModalImage(_ref3) {
   var alt = _ref3.alt,
     src = _ref3.src;
-  return jsx("img", {
-    css: modalImageStyles,
+  return /*#__PURE__*/React.createElement("img", {
     alt: alt,
-    src: src
+    src: src,
+    className: ax(["_1bsb1osq _4t3i1wug _5fbc1sit _1s1g1sit _j722idpf"])
   });
 };
 
@@ -91,8 +63,8 @@ export var ModalImage = function ModalImage(_ref3) {
 export var ModalActionContainer = function ModalActionContainer(_ref4) {
   var children = _ref4.children,
     shouldReverseButtonOrder = _ref4.shouldReverseButtonOrder;
-  return jsx("div", {
-    css: [modalActionContainerStyles, shouldReverseButtonOrder && modalActionContainerReversedStyles]
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_2lx2vrvc _1n261g80 _1e0c1txw _1bah1h6o _85i514no _1q51ze3t _y4ti1jfw _bozg1jfw", shouldReverseButtonOrder && "_2lx21sbv"])
   }, children);
 };
 
@@ -103,7 +75,7 @@ export var ModalActionContainer = function ModalActionContainer(_ref4) {
  */
 export var ModalActionItem = function ModalActionItem(_ref5) {
   var children = _ref5.children;
-  return jsx("div", {
-    css: modalActionItemStyles
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: modalActionItemStyles.root
   }, children);
 };

package/dist/esm/styled/target.compiled.css

@@ -0,0 +1,8 @@
+
+._y44v1rys{animation:var(--_mb5lf8)}._152tze3t{inset-block-start:var(--ds-space-0,0)}
+._16qs1wx8{box-shadow:0 0 0 2px var(--ds-border-discovery,#8270db)}
+._1bsb1osq{width:100%}
+._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
+._4t3i1osq{height:100%}
+._kqswstnw{position:absolute}
+@media (prefers-reduced-motion:reduce){._1bumglyw{animation:none}._sedtglyw{transition:none}}

package/dist/esm/styled/target.js

@@ -1,3 +1,4 @@
+/* target.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
@@ -5,37 +6,18 @@ var _excluded = ["bgColor", "children", "className", "radius", "testId", "style"
   _excluded2 = ["bgColor", "children", "className", "pulse", "radius", "testId"],
   _excluded3 = ["onClick"],
   _excluded4 = ["bgColor", "children", "className", "radius", "pulse", "testId"];
+import "./target.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-import { css, jsx, keyframes } from '@emotion/react';
-import { reduceMotionAsPerUserPreference } from '@atlaskit/motion';
-import { P300 } from '@atlaskit/theme/colors';
+var reduceMotionAsPerUserPreference = null;
 // NOTE:
 // Pulse color "rgb(101, 84, 192)" derived from "colors.P300"
-var baseShadow = "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(P300, ")"));
+var baseShadow = "0 0 0 2px ".concat("var(--ds-border-discovery, #8270DB)");
 var easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
-var pulseKeyframes = keyframes({
-  '0%, 33%': {
-    boxShadow: "".concat(baseShadow, ", 0 0 0 ", "var(--ds-border-discovery, rgba(101, 84, 192, 1))")
-  },
-  '66%, 100%': {
-    boxShadow: "".concat(baseShadow, ", 0 0 0 10px rgba(101, 84, 192, 0.01)")
-  }
-});
-// This is needed for unit tests
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var pulseKeyframesName = pulseKeyframes.name;
-var animationStyles = css({
-  animation: "".concat(pulseKeyframes, " 3000ms ").concat(easing, " infinite"),
-  // Keep a purple boxshadow on the Pulse component if `prefers-reduced-motion`
-  // is applied so we still have a functioning semantic affordance.
-  boxShadow: baseShadow
-});
+var pulseKeyframes = null;
+var animationStyles = null;
 var Base = function Base(_ref) {
   var bgColor = _ref.bgColor,
     children = _ref.children,
@@ -44,7 +26,7 @@ var Base = function Base(_ref) {
     testId = _ref.testId,
     style = _ref.style,
     props = _objectWithoutProperties(_ref, _excluded);
-  return jsx("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     className: className,
     "data-testid": testId,
@@ -71,26 +53,21 @@ export var TargetInner = function TargetInner(_ref2) {
     radius = _ref2.radius,
     testId = _ref2.testId,
     props = _objectWithoutProperties(_ref2, _excluded2);
-  return jsx(Base, _extends({
+  return /*#__PURE__*/React.createElement(Base, _extends({
     bgColor: bgColor
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: className,
+    className: ax([pulse && "_y44v1rys _16qs1wx8", "_1bumglyw _sedtglyw", className]),
     radius: radius,
     testId: testId
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, props, {
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    css: [pulse && animationStyles, reduceMotionAsPerUserPreference]
+    style: _objectSpread(_objectSpread({}, props.style), {}, {
+      "--_mb5lf8": ix("".concat(pulseKeyframes, " 3000ms ").concat(easing, " infinite"))
+    })
   }), children);
 };
-var targetOverlayStyles = css({
-  width: '100%',
-  height: '100%',
-  position: 'absolute',
-  insetBlockStart: "var(--ds-space-0, 0)",
-  insetInlineStart: "var(--ds-space-0, 0)"
-});
+var targetOverlayStyles = null;
 
 /**
  * __Target overlay__
@@ -103,20 +80,16 @@ var targetOverlayStyles = css({
 export var TargetOverlay = function TargetOverlay(_ref3) {
   var onClick = _ref3.onClick,
     props = _objectWithoutProperties(_ref3, _excluded3);
-  return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    jsx("div", _extends({
-      onClick: onClick
-      // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    }, props, {
-      css: targetOverlayStyles
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      ,
-      style: {
-        cursor: onClick ? 'pointer' : 'auto'
-      }
-    }))
-  );
+  return /*#__PURE__*/React.createElement("div", _extends({
+    onClick: onClick
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, props, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    style: {
+      cursor: onClick ? 'pointer' : 'auto'
+    },
+    className: ax(["_1bsb1osq _4t3i1osq _kqswstnw _152tze3t _1e02ze3t"])
+  }));
 };
 
 /**
@@ -137,17 +110,17 @@ export var Pulse = function Pulse(_ref4) {
     pulse = _ref4$pulse === void 0 ? true : _ref4$pulse,
     testId = _ref4.testId,
     props = _objectWithoutProperties(_ref4, _excluded4);
-  return jsx(Base, _extends({
+  return /*#__PURE__*/React.createElement(Base, _extends({
     bgColor: bgColor
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: className,
+    className: ax([pulse && "_y44v1rys _16qs1wx8", "_1bumglyw _sedtglyw", className]),
     radius: radius,
     testId: testId
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, props, {
-    css: [pulse && animationStyles,
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    reduceMotionAsPerUserPreference]
+    style: _objectSpread(_objectSpread({}, props.style), {}, {
+      "--_mb5lf8": ix("".concat(pulseKeyframes, " 3000ms ").concat(easing, " infinite"))
+    })
   }), children);
 };

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

@@ -1,9 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { Component, type ElementType, type ReactNode } from 'react';
-import { jsx } from '@emotion/react';
+import React, { Component, type ElementType, type ReactNode } from 'react';
 import { type ModalFooterProps as FooterComponentProps, type ModalHeaderProps as HeaderComponentProps } from '@atlaskit/modal-dialog';
 import { type Actions } from '../types';
 type ModalProps = {
@@ -35,6 +30,10 @@ type ModalProps = {
      * Boolean prop to confirm if primary button in the footer should be shown on the right.
      */
     experimental_shouldShowPrimaryButtonOnRight?: boolean;
+    /**
+     * This prop is a unique string that appears as an attribute `data-testid` in the rendered HTML output serving as a hook for automated tests.
+     */
+    testId?: string;
 };
 /**
  * __Benefits modal__
@@ -46,8 +45,8 @@ type ModalProps = {
  * - [Usage](https://atlassian.design/components/onboarding/benefits-modal/usage)
  */
 export default class BenefitsModal extends Component<ModalProps> {
-    headerComponent: (props: ModalProps) => ElementType<HeaderComponentProps> | (() => jsx.JSX.Element);
-    footerComponent: (props: ModalProps) => ElementType<FooterComponentProps> | (() => jsx.JSX.Element | null);
-    render(): jsx.JSX.Element;
+    headerComponent: (props: ModalProps) => React.ElementType<HeaderComponentProps> | (() => React.JSX.Element);
+    footerComponent: (props: ModalProps) => React.ElementType<FooterComponentProps> | (() => React.JSX.Element | null);
+    render(): React.JSX.Element;
 }
 export {};

package/dist/types/components/node-resolver-spotlight-target.d.ts

@@ -3,7 +3,6 @@
  * @jsx jsx
  */
 import { type ReactElement } from 'react';
-import { jsx } from '@emotion/react';
 interface NodeResolverSpotlightTargetProps {
     hasNodeResolver: boolean;
     children: ReactElement;
@@ -21,5 +20,5 @@ interface NodeResolverSpotlightTargetProps {
  * @param {ReactElement} props.getTargetRef - Setting up Target Node in Spotlight Manager.
  * @returns {ReactElement} The children wrapped with NodeResolver if hasNodeResolver is true, wrape the children in a div setting innerRef with ref to the div.
  */
-declare const NodeResolverSpotlightTarget: ({ hasNodeResolver, children, getTargetRef, name, }: NodeResolverSpotlightTargetProps) => jsx.JSX.Element;
+declare const NodeResolverSpotlightTarget: ({ hasNodeResolver, children, getTargetRef, name, }: NodeResolverSpotlightTargetProps) => JSX.Element;
 export default NodeResolverSpotlightTarget;

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

@@ -1,9 +1,4 @@
 /// <reference types="react" />
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@emotion/react';
 type BlanketProps = {
     isTinted?: boolean;
     style?: React.CSSProperties;
@@ -20,5 +15,5 @@ type BlanketProps = {
  *
  * @internal
  */
-declare const Blanket: ({ isTinted, onBlanketClicked, style }: BlanketProps) => jsx.JSX.Element;
+declare const Blanket: ({ isTinted, onBlanketClicked, style }: BlanketProps) => JSX.Element;
 export default Blanket;

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

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

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

@@ -3,7 +3,6 @@
  * @jsx jsx
  */
 import { type ReactNode } from 'react';
-import { jsx } from '@emotion/react';
 type ModalImageProps = {
     alt: string;
     src?: string;
@@ -19,7 +18,7 @@ type ModalActionContainerProps = {
  */
 export declare const ModalBody: ({ children }: {
     children: ReactNode;
-}) => jsx.JSX.Element;
+}) => JSX.Element;
 /**
  * __Modal heading__
  *
@@ -28,19 +27,19 @@ export declare const ModalBody: ({ children }: {
 export declare const ModalHeading: ({ children, id }: {
     children: ReactNode;
     id: string;
-}) => jsx.JSX.Element;
+}) => JSX.Element;
 /**
  * __Modal image__
  *
  * @internal
  */
-export declare const ModalImage: ({ alt, src }: ModalImageProps) => jsx.JSX.Element;
+export declare const ModalImage: ({ alt, src }: ModalImageProps) => JSX.Element;
 /**
  * __Modal action container__
  *
  * @internal
  */
-export declare const ModalActionContainer: ({ children, shouldReverseButtonOrder, }: ModalActionContainerProps) => jsx.JSX.Element;
+export declare const ModalActionContainer: ({ children, shouldReverseButtonOrder, }: ModalActionContainerProps) => JSX.Element;
 /**
  * __Modal action item__
  *
@@ -48,5 +47,5 @@ export declare const ModalActionContainer: ({ children, shouldReverseButtonOrder
  */
 export declare const ModalActionItem: ({ children }: {
     children: ReactNode;
-}) => jsx.JSX.Element;
+}) => JSX.Element;
 export {};

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

@@ -3,7 +3,6 @@
  * @jsx jsx
  */
 import { type HTMLAttributes, type ReactNode } from 'react';
-import { jsx } from '@emotion/react';
 type BaseProps = React.HTMLAttributes<HTMLDivElement> & {
     bgColor?: string;
     children?: ReactNode;
@@ -14,7 +13,6 @@ type BaseProps = React.HTMLAttributes<HTMLDivElement> & {
 type TargetProps = Omit<BaseProps, 'css'> & {
     pulse?: boolean;
 };
-export declare const pulseKeyframesName: string;
 /**
  * __Target inner__
  *
@@ -22,7 +20,7 @@ export declare const pulseKeyframesName: string;
  *
  * @internal
  */
-export declare const TargetInner: ({ bgColor, children, className, pulse, radius, testId, ...props }: TargetProps) => jsx.JSX.Element;
+export declare const TargetInner: ({ bgColor, children, className, pulse, radius, testId, ...props }: TargetProps) => JSX.Element;
 /**
  * __Target overlay__
  *
@@ -31,7 +29,7 @@ export declare const TargetInner: ({ bgColor, children, className, pulse, radius
  *
  * @internal
  */
-export declare const TargetOverlay: ({ onClick, ...props }: HTMLAttributes<HTMLDivElement>) => jsx.JSX.Element;
+export declare const TargetOverlay: ({ onClick, ...props }: HTMLAttributes<HTMLDivElement>) => JSX.Element;
 /**
  * __Spotlight pulse__
  *
@@ -41,5 +39,5 @@ export declare const TargetOverlay: ({ onClick, ...props }: HTMLAttributes<HTMLD
  * - [Code](https://atlassian.design/components/onboarding/code)
  * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
-export declare const Pulse: ({ bgColor, children, className, radius, pulse, testId, ...props }: TargetProps) => jsx.JSX.Element;
+export declare const Pulse: ({ bgColor, children, className, radius, pulse, testId, ...props }: TargetProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/components/modal.d.ts

@@ -1,9 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { Component, type ElementType, type ReactNode } from 'react';
-import { jsx } from '@emotion/react';
+import React, { Component, type ElementType, type ReactNode } from 'react';
 import { type ModalFooterProps as FooterComponentProps, type ModalHeaderProps as HeaderComponentProps } from '@atlaskit/modal-dialog';
 import { type Actions } from '../types';
 type ModalProps = {
@@ -35,6 +30,10 @@ type ModalProps = {
      * Boolean prop to confirm if primary button in the footer should be shown on the right.
      */
     experimental_shouldShowPrimaryButtonOnRight?: boolean;
+    /**
+     * This prop is a unique string that appears as an attribute `data-testid` in the rendered HTML output serving as a hook for automated tests.
+     */
+    testId?: string;
 };
 /**
  * __Benefits modal__
@@ -46,8 +45,8 @@ type ModalProps = {
  * - [Usage](https://atlassian.design/components/onboarding/benefits-modal/usage)
  */
 export default class BenefitsModal extends Component<ModalProps> {
-    headerComponent: (props: ModalProps) => ElementType<HeaderComponentProps> | (() => jsx.JSX.Element);
-    footerComponent: (props: ModalProps) => ElementType<FooterComponentProps> | (() => jsx.JSX.Element | null);
-    render(): jsx.JSX.Element;
+    headerComponent: (props: ModalProps) => React.ElementType<HeaderComponentProps> | (() => React.JSX.Element);
+    footerComponent: (props: ModalProps) => React.ElementType<FooterComponentProps> | (() => React.JSX.Element | null);
+    render(): React.JSX.Element;
 }
 export {};

package/dist/types-ts4.5/components/node-resolver-spotlight-target.d.ts

@@ -3,7 +3,6 @@
  * @jsx jsx
  */
 import { type ReactElement } from 'react';
-import { jsx } from '@emotion/react';
 interface NodeResolverSpotlightTargetProps {
     hasNodeResolver: boolean;
     children: ReactElement;
@@ -21,5 +20,5 @@ interface NodeResolverSpotlightTargetProps {
  * @param {ReactElement} props.getTargetRef - Setting up Target Node in Spotlight Manager.
  * @returns {ReactElement} The children wrapped with NodeResolver if hasNodeResolver is true, wrape the children in a div setting innerRef with ref to the div.
  */
-declare const NodeResolverSpotlightTarget: ({ hasNodeResolver, children, getTargetRef, name, }: NodeResolverSpotlightTargetProps) => jsx.JSX.Element;
+declare const NodeResolverSpotlightTarget: ({ hasNodeResolver, children, getTargetRef, name, }: NodeResolverSpotlightTargetProps) => JSX.Element;
 export default NodeResolverSpotlightTarget;

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

@@ -1,9 +1,4 @@
 /// <reference types="react" />
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@emotion/react';
 type BlanketProps = {
     isTinted?: boolean;
     style?: React.CSSProperties;
@@ -20,5 +15,5 @@ type BlanketProps = {
  *
  * @internal
  */
-declare const Blanket: ({ isTinted, onBlanketClicked, style }: BlanketProps) => jsx.JSX.Element;
+declare const Blanket: ({ isTinted, onBlanketClicked, style }: BlanketProps) => JSX.Element;
 export default Blanket;