@atlaskit/inline-edit 13.7.9 → 14.0.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/inline-edit
 
+## 14.0.0
+
+### Major Changes
+
+- [#175115](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/175115)
+  [`a39f1957d919f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a39f1957d919f) -
+  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-edit`, 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.7.9
 
 ### Patch Changes

package/dist/cjs/inline-edit.compiled.css

@@ -0,0 +1,2 @@
+._kqswh2mm{position:relative}
+._p12f1osq{max-width:100%}

package/dist/cjs/inline-edit.js

@@ -1,3 +1,4 @@
+/* inline-edit.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,15 +7,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./inline-edit.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _Field = _interopRequireDefault(require("@atlaskit/form/Field"));
 var _Form = _interopRequireDefault(require("@atlaskit/form/Form"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _pressable = _interopRequireDefault(require("@atlaskit/primitives/pressable"));
+var _compiled = require("@atlaskit/primitives/compiled");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _buttons = _interopRequireDefault(require("./internal/buttons"));
 var _useButtonFocusHook2 = _interopRequireDefault(require("./internal/hooks/use-button-focus-hook"));
@@ -22,18 +24,12 @@ var _readView = _interopRequireDefault(require("./internal/read-view"));
 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
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var fieldStyles = (0, _react2.css)({
-  maxWidth: '100%',
-  position: 'relative'
-});
+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 fieldStyles = null;
 var analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "13.7.9"
+  packageVersion: "14.0.0"
 };
 var InnerInlineEdit = function InnerInlineEdit(props) {
   var _props$startWithEditV = props.startWithEditViewOpen,
@@ -157,7 +153,7 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
     return "".concat(editButtonLabel, ", ").concat(editLabel);
   };
   var renderReadView = function renderReadView() {
-    return (0, _react2.jsx)(_readView.default, {
+    return /*#__PURE__*/_react.default.createElement(_readView.default, {
       editButtonLabel: concatenatedEditButtonLabel(),
       onEditRequested: onEditRequested,
       postReadViewClick: doNotFocusOnEditButton,
@@ -167,7 +163,7 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
       testId: testId
     });
   };
-  return (0, _react2.jsx)(_Form.default, {
+  return /*#__PURE__*/_react.default.createElement(_Form.default, {
     onSubmit: function onSubmit(data) {
       return onConfirm(data.inlineEdit);
     }
@@ -177,7 +173,7 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
       onSubmit = _ref$formProps.onSubmit,
       formRef = _ref$formProps.ref,
       reset = _ref.reset;
-    return (0, _react2.jsx)("form", {
+    return /*#__PURE__*/_react.default.createElement("form", {
       /**
        * It is not normally acceptable to add key handlers to non-interactive elements
        * as this is an accessibility anti-pattern. However, because this instance is
@@ -197,7 +193,7 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
       },
       onSubmit: onSubmit,
       ref: formRef
-    }, shouldBeEditing ? (0, _react2.jsx)(_Field.default, {
+    }, shouldBeEditing ? /*#__PURE__*/_react.default.createElement(_Field.default, {
       name: "inlineEdit",
       label: label,
       defaultValue: defaultValue,
@@ -207,46 +203,45 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
     }, function (_ref2) {
       var fieldProps = _ref2.fieldProps,
         error = _ref2.error;
-      return (
-        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-        (0, _react2.jsx)("div", {
-          css: fieldStyles,
-          onBlur: function onBlur(e) {
-            if (!e.currentTarget.contains(e.relatedTarget)) {
-              onEditViewWrapperBlur(fieldProps.isInvalid, onSubmit, formRef);
-            }
-          },
-          onFocus: onEditViewWrapperFocus
-        }, editView(_objectSpread(_objectSpread({}, fieldProps), {}, {
-          errorMessage: error
-        }), editViewRef), !hideActionButtons ? (0, _react2.jsx)(_buttons.default, {
-          testId: testId,
-          cancelButtonLabel: cancelButtonLabel,
-          confirmButtonLabel: confirmButtonLabel,
-          onMouseDown: function onMouseDown() {
-            /**
-             * Prevents focus on edit button only if mouse is used to click button, but not when keyboard is used
-             */
-            doNotFocusOnEditButton();
-          },
-          onCancelClick: function onCancelClick(e) {
-            reset();
-            _onCancelClick(e);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        onBlur: function onBlur(e) {
+          if (!e.currentTarget.contains(e.relatedTarget)) {
+            onEditViewWrapperBlur(fieldProps.isInvalid, onSubmit, formRef);
           }
-        }) :
-        /**
-         * This is to allow Ctrl + Enter to submit without action buttons
-         */
-        (0, _react2.jsx)(_pressable.default, {
-          hidden: true,
-          type: "submit"
-        }, (0, _react2.jsx)(_visuallyHidden.default, null, "Submit")))
-      );
+        },
+        onFocus: onEditViewWrapperFocus,
+        className: (0, _runtime.ax)(["_p12f1osq _kqswh2mm"])
+      }, editView(_objectSpread(_objectSpread({}, fieldProps), {}, {
+        errorMessage: error
+      }), editViewRef), !hideActionButtons ? /*#__PURE__*/_react.default.createElement(_buttons.default, {
+        testId: testId,
+        cancelButtonLabel: cancelButtonLabel,
+        confirmButtonLabel: confirmButtonLabel,
+        onMouseDown: function onMouseDown() {
+          /**
+           * Prevents focus on edit button only if mouse is used to click button, but not when keyboard is used
+           */
+          doNotFocusOnEditButton();
+        },
+        onCancelClick: function onCancelClick(e) {
+          reset();
+          _onCancelClick(e);
+        }
+      }) :
+      /*#__PURE__*/
+      /**
+       * This is to allow Ctrl + Enter to submit without action buttons
+       */
+      _react.default.createElement(_compiled.Pressable, {
+        hidden: true,
+        type: "submit"
+      }, /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, "Submit")));
     }) :
+    /*#__PURE__*/
     /**
      * Field is used here only for the label and spacing
      */
-    (0, _react2.jsx)(_Field.default, {
+    _react.default.createElement(_Field.default, {
       name: "inlineEdit",
       label: label,
       defaultValue: "",
@@ -257,7 +252,7 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
 };
 var InlineEdit = function InlineEdit(props) {
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  return (0, _react2.jsx)(InnerInlineEdit, props);
+  return /*#__PURE__*/_react.default.createElement(InnerInlineEdit, props);
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/cjs/inline-editable-textfield.compiled.css

@@ -0,0 +1,9 @@
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._18zr12x7{padding-inline:var(--ds-space-075,6px)}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
+._1e0c1txw{display:flex}
+._1nmz1hna{word-break:break-word}
+._p12f1osq{max-width:100%}
+._vwz41osq{line-height:100%}
+._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}

package/dist/cjs/inline-editable-textfield.js

@@ -1,3 +1,4 @@
+/* inline-editable-textfield.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,34 +7,30 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./inline-editable-textfield.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _css = require("@atlaskit/css");
 var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
 var _inlineDialog = _interopRequireDefault(require("@atlaskit/inline-dialog"));
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _colors = require("@atlaskit/theme/colors");
 var _inlineEdit = _interopRequireDefault(require("./inline-edit"));
 var _excluded = ["errorMessage", "isInvalid"];
 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 errorIconContainerStyles = (0, _primitives.xcss)({
-  lineHeight: '100%',
-  paddingInlineEnd: 'space.075'
-});
-var readViewForTextFieldStyles = (0, _primitives.xcss)({
-  display: 'flex',
-  font: 'font.body',
-  maxWidth: '100%',
-  paddingBlock: 'space.100',
-  paddingInline: 'space.075',
-  wordBreak: 'break-word'
-});
-var compactStyles = (0, _primitives.xcss)({
-  paddingBlock: 'space.050',
-  paddingInline: 'space.075'
-});
+var errorIconContainerStyles = {
+  root: "_vwz41osq _y4ti12x7"
+};
+var readViewForTextFieldStyles = {
+  root: "_1e0c1txw _11c81oud _p12f1osq _1rjcu2gc _18zr12x7 _1nmz1hna"
+};
+var compactStyles = {
+  root: "_1rjc1b66 _18zr12x7"
+};
 var InlineEditableTextfield = function InlineEditableTextfield(props) {
   var _props$isCompact = props.isCompact,
     isCompact = _props$isCompact === void 0 ? false : _props$isCompact,
@@ -63,8 +60,8 @@ var InlineEditableTextfield = function InlineEditableTextfield(props) {
         placement: "right"
       }, /*#__PURE__*/_react.default.createElement(_textfield.default, (0, _extends2.default)({}, props, {
         ref: textFieldRef,
-        elemAfterInput: isInvalid && /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-          xcss: errorIconContainerStyles
+        elemAfterInput: isInvalid && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+          xcss: errorIconContainerStyles.root
         }, /*#__PURE__*/_react.default.createElement(_error.default, {
           label: "error",
           primaryColor: "var(--ds-icon-danger, ".concat(_colors.R400, ")")
@@ -75,8 +72,8 @@ var InlineEditableTextfield = function InlineEditableTextfield(props) {
       })));
     },
     readView: function readView() {
-      return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-        xcss: [readViewForTextFieldStyles, isCompact && compactStyles],
+      return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+        xcss: (0, _css.cx)(readViewForTextFieldStyles.root, isCompact && compactStyles.root),
         "data-compact": isCompact,
         testId: testId && "read-view-".concat(testId)
       }, defaultValue || placeholder);

package/dist/cjs/internal/buttons.compiled.css

@@ -0,0 +1,18 @@
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._2rko1sit{border-radius:var(--ds-border-radius,3px)}
+._152t1osq{inset-block-start:100%}
+._16qs1a23{box-shadow:var(--_3t1odq)}
+._1bsbxy5q{width:var(--ds-space-400,2pc)}
+._1e0c1txw{display:flex}
+._1mpy1b66:last-child{margin-inline-start:var(--ds-space-050,4px)}
+._1nlx13nm>button{background-color:var(--_12yx4z3)}
+._1o9zidpf{flex-shrink:0}
+._1pby1kze{z-index:200}
+._1pfh12x7{margin-block-start:var(--ds-space-075,6px)}
+._bfhk13b4{background-color:var(--_1f6rtr1)}
+._kqswstnw{position:absolute}
+._rjxpidpf{inset-inline-end:0}
+._vchhusvi{box-sizing:border-box}
+._l2uv11wk>button:hover{background-color:var(--_qfu7kd)}
+._7mfvdecw>button:active{background-color:var(--ds-surface-overlay-pressed,rgba(179,212,255,.6))}
+._szlb17km>button:active{color:var(--_1lrmnoy)}

package/dist/cjs/internal/buttons.js

@@ -1,94 +1,67 @@
+/* buttons.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("./buttons.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = require("@emotion/react");
 var _new = require("@atlaskit/button/new");
 var _check = _interopRequireDefault(require("@atlaskit/icon/glyph/check"));
 var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
 var _colors = require("@atlaskit/theme/colors");
+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; }
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
 /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var buttonsContainerStyles = (0, _react.css)({
-  display: 'flex',
-  position: 'absolute',
-  flexShrink: 0,
-  insetBlockStart: '100%',
-  insetInlineEnd: 0,
-  marginBlockStart: "var(--ds-space-075, 6px)"
-});
-var buttonWrapperBaseStyles = (0, _react.css)({
-  boxSizing: 'border-box',
-  width: "var(--ds-space-400, 32px)",
-  zIndex: 200,
-  backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
-  borderRadius: "var(--ds-border-radius, 3px)",
-  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '&:last-child': {
-    marginInlineStart: "var(--ds-space-050, 4px)"
-  },
-  '& > button': {
-    backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N20A, ")")
-  },
-  '& > button:hover': {
-    backgroundColor: "var(--ds-surface-overlay-hovered, ".concat(_colors.N30A, ")")
-  },
-  '& > button:active': {
-    backgroundColor: "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))",
-    color: "var(--ds-text, ".concat(_colors.B400, ")")
-  }
-});
-// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
-// Remove links that the component does not have (such as usage). If there are no links remove them all.
-/**
- * __Buttons__
- *
- * A buttons {description}.
- *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
- */
+var buttonsContainerStyles = null;
+var buttonWrapperBaseStyles = null;
 var Buttons = function Buttons(_ref) {
   var confirmButtonLabel = _ref.confirmButtonLabel,
     cancelButtonLabel = _ref.cancelButtonLabel,
     onMouseDown = _ref.onMouseDown,
     onCancelClick = _ref.onCancelClick,
     testId = _ref.testId;
-  return (0, _react.jsx)("div", {
-    css: buttonsContainerStyles
-  }, (0, _react.jsx)("div", {
-    css: buttonWrapperBaseStyles,
-    tabIndex: -1
-  }, (0, _react.jsx)(_new.IconButton, {
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1e0c1txw _kqswstnw _1o9zidpf _152t1osq _rjxpidpf _1pfh12x7"])
+  }, /*#__PURE__*/React.createElement("div", {
+    tabIndex: -1,
+    className: (0, _runtime.ax)(["_vchhusvi _1bsbxy5q _1pby1kze _bfhk13b4 _2rko1sit _16qs1a23 _11c81oud _1mpy1b66 _1nlx13nm _l2uv11wk _7mfvdecw _szlb17km"]),
+    style: {
+      "--_1f6rtr1": (0, _runtime.ix)("var(--ds-surface-overlay, ".concat(_colors.N0, ")")),
+      "--_3t1odq": (0, _runtime.ix)("var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")),
+      "--_12yx4z3": (0, _runtime.ix)("var(--ds-surface-overlay, ".concat(_colors.N20A, ")")),
+      "--_qfu7kd": (0, _runtime.ix)("var(--ds-surface-overlay-hovered, ".concat(_colors.N30A, ")")),
+      "--_1lrmnoy": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.B400, ")"))
+    }
+  }, /*#__PURE__*/React.createElement(_new.IconButton, {
     type: "submit",
     icon: function icon(iconProps) {
-      return (0, _react.jsx)(_check.default, (0, _extends2.default)({}, iconProps, {
+      return /*#__PURE__*/React.createElement(_check.default, (0, _extends2.default)({}, iconProps, {
         size: "small"
       }));
     },
     onMouseDown: onMouseDown,
     label: confirmButtonLabel,
     testId: testId && "".concat(testId, "--confirm")
-  })), (0, _react.jsx)("div", {
-    css: buttonWrapperBaseStyles,
-    tabIndex: -1
-  }, (0, _react.jsx)(_new.IconButton, {
+  })), /*#__PURE__*/React.createElement("div", {
+    tabIndex: -1,
+    className: (0, _runtime.ax)(["_vchhusvi _1bsbxy5q _1pby1kze _bfhk13b4 _2rko1sit _16qs1a23 _11c81oud _1mpy1b66 _1nlx13nm _l2uv11wk _7mfvdecw _szlb17km"]),
+    style: {
+      "--_1f6rtr1": (0, _runtime.ix)("var(--ds-surface-overlay, ".concat(_colors.N0, ")")),
+      "--_3t1odq": (0, _runtime.ix)("var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")),
+      "--_12yx4z3": (0, _runtime.ix)("var(--ds-surface-overlay, ".concat(_colors.N20A, ")")),
+      "--_qfu7kd": (0, _runtime.ix)("var(--ds-surface-overlay-hovered, ".concat(_colors.N30A, ")")),
+      "--_1lrmnoy": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.B400, ")"))
+    }
+  }, /*#__PURE__*/React.createElement(_new.IconButton, {
     icon: function icon(iconProps) {
-      return (0, _react.jsx)(_cross.default, (0, _extends2.default)({}, iconProps, {
+      return /*#__PURE__*/React.createElement(_cross.default, (0, _extends2.default)({}, iconProps, {
         size: "small"
       }));
     },

package/dist/cjs/internal/read-view.compiled.css

@@ -0,0 +1,28 @@
+
+._18s8ze3t{margin:var(--ds-space-0,0)}
+._1yt4ze3t{padding:var(--ds-space-0,0)}
+._2rko1sit{border-radius:var(--ds-border-radius,3px)}
+._v564thzt{transition:background .2s}
+._14ly1bk5:focus+div{border-width:var(--ds-border-width-outline,2px)}
+._189e1bk5{border-width:var(--ds-border-width-outline,2px)}
+._189e1grb{border-width:var(--ds-border-width-0,0)}
+._1dqoglyw{border-style:none}
+._1dqonqa1{border-style:solid}
+._1h6d1j28{border-color:transparent}
+._1j8znqa1:focus+div{border-style:solid}
+._1xp41p6i:focus+div{border-color:var(--ds-border-focused,#388bff)}
+._12ji1r31{outline-color:currentColor}
+._12y3idpf{outline-width:0}
+._1bsb1osq{width:100%}
+._1bsb1wug{width:auto}
+._1e0c1o8l{display:inline-block}
+._1e0c1ule{display:block}
+._1qu2glyw{outline-style:none}
+._bfhk18uv{background-color:initial}
+._p12f1osq{max-width:100%}
+._r06hglyw{-webkit-appearance:none;appearance:none}
+._vchhusvi{box-sizing:border-box}
+._vwz4kb7n{line-height:1}._128midpf:focus-visible{outline-width:0}
+._mizu1r31:focus-visible{outline-color:currentColor}
+._ra3xglyw:focus-visible{outline-style:none}
+._irr32tgk:hover{background-color:var(--_1y60f1n)}

package/dist/cjs/internal/read-view.js

@@ -1,3 +1,4 @@
+/* read-view.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -5,57 +6,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./read-view.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _colors = require("@atlaskit/theme/colors");
 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; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var readViewContainerStyles = (0, _react2.css)({
-  lineHeight: 1
-});
-var editButtonStyles = (0, _primitives.xcss)({
-  display: 'block',
-  margin: 'space.0',
-  padding: 'space.0',
-  appearance: 'none',
-  background: 'transparent',
-  border: 0,
-  lineHeight: 1,
-  outline: 0,
-  ':focus-visible': {
-    outline: 0
-  },
-  // @ts-expect-error
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  ':focus + div': {
-    borderColor: 'color.border.focused',
-    borderWidth: 'border.width.outline',
-    borderStyle: 'solid'
-  }
-});
-var readViewWrapperStyles = (0, _react2.css)({
-  display: 'inline-block',
-  boxSizing: 'border-box',
-  width: 'auto',
-  maxWidth: '100%',
-  border: '2px solid transparent',
-  borderRadius: "var(--ds-border-radius, 3px)",
-  transition: 'background 0.2s',
-  '&:hover': {
-    background: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")")
-  }
-});
-var readViewFitContainerWidthStyles = (0, _react2.css)({
-  width: '100%'
-});
+var readViewContainerStyles = null;
+var editButtonStyles = {
+  root: "_1e0c1ule _18s8ze3t _1yt4ze3t _r06hglyw _bfhk18uv _189e1grb _1dqoglyw _1h6d1j28 _vwz4kb7n _12ji1r31 _1qu2glyw _12y3idpf _1xp41p6i _14ly1bk5 _1j8znqa1 _mizu1r31 _ra3xglyw _128midpf"
+};
+var readViewWrapperStyles = null;
+var readViewFitContainerWidthStyles = null;
 var DRAG_THRESHOLD = 5;
 var ReadView = function ReadView(_ref) {
   var editButtonLabel = _ref.editButtonLabel,
@@ -81,16 +44,15 @@ var ReadView = function ReadView(_ref) {
       postReadViewClick();
     }
   };
-  return (0, _react2.jsx)("div", {
-    css: readViewContainerStyles
-  }, (0, _react2.jsx)(_primitives.Pressable, {
-    xcss: editButtonStyles,
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_vwz4kb7n"])
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
+    xcss: editButtonStyles.root,
     onClick: onEditRequested,
     ref: editButtonRef,
     testId: testId && "".concat(testId, "--edit-button"),
     "aria-label": editButtonLabel
-  }), (0, _react2.jsx)("div", {
-    css: [readViewWrapperStyles, readViewFitContainerWidth && readViewFitContainerWidthStyles]
+  }), /*#__PURE__*/_react.default.createElement("div", {
     /**
      * It is not normally acceptable to add click handlers to non-interactive elements
      * as this is an accessibility anti-pattern. However, because this instance is
@@ -98,14 +60,18 @@ var ReadView = function ReadView(_ref) {
      * creating an inaccessible custom element, we can add role="presentation" so that
      * there is no negative impacts to assistive technologies.
      * (Why links are embeeded in inline-edit is for another day...)
-     */,
+     */
     role: "presentation",
     onClick: onReadViewClick,
     onMouseDown: function onMouseDown(e) {
       startX.current = e.clientX;
       startY.current = e.clientY;
     },
-    "data-read-view-fit-container-width": readViewFitContainerWidth
+    "data-read-view-fit-container-width": readViewFitContainerWidth,
+    className: (0, _runtime.ax)(["_1e0c1o8l _vchhusvi _1bsb1wug _p12f1osq _1h6d1j28 _2rko1sit _1dqonqa1 _189e1bk5 _v564thzt _irr32tgk", readViewFitContainerWidth && "_1bsb1osq"]),
+    style: {
+      "--_1y60f1n": (0, _runtime.ix)("var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"))
+    }
   }, readView()));
 };
 var _default = exports.default = ReadView;

package/dist/es2019/inline-edit.compiled.css

@@ -0,0 +1,2 @@
+._kqswh2mm{position:relative}
+._p12f1osq{max-width:100%}