@atlaskit/onboarding 13.0.5 → 14.0.1

package/dist/cjs/styled/dialog.js

@@ -1,32 +1,28 @@
+/* dialog.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DialogImage = exports.DialogActionItemContainer = exports.DialogActionItem = void 0;
+require("./dialog.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("@emotion/react");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _excluded = ["alt"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-var imageStyles = (0, _react.css)({
-  maxWidth: '100%',
-  height: 'auto'
-});
-var actionItemContainerStyles = (0, _react.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 = (0, _react.css)({
-  margin: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)")
-});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var imageStyles = null;
+var actionItemContainerStyles = {
+  root: "_1e0c1txw _2lx21sbv _6rthze3t _1pfhze3t _12l2r5cr _ahbqr5cr"
+};
+var actionItemStyles = {
+  root: "_6rthze3t _1pfhze3t _12l21b66 _ahbq1b66"
+};
 
 /**
  * __Dialog image__
@@ -38,13 +34,11 @@ var actionItemStyles = (0, _react.css)({
 var DialogImage = exports.DialogImage = function DialogImage(_ref) {
   var alt = _ref.alt,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    (0, _react.jsx)("img", (0, _extends2.default)({
-      css: imageStyles,
-      alt: alt
-    }, props))
-  );
+  return /*#__PURE__*/React.createElement("img", (0, _extends2.default)({
+    alt: alt
+  }, props, {
+    className: (0, _runtime.ax)(["_p12f1osq _4t3i1wug"])
+  }));
 };
 
 /**
@@ -56,8 +50,8 @@ var DialogImage = exports.DialogImage = function DialogImage(_ref) {
  */
 var DialogActionItemContainer = exports.DialogActionItemContainer = function DialogActionItemContainer(_ref2) {
   var children = _ref2.children;
-  return (0, _react.jsx)("div", {
-    css: actionItemContainerStyles
+  return /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: actionItemContainerStyles.root
   }, children);
 };
 
@@ -70,7 +64,7 @@ var DialogActionItemContainer = exports.DialogActionItemContainer = function Dia
  */
 var DialogActionItem = exports.DialogActionItem = function DialogActionItem(_ref3) {
   var children = _ref3.children;
-  return (0, _react.jsx)("div", {
-    css: actionItemStyles
+  return /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: actionItemStyles.root
   }, children);
 };

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

@@ -1,49 +1,27 @@
+/* modal.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ModalImage = exports.ModalHeading = exports.ModalBody = exports.ModalActionItem = exports.ModalActionContainer = void 0;
-var _react = require("@emotion/react");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-var modalBodyStyles = (0, _react.css)({
-  padding: "var(--ds-space-500, 40px)".concat(" ", "var(--ds-space-200, 16px)"),
-  textAlign: 'center'
-});
+require("./modal.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _compiled = require("@atlaskit/primitives/compiled");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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 = (0, _react.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 = (0, _react.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 = (0, _react.css)({
-  display: 'flex',
-  padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-500, 40px)", " 36px"),
-  justifyContent: 'center',
-  flexDirection: 'row',
-  flexFlow: 'wrap'
-});
-var modalActionContainerReversedStyles = (0, _react.css)({
-  flexDirection: 'row-reverse'
-});
-var modalActionItemStyles = (0, _react.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__
@@ -52,8 +30,8 @@ var modalActionItemStyles = (0, _react.css)({
  */
 var ModalBody = exports.ModalBody = function ModalBody(_ref) {
   var children = _ref.children;
-  return (0, _react.jsx)("div", {
-    css: modalBodyStyles
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_85i51jfw _1q511jfw _y4tipxbi _bozgpxbi _y3gn1h6o"])
   }, children);
 };
 
@@ -65,13 +43,10 @@ var ModalBody = exports.ModalBody = function ModalBody(_ref) {
 var ModalHeading = exports.ModalHeading = function ModalHeading(_ref2) {
   var children = _ref2.children,
     id = _ref2.id;
-  return (
-    // eslint-disable-next-line @atlaskit/design-system/use-heading
-    (0, _react.jsx)("h1", {
-      css: modalHeadingStyles,
-      id: id
-    }, children)
-  );
+  return /*#__PURE__*/React.createElement("h1", {
+    id: id,
+    className: (0, _runtime.ax)(["_11c8lodh _syaz1kw7 _6rthu2gc"])
+  }, children);
 };
 
 /**
@@ -82,10 +57,10 @@ var ModalHeading = exports.ModalHeading = function ModalHeading(_ref2) {
 var ModalImage = exports.ModalImage = function ModalImage(_ref3) {
   var alt = _ref3.alt,
     src = _ref3.src;
-  return (0, _react.jsx)("img", {
-    css: modalImageStyles,
+  return /*#__PURE__*/React.createElement("img", {
     alt: alt,
-    src: src
+    src: src,
+    className: (0, _runtime.ax)(["_1bsb1osq _4t3i1wug _5fbc1sit _1s1g1sit _j722idpf"])
   });
 };
 
