@atlaskit/native-embeds-common 2.2.3 → 2.2.5

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/native-embeds-common
 
+## 2.2.5
+
+### Patch Changes
+
+- [`98f123ee15575`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/98f123ee15575) -
+  [ux] Align native embed placeholders in edit mode on first paint
+
+## 2.2.4
+
+### Patch Changes
+
+- [`9135fb9538960`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9135fb9538960) -
+  [ux] Reuse native embed placement for first-paint placeholders
+- Updated dependencies
+
 ## 2.2.3
 
 ### Patch Changes

package/compass.yml

@@ -1,7 +1,7 @@
 configVersion: 1
 id: ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/e056e542-a3ce-4443-88d3-ad37895abc0c
 name: '@atlaskit/native-embeds-common'
-ownerId: ari:cloud:identity::team/ebf6925a-b776-4f99-92b6-6f529449f814 # Eng - Create - Native Content Types - Team Silky (Stacey Douglas)
+ownerId: ari:cloud:identity::team/9a858481-de73-4f94-a602-0df4cdf7b1fe # Whiteboards
 labels:
   - platform-code
   - platform-afm
@@ -16,7 +16,7 @@ links:
     url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master
   - name: Slack Channel
     type: CHAT_CHANNEL
-    url: https://atlassian.enterprise.slack.com/archives/C05BWLL499U # #native-content-types-eng
+    url: https://atlassian.enterprise.slack.com/archives/C0A0XRWTWSU # #proj-cc-wb-db-native-embeds
   - name: Native Embeds Common
     type: REPOSITORY
     url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/native-embeds/native-embeds-common

package/dist/cjs/entry-points/initial-placeholder.compiled.css

