@atlaskit/onboarding 13.0.5 → 14.0.0

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

@@ -1,57 +1,36 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* spotlight-card.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./spotlight-card.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
-import { css, jsx } from '@emotion/react';
 import Button, { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
+import { cx } from '@atlaskit/css';
 import Heading from '@atlaskit/heading';
 import { useLayering } from '@atlaskit/layering';
-import { Box, Text, xcss } from '@atlaskit/primitives';
+import { Box, Text } from '@atlaskit/primitives/compiled';
 import { DialogActionItem, DialogActionItemContainer } from '../styled/dialog';
 import { spotlightButtonTheme } from './theme';
-const bodyStyles = css({
-  display: 'flex',
-  padding: `${"var(--ds-space-200, 16px)"} ${"var(--ds-space-250, 20px)"}`,
-  flexDirection: 'column'
-});
-const imageStyles = css({
-  display: 'block'
-});
-const defaultHeaderStyles = css({
-  display: 'flex',
-  alignItems: 'baseline',
-  justifyContent: 'space-between',
-  paddingBlockEnd: "var(--ds-space-100, 8px)"
-});
+const bodyStyles = null;
+const imageStyles = null;
+const defaultHeaderStyles = null;
 const DefaultHeader = ({
   children
-}) => jsx("div", {
-  css: defaultHeaderStyles
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1e0c1txw _4cvr1q9y _1bah1yb4 _85i5u2gc"])
 }, children);
-const defaultFooterStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  paddingBlockStart: "var(--ds-space-100, 8px)"
-});
+const defaultFooterStyles = null;
 const DefaultFooter = ({
   children
-}) => jsx("div", {
-  css: defaultFooterStyles
+}) => /*#__PURE__*/React.createElement("div", {
+  "data-testid": "spotlight--dialog-footer",
+  className: ax(["_1e0c1txw _4cvr1h6o _1bah1yb4 _1q51u2gc"])
 }, children);