@@ -97,8 +72,8 @@ var ModalImage = exports.ModalImage = function ModalImage(_ref3) {
 var ModalActionContainer = exports.ModalActionContainer = function ModalActionContainer(_ref4) {
   var children = _ref4.children,
     shouldReverseButtonOrder = _ref4.shouldReverseButtonOrder;
-  return (0, _react.jsx)("div", {
-    css: [modalActionContainerStyles, shouldReverseButtonOrder && modalActionContainerReversedStyles]
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_2lx2vrvc _1n261g80 _1e0c1txw _1bah1h6o _85i514no _1q51ze3t _y4ti1jfw _bozg1jfw", shouldReverseButtonOrder && "_2lx21sbv"])
   }, children);
 };
 
@@ -109,7 +84,7 @@ var ModalActionContainer = exports.ModalActionContainer = function ModalActionCo
  */
 var ModalActionItem = exports.ModalActionItem = function ModalActionItem(_ref5) {
   var children = _ref5.children;
-  return (0, _react.jsx)("div", {
-    css: modalActionItemStyles
+  return /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: modalActionItemStyles.root
   }, children);
 };

package/dist/cjs/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/cjs/styled/target.js

@@ -1,47 +1,33 @@
+/* target.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.pulseKeyframesName = exports.TargetOverlay = exports.TargetInner = exports.Pulse = void 0;
+exports.TargetOverlay = exports.TargetInner = exports.Pulse = void 0;
+require("./target.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("@emotion/react");
-var _motion = require("@atlaskit/motion");
-var _colors = require("@atlaskit/theme/colors");
 var _excluded = ["bgColor", "children", "className", "radius", "testId", "style"],
   _excluded2 = ["bgColor", "children", "className", "pulse", "radius", "testId"],
   _excluded3 = ["onClick"],
   _excluded4 = ["bgColor", "children", "className", "radius", "pulse", "testId"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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) { (0, _defineProperty2.default)(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; }
+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(_colors.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 = (0, _react.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
-var pulseKeyframesName = exports.pulseKeyframesName = pulseKeyframes.name;
-var animationStyles = (0, _react.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,
@@ -50,7 +36,7 @@ var Base = function Base(_ref) {
     testId = _ref.testId,
     style = _ref.style,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _react.jsx)("div", (0, _extends2.default)({
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     className: className,
     "data-testid": testId,
@@ -77,26 +63,21 @@ var TargetInner = exports.TargetInner = function TargetInner(_ref2) {
     radius = _ref2.radius,
     testId = _ref2.testId,
     props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
-  return (0, _react.jsx)(Base, (0, _extends2.default)({
+  return /*#__PURE__*/React.createElement(Base, (0, _extends2.default)({
     bgColor: bgColor
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: className,
+    className: (0, _runtime.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, _motion.reduceMotionAsPerUserPreference]
+    style: _objectSpread(_objectSpread({}, props.style), {}, {
+      "--_mb5lf8": (0, _runtime.ix)("".concat(pulseKeyframes, " 3000ms ").concat(easing, " infinite"))
+    })
   }), children);
 };
-var targetOverlayStyles = (0, _react.css)({
-  width: '100%',
-  height: '100%',
-  position: 'absolute',
-  insetBlockStart: "var(--ds-space-0, 0)",
-  insetInlineStart: "var(--ds-space-0, 0)"
-});
+var targetOverlayStyles = null;
 
 /**
  * __Target overlay__
@@ -109,20 +90,16 @@ var targetOverlayStyles = (0, _react.css)({
 var TargetOverlay = exports.TargetOverlay = function TargetOverlay(_ref3) {
   var onClick = _ref3.onClick,
     props = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
-  return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    (0, _react.jsx)("div", (0, _extends2.default)({
-      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", (0, _extends2.default)({
+    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: (0, _runtime.ax)(["_1bsb1osq _4t3i1osq _kqswstnw _152tze3t _1e02ze3t"])
+  }));
 };
 
 /**
@@ -143,17 +120,17 @@ var Pulse = exports.Pulse = function Pulse(_ref4) {
     pulse = _ref4$pulse === void 0 ? true : _ref4$pulse,
     testId = _ref4.testId,
     props = (0, _objectWithoutProperties2.default)(_ref4, _excluded4);
-  return (0, _react.jsx)(Base, (0, _extends2.default)({
+  return /*#__PURE__*/React.createElement(Base, (0, _extends2.default)({
     bgColor: bgColor
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: className,
+    className: (0, _runtime.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
-    _motion.reduceMotionAsPerUserPreference]
+    style: _objectSpread(_objectSpread({}, props.style), {}, {
+      "--_mb5lf8": (0, _runtime.ix)("".concat(pulseKeyframes, " 3000ms ").concat(easing, " infinite"))
+    })
   }), children);
 };

package/dist/es2019/components/modal.js

