@atlaskit/onboarding 13.0.5 → 14.0.0

package/dist/es2019/styled/target.js

@@ -1,33 +1,15 @@
+/* target.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-import { css, jsx, keyframes } from '@emotion/react';
-import { reduceMotionAsPerUserPreference } from '@atlaskit/motion';
-import { P300 } from '@atlaskit/theme/colors';
+import "./target.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const reduceMotionAsPerUserPreference = null;
 // NOTE:
 // Pulse color "rgb(101, 84, 192)" derived from "colors.P300"
-const baseShadow = `0 0 0 2px ${`var(--ds-border-discovery, ${P300})`}`;
+const baseShadow = `0 0 0 2px ${"var(--ds-border-discovery, #8270DB)"}`;
 const easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
-const pulseKeyframes = keyframes({
-  '0%, 33%': {
-    boxShadow: `${baseShadow}, 0 0 0 ${"var(--ds-border-discovery, rgba(101, 84, 192, 1))"}`
-  },
-  '66%, 100%': {
-    boxShadow: `${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 const pulseKeyframesName = pulseKeyframes.name;
-const animationStyles = css({
-  animation: `${pulseKeyframes} 3000ms ${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
-});
+const pulseKeyframes = null;
+const animationStyles = null;
 const Base = ({
   bgColor,
   children,
@@ -37,7 +19,7 @@ const Base = ({
   style,
   // The rest of these props are from `HTMLDivElement`
   ...props
-}) => jsx("div", _extends({
+}) => /*#__PURE__*/React.createElement("div", _extends({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
   className: className,
   "data-testid": testId,
@@ -66,25 +48,19 @@ export const TargetInner = ({
   testId,
   // Thes rest of these are from `HTMLDivElement`
   ...props
-}) => jsx(Base, _extends({
+}) => /*#__PURE__*/React.createElement(Base, _extends({
   bgColor: bgColor
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
   ,
-  className: className,
+  className: ax([pulse && "", pulse && "_y44v1si8 _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]
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+  style: props.style
 }), children);
-const targetOverlayStyles = css({
-  width: '100%',
-  height: '100%',
-  position: 'absolute',
-  insetBlockStart: "var(--ds-space-0, 0)",
-  insetInlineStart: "var(--ds-space-0, 0)"
-});
+const targetOverlayStyles = null;
 
 /**
  * __Target overlay__
@@ -97,18 +73,15 @@ const targetOverlayStyles = css({
 export const TargetOverlay = ({
   onClick,
   ...props
-}) =>
-// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-jsx("div", _extends({
+}) => /*#__PURE__*/React.createElement("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'
-  }
+  },
+  className: ax(["_1bsb1osq _4t3i1osq _kqswstnw _152tze3t _1e02ze3t"])
 }));
 
 /**
@@ -128,16 +101,15 @@ export const Pulse = ({
   pulse = true,
   testId,
   ...props
-}) => jsx(Base, _extends({
+}) => /*#__PURE__*/React.createElement(Base, _extends({
   bgColor: bgColor
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
   ,
-  className: className,
+  className: ax([pulse && "", pulse && "_y44v1si8 _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]
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+  style: props.style
 }), children);

package/dist/esm/components/modal.js

@@ -10,12 +10,7 @@ var _excluded = ["text", "key"],
   _excluded2 = ["actions", "children", "heading", "experimental_shouldShowPrimaryButtonOnRight", "footer", "header", "image"];
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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
- */
-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';
@@ -44,7 +39,7 @@ var BenefitsModal = /*#__PURE__*/function (_Component) {
       var HeaderElement = props.header,
         src = props.image;
       var ImageElement = function ImageElement() {
-        return jsx(ModalImage, {
+        return /*#__PURE__*/React.createElement(ModalImage, {
           src: src,
           alt: ""
         });
@@ -57,18 +52,18 @@ var BenefitsModal = /*#__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 ? jsx(ButtonTheme.Provider, {
+        return actionList ? /*#__PURE__*/React.createElement(ButtonTheme.Provider, {
           value: modalButtonTheme
-        }, jsx(ModalActionContainer, {
+        }, /*#__PURE__*/React.createElement(ModalActionContainer, {
           shouldReverseButtonOrder: experimental_shouldShowPrimaryButtonOnRight
         }, actionList.map(function (_ref, idx) {
           var text = _ref.text,
             key = _ref.key,
             rest = _objectWithoutProperties(_ref, _excluded);
           var variant = idx ? 'subtle-link' : 'primary';
-          return jsx(ModalActionItem, {
+          return /*#__PURE__*/React.createElement(ModalActionItem, {
             key: key || (typeof text === 'string' ? text : "".concat(idx))
-          }, jsx(Button, _extends({
+          }, /*#__PURE__*/React.createElement(Button, _extends({
             appearance: variant,
             autoFocus: !idx
           }, rest), text));
@@ -96,11 +91,11 @@ var BenefitsModal = /*#__PURE__*/function (_Component) {
       var CustomHeader = function CustomHeader() {
         var _useModal = useModal(),
           titleId = _useModal.titleId;
-        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,
@@ -113,7 +108,7 @@ var BenefitsModal = /*#__PURE__*/function (_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));
     }
   }]);
 }(Component);

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

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

package/dist/esm/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';
-var spanStyles = css({
-  display: 'contents'
-});
+var spanStyles = null;
 /**
  * A wrapper component that conditionally applies a NodeResolver to its children.
  *
@@ -36,13 +33,13 @@ var NodeResolverSpotlightTarget = function NodeResolverSpotlightTarget(_ref) {
     };
   }, [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/esm/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/esm/components/spotlight-card.js

@@ -1,61 +1,40 @@
+/* spotlight-card.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["text", "key"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+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';
-var bodyStyles = css({
-  display: 'flex',
-  padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-250, 20px)"),
-  flexDirection: 'column'
-});
-var imageStyles = css({
-  display: 'block'
-});
-var defaultHeaderStyles = 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 jsx("div", {
-    css: defaultHeaderStyles
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1e0c1txw _4cvr1q9y _1bah1yb4 _85i5u2gc"])
   }, children);
 };
-var defaultFooterStyles = 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 jsx("div", {
-    css: defaultFooterStyles
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "spotlight--dialog-footer",
+    className: ax(["_1e0c1txw _4cvr1h6o _1bah1yb4 _1q51u2gc"])
   }, children);
 };
-var containerStyles = xcss({
-  height: 'fit-content',
-  zIndex: 'spotlight',
-  borderRadius: 'border.radius',
-  color: 'color.text.inverse',
-  overflow: 'auto',
-  minWidth: '160px',
-  maxWidth: '600px'
-});
-var containerShadowStyles = xcss({
-  boxShadow: 'elevation.shadow.raised'
-});
+var containerStyles = {
+  root: "_2rkoglpi _1reo1wug _18m91wug _4t3i1ns9 _syaz15cr _1ul91lit _p12f1ogm"
+};
+var containerShadowStyles = {
+  root: "_16qszucj"
+};
 /**
  * __Spotlight card__
  *
@@ -89,11 +68,11 @@ var SpotlightCard = /*#__PURE__*/forwardRef(function (props, ref) {
     Footer = _components$Footer === void 0 ? DefaultFooter : _components$Footer;
   var _useLayering = useLayering(),
     currentLevel = _useLayering.currentLevel;
-  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: width
     },
@@ -103,24 +82,24 @@ var SpotlightCard = /*#__PURE__*/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' ? 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".concat(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(function (_ref3, idx) {
+  }, 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(function (_ref3, idx) {
     var text = _ref3.text,
       key = _ref3.key,
       rest = _objectWithoutProperties(_ref3, _excluded);
-    return jsx(DialogActionItem, {
+    return /*#__PURE__*/React.createElement(DialogActionItem, {
       key: key || (typeof text === 'string' ? text : "".concat(idx))
-    }, jsx(Button, rest, text));
+    }, /*#__PURE__*/React.createElement(Button, rest, text));
   }))) : null)));
 });
 SpotlightCard.displayName = 'SpotlightCard';

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

@@ -11,7 +11,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 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/esm/components/spotlight-inner.js

@@ -18,7 +18,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';
@@ -112,7 +111,7 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
         var isOpen = _ref.isOpen,
           onExited = _ref.onExited;
         return /*#__PURE__*/React.createElement(Portal, {
-          zIndex: layers.spotlight() + 1
+          zIndex: 701
         }, TargetReplacement ? /*#__PURE__*/React.createElement(NodeResolverSpotlightInner, {
           hasNodeResolver: !fg('platform_design_system_team_onboarding_noderesolve'),
           innerRef: function innerRef(elem) {

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

@@ -12,7 +12,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';
 var _createContext = /*#__PURE__*/createContext(undefined),
@@ -116,7 +115,7 @@ var SpotlightManager = /*#__PURE__*/function (_PureComponent) {
         hasEntered: this.state.spotlightCount > 0
       }, function (animationStyles) {
         return /*#__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/esm/components/theme.js

@@ -5,91 +5,90 @@ var _excluded = ["buttonStyles"],
   _excluded2 = ["buttonStyles"];
 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; }
-import * as colors from '@atlaskit/theme/colors';
 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/esm/styled/blanket.compiled.css

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

package/dist/esm/styled/blanket.js

@@ -1,21 +1,13 @@
+/* blanket.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./blanket.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 } from '@emotion/react';
-import { N100A } from '@atlaskit/theme/colors';
-import { layers } from '@atlaskit/theme/constants';
 // 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 = css({
-  position: 'fixed',
-  zIndex: layers.spotlight(),
-  inset: 0,
-  transition: 'opacity 220ms'
-});
+var blanketStyles = null;
 /**
  * __Blanket__
  *
@@ -31,13 +23,13 @@ var Blanket = function Blanket(_ref) {
   var isTinted = _ref.isTinted,
     onBlanketClicked = _ref.onBlanketClicked,
     style = _ref.style;
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement("div", {
     role: "presentation",
-    css: blanketStyles,
     style: _objectSpread(_objectSpread({}, style), {}, {
-      backgroundColor: isTinted ? "var(--ds-blanket, ".concat(N100A, ")") : 'transparent'
+      backgroundColor: isTinted ? "var(--ds-blanket, #091E427D)" : 'transparent'
     }),
-    onClick: onBlanketClicked
+    onClick: onBlanketClicked,
+    className: ax(["_1r04idpf _v56414ka _kqsw1n9t _1pby1fw0"])
   });
 };
 export default Blanket;

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