@atlaskit/onboarding 13.0.4 → 14.0.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/onboarding
 
+## 14.0.0
+
+### Major Changes
+
+- [#132237](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/132237)
+  [`d48bdcf1a3dca`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d48bdcf1a3dca) -
+  Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
+  the rest of the Atlaskit techstack, and support React 18 Streaming SSR. Please note, in order to
+  use this version of `@atlaskit/onboarding`, you will need to ensure that your bundler is
+  configured to handle `.css` imports correctly.
+
+  Most bundlers come with built-in support for `.css` imports, so you may not need to do anything.
+  If you are using a different bundler, please refer to the documentation for that bundler to
+  understand how to handle `.css` imports. For more information on the migration, please refer to
+  [RFC-73 Migrating our components to Compiled CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
+
+### Patch Changes
+
+- Updated dependencies
+
+## 13.0.5
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 13.0.4
 
 ### Patch Changes

package/dist/cjs/components/modal.js

@@ -14,8 +14,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
+var _react = _interopRequireWildcard(require("react"));
 var _customThemeButton = _interopRequireWildcard(require("@atlaskit/button/custom-theme-button"));
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
 var _modal = require("../styled/modal");
@@ -25,10 +24,7 @@ var _excluded = ["text", "key"],
 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 _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
- * @jsxRuntime classic
- * @jsx jsx
- */
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 // TODO: DSP-1250 - use a composable API consistent with normal modal dialog
 /**
  * __Benefits modal__
@@ -52,7 +48,7 @@ var BenefitsModal = exports.default = /*#__PURE__*/function (_Component) {
       var HeaderElement = props.header,
         src = props.image;
       var ImageElement = function ImageElement() {
-        return (0, _react2.jsx)(_modal.ModalImage, {
+        return /*#__PURE__*/_react.default.createElement(_modal.ModalImage, {
           src: src,
           alt: ""
         });
@@ -65,18 +61,18 @@ var BenefitsModal = exports.default = /*#__PURE__*/function (_Component) {
         _props$experimental_s = props.experimental_shouldShowPrimaryButtonOnRight,
         experimental_shouldShowPrimaryButtonOnRight = _props$experimental_s === void 0 ? false : _props$experimental_s;
       var ActionsElement = function ActionsElement() {
-        return actionList ? (0, _react2.jsx)(_customThemeButton.Theme.Provider, {
+        return actionList ? /*#__PURE__*/_react.default.createElement(_customThemeButton.Theme.Provider, {
           value: _theme.modalButtonTheme
-        }, (0, _react2.jsx)(_modal.ModalActionContainer, {
+        }, /*#__PURE__*/_react.default.createElement(_modal.ModalActionContainer, {
           shouldReverseButtonOrder: experimental_shouldShowPrimaryButtonOnRight
         }, actionList.map(function (_ref, idx) {
           var text = _ref.text,
             key = _ref.key,
             rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
           var variant = idx ? 'subtle-link' : 'primary';
-          return (0, _react2.jsx)(_modal.ModalActionItem, {
+          return /*#__PURE__*/_react.default.createElement(_modal.ModalActionItem, {
             key: key || (typeof text === 'string' ? text : "".concat(idx))
-          }, (0, _react2.jsx)(_customThemeButton.default, (0, _extends2.default)({
+          }, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, (0, _extends2.default)({
             appearance: variant,
             autoFocus: !idx
           }, rest), text));
@@ -104,11 +100,11 @@ var BenefitsModal = exports.default = /*#__PURE__*/function (_Component) {
       var CustomHeader = function CustomHeader() {
         var _useModal = (0, _modalDialog.useModal)(),
           titleId = _useModal.titleId;
-        return (0, _react2.jsx)(_modal.ModalHeading, {
+        return /*#__PURE__*/_react.default.createElement(_modal.ModalHeading, {
           id: titleId
         }, heading);
       };
-      return (0, _react2.jsx)(_modalDialog.default, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(_modalDialog.default, (0, _extends2.default)({
         autoFocus: true,
         shouldCloseOnEscapePress: false,
         shouldCloseOnOverlayClick: false,
@@ -121,7 +117,7 @@ var BenefitsModal = exports.default = /*#__PURE__*/function (_Component) {
         header: header,
         heading: heading,
         image: image
-      }, rest), (0, _react2.jsx)(Header, null), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)(_modal.ModalBody, null, heading && (0, _react2.jsx)(CustomHeader, null), children)), (0, _react2.jsx)(Footer, null));
+      }, rest), /*#__PURE__*/_react.default.createElement(Header, null), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement(_modal.ModalBody, null, heading && /*#__PURE__*/_react.default.createElement(CustomHeader, null), children)), /*#__PURE__*/_react.default.createElement(Footer, null));
     }
   }]);
 }(_react.Component);

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

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

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

@@ -1,21 +1,20 @@
+/* node-resolver-spotlight-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.default = void 0;
-var _react = require("react");
-var _react2 = require("@emotion/react");
+require("./node-resolver-spotlight-target.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _reactNodeResolver = _interopRequireDefault(require("react-node-resolver"));
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-var spanStyles = (0, _react2.css)({
-  display: 'contents'
-});
+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 spanStyles = null;
 /**
  * A wrapper component that conditionally applies a NodeResolver to its children.
  *
@@ -44,13 +43,13 @@ var NodeResolverSpotlightTarget = function NodeResolverSpotlightTarget(_ref) {
     };
   }, [hasNodeResolver, name, getTargetRef]);
   if (hasNodeResolver) {
-    return (0, _react2.jsx)(_reactNodeResolver.default, {
+    return /*#__PURE__*/React.createElement(_reactNodeResolver.default, {
       innerRef: getTargetRef(name)
     }, children);
   }
-  return (0, _react2.jsx)("span", {
+  return /*#__PURE__*/React.createElement("span", {
     ref: divRef,
-    css: spanStyles
+    className: (0, _runtime.ax)(["_1e0c1bgi"])
   }, children);
 };
 var _default = exports.default = NodeResolverSpotlightTarget;

package/dist/cjs/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)}

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

@@ -1,3 +1,4 @@
+/* spotlight-card.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,66 +7,44 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./spotlight-card.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
 var _customThemeButton = _interopRequireWildcard(require("@atlaskit/button/custom-theme-button"));
+var _css = require("@atlaskit/css");
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _layering = require("@atlaskit/layering");
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _dialog = require("../styled/dialog");
 var _theme = require("./theme");
 var _excluded = ["text", "key"];
-/**
- * @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; }
-var bodyStyles = (0, _react2.css)({
-  display: 'flex',
-  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',
-  alignItems: 'baseline',
-  justifyContent: 'space-between',
-  paddingBlockEnd: "var(--ds-space-100, 8px)"
-});
+var bodyStyles = null;
+var imageStyles = null;
+var defaultHeaderStyles = null;
 var DefaultHeader = function DefaultHeader(_ref) {
   var children = _ref.children;
-  return (0, _react2.jsx)("div", {
-    css: defaultHeaderStyles
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1e0c1txw _4cvr1q9y _1bah1yb4 _85i5u2gc"])
   }, children);
 };
-var defaultFooterStyles = (0, _react2.css)({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  paddingBlockStart: "var(--ds-space-100, 8px)"
-});
+var defaultFooterStyles = null;
 var DefaultFooter = function DefaultFooter(_ref2) {
   var children = _ref2.children;
-  return (0, _react2.jsx)("div", {
-    css: defaultFooterStyles
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "spotlight--dialog-footer",
+    className: (0, _runtime.ax)(["_1e0c1txw _4cvr1h6o _1bah1yb4 _1q51u2gc"])
   }, children);
 };
-var containerStyles = (0, _primitives.xcss)({
-  height: 'fit-content',
-  zIndex: 'spotlight',
-  borderRadius: 'border.radius',
-  color: 'color.text.inverse',
-  overflow: 'auto',
-  minWidth: '160px',
-  maxWidth: '600px'
-});
-var containerShadowStyles = (0, _primitives.xcss)({
-  boxShadow: 'elevation.shadow.raised'
-});
+var containerStyles = {
+  root: "_2rkoglpi _1reo1wug _18m91wug _4t3i1ns9 _syaz15cr _1ul91lit _p12f1ogm"
+};
+var containerShadowStyles = {
+  root: "_16qszucj"
+};
 /**
  * __Spotlight card__
  *
@@ -99,11 +78,11 @@ var SpotlightCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     Footer = _components$Footer === void 0 ? DefaultFooter : _components$Footer;
   var _useLayering = (0, _layering.useLayering)(),
     currentLevel = _useLayering.currentLevel;
-  return (0, _react2.jsx)(_customThemeButton.Theme.Provider, {
+  return /*#__PURE__*/React.createElement(_customThemeButton.Theme.Provider, {
     value: _theme.spotlightButtonTheme
-  }, (0, _react2.jsx)(_primitives.Box, {
+  }, /*#__PURE__*/React.createElement(_compiled.Box, {
     backgroundColor: "color.background.discovery.bold",
-    xcss: [containerStyles, !isFlat && containerShadowStyles],
+    xcss: (0, _css.cx)(containerStyles.root, !isFlat && containerShadowStyles.root),
     style: {
       width: width
     },
@@ -113,24 +92,24 @@ var SpotlightCard = /*#__PURE__*/(0, _react.forwardRef)(function (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' ? (0, _react2.jsx)("img", {
-    css: imageStyles,
+  }, typeof image === 'string' ? /*#__PURE__*/React.createElement("img", {
     src: image,
-    alt: ""
-  }) : image, (0, _react2.jsx)("div", {
-    css: bodyStyles
-  }, heading || headingAfterElement ? (0, _react2.jsx)(Header, null, (0, _react2.jsx)(_heading.default, {
+    alt: "",
+    className: (0, _runtime.ax)(["_1e0c1ule"])
+  }) : image, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1e0c1txw _2lx21bp4 _85i5pxbi _1q51pxbi _y4tiv47k _bozgv47k"])
+  }, heading || headingAfterElement ? /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(_heading.default, {
     id: headingId,
     size: "medium",
     as: "h".concat(headingLevel),
     color: "color.text.inverse"
-  }, heading), headingAfterElement) : null, (0, _react2.jsx)(_primitives.Text, null, children), actions.length > 0 || actionsBeforeElement ? (0, _react2.jsx)(Footer, null, actionsBeforeElement || (0, _react2.jsx)("span", null), (0, _react2.jsx)(_dialog.DialogActionItemContainer, null, actions.map(function (_ref3, idx) {
+  }, heading), headingAfterElement) : null, /*#__PURE__*/React.createElement(_compiled.Text, null, children), actions.length > 0 || actionsBeforeElement ? /*#__PURE__*/React.createElement(Footer, null, actionsBeforeElement || /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement(_dialog.DialogActionItemContainer, null, actions.map(function (_ref3, idx) {
     var text = _ref3.text,
       key = _ref3.key,
       rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
-    return (0, _react2.jsx)(_dialog.DialogActionItem, {
+    return /*#__PURE__*/React.createElement(_dialog.DialogActionItem, {
       key: key || (typeof text === 'string' ? text : "".concat(idx))
-    }, (0, _react2.jsx)(_customThemeButton.default, rest, text));
+    }, /*#__PURE__*/React.createElement(_customThemeButton.default, rest, text));
   }))) : null)));
 });
 SpotlightCard.displayName = 'SpotlightCard';

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

@@ -15,7 +15,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
 var _popper = require("@atlaskit/popper");
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _dialog = require("../styled/dialog");
 var _spotlightCard = _interopRequireDefault(require("./spotlight-card"));
 var _valueChanged = _interopRequireDefault(require("./value-changed"));
@@ -131,7 +131,7 @@ var SpotlightDialogComponent = /*#__PURE__*/function (_Component) {
           disabled: focusLockDisabled,
           returnFocus: false,
           autoFocus: true
-        }, /*#__PURE__*/_react.default.createElement(_primitives.Box
+        }, /*#__PURE__*/_react.default.createElement(_compiled.Box
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         , {
           style: _objectSpread(_objectSpread({}, style), animationStyles),

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

@@ -20,7 +20,6 @@ var _scrollIntoViewIfNeeded = _interopRequireDefault(require("scroll-into-view-i
 var _layering = require("@atlaskit/layering");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
-var _constants = require("@atlaskit/theme/constants");
 var _useElementBox = require("../utils/use-element-box");
 var _animation = require("./animation");
 var _clone = _interopRequireDefault(require("./clone"));
@@ -119,7 +118,7 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
         var isOpen = _ref.isOpen,
           onExited = _ref.onExited;
         return /*#__PURE__*/_react.default.createElement(_portal.default, {
-          zIndex: _constants.layers.spotlight() + 1
+          zIndex: 701
         }, TargetReplacement ? /*#__PURE__*/_react.default.createElement(_nodeResolverSpotlightInner.default, {
           hasNodeResolver: !(0, _platformFeatureFlags.fg)('platform_design_system_team_onboarding_noderesolve'),
           innerRef: function innerRef(elem) {

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

@@ -16,7 +16,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
-var _constants = require("@atlaskit/theme/constants");
 var _blanket = _interopRequireDefault(require("../styled/blanket"));
 var _animation = require("./animation");
 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); }
@@ -124,7 +123,7 @@ var SpotlightManager = exports.default = /*#__PURE__*/function (_PureComponent)
         hasEntered: this.state.spotlightCount > 0
       }, function (animationStyles) {
         return /*#__PURE__*/_react.default.createElement(_portal.default, {
-          zIndex: _constants.layers.spotlight()
+          zIndex: 700
         }, /*#__PURE__*/_react.default.createElement(_blanket.default
         /* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */, {
           style: animationStyles,

package/dist/cjs/components/theme.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,97 +8,94 @@ exports.spotlightButtonTheme = exports.modalButtonTheme = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var _excluded = ["buttonStyles"],
   _excluded2 = ["buttonStyles"];
-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" != _typeof3(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 spotlightTheme = {
   default: {
     background: {
-      default: "var(--ds-background-inverse-subtle, ".concat(colors.P500, ")"),
-      hover: "var(--ds-background-inverse-subtle-hovered, ".concat(colors.P200, ")"),
-      active: "var(--ds-background-inverse-subtle-pressed, ".concat(colors.P500, ")"),
-      disabled: "var(--ds-background-disabled, ".concat(colors.P400, ")"),
-      selected: "var(--ds-background-inverse-subtle-pressed, ".concat(colors.R500, ")"),
-      focus: "var(--ds-background-inverse-subtle, ".concat(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, ".concat(colors.N0, ")"),
-      hover: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
-      active: "var(--ds-text-inverse, ".concat(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, ".concat(colors.N0, ")"),
-        dark: "var(--ds-text-disabled, ".concat(colors.DN30, ")")
+        light: "var(--ds-text-disabled, #091E424F)",
+        dark: "var(--ds-text-disabled, #091E424F)"
       },
-      selected: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
-      focus: "var(--ds-text-inverse, ".concat(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, ".concat(colors.P200, ")"),
-      active: "var(--ds-background-inverse-subtle-pressed, ".concat(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, ".concat(colors.N700, ")"),
-        dark: "var(--ds-background-selected-hovered, ".concat(colors.DN0, ")")
+        light: "var(--ds-background-selected-hovered, #CCE0FF)",
+        dark: "var(--ds-background-selected-hovered, #CCE0FF)"
       },
       focusSelected: {
-        light: "var(--ds-background-selected-hovered, ".concat(colors.N700, ")"),
-        dark: "var(--ds-background-selected-hovered, ".concat(colors.DN0, ")")
+        light: "var(--ds-background-selected-hovered, #CCE0FF)",
+        dark: "var(--ds-background-selected-hovered, #CCE0FF)"
       }
     },
     color: {
-      default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
-      hover: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
-      active: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
-      disabled: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
-      selected: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
-      focus: "var(--ds-text-inverse, ".concat(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 ".concat("var(--ds-text-inverse, ".concat(colors.P75, ")"))
+      hover: "underline ".concat("var(--ds-text-inverse, #FFFFFF)")
     },
     textDecorationLine: {
       active: 'none'
     },
     color: {
-      default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
-      hover: "var(--ds-text-inverse, ".concat(colors.P75, ")"),
-      active: "var(--ds-text-inverse, ".concat(colors.P100, ")"),
-      disabled: "var(--ds-text-discovery, ".concat(colors.P500, ")"),
-      selected: "var(--ds-text-selected, ".concat(colors.N0, ")"),
-      focus: "var(--ds-text-inverse, ".concat(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)"
     }
   }
 };
 var modalTheme = {
   primary: {
     background: {
-      default: "var(--ds-background-discovery-bold, ".concat(colors.P400, ")"),
-      hover: "var(--ds-background-discovery-bold-hovered, ".concat(colors.P200, ")"),
-      active: "var(--ds-background-discovery-bold-pressed, ".concat(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, ".concat(colors.N30, ")"),
-        dark: "var(--ds-background-disabled, ".concat(colors.DN70, ")")
+        light: "var(--ds-background-disabled, #091E4208)",
+        dark: "var(--ds-background-disabled, #091E4208)"
       },
-      selected: "var(--ds-background-selected-hovered, ".concat(colors.R500, ")"),
-      focus: "var(--ds-background-discovery-bold-hovered, ".concat(colors.P400, ")")
+      selected: "var(--ds-background-selected-hovered, #CCE0FF)",
+      focus: "var(--ds-background-discovery-bold-hovered, #5E4DB2)"
     },
     color: {
-      default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
+      default: "var(--ds-text-inverse, #FFFFFF)",
       disabled: {
-        light: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
-        dark: "var(--ds-text-disabled, ".concat(colors.DN30, ")")
+        light: "var(--ds-text-disabled, #091E424F)",
+        dark: "var(--ds-text-disabled, #091E424F)"
       },
-      selected: "var(--ds-text-selected, ".concat(colors.N0, ")"),
-      focus: "var(--ds-text-inverse, ".concat(colors.N0, ")")
+      selected: "var(--ds-text-selected, #0C66E4)",
+      focus: "var(--ds-text-inverse, #FFFFFF)"
     }
   }
 };

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

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

package/dist/cjs/styled/blanket.js

@@ -1,27 +1,23 @@
+/* blanket.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.default = void 0;
+require("./blanket.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
+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; } /**
- * @jsxRuntime classic
- * @jsx jsx
- */
+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; }
 // IE11 and Edge: z-index needed because fixed position calculates z-index relative
 // to body instead of nearest stacking context (Portal in our case).
-var blanketStyles = (0, _react.css)({
-  position: 'fixed',
-  zIndex: _constants.layers.spotlight(),
-  inset: 0,
-  transition: 'opacity 220ms'
-});
+var blanketStyles = null;
 /**
  * __Blanket__
  *
@@ -37,13 +33,13 @@ var Blanket = function Blanket(_ref) {
   var isTinted = _ref.isTinted,
     onBlanketClicked = _ref.onBlanketClicked,
     style = _ref.style;
-  return (0, _react.jsx)("div", {
+  return /*#__PURE__*/React.createElement("div", {
     role: "presentation",
-    css: blanketStyles,
     style: _objectSpread(_objectSpread({}, style), {}, {
-      backgroundColor: isTinted ? "var(--ds-blanket, ".concat(_colors.N100A, ")") : 'transparent'
+      backgroundColor: isTinted ? "var(--ds-blanket, #091E427D)" : 'transparent'
     }),
-    onClick: onBlanketClicked
+    onClick: onBlanketClicked,
+    className: (0, _runtime.ax)(["_1r04idpf _v56414ka _kqsw1n9t _1pby1fw0"])
   });
 };
 var _default = exports.default = Blanket;

package/dist/cjs/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%}