@@ -1,11 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { Component } from 'react';
-import { jsx } from '@emotion/react';
+import React, { Component } from 'react';
 import Button, { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
 import Modal, { ModalBody, useModal } from '@atlaskit/modal-dialog';
 import { ModalBody as Body, ModalHeading as Heading, ModalActionContainer, ModalActionItem, ModalImage } from '../styled/modal';
@@ -31,7 +26,7 @@ export default class BenefitsModal extends Component {
         header: HeaderElement,
         image: src
       } = props;
-      const ImageElement = () => jsx(ModalImage, {
+      const ImageElement = () => /*#__PURE__*/React.createElement(ModalImage, {
         src: src,
         alt: ""
       });
@@ -43,9 +38,9 @@ export default class BenefitsModal extends Component {
         actions: actionList,
         experimental_shouldShowPrimaryButtonOnRight = false
       } = props;
-      const ActionsElement = () => actionList ? jsx(ButtonTheme.Provider, {
+      const ActionsElement = () => actionList ? /*#__PURE__*/React.createElement(ButtonTheme.Provider, {
         value: modalButtonTheme
-      }, jsx(ModalActionContainer, {
+      }, /*#__PURE__*/React.createElement(ModalActionContainer, {
         shouldReverseButtonOrder: experimental_shouldShowPrimaryButtonOnRight
       }, actionList.map(({
         text,
@@ -53,9 +48,9 @@ export default class BenefitsModal extends Component {
         ...rest
       }, idx) => {
         const variant = idx ? 'subtle-link' : 'primary';
-        return jsx(ModalActionItem, {
+        return /*#__PURE__*/React.createElement(ModalActionItem, {
           key: key || (typeof text === 'string' ? text : `${idx}`)
-        }, jsx(Button, _extends({
+        }, /*#__PURE__*/React.createElement(Button, _extends({
           appearance: variant,
           autoFocus: !idx
         }, rest), text));
@@ -82,11 +77,11 @@ export default class BenefitsModal extends Component {
       const {
         titleId
       } = useModal();
-      return jsx(Heading, {
+      return /*#__PURE__*/React.createElement(Heading, {
         id: titleId
       }, heading);
     };
-    return jsx(Modal, _extends({
+    return /*#__PURE__*/React.createElement(Modal, _extends({
       autoFocus: true,
       shouldCloseOnEscapePress: false,
       shouldCloseOnOverlayClick: false,
@@ -99,6 +94,6 @@ export default class BenefitsModal extends Component {
       header: header,
       heading: heading,
       image: image
-    }, rest), jsx(Header, null), jsx(ModalBody, null, jsx(Body, null, heading && jsx(CustomHeader, null), children)), jsx(Footer, null));
+    }, rest), /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Body, null, heading && /*#__PURE__*/React.createElement(CustomHeader, null), children)), /*#__PURE__*/React.createElement(Footer, null));
   }
 }

package/dist/es2019/components/node-resolver-spotlight-target.compiled.css

@@ -0,0 +1 @@
+._1e0c1bgi{display:contents}

package/dist/es2019/components/node-resolver-spotlight-target.js

@@ -1,13 +1,10 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* node-resolver-spotlight-target.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./node-resolver-spotlight-target.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { useEffect, useRef } from 'react';
-import { css, jsx } from '@emotion/react';
 import NodeResolver from 'react-node-resolver';
-const spanStyles = css({
-  display: 'contents'
-});
+const spanStyles = null;
 /**
  * A wrapper component that conditionally applies a NodeResolver to its children.
  *
@@ -37,13 +34,13 @@ const NodeResolverSpotlightTarget = ({
     };
   }, [hasNodeResolver, name, getTargetRef]);
   if (hasNodeResolver) {
-    return jsx(NodeResolver, {
+    return /*#__PURE__*/React.createElement(NodeResolver, {
       innerRef: getTargetRef(name)
     }, children);
   }
-  return jsx("span", {
+  return /*#__PURE__*/React.createElement("span", {
     ref: divRef,
-    css: spanStyles
+    className: ax(["_1e0c1bgi"])
   }, children);
 };
 export default NodeResolverSpotlightTarget;

package/dist/es2019/components/spotlight-card.compiled.css

@@ -0,0 +1,20 @@
+
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}._16qszucj{box-shadow:var(--ds-shadow-raised,0 1px 1px #091e4240,0 0 1px #091e424f)}
+._18m91wug{overflow-y:auto}
+._1bah1yb4{justify-content:space-between}
+._1e0c1txw{display:flex}
+._1e0c1ule{display:block}
+._1q51pxbi{padding-block-start:var(--ds-space-200,1pc)}
+._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
+._1reo1wug{overflow-x:auto}
+._1ul91lit{min-width:10pc}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4cvr1q9y{align-items:baseline}
+._4t3i1ns9{height:-moz-fit-content;height:fit-content}
+._85i5pxbi{padding-block-end:var(--ds-space-200,1pc)}
+._85i5u2gc{padding-block-end:var(--ds-space-100,8px)}
+._bozgv47k{padding-inline-start:var(--ds-space-250,20px)}
+._p12f1ogm{max-width:600px}
+._syaz15cr{color:var(--ds-text-inverse,#fff)}
+._y4tiv47k{padding-inline-end:var(--ds-space-250,20px)}