-const containerStyles = xcss({
-  height: 'fit-content',
-  zIndex: 'spotlight',
-  borderRadius: 'border.radius',
-  color: 'color.text.inverse',
-  overflow: 'auto',
-  minWidth: '160px',
-  maxWidth: '600px'
-});
-const containerShadowStyles = xcss({
-  boxShadow: 'elevation.shadow.raised'
-});
+const containerStyles = {
+  root: "_2rkoglpi _1reo1wug _18m91wug _4t3i1ns9 _syaz15cr _1ul91lit _p12f1ogm"
+};
+const containerShadowStyles = {
+  root: "_16qszucj"
+};
 /**
  * __Spotlight card__
  *
@@ -84,11 +63,11 @@ const SpotlightCard = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     currentLevel
   } = useLayering();
-  return jsx(ButtonTheme.Provider, {
+  return /*#__PURE__*/React.createElement(ButtonTheme.Provider, {
     value: spotlightButtonTheme
-  }, jsx(Box, {
+  }, /*#__PURE__*/React.createElement(Box, {
     backgroundColor: "color.background.discovery.bold",
-    xcss: [containerStyles, !isFlat && containerShadowStyles],
+    xcss: cx(containerStyles.root, !isFlat && containerShadowStyles.root),
     style: {
       width
     },
@@ -98,25 +77,25 @@ const SpotlightCard = /*#__PURE__*/forwardRef((props, ref) => {
     // temporarily use this data attribute to prevent clicking outside won't close spotlight correctly issue
     ,
     "data-ds--close--type": "single"
-  }, typeof image === 'string' ? jsx("img", {
-    css: imageStyles,
+  }, typeof image === 'string' ? /*#__PURE__*/React.createElement("img", {
     src: image,
-    alt: ""
-  }) : image, jsx("div", {
-    css: bodyStyles
-  }, heading || headingAfterElement ? jsx(Header, null, jsx(Heading, {
+    alt: "",
+    className: ax(["_1e0c1ule"])
+  }) : image, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1e0c1txw _2lx21bp4 _85i5pxbi _1q51pxbi _y4tiv47k _bozgv47k"])
+  }, heading || headingAfterElement ? /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(Heading, {
     id: headingId,
     size: "medium",
     as: `h${headingLevel}`,
     color: "color.text.inverse"
-  }, heading), headingAfterElement) : null, jsx(Text, null, children), actions.length > 0 || actionsBeforeElement ? jsx(Footer, null, actionsBeforeElement || jsx("span", null), jsx(DialogActionItemContainer, null, actions.map(({
+  }, heading), headingAfterElement) : null, /*#__PURE__*/React.createElement(Text, null, children), actions.length > 0 || actionsBeforeElement ? /*#__PURE__*/React.createElement(Footer, null, actionsBeforeElement || /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement(DialogActionItemContainer, null, actions.map(({
     text,
     key,
     ...rest
   }, idx) => {
-    return jsx(DialogActionItem, {
+    return /*#__PURE__*/React.createElement(DialogActionItem, {
       key: key || (typeof text === 'string' ? text : `${idx}`)
-    }, jsx(Button, rest, text));
+    }, /*#__PURE__*/React.createElement(Button, rest, text));
   }))) : null)));
 });
 SpotlightCard.displayName = 'SpotlightCard';

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
 import FocusLock from 'react-focus-lock';
 import { Popper } from '@atlaskit/popper';
-import { Box } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import { DialogImage } from '../styled/dialog';
 import SpotlightCard from './spotlight-card';
 import ValueChanged from './value-changed';

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

@@ -7,7 +7,6 @@ import scrollIntoView from 'scroll-into-view-if-needed';
 import { Layering } from '@atlaskit/layering';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
-import { layers } from '@atlaskit/theme/constants';
 import { ElementBox } from '../utils/use-element-box';
 import { Fade } from './animation';
 import Clone from './clone';
@@ -95,7 +94,7 @@ class SpotlightInner extends React.Component {
       isOpen,
       onExited
     }) => /*#__PURE__*/React.createElement(Portal, {
-      zIndex: layers.spotlight() + 1
+      zIndex: 701
     }, TargetReplacement ? /*#__PURE__*/React.createElement(NodeResolverSpotlightInner, {
       hasNodeResolver: !fg('platform_design_system_team_onboarding_noderesolve'),
       innerRef: elem => this.setState({

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

@@ -3,7 +3,6 @@ import React, { createContext, PureComponent } from 'react';
 import memoizeOne from 'memoize-one';
 import noop from '@atlaskit/ds-lib/noop';
 import Portal from '@atlaskit/portal';
-import { layers } from '@atlaskit/theme/constants';
 import Blanket from '../styled/blanket';
 import { Fade } from './animation';
 const {
@@ -91,7 +90,7 @@ export default class SpotlightManager extends PureComponent {
     }, /*#__PURE__*/React.createElement(Fade, {
       hasEntered: this.state.spotlightCount > 0
     }, animationStyles => /*#__PURE__*/React.createElement(Portal, {
-      zIndex: layers.spotlight()
+      zIndex: 700
     }, /*#__PURE__*/React.createElement(Blanket
     /* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */, {
       style: animationStyles,

package/dist/es2019/components/theme.js

@@ -1,88 +1,87 @@
-import * as colors from '@atlaskit/theme/colors';
 const spotlightTheme = {
   default: {
     background: {
-      default: `var(--ds-background-inverse-subtle, ${colors.P500})`,
-      hover: `var(--ds-background-inverse-subtle-hovered, ${colors.P200})`,
-      active: `var(--ds-background-inverse-subtle-pressed, ${colors.P500})`,
-      disabled: `var(--ds-background-disabled, ${colors.P400})`,
-      selected: `var(--ds-background-inverse-subtle-pressed, ${colors.R500})`,
-      focus: `var(--ds-background-inverse-subtle, ${colors.P500})`
+      default: "var(--ds-background-inverse-subtle, #00000029)",
+      hover: "var(--ds-background-inverse-subtle-hovered, #0000003D)",
+      active: "var(--ds-background-inverse-subtle-pressed, #00000052)",
+      disabled: "var(--ds-background-disabled, #091E4208)",
+      selected: "var(--ds-background-inverse-subtle-pressed, #00000052)",
+      focus: "var(--ds-background-inverse-subtle, #00000029)"
     },
     color: {
-      default: `var(--ds-text-inverse, ${colors.N0})`,
-      hover: `var(--ds-text-inverse, ${colors.N0})`,
-      active: `var(--ds-text-inverse, ${colors.N0})`,
+      default: "var(--ds-text-inverse, #FFFFFF)",
+      hover: "var(--ds-text-inverse, #FFFFFF)",
+      active: "var(--ds-text-inverse, #FFFFFF)",
       disabled: {
-        light: `var(--ds-text-disabled, ${colors.N0})`,
-        dark: `var(--ds-text-disabled, ${colors.DN30})`
+        light: "var(--ds-text-disabled, #091E424F)",
+        dark: "var(--ds-text-disabled, #091E424F)"
       },
-      selected: `var(--ds-text-inverse, ${colors.N0})`,
-      focus: `var(--ds-text-inverse, ${colors.N0})`
+      selected: "var(--ds-text-inverse, #FFFFFF)",
+      focus: "var(--ds-text-inverse, #FFFFFF)"
     }
   },
   subtle: {
     background: {
       default: 'none',
-      hover: `var(--ds-background-inverse-subtle-hovered, ${colors.P200})`,
-      active: `var(--ds-background-inverse-subtle-pressed, ${colors.P500})`,
+      hover: "var(--ds-background-inverse-subtle-hovered, #0000003D)",
+      active: "var(--ds-background-inverse-subtle-pressed, #00000052)",
       disabled: 'none',
       selected: {
-        light: `var(--ds-background-selected-hovered, ${colors.N700})`,
-        dark: `var(--ds-background-selected-hovered, ${colors.DN0})`
+        light: "var(--ds-background-selected-hovered, #CCE0FF)",
+        dark: "var(--ds-background-selected-hovered, #CCE0FF)"
       },
       focusSelected: {
-        light: `var(--ds-background-selected-hovered, ${colors.N700})`,
-        dark: `var(--ds-background-selected-hovered, ${colors.DN0})`
+        light: "var(--ds-background-selected-hovered, #CCE0FF)",
+        dark: "var(--ds-background-selected-hovered, #CCE0FF)"
       }
     },
     color: {
-      default: `var(--ds-text-inverse, ${colors.N0})`,
-      hover: `var(--ds-text-inverse, ${colors.N0})`,
-      active: `var(--ds-text-inverse, ${colors.N0})`,
-      disabled: `var(--ds-text-disabled, ${colors.N0})`,
-      selected: `var(--ds-text-inverse, ${colors.N0})`,
-      focus: `var(--ds-text-inverse, ${colors.N0})`
+      default: "var(--ds-text-inverse, #FFFFFF)",
+      hover: "var(--ds-text-inverse, #FFFFFF)",
+      active: "var(--ds-text-inverse, #FFFFFF)",
+      disabled: "var(--ds-text-disabled, #091E424F)",
+      selected: "var(--ds-text-inverse, #FFFFFF)",
+      focus: "var(--ds-text-inverse, #FFFFFF)"
     }
   },
   'subtle-link': {
     textDecoration: {
-      hover: `underline ${`var(--ds-text-inverse, ${colors.P75})`}`
+      hover: `underline ${"var(--ds-text-inverse, #FFFFFF)"}`
     },
     textDecorationLine: {
       active: 'none'
     },
     color: {
-      default: `var(--ds-text-inverse, ${colors.N0})`,
-      hover: `var(--ds-text-inverse, ${colors.P75})`,
-      active: `var(--ds-text-inverse, ${colors.P100})`,
-      disabled: `var(--ds-text-discovery, ${colors.P500})`,
-      selected: `var(--ds-text-selected, ${colors.N0})`,
-      focus: `var(--ds-text-inverse, ${colors.N0})`
+      default: "var(--ds-text-inverse, #FFFFFF)",
+      hover: "var(--ds-text-inverse, #FFFFFF)",
+      active: "var(--ds-text-inverse, #FFFFFF)",
+      disabled: "var(--ds-text-discovery, #5E4DB2)",
+      selected: "var(--ds-text-selected, #0C66E4)",
+      focus: "var(--ds-text-inverse, #FFFFFF)"
     }
   }
 };
 const modalTheme = {
   primary: {
     background: {
-      default: `var(--ds-background-discovery-bold, ${colors.P400})`,
-      hover: `var(--ds-background-discovery-bold-hovered, ${colors.P200})`,
-      active: `var(--ds-background-discovery-bold-pressed, ${colors.P500})`,
+      default: "var(--ds-background-discovery-bold, #6E5DC6)",
+      hover: "var(--ds-background-discovery-bold-hovered, #5E4DB2)",
+      active: "var(--ds-background-discovery-bold-pressed, #352C63)",
       disabled: {
-        light: `var(--ds-background-disabled, ${colors.N30})`,
-        dark: `var(--ds-background-disabled, ${colors.DN70})`
+        light: "var(--ds-background-disabled, #091E4208)",
+        dark: "var(--ds-background-disabled, #091E4208)"
       },
-      selected: `var(--ds-background-selected-hovered, ${colors.R500})`,
-      focus: `var(--ds-background-discovery-bold-hovered, ${colors.P400})`
+      selected: "var(--ds-background-selected-hovered, #CCE0FF)",
+      focus: "var(--ds-background-discovery-bold-hovered, #5E4DB2)"
     },
     color: {
-      default: `var(--ds-text-inverse, ${colors.N0})`,
+      default: "var(--ds-text-inverse, #FFFFFF)",
       disabled: {
-        light: `var(--ds-text-disabled, ${colors.N0})`,
-        dark: `var(--ds-text-disabled, ${colors.DN30})`
+        light: "var(--ds-text-disabled, #091E424F)",
+        dark: "var(--ds-text-disabled, #091E424F)"
       },
-      selected: `var(--ds-text-selected, ${colors.N0})`,
-      focus: `var(--ds-text-inverse, ${colors.N0})`
+      selected: "var(--ds-text-selected, #0C66E4)",
+      focus: "var(--ds-text-inverse, #FFFFFF)"
     }
   }
 };

package/dist/es2019/styled/blanket.compiled.css

@@ -0,0 +1,4 @@
+
+._1r04idpf{inset:0}
+._v56414ka{transition:opacity .22s}._1pby1fw0{z-index:700}
+._kqsw1n9t{position:fixed}

package/dist/es2019/styled/blanket.js

@@ -1,18 +1,10 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { css, jsx } from '@emotion/react';
-import { N100A } from '@atlaskit/theme/colors';
-import { layers } from '@atlaskit/theme/constants';
+/* blanket.tsx generated by @compiled/babel-plugin v0.36.1 */
 // 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 blanketStyles = css({
-  position: 'fixed',
-  zIndex: layers.spotlight(),
-  inset: 0,
-  transition: 'opacity 220ms'
-});
+import "./blanket.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const blanketStyles = null;
 /**
  * __Blanket__
  *
@@ -29,15 +21,15 @@ const Blanket = ({
   onBlanketClicked,
   style
 }) => {
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement("div", {
     role: "presentation",
-    css: blanketStyles,
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Pass-through style props are not allowed
       ...style,
-      backgroundColor: isTinted ? `var(--ds-blanket, ${N100A})` : 'transparent'
+      backgroundColor: isTinted ? "var(--ds-blanket, #091E427D)" : 'transparent'
     },
-    onClick: onBlanketClicked
+    onClick: onBlanketClicked,
+    className: ax(["_1r04idpf _v56414ka _kqsw1n9t _1pby1fw0"])
   });
 };
 export default Blanket;

package/dist/es2019/styled/dialog.compiled.css

@@ -0,0 +1,10 @@
+._12l21b66{margin-inline-end:var(--ds-space-050,4px)}
+._12l2r5cr{margin-inline-end:var(--ds-space-negative-050,-4px)}
+._1e0c1txw{display:flex}
+._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
+._2lx21sbv{flex-direction:row-reverse}
+._4t3i1wug{height:auto}
+._6rthze3t{margin-block-end:var(--ds-space-0,0)}
+._ahbq1b66{margin-inline-start:var(--ds-space-050,4px)}
+._ahbqr5cr{margin-inline-start:var(--ds-space-negative-050,-4px)}
+._p12f1osq{max-width:100%}

package/dist/es2019/styled/dialog.js

@@ -1,24 +1,16 @@
+/* dialog.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-import { css, jsx } from '@emotion/react';
-const imageStyles = css({
-  maxWidth: '100%',
-  height: 'auto'
-});
-const actionItemContainerStyles = css({
-  display: 'flex',
-  margin: `${"var(--ds-space-0, 0px)"} -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'
-});
-const actionItemStyles = css({
-  margin: `${"var(--ds-space-0, 0px)"} ${"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';
+const imageStyles = null;
+const actionItemContainerStyles = {
+  root: "_1e0c1txw _2lx21sbv _6rthze3t _1pfhze3t _12l2r5cr _ahbqr5cr"
+};
+const actionItemStyles = {
+  root: "_6rthze3t _1pfhze3t _12l21b66 _ahbq1b66"
+};
 
 /**
  * __Dialog image__
@@ -30,12 +22,11 @@ const actionItemStyles = css({
 export const DialogImage = ({
   alt,
   ...props
-}) =>
-// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-jsx("img", _extends({
-  css: imageStyles,
+}) => /*#__PURE__*/React.createElement("img", _extends({
   alt: alt
-}, props));
+}, props, {
+  className: ax(["_p12f1osq _4t3i1wug"])
+}));
 
 /**
  * __Dialog action item container__
@@ -46,8 +37,8 @@ jsx("img", _extends({
  */
 export const DialogActionItemContainer = ({
   children
-}) => jsx("div", {
-  css: actionItemContainerStyles
+}) => /*#__PURE__*/React.createElement(Box, {
+  xcss: actionItemContainerStyles.root
 }, children);
 
 /**
@@ -59,6 +50,6 @@ export const DialogActionItemContainer = ({
  */
 export const DialogActionItem = ({
   children
-}) => jsx("div", {
-  css: actionItemStyles
+}) => /*#__PURE__*/React.createElement(Box, {
+  xcss: actionItemStyles.root
 }, children);

package/dist/es2019/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/es2019/styled/modal.js

@@ -1,43 +1,18 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-import { css, jsx } from '@emotion/react';
-const modalBodyStyles = css({
-  padding: `${"var(--ds-space-500, 40px)"} ${"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';
+const 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
-const 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)"
-});
-const 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
-  }
-});
-const modalActionContainerStyles = css({
-  display: 'flex',
-  padding: `${"var(--ds-space-0, 0px)"} ${"var(--ds-space-500, 40px)"} 36px`,
-  justifyContent: 'center',
-  flexDirection: 'row',
-  flexFlow: 'wrap'
-});
-const modalActionContainerReversedStyles = css({
-  flexDirection: 'row-reverse'
-});
-const modalActionItemStyles = css({
-  margin: `${"var(--ds-space-0, 0px)"} ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-050, 4px)"}`
-});
+const modalHeadingStyles = null;
+const modalImageStyles = null;
+const modalActionContainerStyles = null;
+const modalActionContainerReversedStyles = null;
+const modalActionItemStyles = {
+  root: "_6rth1b66 _1pfhze3t _12l21b66 _ahbq1b66"
+};
 
 /**
  * __Modal body__
@@ -46,8 +21,8 @@ const modalActionItemStyles = css({
  */
 export const ModalBody = ({
   children
-}) => jsx("div", {
-  css: modalBodyStyles
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_85i51jfw _1q511jfw _y4tipxbi _bozgpxbi _y3gn1h6o"])
 }, children);
 
 /**
@@ -59,13 +34,10 @@ export const ModalHeading = ({
   children,
   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 const ModalHeading = ({
 export const ModalImage = ({
   alt,
   src
-}) => jsx("img", {
-  css: modalImageStyles,
+}) => /*#__PURE__*/React.createElement("img", {
   alt: alt,
-  src: src
+  src: src,
+  className: ax(["_1bsb1osq _4t3i1wug _5fbc1sit _1s1g1sit _j722idpf"])
 });
 
 /**
@@ -90,8 +62,8 @@ export const ModalImage = ({
 export const ModalActionContainer = ({
   children,
   shouldReverseButtonOrder
-}) => jsx("div", {
-  css: [modalActionContainerStyles, shouldReverseButtonOrder && modalActionContainerReversedStyles]
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_2lx2vrvc _1n261g80 _1e0c1txw _1bah1h6o _85i514no _1q51ze3t _y4ti1jfw _bozg1jfw", shouldReverseButtonOrder && "_2lx21sbv"])
 }, children);
 
 /**
@@ -101,6 +73,6 @@ export const ModalActionContainer = ({
  */
 export const ModalActionItem = ({
   children
-}) => jsx("div", {
-  css: modalActionItemStyles
+}) => /*#__PURE__*/React.createElement(Box, {
+  xcss: modalActionItemStyles.root
 }, children);

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

@@ -0,0 +1,9 @@
+
+._y44v1si8{animation:khs8z5x 3s cubic-bezier(.55,.055,.675,.19) infinite}._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}
+@keyframes khs8z5x{0%,33%{box-shadow:0 0 0 2px var(--ds-border-discovery,#8270db),0 0 0 var(--ds-border-discovery,#8270db)}66%,to{box-shadow:0 0 0 2px var(--ds-border-discovery,#8270db),0 0 0 10px rgba(101,84,192,.01)}}
+@media (prefers-reduced-motion:reduce){._1bumglyw{animation:none}._sedtglyw{transition:none}}