@atlaskit/inline-message 12.4.2 → 13.0.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/inline-message
 
+## 13.0.0
+
+### Major Changes
+
+- [#175912](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/175912)
+  [`4facbe306465b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4facbe306465b) -
+  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/inline-message`, 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
+
+## 12.4.3
+
+### Patch Changes
+
+- [#171994](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/171994)
+  [`be58e4bb2e387`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/be58e4bb2e387) -
+  Migrating usages of UNSAFE types and entrypoints that have been renamed in `@atlaskit/icon` and
+  `@atlaskit/icon-lab`.
+- Updated dependencies
+
 ## 12.4.2
 
 ### Patch Changes

package/dist/cjs/components/inline-message/index.compiled.css

@@ -0,0 +1,14 @@
+._1e0c1o8l{display:inline-block}
+._1o0knqa1:hover [data-ds--inline-message--button]{text-decoration-style:solid}
+._1yyu1kum:hover [data-ds--inline-message--icon]{color:var(--icon-accent-color)}
+._38q98stv:hover [data-ds--inline-message--button]{text-decoration-line:underline}
+._kvh018uv:hover [data-ds--inline-message--button]{text-decoration-color:initial}
+._p12f1osq{max-width:100%}
+._x5v913wx{--icon-accent-color:var(--ds-icon-discovery,#8777d9)}
+._x5v91fgg{--icon-accent-color:var(--ds-icon-success,#57d9a3)}
+._x5v91r2e{--icon-accent-color:var(--ds-icon-brand,#0065ff)}
+._x5v9f6ss{--icon-accent-color:var(--ds-icon-warning,#ffc400)}
+._x5v9k8x7{--icon-accent-color:var(--ds-icon-danger,#ff5630)}
+._1hvwt94y:focus{outline-width:1px}
+._49pcnqa1:focus{outline-style:solid}
+._nt751r31:focus{outline-color:currentColor}

package/dist/cjs/components/inline-message/index.js

@@ -1,56 +1,31 @@
+/* index.tsx generated by @compiled/babel-plugin v0.32.2 */
 "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("./index.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
 var _button = _interopRequireDefault(require("@atlaskit/button"));
 var _inlineDialog = _interopRequireDefault(require("@atlaskit/inline-dialog"));
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _colors = require("@atlaskit/theme/colors");
 var _messageIcon = _interopRequireDefault(require("../message-icon"));
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var rootStyles = (0, _react2.css)({
-  display: 'inline-block',
-  maxWidth: '100%',
-  '&:focus': {
-    outline: '1px solid'
-  },
-  '&:hover': {
-    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '[data-ds--inline-message--icon]': {
-      // Legacy style
-      color: 'var(--icon-accent-color)'
-    },
-    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '[data-ds--inline-message--button]': {
-      textDecoration: 'underline'
-    }
-  }
-});
-var iconColor = function iconColor(appearance) {
-  switch (appearance) {
-    case 'connectivity':
-      return "var(--ds-icon-brand, ".concat(_colors.B300, ")");
-    case 'confirmation':
-      return "var(--ds-icon-success, ".concat(_colors.G200, ")");
-    case 'info':
-      return "var(--ds-icon-discovery, ".concat(_colors.P200, ")");
-    case 'warning':
-      return "var(--ds-icon-warning, ".concat(_colors.Y200, ")");
-    case 'error':
-      return "var(--ds-icon-danger, ".concat(_colors.R300, ")");
-  }
+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 rootStyles = null;
+var iconColor = {
+  connectivity: "_x5v91r2e",
+  confirmation: "_x5v91fgg",
+  info: "_x5v913wx",
+  warning: "_x5v9f6ss",
+  error: "_x5v9k8x7"
 };
 
 /**
@@ -103,41 +78,35 @@ var InlineMessage = function InlineMessage(_ref) {
   if (!appearance) {
     appearance = type;
   }
-  return (0, _react2.jsx)("div", {
-    css: rootStyles
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: {
-      '--icon-accent-color': iconColor(appearance)
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    },
-    "data-testid": testId
-  }, (0, _react2.jsx)(_inlineDialog.default, {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    className: (0, _runtime.ax)(["_1e0c1o8l _p12f1osq _nt751r31 _49pcnqa1 _1hvwt94y _1yyu1kum _kvh018uv _38q98stv _1o0knqa1", iconColor[appearance]])
+  }, /*#__PURE__*/React.createElement(_inlineDialog.default, {
     onClose: onCloseDialog,
     content: children,
     isOpen: isOpen,
     placement: placement,
     testId: testId && "".concat(testId, "--inline-dialog")
-  }, (0, _react2.jsx)(_button.default, {
+  }, /*#__PURE__*/React.createElement(_button.default, {
     "data-ds--inline-message--button": true,
     appearance: "subtle-link",
     onClick: toggleDialog,
     spacing: "none",
     testId: testId && "".concat(testId, "--button"),
     "aria-expanded": isOpen
-  }, (0, _react2.jsx)(_primitives.Inline, {
+  }, /*#__PURE__*/React.createElement(_compiled.Inline, {
     space: "space.050",
     alignBlock: "center"
-  }, (0, _react2.jsx)(_messageIcon.default, {
+  }, /*#__PURE__*/React.createElement(_messageIcon.default, {
     isOpen: isOpen,
     appearance: appearance,
     label: iconLabel
-  }), (0, _react2.jsx)(_primitives.Inline, {
+  }), /*#__PURE__*/React.createElement(_compiled.Inline, {
     space: "space.100"
-  }, title && (0, _react2.jsx)(_primitives.Text, {
+  }, title && /*#__PURE__*/React.createElement(_compiled.Text, {
     weight: "medium",
     testId: testId && "".concat(testId, "--title")
-  }, title), secondaryText && (0, _react2.jsx)(_primitives.Text, {
+  }, title), secondaryText && /*#__PURE__*/React.createElement(_compiled.Text, {
     weight: "medium",
     color: "color.text.subtlest",
     maxLines: 1,

package/dist/cjs/components/message-icon/index.compiled.css

@@ -0,0 +1,12 @@
+._16jlidpf{flex-grow:0}
+._1b3i1378{--icon-color:var(--ds-icon-danger,#de350b)}
+._1b3i1c86{--icon-color:var(--ds-icon-brand,#0052cc)}
+._1b3i1n6p{--icon-color:var(--ds-icon-warning,#ffab00)}
+._1b3icdx1{--icon-color:var(--ds-icon-success,#36b37e)}
+._1b3ige5s{--icon-color:var(--ds-icon-discovery,#6554c0)}
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._4cvr1h6o{align-items:center}
+._i0dl1wug{flex-basis:auto}
+._syaz1kum{color:var(--icon-accent-color)}
+._syazkr0v{color:var(--icon-color)}

package/dist/cjs/components/message-icon/index.js

@@ -1,42 +1,27 @@
+/* index.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("@emotion/react");
+require("./index.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../constants");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var iconColor = function iconColor(appearance) {
-  switch (appearance) {
-    case 'connectivity':
-      return "var(--ds-icon-brand, ".concat(_colors.B400, ")");
-    case 'confirmation':
-      return "var(--ds-icon-success, ".concat(_colors.G300, ")");
-    case 'info':
-      return "var(--ds-icon-discovery, ".concat(_colors.P300, ")");
-    case 'warning':
-      return "var(--ds-icon-warning, ".concat(_colors.Y300, ")");
-    case 'error':
-      return "var(--ds-icon-danger, ".concat(_colors.R400, ")");
-  }
+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 iconColor = {
+  connectivity: "_1b3i1c86",
+  confirmation: "_1b3icdx1",
+  info: "_1b3ige5s",
+  warning: "_1b3i1n6p",
+  error: "_1b3i1378"
 };
-var iconWrapperStyles = (0, _react.css)({
-  display: 'flex',
-  alignItems: 'center',
-  flex: '0 0 auto',
-  color: 'var(--icon-color)'
-});
-var iconColorStyles = (0, _react.css)({
-  color: 'var(--icon-accent-color)'
-});
+var iconWrapperStyles = null;
+var iconColorStyles = null;
 
 /**
  * __Selected icon__
@@ -51,15 +36,10 @@ var SelectedIcon = function SelectedIcon(_ref) {
   var _typesMapping$appeara = _constants.typesMapping[appearance],
     Icon = _typesMapping$appeara.icon,
     defaultLabel = _typesMapping$appeara.defaultLabel;
-  return (0, _react.jsx)("span", {
-    "data-ds--inline-message--icon": true
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    style: {
-      '--icon-color': iconColor(appearance)
-    },
-    css: [iconWrapperStyles, isOpen && iconColorStyles]
-  }, (0, _react.jsx)(Icon, {
+  return /*#__PURE__*/React.createElement("span", {
+    "data-ds--inline-message--icon": true,
+    className: (0, _runtime.ax)(["_1e0c1txw _4cvr1h6o _16jlidpf _1o9zidpf _i0dl1wug _syazkr0v", isOpen && "_syaz1kum", iconColor[appearance]])
+  }, /*#__PURE__*/React.createElement(Icon, {
     testId: "inline-message-icon",
     label: label || defaultLabel,
     color: "currentColor",

package/dist/es2019/components/inline-message/index.compiled.css

@@ -0,0 +1,14 @@
+._1e0c1o8l{display:inline-block}
+._1o0knqa1:hover [data-ds--inline-message--button]{text-decoration-style:solid}
+._1yyu1kum:hover [data-ds--inline-message--icon]{color:var(--icon-accent-color)}
+._38q98stv:hover [data-ds--inline-message--button]{text-decoration-line:underline}
+._kvh018uv:hover [data-ds--inline-message--button]{text-decoration-color:initial}
+._p12f1osq{max-width:100%}
+._x5v913wx{--icon-accent-color:var(--ds-icon-discovery,#8777d9)}
+._x5v91fgg{--icon-accent-color:var(--ds-icon-success,#57d9a3)}
+._x5v91r2e{--icon-accent-color:var(--ds-icon-brand,#0065ff)}
+._x5v9f6ss{--icon-accent-color:var(--ds-icon-warning,#ffc400)}
+._x5v9k8x7{--icon-accent-color:var(--ds-icon-danger,#ff5630)}
+._1hvwt94y:focus{outline-width:1px}
+._49pcnqa1:focus{outline-style:solid}
+._nt751r31:focus{outline-color:currentColor}

package/dist/es2019/components/inline-message/index.js

@@ -1,47 +1,20 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* index.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button';
 import InlineDialog from '@atlaskit/inline-dialog';
-import { Inline, Text } from '@atlaskit/primitives';
+import { Inline, Text } from '@atlaskit/primitives/compiled';
 import { B300, G200, P200, R300, Y200 } from '@atlaskit/theme/colors';
 import MessageIcon from '../message-icon';
-const rootStyles = css({
-  display: 'inline-block',
-  maxWidth: '100%',
-  '&:focus': {
-    outline: '1px solid'
-  },
-  '&:hover': {
-    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '[data-ds--inline-message--icon]': {
-      // Legacy style
-      color: 'var(--icon-accent-color)'
-    },
-    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '[data-ds--inline-message--button]': {
-      textDecoration: 'underline'
-    }
-  }
-});
-const iconColor = appearance => {
-  switch (appearance) {
-    case 'connectivity':
-      return `var(--ds-icon-brand, ${B300})`;
-    case 'confirmation':
-      return `var(--ds-icon-success, ${G200})`;
-    case 'info':
-      return `var(--ds-icon-discovery, ${P200})`;
-    case 'warning':
-      return `var(--ds-icon-warning, ${Y200})`;
-    case 'error':
-      return `var(--ds-icon-danger, ${R300})`;
-  }
+const rootStyles = null;
+const iconColor = {
+  connectivity: "_x5v91r2e",
+  confirmation: "_x5v91fgg",
+  info: "_x5v913wx",
+  warning: "_x5v9f6ss",
+  error: "_x5v9k8x7"
 };
 
 /**
@@ -84,41 +57,35 @@ const InlineMessage = ({
   if (!appearance) {
     appearance = type;
   }
-  return jsx("div", {
-    css: rootStyles
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: {
-      '--icon-accent-color': iconColor(appearance)
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    },
-    "data-testid": testId
-  }, jsx(InlineDialog, {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    className: ax(["_1e0c1o8l _p12f1osq _nt751r31 _49pcnqa1 _1hvwt94y _1yyu1kum _kvh018uv _38q98stv _1o0knqa1", iconColor[appearance]])
+  }, /*#__PURE__*/React.createElement(InlineDialog, {
     onClose: onCloseDialog,
     content: children,
     isOpen: isOpen,
     placement: placement,
     testId: testId && `${testId}--inline-dialog`
-  }, jsx(Button, {
+  }, /*#__PURE__*/React.createElement(Button, {
     "data-ds--inline-message--button": true,
     appearance: "subtle-link",
     onClick: toggleDialog,
     spacing: "none",
     testId: testId && `${testId}--button`,
     "aria-expanded": isOpen
-  }, jsx(Inline, {
+  }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.050",
     alignBlock: "center"
-  }, jsx(MessageIcon, {
+  }, /*#__PURE__*/React.createElement(MessageIcon, {
     isOpen: isOpen,
     appearance: appearance,
     label: iconLabel
-  }), jsx(Inline, {
+  }), /*#__PURE__*/React.createElement(Inline, {
     space: "space.100"
-  }, title && jsx(Text, {
+  }, title && /*#__PURE__*/React.createElement(Text, {
     weight: "medium",
     testId: testId && `${testId}--title`
-  }, title), secondaryText && jsx(Text, {
+  }, title), secondaryText && /*#__PURE__*/React.createElement(Text, {
     weight: "medium",
     color: "color.text.subtlest",
     maxLines: 1,

package/dist/es2019/components/message-icon/index.compiled.css

@@ -0,0 +1,12 @@
+._16jlidpf{flex-grow:0}
+._1b3i1378{--icon-color:var(--ds-icon-danger,#de350b)}
+._1b3i1c86{--icon-color:var(--ds-icon-brand,#0052cc)}
+._1b3i1n6p{--icon-color:var(--ds-icon-warning,#ffab00)}
+._1b3icdx1{--icon-color:var(--ds-icon-success,#36b37e)}
+._1b3ige5s{--icon-color:var(--ds-icon-discovery,#6554c0)}
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._4cvr1h6o{align-items:center}
+._i0dl1wug{flex-basis:auto}
+._syaz1kum{color:var(--icon-accent-color)}
+._syazkr0v{color:var(--icon-color)}

package/dist/es2019/components/message-icon/index.js

@@ -1,35 +1,18 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* index.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { B400, G300, P300, R400, Y300 } from '@atlaskit/theme/colors';
 import { typesMapping } from '../../constants';
-const iconColor = appearance => {
-  switch (appearance) {
-    case 'connectivity':
-      return `var(--ds-icon-brand, ${B400})`;
-    case 'confirmation':
-      return `var(--ds-icon-success, ${G300})`;
-    case 'info':
-      return `var(--ds-icon-discovery, ${P300})`;
-    case 'warning':
-      return `var(--ds-icon-warning, ${Y300})`;
-    case 'error':
-      return `var(--ds-icon-danger, ${R400})`;
-  }
+const iconColor = {
+  connectivity: "_1b3i1c86",
+  confirmation: "_1b3icdx1",
+  info: "_1b3ige5s",
+  warning: "_1b3i1n6p",
+  error: "_1b3i1378"
 };
-const iconWrapperStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  flex: '0 0 auto',
-  color: 'var(--icon-color)'
-});
-const iconColorStyles = css({
-  color: 'var(--icon-accent-color)'
-});
+const iconWrapperStyles = null;
+const iconColorStyles = null;
 
 /**
  * __Selected icon__
@@ -48,15 +31,10 @@ const SelectedIcon = ({
       defaultLabel
     }
   } = typesMapping;
-  return jsx("span", {
-    "data-ds--inline-message--icon": true
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    style: {
-      '--icon-color': iconColor(appearance)
-    },
-    css: [iconWrapperStyles, isOpen && iconColorStyles]
-  }, jsx(Icon, {
+  return /*#__PURE__*/React.createElement("span", {
+    "data-ds--inline-message--icon": true,
+    className: ax(["_1e0c1txw _4cvr1h6o _16jlidpf _1o9zidpf _i0dl1wug _syazkr0v", isOpen && "_syaz1kum", iconColor[appearance]])
+  }, /*#__PURE__*/React.createElement(Icon, {
     testId: "inline-message-icon",
     label: label || defaultLabel,
     color: "currentColor",

package/dist/esm/components/inline-message/index.compiled.css

@@ -0,0 +1,14 @@
+._1e0c1o8l{display:inline-block}
+._1o0knqa1:hover [data-ds--inline-message--button]{text-decoration-style:solid}
+._1yyu1kum:hover [data-ds--inline-message--icon]{color:var(--icon-accent-color)}
+._38q98stv:hover [data-ds--inline-message--button]{text-decoration-line:underline}
+._kvh018uv:hover [data-ds--inline-message--button]{text-decoration-color:initial}
+._p12f1osq{max-width:100%}
+._x5v913wx{--icon-accent-color:var(--ds-icon-discovery,#8777d9)}
+._x5v91fgg{--icon-accent-color:var(--ds-icon-success,#57d9a3)}
+._x5v91r2e{--icon-accent-color:var(--ds-icon-brand,#0065ff)}
+._x5v9f6ss{--icon-accent-color:var(--ds-icon-warning,#ffc400)}
+._x5v9k8x7{--icon-accent-color:var(--ds-icon-danger,#ff5630)}
+._1hvwt94y:focus{outline-width:1px}
+._49pcnqa1:focus{outline-style:solid}
+._nt751r31:focus{outline-color:currentColor}

package/dist/esm/components/inline-message/index.js

@@ -1,48 +1,21 @@
+/* index.tsx generated by @compiled/babel-plugin v0.32.2 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button';
 import InlineDialog from '@atlaskit/inline-dialog';
-import { Inline, Text } from '@atlaskit/primitives';
+import { Inline, Text } from '@atlaskit/primitives/compiled';
 import { B300, G200, P200, R300, Y200 } from '@atlaskit/theme/colors';
 import MessageIcon from '../message-icon';
-var rootStyles = css({
-  display: 'inline-block',
-  maxWidth: '100%',
-  '&:focus': {
-    outline: '1px solid'
-  },
-  '&:hover': {
-    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '[data-ds--inline-message--icon]': {
-      // Legacy style
-      color: 'var(--icon-accent-color)'
-    },
-    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '[data-ds--inline-message--button]': {
-      textDecoration: 'underline'
-    }
-  }
-});
-var iconColor = function iconColor(appearance) {
-  switch (appearance) {
-    case 'connectivity':
-      return "var(--ds-icon-brand, ".concat(B300, ")");
-    case 'confirmation':
-      return "var(--ds-icon-success, ".concat(G200, ")");
-    case 'info':
-      return "var(--ds-icon-discovery, ".concat(P200, ")");
-    case 'warning':
-      return "var(--ds-icon-warning, ".concat(Y200, ")");
-    case 'error':
-      return "var(--ds-icon-danger, ".concat(R300, ")");
-  }
+var rootStyles = null;
+var iconColor = {
+  connectivity: "_x5v91r2e",
+  confirmation: "_x5v91fgg",
+  info: "_x5v913wx",
+  warning: "_x5v9f6ss",
+  error: "_x5v9k8x7"
 };
 
 /**
@@ -95,41 +68,35 @@ var InlineMessage = function InlineMessage(_ref) {
   if (!appearance) {
     appearance = type;
   }
-  return jsx("div", {
-    css: rootStyles
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: {
-      '--icon-accent-color': iconColor(appearance)
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    },
-    "data-testid": testId
-  }, jsx(InlineDialog, {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    className: ax(["_1e0c1o8l _p12f1osq _nt751r31 _49pcnqa1 _1hvwt94y _1yyu1kum _kvh018uv _38q98stv _1o0knqa1", iconColor[appearance]])
+  }, /*#__PURE__*/React.createElement(InlineDialog, {
     onClose: onCloseDialog,
     content: children,
     isOpen: isOpen,
     placement: placement,
     testId: testId && "".concat(testId, "--inline-dialog")
-  }, jsx(Button, {
+  }, /*#__PURE__*/React.createElement(Button, {
     "data-ds--inline-message--button": true,
     appearance: "subtle-link",
     onClick: toggleDialog,
     spacing: "none",
     testId: testId && "".concat(testId, "--button"),
     "aria-expanded": isOpen
-  }, jsx(Inline, {
+  }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.050",
     alignBlock: "center"
-  }, jsx(MessageIcon, {
+  }, /*#__PURE__*/React.createElement(MessageIcon, {
     isOpen: isOpen,
     appearance: appearance,
     label: iconLabel
-  }), jsx(Inline, {
+  }), /*#__PURE__*/React.createElement(Inline, {
     space: "space.100"
-  }, title && jsx(Text, {
+  }, title && /*#__PURE__*/React.createElement(Text, {
     weight: "medium",
     testId: testId && "".concat(testId, "--title")
-  }, title), secondaryText && jsx(Text, {
+  }, title), secondaryText && /*#__PURE__*/React.createElement(Text, {
     weight: "medium",
     color: "color.text.subtlest",
     maxLines: 1,

package/dist/esm/components/message-icon/index.compiled.css

@@ -0,0 +1,12 @@
+._16jlidpf{flex-grow:0}
+._1b3i1378{--icon-color:var(--ds-icon-danger,#de350b)}
+._1b3i1c86{--icon-color:var(--ds-icon-brand,#0052cc)}
+._1b3i1n6p{--icon-color:var(--ds-icon-warning,#ffab00)}
+._1b3icdx1{--icon-color:var(--ds-icon-success,#36b37e)}
+._1b3ige5s{--icon-color:var(--ds-icon-discovery,#6554c0)}
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._4cvr1h6o{align-items:center}
+._i0dl1wug{flex-basis:auto}
+._syaz1kum{color:var(--icon-accent-color)}
+._syazkr0v{color:var(--icon-color)}

package/dist/esm/components/message-icon/index.js

@@ -1,35 +1,18 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* index.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { B400, G300, P300, R400, Y300 } from '@atlaskit/theme/colors';
 import { typesMapping } from '../../constants';
-var iconColor = function iconColor(appearance) {
-  switch (appearance) {
-    case 'connectivity':
-      return "var(--ds-icon-brand, ".concat(B400, ")");
-    case 'confirmation':
-      return "var(--ds-icon-success, ".concat(G300, ")");
-    case 'info':
-      return "var(--ds-icon-discovery, ".concat(P300, ")");
-    case 'warning':
-      return "var(--ds-icon-warning, ".concat(Y300, ")");
-    case 'error':
-      return "var(--ds-icon-danger, ".concat(R400, ")");
-  }
+var iconColor = {
+  connectivity: "_1b3i1c86",
+  confirmation: "_1b3icdx1",
+  info: "_1b3ige5s",
+  warning: "_1b3i1n6p",
+  error: "_1b3i1378"
 };
-var iconWrapperStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  flex: '0 0 auto',
-  color: 'var(--icon-color)'
-});
-var iconColorStyles = css({
-  color: 'var(--icon-accent-color)'
-});
+var iconWrapperStyles = null;
+var iconColorStyles = null;
 
 /**
  * __Selected icon__
@@ -44,15 +27,10 @@ var SelectedIcon = function SelectedIcon(_ref) {
   var _typesMapping$appeara = typesMapping[appearance],
     Icon = _typesMapping$appeara.icon,
     defaultLabel = _typesMapping$appeara.defaultLabel;
-  return jsx("span", {
-    "data-ds--inline-message--icon": true
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    style: {
-      '--icon-color': iconColor(appearance)
-    },
-    css: [iconWrapperStyles, isOpen && iconColorStyles]
-  }, jsx(Icon, {
+  return /*#__PURE__*/React.createElement("span", {
+    "data-ds--inline-message--icon": true,
+    className: ax(["_1e0c1txw _4cvr1h6o _16jlidpf _1o9zidpf _i0dl1wug _syazkr0v", isOpen && "_syaz1kum", iconColor[appearance]])
+  }, /*#__PURE__*/React.createElement(Icon, {
     testId: "inline-message-icon",
     label: label || defaultLabel,
     color: "currentColor",

package/dist/types/types.d.ts

@@ -1,8 +1,8 @@
 import { type ComponentType } from 'react';
-import type { UNSAFE_NewCoreIconProps } from '@atlaskit/icon';
+import type { NewCoreIconProps } from '@atlaskit/icon';
 export interface Icon {
     defaultLabel: string;
-    icon: ComponentType<UNSAFE_NewCoreIconProps>;
+    icon: ComponentType<NewCoreIconProps>;
 }
 export type IconAppearanceMap = Record<IconAppearance, Icon>;
 export type IconAppearance = 'connectivity' | 'confirmation' | 'info' | 'warning' | 'error';

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

@@ -1,8 +1,8 @@
 import { type ComponentType } from 'react';
-import type { UNSAFE_NewCoreIconProps } from '@atlaskit/icon';
+import type { NewCoreIconProps } from '@atlaskit/icon';
 export interface Icon {
     defaultLabel: string;
-    icon: ComponentType<UNSAFE_NewCoreIconProps>;
+    icon: ComponentType<NewCoreIconProps>;
 }
 export type IconAppearanceMap = Record<IconAppearance, Icon>;
 export type IconAppearance = 'connectivity' | 'confirmation' | 'info' | 'warning' | 'error';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/inline-message",
-	"version": "12.4.2",
+	"version": "13.0.0",
 	"description": "An inline message lets users know when important information is available or when an action is required.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -25,19 +25,19 @@
 		"team": "Design System Team",
 		"website": {
 			"name": "Inline message",
-			"category": "Components"
+			"category": "Messaging"
 		},
 		"runReact18": true
 	},
 	"dependencies": {
 		"@atlaskit/button": "^20.3.0",
-		"@atlaskit/icon": "^22.24.0",
-		"@atlaskit/inline-dialog": "^15.2.0",
-		"@atlaskit/primitives": "^13.2.0",
+		"@atlaskit/icon": "^23.1.0",
+		"@atlaskit/inline-dialog": "^15.3.0",
+		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.2.0",
+		"@atlaskit/tokens": "^2.4.0",
 		"@babel/runtime": "^7.0.0",
-		"@emotion/react": "^11.7.1"
+		"@compiled/react": "^0.18.1"
 	},
 	"peerDependencies": {
 		"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
@@ -46,7 +46,7 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/ds-lib": "^3.2.0",
+		"@atlaskit/ds-lib": "^3.3.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
 		"@emotion/jest": "^11.8.0",