@atlaskit/inline-edit 13.7.8 → 14.0.0

package/dist/es2019/inline-edit.js

@@ -1,28 +1,21 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* inline-edit.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./inline-edit.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useRef, 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 { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import Field from '@atlaskit/form/Field';
 import Form from '@atlaskit/form/Form';
 import { fg } from '@atlaskit/platform-feature-flags';
-import Pressable from '@atlaskit/primitives/pressable';
+import { Pressable } from '@atlaskit/primitives/compiled';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import Buttons from './internal/buttons';
 import useButtonFocusHook from './internal/hooks/use-button-focus-hook';
 import ReadView from './internal/read-view';
-const fieldStyles = css({
-  maxWidth: '100%',
-  position: 'relative'
-});
+const fieldStyles = null;
 const analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "13.7.8"
+  packageVersion: "14.0.0"
 };
 const InnerInlineEdit = props => {
   const {
@@ -136,7 +129,7 @@ const InnerInlineEdit = props => {
     return `${editButtonLabel}, ${editLabel}`;
   };
   const renderReadView = () => {
-    return jsx(ReadView, {
+    return /*#__PURE__*/React.createElement(ReadView, {
       editButtonLabel: concatenatedEditButtonLabel(),
       onEditRequested: onEditRequested,
       postReadViewClick: doNotFocusOnEditButton,
@@ -146,7 +139,7 @@ const InnerInlineEdit = props => {
       testId: testId
     });
   };
-  return jsx(Form, {
+  return /*#__PURE__*/React.createElement(Form, {
     onSubmit: data => onConfirm(data.inlineEdit)
   }, ({
     formProps: {
@@ -155,7 +148,7 @@ const InnerInlineEdit = props => {
       ref: formRef
     },
     reset
-  }) => jsx("form", {
+  }) => /*#__PURE__*/React.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
@@ -175,7 +168,7 @@ const InnerInlineEdit = props => {
     },
     onSubmit: onSubmit,
     ref: formRef
-  }, shouldBeEditing ? jsx(Field, {
+  }, shouldBeEditing ? /*#__PURE__*/React.createElement(Field, {
     name: "inlineEdit",
     label: label,
     defaultValue: defaultValue,
@@ -185,18 +178,18 @@ const InnerInlineEdit = props => {
   }, ({
     fieldProps,
     error
-  }) => jsx("div", {
-    css: fieldStyles,
+  }) => /*#__PURE__*/React.createElement("div", {
     onBlur: e => {
       if (!e.currentTarget.contains(e.relatedTarget)) {
         onEditViewWrapperBlur(fieldProps.isInvalid, onSubmit, formRef);
       }
     },
-    onFocus: onEditViewWrapperFocus
+    onFocus: onEditViewWrapperFocus,
+    className: ax(["_p12f1osq _kqswh2mm"])
   }, editView({
     ...fieldProps,
     errorMessage: error
-  }, editViewRef), !hideActionButtons ? jsx(Buttons, {
+  }, editViewRef), !hideActionButtons ? /*#__PURE__*/React.createElement(Buttons, {
     testId: testId,
     cancelButtonLabel: cancelButtonLabel,
     confirmButtonLabel: confirmButtonLabel,
@@ -211,17 +204,19 @@ const InnerInlineEdit = props => {
       onCancelClick(e);
     }
   }) :
+  /*#__PURE__*/
   /**
    * This is to allow Ctrl + Enter to submit without action buttons
    */
-  jsx(Pressable, {
+  React.createElement(Pressable, {
     hidden: true,
     type: "submit"
-  }, jsx(VisuallyHidden, null, "Submit")))) :
+  }, /*#__PURE__*/React.createElement(VisuallyHidden, null, "Submit")))) :
+  /*#__PURE__*/
   /**
    * Field is used here only for the label and spacing
    */
-  jsx(Field, {
+  React.createElement(Field, {
     name: "inlineEdit",
     label: label,
     defaultValue: "",
@@ -231,7 +226,7 @@ const InnerInlineEdit = props => {
 };
 const InlineEdit = props => {
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  return jsx(InnerInlineEdit, props);
+  return /*#__PURE__*/React.createElement(InnerInlineEdit, props);
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/es2019/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/es2019/inline-editable-textfield.js

@@ -1,27 +1,24 @@
+/* inline-editable-textfield.tsx generated by @compiled/babel-plugin v0.32.2 */
 import _extends from "@babel/runtime/helpers/extends";
+import "./inline-editable-textfield.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useRef } from 'react';
+import { cx } from '@atlaskit/css';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import InlineDialog from '@atlaskit/inline-dialog';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import Textfield from '@atlaskit/textfield';
 import { R400 } from '@atlaskit/theme/colors';
 import InlineEdit from './inline-edit';
-const errorIconContainerStyles = xcss({
-  lineHeight: '100%',
-  paddingInlineEnd: 'space.075'
-});
-const readViewForTextFieldStyles = xcss({
-  display: 'flex',
-  font: 'font.body',
-  maxWidth: '100%',
-  paddingBlock: 'space.100',
-  paddingInline: 'space.075',
-  wordBreak: 'break-word'
-});
-const compactStyles = xcss({
-  paddingBlock: 'space.050',
-  paddingInline: 'space.075'
-});
+const errorIconContainerStyles = {
+  root: "_vwz41osq _y4ti12x7"
+};
+const readViewForTextFieldStyles = {
+  root: "_1e0c1txw _11c81oud _p12f1osq _1rjcu2gc _18zr12x7 _1nmz1hna"
+};
+const compactStyles = {
+  root: "_1rjc1b66 _18zr12x7"
+};
 const InlineEditableTextfield = props => {
   const {
     isCompact = false,
@@ -53,7 +50,7 @@ const InlineEditableTextfield = props => {
     }, /*#__PURE__*/React.createElement(Textfield, _extends({}, props, {
       ref: textFieldRef,
       elemAfterInput: isInvalid && /*#__PURE__*/React.createElement(Box, {
-        xcss: errorIconContainerStyles
+        xcss: errorIconContainerStyles.root
       }, /*#__PURE__*/React.createElement(ErrorIcon, {
         label: "error",
         primaryColor: `var(--ds-icon-danger, ${R400})`
@@ -63,7 +60,7 @@ const InlineEditableTextfield = props => {
       autoFocus: true
     }))),
     readView: () => /*#__PURE__*/React.createElement(Box, {
-      xcss: [readViewForTextFieldStyles, isCompact && compactStyles],
+      xcss: cx(readViewForTextFieldStyles.root, isCompact && compactStyles.root),
       "data-compact": isCompact,
       testId: testId && `read-view-${testId}`
     }, defaultValue || placeholder)

package/dist/es2019/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%}
+._16qs1kf5{box-shadow:var(--ds-shadow-overlay,0 4px 8px -2px rgba(9,30,66,.25),0 0 1px rgba(9,30,66,.31))}
+._1bsbxy5q{width:var(--ds-space-400,2pc)}
+._1e0c1txw{display:flex}
+._1mpy1b66:last-child{margin-inline-start:var(--ds-space-050,4px)}
+._1nlxs66q>button{background-color:var(--ds-surface-overlay,rgba(9,30,66,.04))}
+._1o9zidpf{flex-shrink:0}
+._1pby1kze{z-index:200}
+._1pfh12x7{margin-block-start:var(--ds-space-075,6px)}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._kqswstnw{position:absolute}
+._rjxpidpf{inset-inline-end:0}
+._vchhusvi{box-sizing:border-box}
+._l2uv88o1>button:hover{background-color:var(--ds-surface-overlay-hovered,rgba(9,30,66,.08))}
+._7mfvdecw>button:active{background-color:var(--ds-surface-overlay-pressed,rgba(179,212,255,.6))}
+._szlb1x4z>button:active{color:var(--ds-text,#0052cc)}

package/dist/es2019/internal/buttons.js

@@ -1,59 +1,17 @@
+/* buttons.tsx generated by @compiled/babel-plugin v0.32.2 */
 import _extends from "@babel/runtime/helpers/extends";
+import "./buttons.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 /* 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
-import { css, jsx } from '@emotion/react';
 import { IconButton } from '@atlaskit/button/new';
 import ConfirmIcon from '@atlaskit/icon/glyph/check';
 import CancelIcon from '@atlaskit/icon/glyph/cross';
 import { B400, N0, N20A, N30A, N50A, N60A } from '@atlaskit/theme/colors';
-const buttonsContainerStyles = css({
-  display: 'flex',
-  position: 'absolute',
-  flexShrink: 0,
-  insetBlockStart: '100%',
-  insetInlineEnd: 0,
-  marginBlockStart: "var(--ds-space-075, 6px)"
-});
-const buttonWrapperBaseStyles = css({
-  boxSizing: 'border-box',
-  width: "var(--ds-space-400, 32px)",
-  zIndex: 200,
-  backgroundColor: `var(--ds-surface-overlay, ${N0})`,
-  borderRadius: "var(--ds-border-radius, 3px)",
-  boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${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, ${N20A})`
-  },
-  '& > button:hover': {
-    backgroundColor: `var(--ds-surface-overlay-hovered, ${N30A})`
-  },
-  '& > button:active': {
-    backgroundColor: "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))",
-    color: `var(--ds-text, ${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)
- */
+const buttonsContainerStyles = null;
+const buttonWrapperBaseStyles = null;
 const Buttons = ({
   confirmButtonLabel,
   cancelButtonLabel,
@@ -61,24 +19,24 @@ const Buttons = ({
   onCancelClick,
   testId
 }) => {
-  return jsx("div", {
-    css: buttonsContainerStyles
-  }, jsx("div", {
-    css: buttonWrapperBaseStyles,
-    tabIndex: -1
-  }, jsx(IconButton, {
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1e0c1txw _kqswstnw _1o9zidpf _152t1osq _rjxpidpf _1pfh12x7"])
+  }, /*#__PURE__*/React.createElement("div", {
+    tabIndex: -1,
+    className: ax(["_vchhusvi _1bsbxy5q _1pby1kze _bfhk1bhr _2rko1sit _16qs1kf5 _11c81oud _1mpy1b66 _1nlxs66q _l2uv88o1 _7mfvdecw _szlb1x4z"])
+  }, /*#__PURE__*/React.createElement(IconButton, {
     type: "submit",
-    icon: iconProps => jsx(ConfirmIcon, _extends({}, iconProps, {
+    icon: iconProps => /*#__PURE__*/React.createElement(ConfirmIcon, _extends({}, iconProps, {
       size: "small"
     })),
     onMouseDown: onMouseDown,
     label: confirmButtonLabel,
     testId: testId && `${testId}--confirm`
-  })), jsx("div", {
-    css: buttonWrapperBaseStyles,
-    tabIndex: -1
-  }, jsx(IconButton, {
-    icon: iconProps => jsx(CancelIcon, _extends({}, iconProps, {
+  })), /*#__PURE__*/React.createElement("div", {
+    tabIndex: -1,
+    className: ax(["_vchhusvi _1bsbxy5q _1pby1kze _bfhk1bhr _2rko1sit _16qs1kf5 _11c81oud _1mpy1b66 _1nlxs66q _l2uv88o1 _7mfvdecw _szlb1x4z"])
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    icon: iconProps => /*#__PURE__*/React.createElement(CancelIcon, _extends({}, iconProps, {
       size: "small"
     })),
     label: cancelButtonLabel,

package/dist/es2019/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}
+._irr314ae:hover{background-color:var(--ds-background-neutral-subtle-hovered,#ebecf0)}

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

@@ -1,51 +1,15 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* read-view.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./read-view.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { Pressable, xcss } from '@atlaskit/primitives';
+import { Pressable } from '@atlaskit/primitives/compiled';
 import { N30 } from '@atlaskit/theme/colors';
-const readViewContainerStyles = css({
-  lineHeight: 1
-});
-const editButtonStyles = 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'
-  }
-});
-const readViewWrapperStyles = 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, ${N30})`
-  }
-});
-const readViewFitContainerWidthStyles = css({
-  width: '100%'
-});
+const readViewContainerStyles = null;
+const editButtonStyles = {
+  root: "_1e0c1ule _18s8ze3t _1yt4ze3t _r06hglyw _bfhk18uv _189e1grb _1dqoglyw _1h6d1j28 _vwz4kb7n _12ji1r31 _1qu2glyw _12y3idpf _1xp41p6i _14ly1bk5 _1j8znqa1 _mizu1r31 _ra3xglyw _128midpf"
+};
+const readViewWrapperStyles = null;
+const readViewFitContainerWidthStyles = null;
 const DRAG_THRESHOLD = 5;
 const ReadView = ({
   editButtonLabel,
@@ -72,16 +36,15 @@ const ReadView = ({
       postReadViewClick();
     }
   };
-  return jsx("div", {
-    css: readViewContainerStyles
-  }, jsx(Pressable, {
-    xcss: editButtonStyles,
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_vwz4kb7n"])
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    xcss: editButtonStyles.root,
     onClick: onEditRequested,
     ref: editButtonRef,
     testId: testId && `${testId}--edit-button`,
     "aria-label": editButtonLabel
-  }), jsx("div", {
-    css: [readViewWrapperStyles, readViewFitContainerWidth && readViewFitContainerWidthStyles]
+  }), /*#__PURE__*/React.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
@@ -89,14 +52,15 @@ const ReadView = ({
      * 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: e => {
       startX.current = e.clientX;
       startY.current = e.clientY;
     },
-    "data-read-view-fit-container-width": readViewFitContainerWidth
+    "data-read-view-fit-container-width": readViewFitContainerWidth,
+    className: ax(["_1e0c1o8l _vchhusvi _1bsb1wug _p12f1osq _1h6d1j28 _2rko1sit _1dqonqa1 _189e1bk5 _v564thzt _irr314ae", readViewFitContainerWidth && "_1bsb1osq"])
   }, readView()));
 };
 export default ReadView;

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

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

package/dist/esm/inline-edit.js

@@ -1,32 +1,25 @@
+/* inline-edit.tsx generated by @compiled/babel-plugin v0.32.2 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./inline-edit.compiled.css";
+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 React, { useCallback, useRef, 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 { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import Field from '@atlaskit/form/Field';
 import Form from '@atlaskit/form/Form';
 import { fg } from '@atlaskit/platform-feature-flags';
-import Pressable from '@atlaskit/primitives/pressable';
+import { Pressable } from '@atlaskit/primitives/compiled';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import Buttons from './internal/buttons';
 import useButtonFocusHook from './internal/hooks/use-button-focus-hook';
 import ReadView from './internal/read-view';
-var fieldStyles = css({
-  maxWidth: '100%',
-  position: 'relative'
-});
+var fieldStyles = null;
 var analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "13.7.8"
+  packageVersion: "14.0.0"
 };
 var InnerInlineEdit = function InnerInlineEdit(props) {
   var _props$startWithEditV = props.startWithEditViewOpen,
@@ -150,7 +143,7 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
     return "".concat(editButtonLabel, ", ").concat(editLabel);
   };
   var renderReadView = function renderReadView() {
-    return jsx(ReadView, {
+    return /*#__PURE__*/React.createElement(ReadView, {
       editButtonLabel: concatenatedEditButtonLabel(),
       onEditRequested: onEditRequested,
       postReadViewClick: doNotFocusOnEditButton,
@@ -160,7 +153,7 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
       testId: testId
     });
   };
-  return jsx(Form, {
+  return /*#__PURE__*/React.createElement(Form, {
     onSubmit: function onSubmit(data) {
       return onConfirm(data.inlineEdit);
     }
@@ -170,7 +163,7 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
       onSubmit = _ref$formProps.onSubmit,
       formRef = _ref$formProps.ref,
       reset = _ref.reset;
-    return jsx("form", {
+    return /*#__PURE__*/React.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
@@ -190,7 +183,7 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
       },
       onSubmit: onSubmit,
       ref: formRef
-    }, shouldBeEditing ? jsx(Field, {
+    }, shouldBeEditing ? /*#__PURE__*/React.createElement(Field, {
       name: "inlineEdit",
       label: label,
       defaultValue: defaultValue,
@@ -200,17 +193,17 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
     }, function (_ref2) {
       var fieldProps = _ref2.fieldProps,
         error = _ref2.error;
-      return jsx("div", {
-        css: fieldStyles,
+      return /*#__PURE__*/React.createElement("div", {
         onBlur: function onBlur(e) {
           if (!e.currentTarget.contains(e.relatedTarget)) {
             onEditViewWrapperBlur(fieldProps.isInvalid, onSubmit, formRef);
           }
         },
-        onFocus: onEditViewWrapperFocus
+        onFocus: onEditViewWrapperFocus,
+        className: ax(["_p12f1osq _kqswh2mm"])
       }, editView(_objectSpread(_objectSpread({}, fieldProps), {}, {
         errorMessage: error
-      }), editViewRef), !hideActionButtons ? jsx(Buttons, {
+      }), editViewRef), !hideActionButtons ? /*#__PURE__*/React.createElement(Buttons, {
         testId: testId,
         cancelButtonLabel: cancelButtonLabel,
         confirmButtonLabel: confirmButtonLabel,
@@ -225,18 +218,20 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
           _onCancelClick(e);
         }
       }) :
+      /*#__PURE__*/
       /**
        * This is to allow Ctrl + Enter to submit without action buttons
        */
-      jsx(Pressable, {
+      React.createElement(Pressable, {
         hidden: true,
         type: "submit"
-      }, jsx(VisuallyHidden, null, "Submit")));
+      }, /*#__PURE__*/React.createElement(VisuallyHidden, null, "Submit")));
     }) :
+    /*#__PURE__*/
     /**
      * Field is used here only for the label and spacing
      */
-    jsx(Field, {
+    React.createElement(Field, {
       name: "inlineEdit",
       label: label,
       defaultValue: "",
@@ -247,7 +242,7 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
 };
 var InlineEdit = function InlineEdit(props) {
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  return jsx(InnerInlineEdit, props);
+  return /*#__PURE__*/React.createElement(InnerInlineEdit, props);
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/esm/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/esm/inline-editable-textfield.js

@@ -1,29 +1,26 @@
+/* inline-editable-textfield.tsx generated by @compiled/babel-plugin v0.32.2 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["errorMessage", "isInvalid"];
+import "./inline-editable-textfield.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useRef } from 'react';
+import { cx } from '@atlaskit/css';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import InlineDialog from '@atlaskit/inline-dialog';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import Textfield from '@atlaskit/textfield';
 import { R400 } from '@atlaskit/theme/colors';
 import InlineEdit from './inline-edit';
-var errorIconContainerStyles = xcss({
-  lineHeight: '100%',
-  paddingInlineEnd: 'space.075'
-});
-var readViewForTextFieldStyles = xcss({
-  display: 'flex',
-  font: 'font.body',
-  maxWidth: '100%',
-  paddingBlock: 'space.100',
-  paddingInline: 'space.075',
-  wordBreak: 'break-word'
-});
-var compactStyles = 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,
@@ -54,7 +51,7 @@ var InlineEditableTextfield = function InlineEditableTextfield(props) {
       }, /*#__PURE__*/React.createElement(Textfield, _extends({}, props, {
         ref: textFieldRef,
         elemAfterInput: isInvalid && /*#__PURE__*/React.createElement(Box, {
-          xcss: errorIconContainerStyles
+          xcss: errorIconContainerStyles.root
         }, /*#__PURE__*/React.createElement(ErrorIcon, {
           label: "error",
           primaryColor: "var(--ds-icon-danger, ".concat(R400, ")")
@@ -66,7 +63,7 @@ var InlineEditableTextfield = function InlineEditableTextfield(props) {
     },
     readView: function readView() {
       return /*#__PURE__*/React.createElement(Box, {
-        xcss: [readViewForTextFieldStyles, isCompact && compactStyles],
+        xcss: cx(readViewForTextFieldStyles.root, isCompact && compactStyles.root),
         "data-compact": isCompact,
         testId: testId && "read-view-".concat(testId)
       }, defaultValue || placeholder);