@@ -0,0 +1,9 @@
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqonqa1{border-style:solid}
+._1h6d1l7x{border-color:var(--ds-border,#0b120e24)}
+._18m915vq{overflow-y:hidden}
+._1reo15vq{overflow-x:hidden}
+._bfhkhfxm{background-color:var(--ds-surface-sunken,#f8f8f8)}
+._p12f1osq{max-width:100%}
+._vchhusvi{box-sizing:border-box}

package/dist/cjs/entry-points/initial-placeholder.js

@@ -0,0 +1,89 @@
+/* initial-placeholder.tsx generated by @compiled/babel-plugin v0.40.0 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NativeEmbedInitialPlaceholderFrame = exports.NativeEmbedInitialPlaceholder = void 0;
+Object.defineProperty(exports, "resolveNativeEmbedInitialLayout", {
+  enumerable: true,
+  get: function get() {
+    return _initialLayout.resolveNativeEmbedInitialLayout;
+  }
+});
+require("./initial-placeholder.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _initialLayout = require("./initial-layout");
+var _nativeEmbedStyles = require("./native-embed-styles");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Native embed placement must style renderer/editor ancestor wrappers that this component does not own.
+var placeholderFrameStyles = null;
+var borderedPlaceholderFrameStyles = null;
+var borderlessPlaceholderFrameStyles = null;
+var NativeEmbedInitialPlaceholderFrame = exports.NativeEmbedInitialPlaceholderFrame = function NativeEmbedInitialPlaceholderFrame(_ref) {
+  var effectiveHeight = _ref.effectiveHeight,
+    effectiveWidth = _ref.effectiveWidth,
+    _ref$hasEmbedBorder = _ref.hasEmbedBorder,
+    hasEmbedBorder = _ref$hasEmbedBorder === void 0 ? true : _ref$hasEmbedBorder,
+    lockAspectRatio = _ref.lockAspectRatio,
+    placeholderId = _ref.placeholderId,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'native-embed-initial-placeholder' : _ref$testId;
+  var placeholderStyle = {
+    width: effectiveWidth ? "".concat(effectiveWidth, "px") : '100%',
+    height: lockAspectRatio ? 'auto' : "".concat(effectiveHeight, "px"),
+    aspectRatio: lockAspectRatio ? effectiveWidth && effectiveHeight ? "".concat(effectiveWidth, " / ").concat(effectiveHeight) : _initialLayout.NATIVE_EMBED_INITIAL_LAYOUT_FALLBACK_ASPECT_RATIO : undefined
+  };
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    "data-testid": testId
+  }, placeholderId && {
+    'data-ssr-placeholder': placeholderId
+  }, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- width/height/aspectRatio are dynamic ADF + manifest-derived layout values
+    style: placeholderStyle,
+    className: (0, _runtime.ax)(["_1reo15vq _18m915vq _vchhusvi _p12f1osq _bfhkhfxm", hasEmbedBorder ? "_2rkopb1k _1dqonqa1 _189ee4h9 _1h6d1l7x" : "_2rko12b0"])
+  }));
+};
+/**
+ * Renders the shared native embed placeholder contract used by editor loading, renderer interim,
+ * and Confluence SSR paths. The data attributes let the same ancestor placement styles apply before
+ * the full native embed UI is available.
+ */
+var NativeEmbedInitialPlaceholder = exports.NativeEmbedInitialPlaceholder = function NativeEmbedInitialPlaceholder(_ref2) {
+  var _ref2$firstPaint = _ref2.firstPaint,
+    firstPaint = _ref2$firstPaint === void 0 ? false : _ref2$firstPaint,
+    manifest = _ref2.manifest,
+    parameters = _ref2.parameters,
+    placeholderId = _ref2.placeholderId,
+    testId = _ref2.testId;
+  var _resolveNativeEmbedIn = (0, _initialLayout.resolveNativeEmbedInitialLayout)({
+      manifest: manifest,
+      parameters: parameters,
+      placeholderId: placeholderId
+    }),
+    alignment = _resolveNativeEmbedIn.alignment,
+    effectiveHeight = _resolveNativeEmbedIn.effectiveHeight,
+    effectiveWidth = _resolveNativeEmbedIn.effectiveWidth,
+    hasEmbedBorder = _resolveNativeEmbedIn.hasEmbedBorder,
+    lockAspectRatio = _resolveNativeEmbedIn.lockAspectRatio,
+    resolvedPlaceholderId = _resolveNativeEmbedIn.placeholderId;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-native-embed-alignment": alignment,
+    "data-native-embed-first-paint-placeholder": firstPaint ? 'true' : undefined,
+    "data-native-embed-initial-placeholder": "true",
+    "data-native-embed-width": effectiveWidth,
+    "data-native-embed-show-border": hasEmbedBorder ? 'true' : 'false'
+  }, /*#__PURE__*/_react.default.createElement(_react2.Global, {
+    styles: _nativeEmbedStyles.nativeEmbedAlignmentStyles
+  }), /*#__PURE__*/_react.default.createElement(NativeEmbedInitialPlaceholderFrame, {
+    effectiveHeight: effectiveHeight,
+    effectiveWidth: effectiveWidth,
+    hasEmbedBorder: hasEmbedBorder,
+    lockAspectRatio: lockAspectRatio,
+    placeholderId: resolvedPlaceholderId,
+    testId: testId
+  }));
+};

package/dist/cjs/entry-points/native-embed-styles.js

@@ -0,0 +1,207 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.nativeEmbedAlignmentStyles = void 0;
+var _react = require("@emotion/react");
+/**
+ * Injected by the extension UI via Global; also exported for consumers who inject styles elsewhere.
+ */
+/* eslint-disable @repo/internal/styles/no-exported-styles, @atlaskit/design-system/no-nested-styles -- Native embed placement must target renderer/editor ancestor wrappers that the embed component does not own. */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Extension container override requires :has and !important
+
+var wrapGap = "var(--ds-space-150, 12px)";
+var noWrapGap = "var(--ds-space-300, 24px)";
+
+/* eslint-disable @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-important-styles -- Styles injected via Global; !important overrides extension inline width */
+var nativeEmbedAlignmentStyles = exports.nativeEmbedAlignmentStyles = (0, _react.css)({
+  // Remove margin on extension-overflow-wrapper when it contains a native embed to prevent width overflow.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target overflow wrapper by data attribute
+  '.extension-overflow-wrapper:has([data-native-embed-alignment])': {
+    margin: '0 !important'
+  },
+  // The renderer sets overflow-x:auto on .ak-renderer-extension-overflow-container, which clips a
+  // pixel-resized native embed that is wider than the text column and prevents centering from
+  // working (the scroll container also becomes the reference for the 50% offset). Override to
+  // visible so the embed can break out symmetrically on both sides, exactly as images do.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target overflow container by data attribute
+  '.ak-renderer-extension-overflow-container:has([data-native-embed-alignment])': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- !important string requires type cast incompatible with the CSSProperties type
+    overflowX: 'visible !important'
+  },
+  // For a center-aligned embed with an explicit pixel width, the outer .ak-renderer-extension
+  // wrapper's width is set directly as an inline style by the native embed useEffect (to override
+  // the renderer's own inline style="width:100%"). These CSS rules apply the centering transforms
+  // on that same wrapper — now that it has the exact pixel width, margin-left:50% +
+  // translateX(-50%) breaks it out symmetrically, exactly as MediaSingle does for images.
+  // max-width:100cqw prevents overflow beyond the container while still allowing
+  // the embed to break out of the narrow layout column (unlike 100% which would
+  // clamp to the ~760px parent).
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target renderer extension wrapper by data attribute
+  '.ak-renderer-extension:has([data-native-embed-alignment="center"]):has([data-native-embed-width])': {
+    position: 'relative',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- geometric centering offset, not a spacing value
+    marginLeft: '50%',
+    transform: 'translateX(-50%)',
+    maxWidth: '100cqw'
+  },
+  // Before the async native embed UI mounts, no effect is available to size the renderer's outer
+  // extension wrapper. Shrink-wrap it to the placeholder's persisted width so alignment and text
+  // wrapping are correct on first paint. Top-level embeds may break out to the renderer container;
+  // nested embeds clamp to their immediate layout/table/extension parent.
+  // The renderer's inner wrapper is normally an inline-size query container. Inline-size containment
+  // contributes zero intrinsic width, which collapses a fit-content extension wrapper to 0px. Turn
+  // that containment off only while an explicit-width placeholder is mounted; the native embed UI
+  // restores the normal renderer path once it loads and imperatively sizes the outer wrapper.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target the renderer-owned size container by the shared placeholder marker
+  '.ak-renderer-extension-inner-wrapper:has([data-native-embed-initial-placeholder="true"][data-native-embed-width])': {
+    containerType: 'normal'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target the renderer-owned wrapper by the shared native embed placeholder marker
+  '.ak-renderer-extension:has([data-native-embed-initial-placeholder="true"][data-native-embed-width])': {
+    width: 'fit-content !important',
+    maxWidth: '100cqw'
+  },
+  // The editor loading path intentionally keeps its outer extension container at 100% width.
+  // Align the already-sized placeholder frame within that container until the native embed UI
+  // mounts and takes ownership of the outer wrapper's persisted width.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target the editor loading frame through its shared placeholder metadata
+  '[data-native-embed-initial-placeholder="true"][data-native-embed-alignment="center"] > [data-testid="native-embed-initial-placeholder"]': {
+    marginLeft: 'auto',
+    marginRight: 'auto'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target the editor loading frame through its shared placeholder metadata
+  '[data-native-embed-initial-placeholder="true"][data-native-embed-alignment="right"] > [data-testid="native-embed-initial-placeholder"]': {
+    marginLeft: 'auto'
+  },
+  // Some renderer variants omit data-top-level even for top-level extensions. Mirror the native
+  // embed runtime's DOM nesting detection instead: table cells/headers, expands, layouts, enclosing
+  // extensions, sync blocks, and panels clamp the placeholder to the immediate containing node.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Mirror native embed runtime nesting ancestors before its mounting effect is available
+  'td .ak-renderer-extension:has([data-native-embed-initial-placeholder="true"][data-native-embed-width]), th .ak-renderer-extension:has([data-native-embed-initial-placeholder="true"][data-native-embed-width]), [data-node-type="expand"] .ak-renderer-extension:has([data-native-embed-initial-placeholder="true"][data-native-embed-width]), [data-layout-section] .ak-renderer-extension:has([data-native-embed-initial-placeholder="true"][data-native-embed-width]), .ak-renderer-extension .ak-renderer-extension:has([data-native-embed-initial-placeholder="true"][data-native-embed-width]), [data-bodied-sync-block] .ak-renderer-extension:has([data-native-embed-initial-placeholder="true"][data-native-embed-width]), .ak-editor-panel .ak-renderer-extension:has([data-native-embed-initial-placeholder="true"][data-native-embed-width])': {
+    maxWidth: '100%'
+  },
+  // Width: 100% when no explicit width set; fit-content when data-native-embed-width is set.
+  // Combined selectors cover both .extension-container (editor) and .ak-renderer-extension (renderer)
+  // which use different wrapper class names for the same structural element.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by data attribute
+  '.extension-container:has([data-native-embed-alignment]):not(:has([data-native-embed-width])), .ak-renderer-extension:has([data-native-embed-alignment]):not(:has([data-native-embed-width]))': {
+    width: '100% !important',
+    marginLeft: '0 !important',
+    marginRight: '0 !important',
+    paddingLeft: '0 !important',
+    paddingRight: '0 !important'
+  },
+  // Match editor/renderer wrapper clipping and selected-node ring to the native embed frame radius.
+  // Borderless experiences keep the smaller core wrapper radius so their iframe content is not clipped
+  // to a framed shape they do not visually own.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by the resolved showBorder value
+  '.extension-container:has([data-native-embed-show-border="true"]), .ak-renderer-extension:has([data-native-embed-show-border="true"])': {
+    borderRadius: "var(--ds-radius-xlarge, 12px)"
+  },
+  // In the editor, the --native-embed-width CSS variable is set on .extension-container by the
+  // resize plugin. When the embed is nested inside another node (e.g. a table cell or expand),
+  // data-native-embed-nested is present and we use maxWidth so the embed shrinks with the parent.
+  // When the embed is top-level (not nested), we use width so it takes the exact pixel size.
+  // In the renderer, width is set directly as an inline style on .ak-renderer-extension (overriding
+  // the renderer's own inline style="width:100%"), so no CSS variable rule is needed for the renderer.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target nested extension container by data attribute on the container itself
+  '.extension-container[data-native-embed-nested]:has([data-native-embed-alignment]):has([data-native-embed-width])': {
+    maxWidth: 'var(--native-embed-width) !important',
+    paddingLeft: '0 !important',
+    paddingRight: '0 !important'
+  },
+  // The second selector adds an ID-level specificity bump so this rule also wins in full-width mode
+  // (Confluence "wide" page width), where the editor applies `width: 100% !important` to
+  // `.extension-container.block` via a rule scoped under
+  // `.fabric-editor--full-width-mode:not(:has(#chromeless-editor))` with specificity (1, 3, 0).
+  // Without the second selector, the native embed's (0, 3, 0) rule loses the cascade battle.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Second selector matches specificity of editor-core's full-width-mode rule; own ID won't work as our div is inside .extension-container, not an ancestor
+  '.extension-container:not([data-native-embed-nested]):has([data-native-embed-alignment]):has([data-native-embed-width]), .fabric-editor--full-width-mode:not(:has(#chromeless-editor)) .extension-container.block:not([data-native-embed-nested]):has([data-native-embed-alignment]):has([data-native-embed-width])': {
+    width: 'var(--native-embed-width) !important',
+    paddingLeft: '0 !important',
+    paddingRight: '0 !important'
+  },
+  // Layout column resizing can temporarily rebuild column content before the
+  // native embed plugin re-syncs data-native-embed-nested. Fall back to the
+  // actual layout-column DOM ancestry so an embed in a column still shrinks to
+  // the column instead of taking its stored pixel width.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- DOM ancestry fallback for transient missing data-native-embed-nested
+  '.ProseMirror [data-layout-column] .extension-container:has([data-native-embed-alignment]):has([data-native-embed-width]), .fabric-editor--full-width-mode:not(:has(#chromeless-editor)) [data-layout-column] .extension-container.block:has([data-native-embed-alignment]):has([data-native-embed-width])': {
+    width: 'auto !important',
+    maxWidth: 'var(--native-embed-width) !important',
+    paddingLeft: '0 !important',
+    paddingRight: '0 !important'
+  },
+  // Override the extension wrapper's width so alignment margins take effect.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by data attribute
+  '.extension-container:has([data-native-embed-alignment="left"]), .ak-renderer-extension:has([data-native-embed-alignment="left"])': {
+    margin: "".concat(noWrapGap, " auto ").concat(noWrapGap, " 0 !important"),
+    overflow: 'auto'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by data attribute
+  '.extension-container:has([data-native-embed-alignment="center"]), .ak-renderer-extension:has([data-native-embed-alignment="center"])': {
+    margin: "".concat(noWrapGap, " 0 !important"),
+    position: 'relative',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    marginLeft: '0 !important',
+    marginRight: '0 !important'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by data attribute
+  '.extension-container:has([data-native-embed-alignment="right"]), .ak-renderer-extension:has([data-native-embed-alignment="right"])': {
+    margin: "".concat(noWrapGap, " 0 ").concat(noWrapGap, " auto !important"),
+    overflow: 'auto'
+  },
+  // wrap-left / wrap-right: float + margin like MediaSingle so text wraps around the embed.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by data attribute
+  '.extension-container:has([data-native-embed-alignment="wrap-left"])': {
+    float: 'left',
+    margin: "".concat(wrapGap, " ").concat(wrapGap, " ").concat(wrapGap, " auto !important"),
+    maxWidth: "calc((var(--ak-editor-max-container-width, 100%) / 2) - ".concat(wrapGap, ")")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by data attribute
+  '.ak-renderer-extension:has([data-native-embed-alignment="wrap-left"])': {
+    float: 'left',
+    margin: "".concat(wrapGap, " ").concat(wrapGap, " ").concat(wrapGap, " auto !important")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by data attribute
+  '.extension-container:has([data-native-embed-alignment="wrap-right"])': {
+    float: 'right',
+    margin: "".concat(wrapGap, " auto ").concat(wrapGap, " ").concat(wrapGap, " !important"),
+    maxWidth: "calc((var(--ak-editor-max-container-width, 100%) / 2) - ".concat(wrapGap, ")")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by data attribute
+  '.ak-renderer-extension:has([data-native-embed-alignment="wrap-right"])': {
+    float: 'right',
+    margin: "".concat(wrapGap, " auto ").concat(wrapGap, " ").concat(wrapGap, " !important")
+  },
+  // Suppress the hover box-shadow on the extension container for all native embeds.
+  // Native embeds provide their own chrome so the generic extension hover ring is not appropriate.
+  // The selection ring (from .ak-editor-selected-node) is also applied as a box-shadow,
+  // and would be incorrectly hidden on hover without the :not() guard.
+  // Using :not(.ak-editor-selected-node *) avoids coupling to the intermediate DOM structure.
+  // In the renderer there is no selection ring so the :not() guard is not needed.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrapper hover by data attribute
+  '.extension-container:has([data-native-embed-alignment]):not(.ak-editor-selected-node *):hover': {
+    boxShadow: 'none !important'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target renderer extension wrapper hover by data attribute
+  '.ak-renderer-extension:has([data-native-embed-alignment]):hover': {
+    boxShadow: 'none !important'
+  },
+  // Suppress the selection ring (box-shadow from .ak-editor-selected-node) for database embeds.
+  // Database embeds use appearance="minimal" with no content border, so the selection ring
+  // creates a jarring visual effect around a borderless embed.
+  // The box-shadow is applied by editor-core to `.extension-container` via the selector:
+  //   `.extensionView-content-wrap.ak-editor-selected-node > span > .extension-container`
+  // We target `.extension-container` directly using :has() to check for the experience attribute
+  // on the inner div, matching regardless of the intermediate DOM structure.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension-container for database embeds when selected
+  '.extension-container:has([data-native-embed-experience="database"])': {
+    boxShadow: 'none !important'
+  }
+});
+
+/* eslint-enable @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-important-styles */

package/dist/cjs/ui/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.40.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/es2019/entry-points/initial-placeholder.compiled.css

@@ -0,0 +1,9 @@
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqonqa1{border-style:solid}
+._1h6d1l7x{border-color:var(--ds-border,#0b120e24)}
+._18m915vq{overflow-y:hidden}
+._1reo15vq{overflow-x:hidden}
+._bfhkhfxm{background-color:var(--ds-surface-sunken,#f8f8f8)}
+._p12f1osq{max-width:100%}
+._vchhusvi{box-sizing:border-box}

package/dist/es2019/entry-points/initial-placeholder.js

@@ -0,0 +1,77 @@
+/* initial-placeholder.tsx generated by @compiled/babel-plugin v0.40.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./initial-placeholder.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Native embed placement must style renderer/editor ancestor wrappers that this component does not own.
+import { Global } from '@emotion/react';
+import { NATIVE_EMBED_INITIAL_LAYOUT_FALLBACK_ASPECT_RATIO, resolveNativeEmbedInitialLayout } from './initial-layout';
+import { nativeEmbedAlignmentStyles } from './native-embed-styles';
+export { resolveNativeEmbedInitialLayout };
+const placeholderFrameStyles = null;
+const borderedPlaceholderFrameStyles = null;
+const borderlessPlaceholderFrameStyles = null;
+export const NativeEmbedInitialPlaceholderFrame = ({
+  effectiveHeight,
+  effectiveWidth,
+  hasEmbedBorder = true,
+  lockAspectRatio,
+  placeholderId,
+  testId = 'native-embed-initial-placeholder'
+}) => {
+  const placeholderStyle = {
+    width: effectiveWidth ? `${effectiveWidth}px` : '100%',
+    height: lockAspectRatio ? 'auto' : `${effectiveHeight}px`,
+    aspectRatio: lockAspectRatio ? effectiveWidth && effectiveHeight ? `${effectiveWidth} / ${effectiveHeight}` : NATIVE_EMBED_INITIAL_LAYOUT_FALLBACK_ASPECT_RATIO : undefined
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-testid": testId
+  }, placeholderId && {
+    'data-ssr-placeholder': placeholderId
+  }, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- width/height/aspectRatio are dynamic ADF + manifest-derived layout values
+    style: placeholderStyle,
+    className: ax(["_1reo15vq _18m915vq _vchhusvi _p12f1osq _bfhkhfxm", hasEmbedBorder ? "_2rkopb1k _1dqonqa1 _189ee4h9 _1h6d1l7x" : "_2rko12b0"])
+  }));
+};
+/**
+ * Renders the shared native embed placeholder contract used by editor loading, renderer interim,
+ * and Confluence SSR paths. The data attributes let the same ancestor placement styles apply before
+ * the full native embed UI is available.
+ */
+export const NativeEmbedInitialPlaceholder = ({
+  firstPaint = false,
+  manifest,
+  parameters,
+  placeholderId,
+  testId
+}) => {
+  const {
+    alignment,
+    effectiveHeight,
+    effectiveWidth,
+    hasEmbedBorder,
+    lockAspectRatio,
+    placeholderId: resolvedPlaceholderId
+  } = resolveNativeEmbedInitialLayout({
+    manifest,
+    parameters,
+    placeholderId
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    "data-native-embed-alignment": alignment,
+    "data-native-embed-first-paint-placeholder": firstPaint ? 'true' : undefined,
+    "data-native-embed-initial-placeholder": "true",
+    "data-native-embed-width": effectiveWidth,
+    "data-native-embed-show-border": hasEmbedBorder ? 'true' : 'false'
+  }, /*#__PURE__*/React.createElement(Global, {
+    styles: nativeEmbedAlignmentStyles
+  }), /*#__PURE__*/React.createElement(NativeEmbedInitialPlaceholderFrame, {
+    effectiveHeight: effectiveHeight,
+    effectiveWidth: effectiveWidth,
+    hasEmbedBorder: hasEmbedBorder,
+    lockAspectRatio: lockAspectRatio,
+    placeholderId: resolvedPlaceholderId,
+    testId: testId
+  }));
+};

package/dist/es2019/entry-points/native-embed-styles.js

@@ -0,0 +1,200 @@
+/**
+ * Injected by the extension UI via Global; also exported for consumers who inject styles elsewhere.
+ */
+/* eslint-disable @repo/internal/styles/no-exported-styles, @atlaskit/design-system/no-nested-styles -- Native embed placement must target renderer/editor ancestor wrappers that the embed component does not own. */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Extension container override requires :has and !important
+import { css } from '@emotion/react';
+const wrapGap = "var(--ds-space-150, 12px)";
+const noWrapGap = "var(--ds-space-300, 24px)";
+
+/* eslint-disable @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-important-styles -- Styles injected via Global; !important overrides extension inline width */
+export const nativeEmbedAlignmentStyles = css({
+  // Remove margin on extension-overflow-wrapper when it contains a native embed to prevent width overflow.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target overflow wrapper by data attribute
+  '.extension-overflow-wrapper:has([data-native-embed-alignment])': {
+    margin: '0 !important'
+  },
+  // The renderer sets overflow-x:auto on .ak-renderer-extension-overflow-container, which clips a
+  // pixel-resized native embed that is wider than the text column and prevents centering from
+  // working (the scroll container also becomes the reference for the 50% offset). Override to
+  // visible so the embed can break out symmetrically on both sides, exactly as images do.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target overflow container by data attribute
+  '.ak-renderer-extension-overflow-container:has([data-native-embed-alignment])': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- !important string requires type cast incompatible with the CSSProperties type
+    overflowX: 'visible !important'
+  },
+  // For a center-aligned embed with an explicit pixel width, the outer .ak-renderer-extension
+  // wrapper's width is set directly as an inline style by the native embed useEffect (to override
+  // the renderer's own inline style="width:100%"). These CSS rules apply the centering transforms
+  // on that same wrapper — now that it has the exact pixel width, margin-left:50% +
+  // translateX(-50%) breaks it out symmetrically, exactly as MediaSingle does for images.
+  // max-width:100cqw prevents overflow beyond the container while still allowing
+  // the embed to break out of the narrow layout column (unlike 100% which would
+  // clamp to the ~760px parent).
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target renderer extension wrapper by data attribute
+  '.ak-renderer-extension:has([data-native-embed-alignment="center"]):has([data-native-embed-width])': {
+    position: 'relative',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- geometric centering offset, not a spacing value
+    marginLeft: '50%',
+    transform: 'translateX(-50%)',
+    maxWidth: '100cqw'
+  },
+  // Before the async native embed UI mounts, no effect is available to size the renderer's outer
+  // extension wrapper. Shrink-wrap it to the placeholder's persisted width so alignment and text
+  // wrapping are correct on first paint. Top-level embeds may break out to the renderer container;
+  // nested embeds clamp to their immediate layout/table/extension parent.
+  // The renderer's inner wrapper is normally an inline-size query container. Inline-size containment
+  // contributes zero intrinsic width, which collapses a fit-content extension wrapper to 0px. Turn
+  // that containment off only while an explicit-width placeholder is mounted; the native embed UI
+  // restores the normal renderer path once it loads and imperatively sizes the outer wrapper.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target the renderer-owned size container by the shared placeholder marker
+  '.ak-renderer-extension-inner-wrapper:has([data-native-embed-initial-placeholder="true"][data-native-embed-width])': {
+    containerType: 'normal'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target the renderer-owned wrapper by the shared native embed placeholder marker
+  '.ak-renderer-extension:has([data-native-embed-initial-placeholder="true"][data-native-embed-width])': {
+    width: 'fit-content !important',
+    maxWidth: '100cqw'
+  },
+  // The editor loading path intentionally keeps its outer extension container at 100% width.
+  // Align the already-sized placeholder frame within that container until the native embed UI
+  // mounts and takes ownership of the outer wrapper's persisted width.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target the editor loading frame through its shared placeholder metadata
+  '[data-native-embed-initial-placeholder="true"][data-native-embed-alignment="center"] > [data-testid="native-embed-initial-placeholder"]': {
+    marginLeft: 'auto',
+    marginRight: 'auto'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target the editor loading frame through its shared placeholder metadata
+  '[data-native-embed-initial-placeholder="true"][data-native-embed-alignment="right"] > [data-testid="native-embed-initial-placeholder"]': {
+    marginLeft: 'auto'
+  },
+  // Some renderer variants omit data-top-level even for top-level extensions. Mirror the native
+  // embed runtime's DOM nesting detection instead: table cells/headers, expands, layouts, enclosing
+  // extensions, sync blocks, and panels clamp the placeholder to the immediate containing node.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Mirror native embed runtime nesting ancestors before its mounting effect is available
+  'td .ak-renderer-extension:has([data-native-embed-initial-placeholder="true"][data-native-embed-width]), th .ak-renderer-extension:has([data-native-embed-initial-placeholder="true"][data-native-embed-width]), [data-node-type="expand"] .ak-renderer-extension:has([data-native-embed-initial-placeholder="true"][data-native-embed-width]), [data-layout-section] .ak-renderer-extension:has([data-native-embed-initial-placeholder="true"][data-native-embed-width]), .ak-renderer-extension .ak-renderer-extension:has([data-native-embed-initial-placeholder="true"][data-native-embed-width]), [data-bodied-sync-block] .ak-renderer-extension:has([data-native-embed-initial-placeholder="true"][data-native-embed-width]), .ak-editor-panel .ak-renderer-extension:has([data-native-embed-initial-placeholder="true"][data-native-embed-width])': {
+    maxWidth: '100%'
+  },
+  // Width: 100% when no explicit width set; fit-content when data-native-embed-width is set.
+  // Combined selectors cover both .extension-container (editor) and .ak-renderer-extension (renderer)
+  // which use different wrapper class names for the same structural element.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by data attribute
+  '.extension-container:has([data-native-embed-alignment]):not(:has([data-native-embed-width])), .ak-renderer-extension:has([data-native-embed-alignment]):not(:has([data-native-embed-width]))': {
+    width: '100% !important',
+    marginLeft: '0 !important',
+    marginRight: '0 !important',
+    paddingLeft: '0 !important',
+    paddingRight: '0 !important'
+  },
+  // Match editor/renderer wrapper clipping and selected-node ring to the native embed frame radius.
+  // Borderless experiences keep the smaller core wrapper radius so their iframe content is not clipped
+  // to a framed shape they do not visually own.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by the resolved showBorder value
+  '.extension-container:has([data-native-embed-show-border="true"]), .ak-renderer-extension:has([data-native-embed-show-border="true"])': {
+    borderRadius: "var(--ds-radius-xlarge, 12px)"
+  },
+  // In the editor, the --native-embed-width CSS variable is set on .extension-container by the
+  // resize plugin. When the embed is nested inside another node (e.g. a table cell or expand),
+  // data-native-embed-nested is present and we use maxWidth so the embed shrinks with the parent.
+  // When the embed is top-level (not nested), we use width so it takes the exact pixel size.
+  // In the renderer, width is set directly as an inline style on .ak-renderer-extension (overriding
+  // the renderer's own inline style="width:100%"), so no CSS variable rule is needed for the renderer.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target nested extension container by data attribute on the container itself
+  '.extension-container[data-native-embed-nested]:has([data-native-embed-alignment]):has([data-native-embed-width])': {
+    maxWidth: 'var(--native-embed-width) !important',
+    paddingLeft: '0 !important',
+    paddingRight: '0 !important'
+  },
+  // The second selector adds an ID-level specificity bump so this rule also wins in full-width mode
+  // (Confluence "wide" page width), where the editor applies `width: 100% !important` to
+  // `.extension-container.block` via a rule scoped under
+  // `.fabric-editor--full-width-mode:not(:has(#chromeless-editor))` with specificity (1, 3, 0).
+  // Without the second selector, the native embed's (0, 3, 0) rule loses the cascade battle.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Second selector matches specificity of editor-core's full-width-mode rule; own ID won't work as our div is inside .extension-container, not an ancestor
+  '.extension-container:not([data-native-embed-nested]):has([data-native-embed-alignment]):has([data-native-embed-width]), .fabric-editor--full-width-mode:not(:has(#chromeless-editor)) .extension-container.block:not([data-native-embed-nested]):has([data-native-embed-alignment]):has([data-native-embed-width])': {
+    width: 'var(--native-embed-width) !important',
+    paddingLeft: '0 !important',
+    paddingRight: '0 !important'
+  },
+  // Layout column resizing can temporarily rebuild column content before the
+  // native embed plugin re-syncs data-native-embed-nested. Fall back to the
+  // actual layout-column DOM ancestry so an embed in a column still shrinks to
+  // the column instead of taking its stored pixel width.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- DOM ancestry fallback for transient missing data-native-embed-nested
+  '.ProseMirror [data-layout-column] .extension-container:has([data-native-embed-alignment]):has([data-native-embed-width]), .fabric-editor--full-width-mode:not(:has(#chromeless-editor)) [data-layout-column] .extension-container.block:has([data-native-embed-alignment]):has([data-native-embed-width])': {
+    width: 'auto !important',
+    maxWidth: 'var(--native-embed-width) !important',
+    paddingLeft: '0 !important',
+    paddingRight: '0 !important'
+  },
+  // Override the extension wrapper's width so alignment margins take effect.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by data attribute
+  '.extension-container:has([data-native-embed-alignment="left"]), .ak-renderer-extension:has([data-native-embed-alignment="left"])': {
+    margin: `${noWrapGap} auto ${noWrapGap} 0 !important`,
+    overflow: 'auto'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by data attribute
+  '.extension-container:has([data-native-embed-alignment="center"]), .ak-renderer-extension:has([data-native-embed-alignment="center"])': {
+    margin: `${noWrapGap} 0 !important`,
+    position: 'relative',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    marginLeft: '0 !important',
+    marginRight: '0 !important'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by data attribute
+  '.extension-container:has([data-native-embed-alignment="right"]), .ak-renderer-extension:has([data-native-embed-alignment="right"])': {
+    margin: `${noWrapGap} 0 ${noWrapGap} auto !important`,
+    overflow: 'auto'
+  },
+  // wrap-left / wrap-right: float + margin like MediaSingle so text wraps around the embed.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by data attribute
+  '.extension-container:has([data-native-embed-alignment="wrap-left"])': {
+    float: 'left',
+    margin: `${wrapGap} ${wrapGap} ${wrapGap} auto !important`,
+    maxWidth: `calc((var(--ak-editor-max-container-width, 100%) / 2) - ${wrapGap})`
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by data attribute
+  '.ak-renderer-extension:has([data-native-embed-alignment="wrap-left"])': {
+    float: 'left',
+    margin: `${wrapGap} ${wrapGap} ${wrapGap} auto !important`
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by data attribute
+  '.extension-container:has([data-native-embed-alignment="wrap-right"])': {
+    float: 'right',
+    margin: `${wrapGap} auto ${wrapGap} ${wrapGap} !important`,
+    maxWidth: `calc((var(--ak-editor-max-container-width, 100%) / 2) - ${wrapGap})`
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by data attribute
+  '.ak-renderer-extension:has([data-native-embed-alignment="wrap-right"])': {
+    float: 'right',
+    margin: `${wrapGap} auto ${wrapGap} ${wrapGap} !important`
+  },
+  // Suppress the hover box-shadow on the extension container for all native embeds.
+  // Native embeds provide their own chrome so the generic extension hover ring is not appropriate.
+  // The selection ring (from .ak-editor-selected-node) is also applied as a box-shadow,
+  // and would be incorrectly hidden on hover without the :not() guard.
+  // Using :not(.ak-editor-selected-node *) avoids coupling to the intermediate DOM structure.
+  // In the renderer there is no selection ring so the :not() guard is not needed.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrapper hover by data attribute
+  '.extension-container:has([data-native-embed-alignment]):not(.ak-editor-selected-node *):hover': {
+    boxShadow: 'none !important'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target renderer extension wrapper hover by data attribute
+  '.ak-renderer-extension:has([data-native-embed-alignment]):hover': {
+    boxShadow: 'none !important'
+  },
+  // Suppress the selection ring (box-shadow from .ak-editor-selected-node) for database embeds.
+  // Database embeds use appearance="minimal" with no content border, so the selection ring
+  // creates a jarring visual effect around a borderless embed.
+  // The box-shadow is applied by editor-core to `.extension-container` via the selector:
+  //   `.extensionView-content-wrap.ak-editor-selected-node > span > .extension-container`
+  // We target `.extension-container` directly using :has() to check for the experience attribute
+  // on the inner div, matching regardless of the intermediate DOM structure.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension-container for database embeds when selected
+  '.extension-container:has([data-native-embed-experience="database"])': {
+    boxShadow: 'none !important'
+  }
+});
+
+/* eslint-enable @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-important-styles */

package/dist/es2019/ui/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.40.0 */
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback } from 'react';

package/dist/esm/entry-points/initial-placeholder.compiled.css

@@ -0,0 +1,9 @@
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqonqa1{border-style:solid}
+._1h6d1l7x{border-color:var(--ds-border,#0b120e24)}
+._18m915vq{overflow-y:hidden}
+._1reo15vq{overflow-x:hidden}
+._bfhkhfxm{background-color:var(--ds-surface-sunken,#f8f8f8)}
+._p12f1osq{max-width:100%}
+._vchhusvi{box-sizing:border-box}

package/dist/esm/entry-points/initial-placeholder.js

@@ -0,0 +1,77 @@
+/* initial-placeholder.tsx generated by @compiled/babel-plugin v0.40.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./initial-placeholder.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Native embed placement must style renderer/editor ancestor wrappers that this component does not own.
+import { Global } from '@emotion/react';
+import { NATIVE_EMBED_INITIAL_LAYOUT_FALLBACK_ASPECT_RATIO, resolveNativeEmbedInitialLayout } from './initial-layout';
+import { nativeEmbedAlignmentStyles } from './native-embed-styles';
+export { resolveNativeEmbedInitialLayout };
+var placeholderFrameStyles = null;
+var borderedPlaceholderFrameStyles = null;
+var borderlessPlaceholderFrameStyles = null;
+export var NativeEmbedInitialPlaceholderFrame = function NativeEmbedInitialPlaceholderFrame(_ref) {
+  var effectiveHeight = _ref.effectiveHeight,
+    effectiveWidth = _ref.effectiveWidth,
+    _ref$hasEmbedBorder = _ref.hasEmbedBorder,
+    hasEmbedBorder = _ref$hasEmbedBorder === void 0 ? true : _ref$hasEmbedBorder,
+    lockAspectRatio = _ref.lockAspectRatio,
+    placeholderId = _ref.placeholderId,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'native-embed-initial-placeholder' : _ref$testId;
+  var placeholderStyle = {
+    width: effectiveWidth ? "".concat(effectiveWidth, "px") : '100%',
+    height: lockAspectRatio ? 'auto' : "".concat(effectiveHeight, "px"),
+    aspectRatio: lockAspectRatio ? effectiveWidth && effectiveHeight ? "".concat(effectiveWidth, " / ").concat(effectiveHeight) : NATIVE_EMBED_INITIAL_LAYOUT_FALLBACK_ASPECT_RATIO : undefined
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-testid": testId
+  }, placeholderId && {
+    'data-ssr-placeholder': placeholderId
+  }, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- width/height/aspectRatio are dynamic ADF + manifest-derived layout values
+    style: placeholderStyle,
+    className: ax(["_1reo15vq _18m915vq _vchhusvi _p12f1osq _bfhkhfxm", hasEmbedBorder ? "_2rkopb1k _1dqonqa1 _189ee4h9 _1h6d1l7x" : "_2rko12b0"])
+  }));
+};
+/**
+ * Renders the shared native embed placeholder contract used by editor loading, renderer interim,
+ * and Confluence SSR paths. The data attributes let the same ancestor placement styles apply before
+ * the full native embed UI is available.
+ */
+export var NativeEmbedInitialPlaceholder = function NativeEmbedInitialPlaceholder(_ref2) {
+  var _ref2$firstPaint = _ref2.firstPaint,
+    firstPaint = _ref2$firstPaint === void 0 ? false : _ref2$firstPaint,
+    manifest = _ref2.manifest,
+    parameters = _ref2.parameters,
+    placeholderId = _ref2.placeholderId,
+    testId = _ref2.testId;
+  var _resolveNativeEmbedIn = resolveNativeEmbedInitialLayout({
+      manifest: manifest,
+      parameters: parameters,
+      placeholderId: placeholderId
+    }),
+    alignment = _resolveNativeEmbedIn.alignment,
+    effectiveHeight = _resolveNativeEmbedIn.effectiveHeight,
+    effectiveWidth = _resolveNativeEmbedIn.effectiveWidth,
+    hasEmbedBorder = _resolveNativeEmbedIn.hasEmbedBorder,
+    lockAspectRatio = _resolveNativeEmbedIn.lockAspectRatio,
+    resolvedPlaceholderId = _resolveNativeEmbedIn.placeholderId;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-native-embed-alignment": alignment,
+    "data-native-embed-first-paint-placeholder": firstPaint ? 'true' : undefined,
+    "data-native-embed-initial-placeholder": "true",
+    "data-native-embed-width": effectiveWidth,
+    "data-native-embed-show-border": hasEmbedBorder ? 'true' : 'false'
+  }, /*#__PURE__*/React.createElement(Global, {
+    styles: nativeEmbedAlignmentStyles
+  }), /*#__PURE__*/React.createElement(NativeEmbedInitialPlaceholderFrame, {
+    effectiveHeight: effectiveHeight,
+    effectiveWidth: effectiveWidth,
+    hasEmbedBorder: hasEmbedBorder,
+    lockAspectRatio: lockAspectRatio,
+    placeholderId: resolvedPlaceholderId,
+    testId: testId
+  }));
+};

package/dist/esm/entry-points/native-embed-styles.js

@@ -0,0 +1,200 @@
+/**
+ * Injected by the extension UI via Global; also exported for consumers who inject styles elsewhere.
+ */
+/* eslint-disable @repo/internal/styles/no-exported-styles, @atlaskit/design-system/no-nested-styles -- Native embed placement must target renderer/editor ancestor wrappers that the embed component does not own. */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Extension container override requires :has and !important
+import { css } from '@emotion/react';
+var wrapGap = "var(--ds-space-150, 12px)";
+var noWrapGap = "var(--ds-space-300, 24px)";
+
+/* eslint-disable @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-important-styles -- Styles injected via Global; !important overrides extension inline width */
+export var nativeEmbedAlignmentStyles = css({
+  // Remove margin on extension-overflow-wrapper when it contains a native embed to prevent width overflow.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target overflow wrapper by data attribute
+  '.extension-overflow-wrapper:has([data-native-embed-alignment])': {
+    margin: '0 !important'
+  },
+  // The renderer sets overflow-x:auto on .ak-renderer-extension-overflow-container, which clips a
+  // pixel-resized native embed that is wider than the text column and prevents centering from
+  // working (the scroll container also becomes the reference for the 50% offset). Override to
+  // visible so the embed can break out symmetrically on both sides, exactly as images do.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target overflow container by data attribute
+  '.ak-renderer-extension-overflow-container:has([data-native-embed-alignment])': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- !important string requires type cast incompatible with the CSSProperties type
+    overflowX: 'visible !important'
+  },
+  // For a center-aligned embed with an explicit pixel width, the outer .ak-renderer-extension
+  // wrapper's width is set directly as an inline style by the native embed useEffect (to override
+  // the renderer's own inline style="width:100%"). These CSS rules apply the centering transforms
+  // on that same wrapper — now that it has the exact pixel width, margin-left:50% +
+  // translateX(-50%) breaks it out symmetrically, exactly as MediaSingle does for images.
+  // max-width:100cqw prevents overflow beyond the container while still allowing
+  // the embed to break out of the narrow layout column (unlike 100% which would
+  // clamp to the ~760px parent).
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target renderer extension wrapper by data attribute
+  '.ak-renderer-extension:has([data-native-embed-alignment="center"]):has([data-native-embed-width])': {
+    position: 'relative',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- geometric centering offset, not a spacing value
+    marginLeft: '50%',
+    transform: 'translateX(-50%)',
+    maxWidth: '100cqw'
+  },
+  // Before the async native embed UI mounts, no effect is available to size the renderer's outer
+  // extension wrapper. Shrink-wrap it to the placeholder's persisted width so alignment and text
+  // wrapping are correct on first paint. Top-level embeds may break out to the renderer container;
+  // nested embeds clamp to their immediate layout/table/extension parent.
+  // The renderer's inner wrapper is normally an inline-size query container. Inline-size containment
+  // contributes zero intrinsic width, which collapses a fit-content extension wrapper to 0px. Turn
+  // that containment off only while an explicit-width placeholder is mounted; the native embed UI
+  // restores the normal renderer path once it loads and imperatively sizes the outer wrapper.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target the renderer-owned size container by the shared placeholder marker
+  '.ak-renderer-extension-inner-wrapper:has([data-native-embed-initial-placeholder="true"][data-native-embed-width])': {
+    containerType: 'normal'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target the renderer-owned wrapper by the shared native embed placeholder marker
+  '.ak-renderer-extension:has([data-native-embed-initial-placeholder="true"][data-native-embed-width])': {
+    width: 'fit-content !important',
+    maxWidth: '100cqw'
+  },
+  // The editor loading path intentionally keeps its outer extension container at 100% width.
+  // Align the already-sized placeholder frame within that container until the native embed UI
+  // mounts and takes ownership of the outer wrapper's persisted width.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target the editor loading frame through its shared placeholder metadata
+  '[data-native-embed-initial-placeholder="true"][data-native-embed-alignment="center"] > [data-testid="native-embed-initial-placeholder"]': {
+    marginLeft: 'auto',
+    marginRight: 'auto'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target the editor loading frame through its shared placeholder metadata
+  '[data-native-embed-initial-placeholder="true"][data-native-embed-alignment="right"] > [data-testid="native-embed-initial-placeholder"]': {
+    marginLeft: 'auto'
+  },
+  // Some renderer variants omit data-top-level even for top-level extensions. Mirror the native
+  // embed runtime's DOM nesting detection instead: table cells/headers, expands, layouts, enclosing
+  // extensions, sync blocks, and panels clamp the placeholder to the immediate containing node.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Mirror native embed runtime nesting ancestors before its mounting effect is available
+  'td .ak-renderer-extension:has([data-native-embed-initial-placeholder="true"][data-native-embed-width]), th .ak-renderer-extension:has([data-native-embed-initial-placeholder="true"][data-native-embed-width]), [data-node-type="expand"] .ak-renderer-extension:has([data-native-embed-initial-placeholder="true"][data-native-embed-width]), [data-layout-section] .ak-renderer-extension:has([data-native-embed-initial-placeholder="true"][data-native-embed-width]), .ak-renderer-extension .ak-renderer-extension:has([data-native-embed-initial-placeholder="true"][data-native-embed-width]), [data-bodied-sync-block] .ak-renderer-extension:has([data-native-embed-initial-placeholder="true"][data-native-embed-width]), .ak-editor-panel .ak-renderer-extension:has([data-native-embed-initial-placeholder="true"][data-native-embed-width])': {
+    maxWidth: '100%'
+  },
+  // Width: 100% when no explicit width set; fit-content when data-native-embed-width is set.
+  // Combined selectors cover both .extension-container (editor) and .ak-renderer-extension (renderer)
+  // which use different wrapper class names for the same structural element.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by data attribute
+  '.extension-container:has([data-native-embed-alignment]):not(:has([data-native-embed-width])), .ak-renderer-extension:has([data-native-embed-alignment]):not(:has([data-native-embed-width]))': {
+    width: '100% !important',
+    marginLeft: '0 !important',
+    marginRight: '0 !important',
+    paddingLeft: '0 !important',
+    paddingRight: '0 !important'
+  },
+  // Match editor/renderer wrapper clipping and selected-node ring to the native embed frame radius.
+  // Borderless experiences keep the smaller core wrapper radius so their iframe content is not clipped
+  // to a framed shape they do not visually own.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by the resolved showBorder value
+  '.extension-container:has([data-native-embed-show-border="true"]), .ak-renderer-extension:has([data-native-embed-show-border="true"])': {
+    borderRadius: "var(--ds-radius-xlarge, 12px)"
+  },
+  // In the editor, the --native-embed-width CSS variable is set on .extension-container by the
+  // resize plugin. When the embed is nested inside another node (e.g. a table cell or expand),
+  // data-native-embed-nested is present and we use maxWidth so the embed shrinks with the parent.
+  // When the embed is top-level (not nested), we use width so it takes the exact pixel size.
+  // In the renderer, width is set directly as an inline style on .ak-renderer-extension (overriding
+  // the renderer's own inline style="width:100%"), so no CSS variable rule is needed for the renderer.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target nested extension container by data attribute on the container itself
+  '.extension-container[data-native-embed-nested]:has([data-native-embed-alignment]):has([data-native-embed-width])': {
+    maxWidth: 'var(--native-embed-width) !important',
+    paddingLeft: '0 !important',
+    paddingRight: '0 !important'
+  },
+  // The second selector adds an ID-level specificity bump so this rule also wins in full-width mode
+  // (Confluence "wide" page width), where the editor applies `width: 100% !important` to
+  // `.extension-container.block` via a rule scoped under
+  // `.fabric-editor--full-width-mode:not(:has(#chromeless-editor))` with specificity (1, 3, 0).
+  // Without the second selector, the native embed's (0, 3, 0) rule loses the cascade battle.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Second selector matches specificity of editor-core's full-width-mode rule; own ID won't work as our div is inside .extension-container, not an ancestor
+  '.extension-container:not([data-native-embed-nested]):has([data-native-embed-alignment]):has([data-native-embed-width]), .fabric-editor--full-width-mode:not(:has(#chromeless-editor)) .extension-container.block:not([data-native-embed-nested]):has([data-native-embed-alignment]):has([data-native-embed-width])': {
+    width: 'var(--native-embed-width) !important',
+    paddingLeft: '0 !important',
+    paddingRight: '0 !important'
+  },
+  // Layout column resizing can temporarily rebuild column content before the
+  // native embed plugin re-syncs data-native-embed-nested. Fall back to the
+  // actual layout-column DOM ancestry so an embed in a column still shrinks to
+  // the column instead of taking its stored pixel width.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- DOM ancestry fallback for transient missing data-native-embed-nested
+  '.ProseMirror [data-layout-column] .extension-container:has([data-native-embed-alignment]):has([data-native-embed-width]), .fabric-editor--full-width-mode:not(:has(#chromeless-editor)) [data-layout-column] .extension-container.block:has([data-native-embed-alignment]):has([data-native-embed-width])': {
+    width: 'auto !important',
+    maxWidth: 'var(--native-embed-width) !important',
+    paddingLeft: '0 !important',
+    paddingRight: '0 !important'
+  },
+  // Override the extension wrapper's width so alignment margins take effect.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by data attribute
+  '.extension-container:has([data-native-embed-alignment="left"]), .ak-renderer-extension:has([data-native-embed-alignment="left"])': {
+    margin: "".concat(noWrapGap, " auto ").concat(noWrapGap, " 0 !important"),
+    overflow: 'auto'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by data attribute
+  '.extension-container:has([data-native-embed-alignment="center"]), .ak-renderer-extension:has([data-native-embed-alignment="center"])': {
+    margin: "".concat(noWrapGap, " 0 !important"),
+    position: 'relative',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    marginLeft: '0 !important',
+    marginRight: '0 !important'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by data attribute
+  '.extension-container:has([data-native-embed-alignment="right"]), .ak-renderer-extension:has([data-native-embed-alignment="right"])': {
+    margin: "".concat(noWrapGap, " 0 ").concat(noWrapGap, " auto !important"),
+    overflow: 'auto'
+  },
+  // wrap-left / wrap-right: float + margin like MediaSingle so text wraps around the embed.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by data attribute
+  '.extension-container:has([data-native-embed-alignment="wrap-left"])': {
+    float: 'left',
+    margin: "".concat(wrapGap, " ").concat(wrapGap, " ").concat(wrapGap, " auto !important"),
+    maxWidth: "calc((var(--ak-editor-max-container-width, 100%) / 2) - ".concat(wrapGap, ")")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by data attribute
+  '.ak-renderer-extension:has([data-native-embed-alignment="wrap-left"])': {
+    float: 'left',
+    margin: "".concat(wrapGap, " ").concat(wrapGap, " ").concat(wrapGap, " auto !important")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by data attribute
+  '.extension-container:has([data-native-embed-alignment="wrap-right"])': {
+    float: 'right',
+    margin: "".concat(wrapGap, " auto ").concat(wrapGap, " ").concat(wrapGap, " !important"),
+    maxWidth: "calc((var(--ak-editor-max-container-width, 100%) / 2) - ".concat(wrapGap, ")")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by data attribute
+  '.ak-renderer-extension:has([data-native-embed-alignment="wrap-right"])': {
+    float: 'right',
+    margin: "".concat(wrapGap, " auto ").concat(wrapGap, " ").concat(wrapGap, " !important")
+  },
+  // Suppress the hover box-shadow on the extension container for all native embeds.
+  // Native embeds provide their own chrome so the generic extension hover ring is not appropriate.
+  // The selection ring (from .ak-editor-selected-node) is also applied as a box-shadow,
+  // and would be incorrectly hidden on hover without the :not() guard.
+  // Using :not(.ak-editor-selected-node *) avoids coupling to the intermediate DOM structure.
+  // In the renderer there is no selection ring so the :not() guard is not needed.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrapper hover by data attribute
+  '.extension-container:has([data-native-embed-alignment]):not(.ak-editor-selected-node *):hover': {
+    boxShadow: 'none !important'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target renderer extension wrapper hover by data attribute
+  '.ak-renderer-extension:has([data-native-embed-alignment]):hover': {
+    boxShadow: 'none !important'
+  },
+  // Suppress the selection ring (box-shadow from .ak-editor-selected-node) for database embeds.
+  // Database embeds use appearance="minimal" with no content border, so the selection ring
+  // creates a jarring visual effect around a borderless embed.
+  // The box-shadow is applied by editor-core to `.extension-container` via the selector:
+  //   `.extensionView-content-wrap.ak-editor-selected-node > span > .extension-container`
+  // We target `.extension-container` directly using :has() to check for the experience attribute
+  // on the inner div, matching regardless of the intermediate DOM structure.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension-container for database embeds when selected
+  '.extension-container:has([data-native-embed-experience="database"])': {
+    boxShadow: 'none !important'
+  }
+});
+
+/* eslint-enable @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-important-styles */

package/dist/esm/ui/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.40.0 */
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback } from 'react';

package/dist/types/entry-points/initial-placeholder.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { resolveNativeEmbedInitialLayout, type NativeEmbedInitialLayout, type ResolveNativeEmbedInitialLayoutInput } from './initial-layout';
+export { resolveNativeEmbedInitialLayout, type NativeEmbedInitialLayout };
+export type NativeEmbedInitialPlaceholderFrameProps = Pick<NativeEmbedInitialLayout, 'effectiveHeight' | 'effectiveWidth' | 'lockAspectRatio'> & {
+    hasEmbedBorder?: boolean;
+    placeholderId?: string;
+    testId?: string;
+};
+export declare const NativeEmbedInitialPlaceholderFrame: ({ effectiveHeight, effectiveWidth, hasEmbedBorder, lockAspectRatio, placeholderId, testId, }: NativeEmbedInitialPlaceholderFrameProps) => React.JSX.Element;
+export type NativeEmbedInitialPlaceholderProps = ResolveNativeEmbedInitialLayoutInput & {
+    firstPaint?: boolean;
+    testId?: string;
+};
+/**
+ * Renders the shared native embed placeholder contract used by editor loading, renderer interim,
+ * and Confluence SSR paths. The data attributes let the same ancestor placement styles apply before
+ * the full native embed UI is available.
+ */
+export declare const NativeEmbedInitialPlaceholder: ({ firstPaint, manifest, parameters, placeholderId, testId, }: NativeEmbedInitialPlaceholderProps) => React.JSX.Element;

package/dist/types/entry-points/native-embed-styles.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Injected by the extension UI via Global; also exported for consumers who inject styles elsewhere.
+ */
+import { type SerializedStyles } from '@emotion/react';
+export declare const nativeEmbedAlignmentStyles: SerializedStyles;

package/initial-placeholder/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@atlaskit/native-embeds-common/initial-placeholder",
+  "main": "../dist/cjs/entry-points/initial-placeholder.js",
+  "module": "../dist/esm/entry-points/initial-placeholder.js",
+  "module:es2019": "../dist/es2019/entry-points/initial-placeholder.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/entry-points/initial-placeholder.d.ts"
+}

package/native-embed-styles/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@atlaskit/native-embeds-common/native-embed-styles",
+  "main": "../dist/cjs/entry-points/native-embed-styles.js",
+  "module": "../dist/esm/entry-points/native-embed-styles.js",
+  "module:es2019": "../dist/es2019/entry-points/native-embed-styles.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/entry-points/native-embed-styles.d.ts"
+}

package/package.json

@@ -17,16 +17,17 @@
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
 		"@atlaskit/button": "^24.3.0",
-		"@atlaskit/editor-common": "^116.32.0",
+		"@atlaskit/editor-common": "^116.39.0",
 		"@atlaskit/editor-plugin-local-id": "^10.1.0",
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/heading": "^6.2.0",
-		"@atlaskit/icon": "^37.0.0",
-		"@atlaskit/primitives": "^22.0.0",
-		"@atlaskit/tokens": "^16.0.0",
+		"@atlaskit/icon": "^37.1.0",
+		"@atlaskit/primitives": "^22.2.0",
+		"@atlaskit/tokens": "^16.3.0",
 		"@atlassian/afm-i18n-platform-native-embeds-native-embeds-common": "1.7.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.20.0"
+		"@compiled/react": "^1.0.0",
+		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0",
@@ -36,6 +37,7 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/ssr": "workspace:^",
+		"@atlassian/testing-library": "^0.11.0",
 		"@testing-library/react": "^16.3.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
@@ -80,7 +82,7 @@
 		}
 	},
 	"name": "@atlaskit/native-embeds-common",
-	"version": "2.2.3",
+	"version": "2.2.5",
 	"description": "A shared package for native embeds to be used across experiences and plugin",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",