@atlaskit/renderer 109.30.1 → 109.30.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/react/marks/alignment.js +1 -1
  3. package/dist/cjs/react/nodes/codeBlock/components/codeBlockContainer.js +1 -1
  4. package/dist/cjs/react/nodes/codeBlock/components/lightWeightCodeBlock.js +2 -2
  5. package/dist/cjs/react/nodes/media/index.js +2 -2
  6. package/dist/cjs/react/nodes/multiBodiedExtension.js +2 -2
  7. package/dist/cjs/react/nodes/panel.js +2 -2
  8. package/dist/cjs/react/nodes/table/colgroup.js +8 -8
  9. package/dist/cjs/ui/Expand.js +3 -3
  10. package/dist/cjs/ui/Renderer/index.js +1 -1
  11. package/dist/cjs/ui/Renderer/style.js +9 -9
  12. package/dist/cjs/ui/annotations/element/mark.js +1 -1
  13. package/dist/es2019/react/marks/alignment.js +2 -2
  14. package/dist/es2019/react/nodes/codeBlock/components/codeBlockContainer.js +26 -19
  15. package/dist/es2019/react/nodes/codeBlock/components/lightWeightCodeBlock.js +9 -9
  16. package/dist/es2019/react/nodes/media/index.js +14 -14
  17. package/dist/es2019/react/nodes/multiBodiedExtension.js +24 -24
  18. package/dist/es2019/react/nodes/panel.js +15 -15
  19. package/dist/es2019/react/nodes/table/colgroup.js +8 -8
  20. package/dist/es2019/ui/Expand.js +13 -13
  21. package/dist/es2019/ui/Renderer/index.js +1 -1
  22. package/dist/es2019/ui/Renderer/style.js +575 -585
  23. package/dist/es2019/ui/annotations/element/mark.js +10 -10
  24. package/dist/esm/react/marks/alignment.js +1 -1
  25. package/dist/esm/react/nodes/codeBlock/components/codeBlockContainer.js +1 -1
  26. package/dist/esm/react/nodes/codeBlock/components/lightWeightCodeBlock.js +2 -2
  27. package/dist/esm/react/nodes/media/index.js +2 -2
  28. package/dist/esm/react/nodes/multiBodiedExtension.js +2 -2
  29. package/dist/esm/react/nodes/panel.js +2 -2
  30. package/dist/esm/react/nodes/table/colgroup.js +8 -8
  31. package/dist/esm/ui/Expand.js +3 -3
  32. package/dist/esm/ui/Renderer/index.js +1 -1
  33. package/dist/esm/ui/Renderer/style.js +9 -9
  34. package/dist/esm/ui/annotations/element/mark.js +1 -1
  35. package/dist/types/actions.d.ts +1 -1
  36. package/dist/types/react/hooks/use-bidi-warnings.d.ts +1 -1
  37. package/dist/types/react/nodes/extension.d.ts +1 -2
  38. package/dist/types/react/nodes/table/colgroup.d.ts +1 -1
  39. package/dist/types/ui/RendererActionsContext/index.d.ts +1 -1
  40. package/dist/types/ui/SmartCardStorage.d.ts +1 -1
  41. package/dist/types/ui/TaskItemsFormatContext/TaskItemsFormatContext.d.ts +1 -4
  42. package/dist/types/ui/TaskItemsFormatContext/index.d.ts +1 -1
  43. package/dist/types/ui/active-header-id-provider.d.ts +1 -1
  44. package/dist/types/ui/annotations/contexts/AnnotationHoverContext.d.ts +1 -1
  45. package/dist/types/ui/annotations/hooks/use-events.d.ts +1 -1
  46. package/dist/types-ts4.5/actions.d.ts +1 -1
  47. package/dist/types-ts4.5/react/hooks/use-bidi-warnings.d.ts +1 -1
  48. package/dist/types-ts4.5/react/nodes/extension.d.ts +1 -2
  49. package/dist/types-ts4.5/react/nodes/table/colgroup.d.ts +1 -1
  50. package/dist/types-ts4.5/ui/RendererActionsContext/index.d.ts +1 -1
  51. package/dist/types-ts4.5/ui/SmartCardStorage.d.ts +1 -1
  52. package/dist/types-ts4.5/ui/TaskItemsFormatContext/index.d.ts +1 -1
  53. package/dist/types-ts4.5/ui/active-header-id-provider.d.ts +1 -1
  54. package/dist/types-ts4.5/ui/annotations/contexts/AnnotationHoverContext.d.ts +1 -1
  55. package/dist/types-ts4.5/ui/annotations/hooks/use-events.d.ts +1 -1
  56. package/docs/0-intro.tsx +12 -21
  57. package/package.json +2 -2
  58. package/report.api.md +478 -492
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/renderer
2
2
 
3
+ ## 109.30.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#106530](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/106530)
8
+ [`94e59a7490d4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/94e59a7490d4) -
9
+ When table width is smaller than container, scale table colwidths up before applying num col
10
+ scaling to avoid overflow
11
+
3
12
  ## 109.30.1
4
13
 
5
14
  ### Patch Changes
package/dist/cjs/react/marks/alignment.js CHANGED
@@ -14,7 +14,7 @@ var _templateObject;
14
14
  /** @jsx jsx */
15
15
  var MarkWrapper = function MarkWrapper(props) {
16
16
  var styles = props['data-align'] ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
17
- (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n text-align: ", ";\n "])), _adfSchema.alignmentPositionMap[props['data-align']]) : '';
17
+ (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\ttext-align: ", ";\n\t\t\t"])), _adfSchema.alignmentPositionMap[props['data-align']]) : '';
18
18
  return (
19
19
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
20
20
  (0, _react2.jsx)("div", (0, _extends2.default)({
package/dist/cjs/react/nodes/codeBlock/components/codeBlockContainer.js CHANGED
@@ -15,7 +15,7 @@ var _codeBlockButtonContainer = _interopRequireDefault(require("./codeBlockButto
15
15
  var _templateObject;
16
16
  /** @jsx jsx */
17
17
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
18
- var codeBlockStyleOverrides = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n tab-size: 4;\n background-color: ", ";\n\n &:hover {\n button {\n opacity: 1;\n }\n }\n\n button {\n opacity: 0;\n transition: opacity 0.2s ease 0s;\n }\n\n ", " {\n font-size: ", ";\n line-height: 1.5rem;\n background-image: ", ";\n background-attachment: local, local, local, local, scroll, scroll, scroll,\n scroll;\n background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;\n }\n"])), "var(--ds-surface-raised, ".concat(_colors.N20, ")"), _styles.CodeBlockSharedCssClassName.DS_CODEBLOCK, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _editorSharedStyles.overflowShadow)({
18
+ var codeBlockStyleOverrides = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\ttab-size: 4;\n\tbackground-color: ", ";\n\n\t&:hover {\n\t\tbutton {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\tbutton {\n\t\topacity: 0;\n\t\ttransition: opacity 0.2s ease 0s;\n\t}\n\n\t", " {\n\t\tfont-size: ", ";\n\t\tline-height: 1.5rem;\n\t\tbackground-image: ", ";\n\t\tbackground-attachment: local, local, local, local, scroll, scroll, scroll, scroll;\n\t\tbackground-position:\n\t\t\t0 0,\n\t\t\t0 0,\n\t\t\t100% 0,\n\t\t\t100% 0,\n\t\t\t100% 0,\n\t\t\t100% 0,\n\t\t\t0 0,\n\t\t\t0 0;\n\t}\n"])), "var(--ds-surface-raised, ".concat(_colors.N20, ")"), _styles.CodeBlockSharedCssClassName.DS_CODEBLOCK, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _editorSharedStyles.overflowShadow)({
19
19
  leftCoverWidth: "var(--ds-space-300, 24px)"
20
20
  }));
21
21
  var CodeBlockContainer = function CodeBlockContainer(_ref) {
package/dist/cjs/react/nodes/codeBlock/components/lightWeightCodeBlock.js CHANGED
@@ -18,7 +18,7 @@ var _templateObject, _templateObject2;
18
18
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
19
19
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
20
20
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
21
- var lightWeightCodeBlockStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n cursor: text;\n }\n"])), _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER);
21
+ var lightWeightCodeBlockStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tcursor: text;\n\t}\n"])), _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER);
22
22
  var LightWeightCodeBlockCssClassName = exports.LightWeightCodeBlockCssClassName = {
23
23
  CONTAINER: 'light-weight-code-block'
24
24
  };
@@ -30,7 +30,7 @@ var getLightWeightCodeBlockStylesForRootRendererStyleSheet = exports.getLightWei
30
30
  // NOTE: This must be added after other .code-block styles in the root
31
31
  // Renderer stylesheet.
32
32
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
33
- return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n .", "\n > .", "\n .", " {\n margin-top: ", ";\n }\n "])), _consts.RendererCssClassName.DOCUMENT, LightWeightCodeBlockCssClassName.CONTAINER, _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, _editorSharedStyles.blockNodesVerticalMargin);
33
+ return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.", "\n\t\t\t> .", "\n\t\t\t.", " {\n\t\t\tmargin-top: ", ";\n\t\t}\n\t"])), _consts.RendererCssClassName.DOCUMENT, LightWeightCodeBlockCssClassName.CONTAINER, _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, _editorSharedStyles.blockNodesVerticalMargin);
34
34
  };
35
35
  var LightWeightCodeBlock = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
36
36
  var text = _ref.text,
package/dist/cjs/react/nodes/media/index.js CHANGED
@@ -44,9 +44,9 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
44
44
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
45
45
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
46
46
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
47
- var linkStyle = exports.linkStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n background: transparent;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n cursor: pointer;\n width: 100% !important;\n height: 100% !important;\n"])));
47
+ var linkStyle = exports.linkStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tposition: absolute;\n\tbackground: transparent;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tcursor: pointer;\n\twidth: 100% !important;\n\theight: 100% !important;\n"])));
48
48
  var borderStyle = exports.borderStyle = function borderStyle(color, width) {
49
- return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 100% !important;\n height: 100% !important;\n border-radius: ", "px;\n box-shadow: 0 0 0 ", "px ", ";\n"])), width, width, color);
49
+ return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\tposition: absolute;\n\twidth: 100% !important;\n\theight: 100% !important;\n\tborder-radius: ", "px;\n\tbox-shadow: 0 0 0 ", "px ", ";\n"])), width, width, color);
50
50
  };
51
51
  var MediaBorder = function MediaBorder(_ref) {
52
52
  var _mark$attrs$color, _mark$attrs$size;
package/dist/cjs/react/nodes/multiBodiedExtension.js CHANGED
@@ -52,7 +52,7 @@ var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActions(_re
52
52
  };
53
53
 
54
54
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
55
- var navigationCssExtended = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n ", ";\n margin-left: 0 !important;\n margin-right: 0 !important;\n .mbe-add-tab-button,\n .mbe-remove-tab {\n display: none;\n }\n"])), _ui.sharedMultiBodiedExtensionStyles.mbeNavigation);
55
+ var navigationCssExtended = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t", ";\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n\t.mbe-add-tab-button,\n\t.mbe-remove-tab {\n\t\tdisplay: none;\n\t}\n"])), _ui.sharedMultiBodiedExtensionStyles.mbeNavigation);
56
56
  var MultiBodiedExtension = function MultiBodiedExtension(props) {
57
57
  var children = props.children,
58
58
  _props$layout = props.layout,
@@ -81,7 +81,7 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
81
81
  children: children
82
82
  });
83
83
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
84
- var containerCssExtended = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", ";\n .ak-renderer-extension {\n margin-top: 0 !important;\n }\n\n [data-layout='full-width'],\n [data-layout='wide'] {\n .multiBodiedExtension-navigation {\n border-right: 3px solid ", " !important;\n }\n }\n\n .multiBodiedExtension--frames\n > [data-extension-frame='true']:nth-of-type(", ") {\n ", "\n margin-left: 0;\n margin-right: 0;\n }\n "])), _ui.sharedMultiBodiedExtensionStyles.mbeExtensionContainer, "var(--ds-border, ".concat(_colors.N40, ")"), activeChildIndex + 1, _ui.sharedMultiBodiedExtensionStyles.extensionFrameContent);
84
+ var containerCssExtended = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t", ";\n\t\t.ak-renderer-extension {\n\t\t\tmargin-top: 0 !important;\n\t\t}\n\n\t\t[data-layout='full-width'],\n\t\t[data-layout='wide'] {\n\t\t\t.multiBodiedExtension-navigation {\n\t\t\t\tborder-right: 3px solid ", " !important;\n\t\t\t}\n\t\t}\n\n\t\t.multiBodiedExtension--frames\n\t\t\t> [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\t", "\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\t"])), _ui.sharedMultiBodiedExtensionStyles.mbeExtensionContainer, "var(--ds-border, ".concat(_colors.N40, ")"), activeChildIndex + 1, _ui.sharedMultiBodiedExtensionStyles.extensionFrameContent);
85
85
  var isTopLevel = path.length < 1;
86
86
  var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
87
87
  function renderMbeContent(width) {
package/dist/cjs/react/nodes/panel.js CHANGED
@@ -25,10 +25,10 @@ var PanelStyled = function PanelStyled(_ref) {
25
25
  hasIcon = _ref.hasIcon,
26
26
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
27
27
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- nested css mixins are violations
28
- var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n &.", " {\n ", "\n\n &[data-panel-type=", "] {\n ", "\n }\n }\n "])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)(), _adfSchema.PanelType.CUSTOM, hasIcon ? '' : 'padding-left: 12px;padding-right: 12px;');
28
+ var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t&.", " {\n\t\t\t", "\n\n\t\t\t&[data-panel-type=", "] {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t"])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)(), _adfSchema.PanelType.CUSTOM, hasIcon ? '' : 'padding-left: 12px;padding-right: 12px;');
29
29
  if (props['data-panel-type'] === _adfSchema.PanelType.CUSTOM && backgroundColor) {
30
30
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- nested css mixins are violations
31
- styles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n &.", " {\n ", "\n }\n\n &[data-panel-type=", "] {\n background-color: ", ";\n ", "\n }\n "])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)(), _adfSchema.PanelType.CUSTOM, (0, _editorPalette.hexToEditorBackgroundPaletteColor)(backgroundColor) || backgroundColor, hasIcon ? '' : 'padding-left: 12px;padding-right: 12px;');
31
+ styles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t&.", " {\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t&[data-panel-type=", "] {\n\t\t\t\tbackground-color: ", ";\n\t\t\t\t", "\n\t\t\t}\n\t\t"])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)(), _adfSchema.PanelType.CUSTOM, (0, _editorPalette.hexToEditorBackgroundPaletteColor)(backgroundColor) || backgroundColor, hasIcon ? '' : 'padding-left: 12px;padding-right: 12px;');
32
32
  }
33
33
  return (0, _react2.jsx)("div", (0, _extends2.default)({
34
34
  css: styles
package/dist/cjs/react/nodes/table/colgroup.js CHANGED
@@ -80,20 +80,20 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
80
80
  }
81
81
  var sumOfColumns = colWidthSum(columnWidths);
82
82
 
83
- // A bug was released that caused col resizing in editor to be off by 2px, so using 2 here
84
- var isTableSmallerThanContainer = sumOfColumns < tableContainerWidth - 2;
85
- var forceScaleForNumColumn = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.scale-table-when-number-column-in-table-resized_y4qh2') && isTableScalingEnabled && isNumberColumnEnabled && tableResized &&
86
- // if table col widths are smaller than container, then ignore. Most likely was created before custom table widths, where
87
- // col widths could be smaller than container width (width was enforced by breakout buttons)
88
- !isTableSmallerThanContainer;
83
+ // tables in the wild may be smaller than table container width (col resizing bugs, created before custom widths etc.)
84
+ // this causes issues with num column scaling as we add a new table column in renderer
85
+ var isTableSmallerThanContainer = sumOfColumns < tableContainerWidth - 1;
86
+ var forceScaleForNumColumn = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.scale-table-when-number-column-in-table-resized_y4qh2') && isTableScalingEnabled && isNumberColumnEnabled && tableResized;
89
87
 
90
88
  // when table resized and number column is enabled, we need to scale down the table in render
91
89
  if (forceScaleForNumColumn) {
92
- var scalePercentage = +((tableContainerWidth - _editorSharedStyles.akEditorTableNumberColumnWidth) / tableContainerWidth).toFixed(2);
90
+ var scalePercentage = +((tableContainerWidth - _editorSharedStyles.akEditorTableNumberColumnWidth) / tableContainerWidth);
93
91
  var targetMaxWidth = tableContainerWidth - _editorSharedStyles.akEditorTableNumberColumnWidth;
94
92
  var totalWidthAfterScale = 0;
95
93
  var newScaledTargetWidths = columnWidths.map(function (width) {
96
- var newWidth = Math.floor(width * scalePercentage);
94
+ // we need to scale each column UP, to ensure total width of table matches table container
95
+ var patchedWidth = isTableSmallerThanContainer ? width / sumOfColumns * (tableContainerWidth - 1) : width;
96
+ var newWidth = Math.floor(patchedWidth * scalePercentage);
97
97
  totalWidthAfterScale += newWidth;
98
98
  return newWidth;
99
99
  });
package/dist/cjs/ui/Expand.js CHANGED
@@ -47,7 +47,7 @@ var Container = function Container(props) {
47
47
 
48
48
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
49
49
  var styles = function styles() {
50
- return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n ", "\n padding: 0;\n padding-bottom: ", ";\n "])), sharedContainerStyles(), paddingBottom);
50
+ return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t", "\n\t\tpadding: 0;\n\t\tpadding-bottom: ", ";\n\t"])), sharedContainerStyles(), paddingBottom);
51
51
  };
52
52
  return (
53
53
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
@@ -61,7 +61,7 @@ var TitleContainer = function TitleContainer(props) {
61
61
 
62
62
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
63
63
  var styles = function styles() {
64
- return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n padding: ", ";\n padding-bottom: ", ";\n "])), _ui.sharedExpandStyles.titleContainerStyles(), "var(--ds-space-100, 8px)", paddingBottom);
64
+ return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t", "\n\t\tpadding: ", ";\n\t\tpadding-bottom: ", ";\n\t"])), _ui.sharedExpandStyles.titleContainerStyles(), "var(--ds-space-100, 8px)", paddingBottom);
65
65
  };
66
66
  var expanded = props.expanded,
67
67
  buttonProps = (0, _objectWithoutProperties2.default)(props, _excluded);
@@ -80,7 +80,7 @@ var ContentContainer = function ContentContainer(props) {
80
80
 
81
81
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
82
82
  var styles = function styles() {
83
- return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n ", ";\n padding-right: ", ";\n padding-left: ", ";\n visibility: ", ";\n "])), sharedContentStyles(), "var(--ds-space-200, 16px)", "var(--ds-space-400, 32px)", visibility);
83
+ return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t", ";\n\t\tpadding-right: ", ";\n\t\tpadding-left: ", ";\n\t\tvisibility: ", ";\n\t"])), sharedContentStyles(), "var(--ds-space-200, 16px)", "var(--ds-space-400, 32px)", visibility);
84
84
  };
85
85
  return (
86
86
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
package/dist/cjs/ui/Renderer/index.js CHANGED
@@ -56,7 +56,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
56
56
  var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
57
57
  var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
58
58
  var packageName = "@atlaskit/renderer";
59
- var packageVersion = "109.30.1";
59
+ var packageVersion = "109.30.2";
60
60
  var defaultNodeComponents = exports.defaultNodeComponents = _nodes.nodeToReact;
61
61
  var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
62
62
  (0, _inherits2.default)(Renderer, _PureComponent);
package/dist/cjs/ui/Renderer/style.js CHANGED
@@ -33,7 +33,7 @@ var tableShadowWidth = 32;
33
33
  var TELEPOINTER_ID = exports.TELEPOINTER_ID = 'ai-streaming-telepointer';
34
34
  var telepointerStyles = function telepointerStyles(colorMode) {
35
35
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
36
- return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n #", " {\n display: inline-block;\n position: relative;\n width: 1.5px;\n height: 25px;\n background: linear-gradient(\n 45deg,\n ", " -12.02%,\n ", " 19.18%,\n ", " 71.87%\n );\n margin-left: ", ";\n\n &::after {\n content: 'AI';\n position: absolute;\n display: block;\n top: 0;\n left: 0;\n font-size: 10px;\n font-weight: 700;\n width: 12.5px;\n height: 13px;\n padding-top: 1px;\n padding-left: 1.5px;\n line-height: initial;\n border-radius: 0px 2px 2px 0px;\n color: ", ";\n background: linear-gradient(\n 45deg,\n ", " -57%,\n ", " 71.87%\n );\n }\n }\n "])), TELEPOINTER_ID, colorMode === 'dark' ? '#f5cd47' : '#f8e6a0', colorMode === 'dark' ? '#60c6d2' : '#8bdbe5', colorMode === 'dark' ? '#388bff' : '#0c66e4', "var(--ds-space-025, 2px)", "var(--ds-text-inverse, white)", colorMode === 'dark' ? '#60c6d2' : '#8bdbe5', colorMode === 'dark' ? '#388bff' : '#0c66e4');
36
+ return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t#", " {\n\t\t\tdisplay: inline-block;\n\t\t\tposition: relative;\n\t\t\twidth: 1.5px;\n\t\t\theight: 25px;\n\t\t\tbackground: linear-gradient(\n\t\t\t\t45deg,\n\t\t\t\t", " -12.02%,\n\t\t\t\t", " 19.18%,\n\t\t\t\t", " 71.87%\n\t\t\t);\n\t\t\tmargin-left: ", ";\n\n\t\t\t&::after {\n\t\t\t\tcontent: 'AI';\n\t\t\t\tposition: absolute;\n\t\t\t\tdisplay: block;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\tfont-size: 10px;\n\t\t\t\tfont-weight: 700;\n\t\t\t\twidth: 12.5px;\n\t\t\t\theight: 13px;\n\t\t\t\tpadding-top: 1px;\n\t\t\t\tpadding-left: 1.5px;\n\t\t\t\tline-height: initial;\n\t\t\t\tborder-radius: 0px 2px 2px 0px;\n\t\t\t\tcolor: ", ";\n\t\t\t\tbackground: linear-gradient(\n\t\t\t\t\t45deg,\n\t\t\t\t\t", " -57%,\n\t\t\t\t\t", " 71.87%\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t"])), TELEPOINTER_ID, colorMode === 'dark' ? '#f5cd47' : '#f8e6a0', colorMode === 'dark' ? '#60c6d2' : '#8bdbe5', colorMode === 'dark' ? '#388bff' : '#0c66e4', "var(--ds-space-025, 2px)", "var(--ds-text-inverse, white)", colorMode === 'dark' ? '#60c6d2' : '#8bdbe5', colorMode === 'dark' ? '#388bff' : '#0c66e4');
37
37
  };
38
38
  var getLineHeight = function getLineHeight(fontCode) {
39
39
  return _typography.headingSizes[fontCode].lineHeight / _typography.headingSizes[fontCode].size;
@@ -60,7 +60,7 @@ var headingSizes = exports.headingSizes = {
60
60
  };
61
61
  var headingAnchorStyle = function headingAnchorStyle(headingTag) {
62
62
  return (// TODO Delete this comment after verifying space token -> previous value `margin-left: 6px`
63
- (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n /**\n * The copy link button doesn't reserve space in the DOM so that\n * the text alignment isn't impacted by the button/icon's space.\n */\n .", " {\n position: absolute;\n height: ", "em;\n\n margin-left: ", ";\n\n button {\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n /**\n * Applies hover effects to the heading anchor link button\n * to fade in when the user rolls over the heading.\n *\n * The link is persistent on mobile, so we use feature detection\n * to enable hover effects for systems that support it (desktop).\n *\n * @see https://caniuse.com/mdn-css_at-rules_media_hover\n */\n @media (hover: hover) and (pointer: fine) {\n .", " {\n > button {\n opacity: 0;\n transform: translate(-8px, 0px);\n transition:\n opacity 0.2s ease 0s,\n transform 0.2s ease 0s;\n }\n }\n\n &:hover {\n .", " > button {\n opacity: 1;\n transform: none !important;\n }\n }\n }\n\n /**\n * Adds the visibility of the button when in focus through keyboard navigation.\n */\n .", " {\n button:focus {\n opacity: 1;\n transform: none !important;\n }\n }\n "])), _headingAnchor.HeadingAnchorWrapperClassName, headingSizes[headingTag].lineHeight, "var(--ds-space-075, 6px)", _headingAnchor.HeadingAnchorWrapperClassName, _headingAnchor.HeadingAnchorWrapperClassName, _headingAnchor.HeadingAnchorWrapperClassName)
63
+ (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t/**\n * The copy link button doesn't reserve space in the DOM so that\n * the text alignment isn't impacted by the button/icon's space.\n */\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\theight: ", "em;\n\n\t\t\tmargin-left: ", ";\n\n\t\t\tbutton {\n\t\t\t\tpadding-left: 0;\n\t\t\t\tpadding-right: 0;\n\t\t\t}\n\t\t}\n\n\t\t/**\n * Applies hover effects to the heading anchor link button\n * to fade in when the user rolls over the heading.\n *\n * The link is persistent on mobile, so we use feature detection\n * to enable hover effects for systems that support it (desktop).\n *\n * @see https://caniuse.com/mdn-css_at-rules_media_hover\n */\n\t\t@media (hover: hover) and (pointer: fine) {\n\t\t\t.", " {\n\t\t\t\t> button {\n\t\t\t\t\topacity: 0;\n\t\t\t\t\ttransform: translate(-8px, 0px);\n\t\t\t\t\ttransition:\n\t\t\t\t\t\topacity 0.2s ease 0s,\n\t\t\t\t\t\ttransform 0.2s ease 0s;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t.", " > button {\n\t\t\t\t\topacity: 1;\n\t\t\t\t\ttransform: none !important;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t/**\n * Adds the visibility of the button when in focus through keyboard navigation.\n */\n\t\t.", " {\n\t\t\tbutton:focus {\n\t\t\t\topacity: 1;\n\t\t\t\ttransform: none !important;\n\t\t\t}\n\t\t}\n\t"])), _headingAnchor.HeadingAnchorWrapperClassName, headingSizes[headingTag].lineHeight, "var(--ds-space-075, 6px)", _headingAnchor.HeadingAnchorWrapperClassName, _headingAnchor.HeadingAnchorWrapperClassName, _headingAnchor.HeadingAnchorWrapperClassName)
64
64
  );
65
65
  };
66
66
  var alignedHeadingAnchorStyle = function alignedHeadingAnchorStyle(_ref) {
@@ -69,7 +69,7 @@ var alignedHeadingAnchorStyle = function alignedHeadingAnchorStyle(_ref) {
69
69
  return '';
70
70
  }
71
71
  // TODO Delete this comment after verifying space token -> previous value `margin: 6px`
72
- return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n .fabric-editor-block-mark[data-align] > {\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n position: relative;\n }\n }\n\n /**\n * For right-alignment we flip the link to be before the heading\n * text so that the text is flush up against the edge of the editor's\n * container edge.\n */\n .fabric-editor-block-mark:not([data-align='center'])[data-align] {\n > {\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n // Using right to left text to achieve the inverse effect\n // of where the copy link button icon sits for left/center\n // alignment.\n // Although this is unorthodox it's the only approach which\n // allows the button to sit flush against the left edge of\n // bottom line of text.\n direction: rtl;\n\n // By default RTL will negatively impact the layout of special\n // characters within the heading text, and potentially other\n // nested inline nodes. To prevent this we insert pseudo elements\n // containing HTML entities to retain LTR for all heading content\n // except for the copy link button.\n > *:not(.", "):not(br) {\n ::before {\n // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n content: '\u202A';\n }\n ::after {\n // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n content: '\u202C';\n }\n }\n }\n }\n .", " {\n margin: 0 ", " 0 0;\n }\n\n @media (hover: hover) and (pointer: fine) {\n .", " > button {\n transform: translate(8px, 0px);\n }\n }\n }\n "], ["\n .fabric-editor-block-mark[data-align] > {\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n position: relative;\n }\n }\n\n /**\n * For right-alignment we flip the link to be before the heading\n * text so that the text is flush up against the edge of the editor's\n * container edge.\n */\n .fabric-editor-block-mark:not([data-align='center'])[data-align] {\n > {\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n // Using right to left text to achieve the inverse effect\n // of where the copy link button icon sits for left/center\n // alignment.\n // Although this is unorthodox it's the only approach which\n // allows the button to sit flush against the left edge of\n // bottom line of text.\n direction: rtl;\n\n // By default RTL will negatively impact the layout of special\n // characters within the heading text, and potentially other\n // nested inline nodes. To prevent this we insert pseudo elements\n // containing HTML entities to retain LTR for all heading content\n // except for the copy link button.\n > *:not(.", "):not(br) {\n ::before {\n // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n content: '\\u202A';\n }\n ::after {\n // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n content: '\\u202C';\n }\n }\n }\n }\n .", " {\n margin: 0 ", " 0 0;\n }\n\n @media (hover: hover) and (pointer: fine) {\n .", " > button {\n transform: translate(8px, 0px);\n }\n }\n }\n "])), _headingAnchor.HeadingAnchorWrapperClassName, _headingAnchor.HeadingAnchorWrapperClassName, "var(--ds-space-075, 6px)", _headingAnchor.HeadingAnchorWrapperClassName);
72
+ return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.fabric-editor-block-mark[data-align] > {\n\t\t\th1,\n\t\t\th2,\n\t\t\th3,\n\t\t\th4,\n\t\t\th5,\n\t\t\th6 {\n\t\t\t\tposition: relative;\n\t\t\t}\n\t\t}\n\n\t\t/**\n * For right-alignment we flip the link to be before the heading\n * text so that the text is flush up against the edge of the editor's\n * container edge.\n */\n\t\t.fabric-editor-block-mark:not([data-align='center'])[data-align] {\n\t\t\t> {\n\t\t\t\th1,\n\t\t\t\th2,\n\t\t\t\th3,\n\t\t\t\th4,\n\t\t\t\th5,\n\t\t\t\th6 {\n\t\t\t\t\t// Using right to left text to achieve the inverse effect\n\t\t\t\t\t// of where the copy link button icon sits for left/center\n\t\t\t\t\t// alignment.\n\t\t\t\t\t// Although this is unorthodox it's the only approach which\n\t\t\t\t\t// allows the button to sit flush against the left edge of\n\t\t\t\t\t// bottom line of text.\n\t\t\t\t\tdirection: rtl;\n\n\t\t\t\t\t// By default RTL will negatively impact the layout of special\n\t\t\t\t\t// characters within the heading text, and potentially other\n\t\t\t\t\t// nested inline nodes. To prevent this we insert pseudo elements\n\t\t\t\t\t// containing HTML entities to retain LTR for all heading content\n\t\t\t\t\t// except for the copy link button.\n\t\t\t\t\t> *:not(.", "):not(br) {\n\t\t\t\t\t\t::before {\n\t\t\t\t\t\t\t// Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n\t\t\t\t\t\t\tcontent: '\u202A';\n\t\t\t\t\t\t}\n\t\t\t\t\t\t::after {\n\t\t\t\t\t\t\t// Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n\t\t\t\t\t\t\tcontent: '\u202C';\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", " 0 0;\n\t\t\t}\n\n\t\t\t@media (hover: hover) and (pointer: fine) {\n\t\t\t\t.", " > button {\n\t\t\t\t\ttransform: translate(8px, 0px);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"], ["\n\t\t.fabric-editor-block-mark[data-align] > {\n\t\t\th1,\n\t\t\th2,\n\t\t\th3,\n\t\t\th4,\n\t\t\th5,\n\t\t\th6 {\n\t\t\t\tposition: relative;\n\t\t\t}\n\t\t}\n\n\t\t/**\n * For right-alignment we flip the link to be before the heading\n * text so that the text is flush up against the edge of the editor's\n * container edge.\n */\n\t\t.fabric-editor-block-mark:not([data-align='center'])[data-align] {\n\t\t\t> {\n\t\t\t\th1,\n\t\t\t\th2,\n\t\t\t\th3,\n\t\t\t\th4,\n\t\t\t\th5,\n\t\t\t\th6 {\n\t\t\t\t\t// Using right to left text to achieve the inverse effect\n\t\t\t\t\t// of where the copy link button icon sits for left/center\n\t\t\t\t\t// alignment.\n\t\t\t\t\t// Although this is unorthodox it's the only approach which\n\t\t\t\t\t// allows the button to sit flush against the left edge of\n\t\t\t\t\t// bottom line of text.\n\t\t\t\t\tdirection: rtl;\n\n\t\t\t\t\t// By default RTL will negatively impact the layout of special\n\t\t\t\t\t// characters within the heading text, and potentially other\n\t\t\t\t\t// nested inline nodes. To prevent this we insert pseudo elements\n\t\t\t\t\t// containing HTML entities to retain LTR for all heading content\n\t\t\t\t\t// except for the copy link button.\n\t\t\t\t\t> *:not(.", "):not(br) {\n\t\t\t\t\t\t::before {\n\t\t\t\t\t\t\t// Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n\t\t\t\t\t\t\tcontent: '\\u202A';\n\t\t\t\t\t\t}\n\t\t\t\t\t\t::after {\n\t\t\t\t\t\t\t// Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n\t\t\t\t\t\t\tcontent: '\\u202C';\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", " 0 0;\n\t\t\t}\n\n\t\t\t@media (hover: hover) and (pointer: fine) {\n\t\t\t\t.", " > button {\n\t\t\t\t\ttransform: translate(8px, 0px);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"])), _headingAnchor.HeadingAnchorWrapperClassName, _headingAnchor.HeadingAnchorWrapperClassName, "var(--ds-space-075, 6px)", _headingAnchor.HeadingAnchorWrapperClassName);
73
73
  };
74
74
  var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
75
75
  var allowColumnSorting = _ref2.allowColumnSorting,
@@ -81,7 +81,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
81
81
  if (allowNestedHeaderLinks) {
82
82
  headingsCss = "\n /**\n * When the sort button is enabled we want the heading's copy link button\n * to reserve space so that it can prematurely wrap to avoid the button\n * being displayed underneath the sort button (hidden or obscured).\n *\n * The two buttons fight each other since the sort button is displayed\n * on hover of the <th /> and the copy link button is displayed on hover\n * of the heading.\n *\n * Note that this can break the WYSIWYG experience in the case where\n * a heading fills the width of the table cell and the only thing which\n * wraps is the copy link button. This is hopefully a rare fringe case.\n */\n .".concat(_headingAnchor.HeadingAnchorWrapperClassName, " {\n position: unset;\n }\n > {\n h1, h2, h3, h4, h5, h6 {\n margin-right: 30px;\n }\n }\n ");
83
83
  }
84
- return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n padding: 0;\n\n .", " {\n width: 100%;\n height: 100%;\n padding: ", "px;\n border-width: 1.5px;\n border-style: solid;\n border-color: transparent;\n\n > *:first-child {\n margin-top: 0;\n }\n\n > .ProseMirror-gapcursor:first-child + *,\n > style:first-child + .ProseMirror-gapcursor + * {\n margin-top: 0;\n }\n\n > .ProseMirror-gapcursor:first-child + span + *,\n > style:first-child + .ProseMirror-gapcursor + span + * {\n margin-top: 0;\n }\n\n @supports selector(:focus-visible) {\n &:focus {\n outline: unset;\n }\n &:focus-visible {\n border-color: ", ";\n }\n }\n\n ", "\n }\n\n .", " {\n margin: 0;\n .", " {\n opacity: 1;\n transition: opacity 0.2s ease-in-out;\n }\n }\n\n .", " {\n .", " {\n opacity: 0;\n &:focus {\n opacity: 1;\n }\n }\n }\n\n &:hover {\n .", " {\n .", " {\n opacity: 1;\n }\n }\n }\n }\n "])), _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, _styles.tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME);
84
+ return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.", " {\n\t\t\tpadding: 0;\n\n\t\t\t.", " {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: ", "px;\n\t\t\t\tborder-width: 1.5px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: transparent;\n\n\t\t\t\t> *:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t@supports selector(:focus-visible) {\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\toutline: unset;\n\t\t\t\t\t}\n\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin: 0;\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 1;\n\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 0;\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t.", " {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, _styles.tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME);
85
85
  };
86
86
  var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
87
87
  var appearance = _ref3.appearance;
@@ -89,20 +89,20 @@ var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
89
89
  if (appearance !== 'full-page' && appearance !== 'mobile') {
90
90
  return '';
91
91
  }
92
- return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n max-width: ", ";\n margin: 0 auto;\n padding: 0 ", "px;\n "])), theme && theme.layoutMaxWidth ? "".concat(theme.layoutMaxWidth, "px") : 'none', appearance === 'full-page' ? FullPagePadding : 0);
92
+ return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t\tmax-width: ", ";\n\t\tmargin: 0 auto;\n\t\tpadding: 0 ", "px;\n\t"])), theme && theme.layoutMaxWidth ? "".concat(theme.layoutMaxWidth, "px") : 'none', appearance === 'full-page' ? FullPagePadding : 0);
93
93
  };
94
94
  var fullWidthStyles = function fullWidthStyles(_ref5) {
95
95
  var appearance = _ref5.appearance;
96
96
  if (appearance !== 'full-width') {
97
97
  return '';
98
98
  }
99
- return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n max-width: ", "px;\n margin: 0 auto;\n\n .fabric-editor-breakout-mark,\n .ak-renderer-extension {\n width: 100% !important;\n }\n\n ", "\n "])), _editorSharedStyles.akEditorFullWidthLayoutWidth, (0, _table.isTableResizingEnabled)(appearance) ? '' : "\n .pm-table-container {\n width: 100% !important;\n }\n ");
99
+ return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t\tmax-width: ", "px;\n\t\tmargin: 0 auto;\n\n\t\t.fabric-editor-breakout-mark,\n\t\t.ak-renderer-extension {\n\t\t\twidth: 100% !important;\n\t\t}\n\n\t\t", "\n\t"])), _editorSharedStyles.akEditorFullWidthLayoutWidth, (0, _table.isTableResizingEnabled)(appearance) ? '' : "\n .pm-table-container {\n width: 100% !important;\n }\n ");
100
100
  };
101
101
  var breakoutWidthStyle = function breakoutWidthStyle() {
102
- return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n *:not([data-mark-type='fragment'])\n .", " {\n // TODO - improve inline style logic on table container so important styles aren't required here\n width: 100% !important;\n left: 0 !important;\n }\n\n [data-mark-type='fragment'] * .", " {\n // TODO - improve inline style logic on table container so important styles aren't required here\n width: 100% !important;\n left: 0 !important;\n }\n "])), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
102
+ return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t\t*:not([data-mark-type='fragment']) .", " {\n\t\t\t// TODO - improve inline style logic on table container so important styles aren't required here\n\t\t\twidth: 100% !important;\n\t\t\tleft: 0 !important;\n\t\t}\n\n\t\t[data-mark-type='fragment'] * .", " {\n\t\t\t// TODO - improve inline style logic on table container so important styles aren't required here\n\t\t\twidth: 100% !important;\n\t\t\tleft: 0 !important;\n\t\t}\n\t"])), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
103
103
  };
104
104
  var getShadowOverrides = function getShadowOverrides() {
105
- return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n /** Shadow overrides */\n &.", "::after,\n &.", "::before {\n width: ", "px;\n background: linear-gradient(\n to left,\n transparent 0,\n ", " 140%\n ),\n linear-gradient(\n to right,\n ", " 0px,\n transparent 1px\n );\n }\n\n &.", "::after {\n background: linear-gradient(\n to right,\n transparent 0,\n ", " 140%\n ),\n linear-gradient(\n to left,\n ", " 0px,\n transparent 1px\n );\n right: 0px;\n }\n "])), _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, tableShadowWidth, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", _ui.shadowClassNames.RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)");
105
+ return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t\t/** Shadow overrides */\n\t\t&.", "::after, &.", "::before {\n\t\t\twidth: ", "px;\n\t\t\tbackground: linear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\ttransparent 0,\n\t\t\t\t\t", " 140%\n\t\t\t\t),\n\t\t\t\tlinear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\t", " 0px,\n\t\t\t\t\ttransparent 1px\n\t\t\t\t);\n\t\t}\n\n\t\t&.", "::after {\n\t\t\tbackground: linear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\ttransparent 0,\n\t\t\t\t\t", " 140%\n\t\t\t\t),\n\t\t\t\tlinear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\t", " 0px,\n\t\t\t\t\ttransparent 1px\n\t\t\t\t);\n\t\t\tright: 0px;\n\t\t}\n\t"])), _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, tableShadowWidth, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", _ui.shadowClassNames.RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)");
106
106
  };
107
107
  var rendererStyles = exports.rendererStyles = function rendererStyles(wrapperProps) {
108
108
  return function (theme) {
@@ -115,7 +115,7 @@ var rendererStyles = exports.rendererStyles = function rendererStyles(wrapperPro
115
115
  var useBlockRenderForCodeBlock = wrapperProps.useBlockRenderForCodeBlock;
116
116
 
117
117
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression
118
- return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n font-size: ", "px;\n line-height: 1.5rem;\n color: ", ";\n\n .", "::after {\n // we add a clearfix after ak-renderer-document in order to\n // contain internal floats (such as media images that are \"wrap-left\")\n // to just the renderer (and not spill outside of it)\n content: '';\n visibility: hidden;\n display: block;\n height: 0;\n clear: both;\n }\n\n ", "\n ", "\n\n .", " {\n ", "\n }\n\n & h1 {\n ", "\n }\n\n & h2 {\n ", "\n }\n\n & h3 {\n ", "\n }\n\n & h4 {\n ", "\n }\n\n & h5 {\n ", "\n }\n\n & h6 {\n ", "\n }\n\n & span.akActionMark {\n color: ", ";\n text-decoration: none;\n\n &:hover {\n color: ", ";\n text-decoration: underline;\n }\n\n &:active {\n color: ", ";\n }\n }\n\n & span.akActionMark {\n cursor: pointer;\n }\n\n & span[data-placeholder] {\n color: ", ";\n }\n\n ", "\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", "\n\n & .UnknownBlock {\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n\n & span.date-node {\n background: ", ";\n border-radius: ", ";\n color: ", ";\n padding: ", " ", ";\n margin: 0 1px;\n transition: background 0.3s;\n }\n\n & span.date-node-highlighted {\n background: ", ";\n color: ", ";\n }\n\n & .renderer-image {\n max-width: 100%;\n display: block;\n margin: ", " 0;\n }\n\n .", ".rich-media-wrapped\n + .", ":not(.rich-media-wrapped) {\n clear: both;\n }\n\n & .code-block,\n & blockquote,\n & hr,\n & > div > div:not(.rich-media-wrapped),\n .", ".rich-media-wrapped\n + .rich-media-wrapped\n + *:not(.rich-media-wrapped),\n .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n .", ".image-align-start,\n .", ".image-center,\n .", ".image-align-end {\n clear: both;\n }\n\n & .rich-media-wrapped {\n & + h1,\n & + h2,\n & + h3,\n & + h4,\n & + h5,\n & + h6 {\n margin-top: ", ";\n }\n }\n\n ", "\n /* plugin styles */\n ", " &\n div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n margin-left: 0;\n margin-right: 0;\n }\n\n /* Breakout for tables and extensions */\n .", " > {\n ", "\n\n * .", " {\n overflow-x: auto;\n }\n\n & .", ":first-child {\n margin-top: 0;\n }\n }\n\n .", " {\n .", " {\n margin-top: ", ";\n }\n\n .", " {\n margin-left: 50%;\n transform: translateX(-50%);\n }\n\n .", " {\n overflow-x: auto;\n }\n\n .", "\n .", " {\n display: flex;\n }\n }\n\n ", "\n\n .", " .", " {\n z-index: 0;\n transition: all 0.1s linear;\n display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n /** Shadow overrides */\n &.", "::after,\n &.", "::before {\n top: ", "px;\n height: calc(100% - ", "px);\n z-index: ", ";\n }\n\n ", "\n\n &\n .", ",\n &\n .", " {\n height: calc(100% - ", "px);\n }\n\n /**\n * A hack for making all the <th /> heights equal in case some have shorter\n * content than others.\n *\n * This is done to make sort buttons fill entire <th />.\n */\n table {\n height: 1px; /* will be ignored */\n ", ";\n margin-left: 0;\n margin-right: 0;\n }\n\n table tr:first-of-type {\n height: 100%;\n\n td,\n th {\n position: relative;\n }\n }\n\n table[data-number-column='true'] {\n .", " {\n background-color: ", ";\n border-right: 1px solid\n ", ";\n width: ", "px;\n text-align: center;\n color: ", ";\n font-size: ", ";\n }\n\n .fixed .", " {\n border-right: 0px none;\n }\n }\n }\n\n tr[data-header-row].fixed {\n position: fixed !important;\n display: flex;\n overflow: hidden;\n z-index: ", ";\n\n border-right: 1px solid\n ", ";\n border-bottom: 1px solid\n ", ";\n\n /* this is to compensate for the table border */\n transform: translateX(-1px);\n }\n\n .sticky > th {\n z-index: ", ";\n position: sticky !important;\n top: 0;\n }\n\n /* Make the number column header sticky */\n .sticky > td {\n position: sticky !important;\n top: 0;\n }\n\n /* add border for position: sticky\n and work around background-clip: padding-box\n bug for FF causing box-shadow bug in Chrome */\n .sticky th,\n .sticky td {\n box-shadow:\n 0px 1px\n ", ",\n 0px -0.5px ", ",\n inset -1px 0px ", ",\n 0px -1px ", ";\n }\n\n /* this will remove jumpiness caused in Chrome for sticky headers */\n .fixed + tr {\n min-height: 0px;\n }\n\n /*\n * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n * See ED-4159.\n */\n & .code-block {\n max-width: 100%;\n /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n display: block;\n /* stylelint-enable */\n\n position: relative;\n border-radius: ", ";\n\n /*\n * The overall renderer has word-wrap: break; which causes issues with\n * code block line numbers in Safari / iOS.\n */\n word-wrap: normal;\n }\n\n & .MediaGroup,\n & .code-block {\n margin-top: ", ";\n\n &:first-child {\n margin-top: 0;\n }\n }\n\n ", "\n\n ", "\n\n ", ";\n & [data-layout-section] {\n margin-top: ", ";\n & > div + div {\n margin-left: ", ";\n }\n\n @media screen and (max-width: ", "px) {\n & > div + div {\n margin-left: 0;\n }\n }\n\n & .MediaGroup,\n & .code-block {\n margin-top: ", ";\n\n &:first-child {\n margin-top: 0;\n }\n }\n }\n\n & li {\n > .code-block {\n margin: ", " 0 0 0;\n }\n > .code-block:first-child {\n margin-top: 0;\n }\n\n > div:last-of-type.code-block {\n margin-bottom: ", ";\n }\n }\n\n &:not([data-node-type='decisionList']) > li,\n // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n &:not(.", ") > li {\n ", "\n }\n "])), (0, _editorSharedStyles.editorFontSize)(themeProps), "var(--ds-text, ".concat(colors.N800, ")"), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), _consts.RendererCssClassName.DOCUMENT, _mediaInline.mediaInlineImageStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), telepointerStyles(colorMode), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(), (0, _styles.ruleSharedStyles)(), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, (0, _styles.backgroundColorStyles)(colorMode), _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), "var(--ds-background-neutral, ".concat(colors.N30A, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-space-100, 8px)", alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, breakoutWidthStyle(), _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, getShadowOverrides(), _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorTableNumberColumnWidth, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _consts.RendererCssClassName.NUMBER_COLUMN, _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-border-radius-100, 3px)", _editorSharedStyles.blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), _styles.columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
118
+ return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t\tfont-size: ", "px;\n\t\tline-height: 1.5rem;\n\t\tcolor: ", ";\n\n\t\t.", "::after {\n\t\t\t// we add a clearfix after ak-renderer-document in order to\n\t\t\t// contain internal floats (such as media images that are \"wrap-left\")\n\t\t\t// to just the renderer (and not spill outside of it)\n\t\t\tcontent: '';\n\t\t\tvisibility: hidden;\n\t\t\tdisplay: block;\n\t\t\theight: 0;\n\t\t\tclear: both;\n\t\t}\n\n\t\t", "\n\t\t", "\n\n .", " {\n\t\t\t", "\n\t\t}\n\n\t\t& h1 {\n\t\t\t", "\n\t\t}\n\n\t\t& h2 {\n\t\t\t", "\n\t\t}\n\n\t\t& h3 {\n\t\t\t", "\n\t\t}\n\n\t\t& h4 {\n\t\t\t", "\n\t\t}\n\n\t\t& h5 {\n\t\t\t", "\n\t\t}\n\n\t\t& h6 {\n\t\t\t", "\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcolor: ", ";\n\t\t\ttext-decoration: none;\n\n\t\t\t&:hover {\n\t\t\t\tcolor: ", ";\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t& span[data-placeholder] {\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t", "\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", "\n\n\t\t& .UnknownBlock {\n\t\t\tfont-family: ", ";\n\t\t\tfont-size: ", ";\n\t\t\tfont-weight: 400;\n\t\t\twhite-space: pre-wrap;\n\t\t\tword-wrap: break-word;\n\t\t}\n\n\t\t& span.date-node {\n\t\t\tbackground: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tcolor: ", ";\n\t\t\tpadding: ", " ", ";\n\t\t\tmargin: 0 1px;\n\t\t\ttransition: background 0.3s;\n\t\t}\n\n\t\t& span.date-node-highlighted {\n\t\t\tbackground: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t& .renderer-image {\n\t\t\tmax-width: 100%;\n\t\t\tdisplay: block;\n\t\t\tmargin: ", " 0;\n\t\t}\n\n\t\t.", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .code-block,\n\t\t& blockquote,\n\t\t& hr,\n\t\t& > div > div:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n\t\t.", ".image-align-start,\n\t\t\t.", ".image-center,\n\t\t\t.", ".image-align-end {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .rich-media-wrapped {\n\t\t\t& + h1,\n\t\t\t& + h2,\n\t\t\t& + h3,\n\t\t\t& + h4,\n\t\t\t& + h5,\n\t\t\t& + h6 {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t", "\n\t\t/* plugin styles */\n ", " &\n div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\n\t\t/* Breakout for tables and extensions */\n\t\t.", " > {\n\t\t\t", "\n\n\t\t\t* .", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t& .", ":first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin-left: 50%;\n\t\t\t\ttransform: translateX(-50%);\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t.", " .", " {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\ttransition: all 0.1s linear;\n\t\t\tdisplay: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n\t\t\t/** Shadow overrides */\n\t\t\t&.", "::after, &.", "::before {\n\t\t\t\ttop: ", "px;\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t", "\n\n\t\t\t&\n .", ",\n &\n .", " {\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t}\n\n\t\t\t/**\n * A hack for making all the <th /> heights equal in case some have shorter\n * content than others.\n *\n * This is done to make sort buttons fill entire <th />.\n */\n\t\t\ttable {\n\t\t\t\theight: 1px; /* will be ignored */\n\t\t\t\t", ";\n\t\t\t\tmargin-left: 0;\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\n\t\t\ttable tr:first-of-type {\n\t\t\t\theight: 100%;\n\n\t\t\t\ttd,\n\t\t\t\tth {\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\ttable[data-number-column='true'] {\n\t\t\t\t.", " {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-right: 1px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\twidth: ", "px;\n\t\t\t\t\ttext-align: center;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t}\n\n\t\t\t\t.fixed .", " {\n\t\t\t\t\tborder-right: 0px none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttr[data-header-row].fixed {\n\t\t\tposition: fixed !important;\n\t\t\tdisplay: flex;\n\t\t\toverflow: hidden;\n\t\t\tz-index: ", ";\n\n\t\t\tborder-right: 1px solid ", ";\n\t\t\tborder-bottom: 1px solid ", ";\n\n\t\t\t/* this is to compensate for the table border */\n\t\t\ttransform: translateX(-1px);\n\t\t}\n\n\t\t.sticky > th {\n\t\t\tz-index: ", ";\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* Make the number column header sticky */\n\t\t.sticky > td {\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* add border for position: sticky\n and work around background-clip: padding-box\n bug for FF causing box-shadow bug in Chrome */\n\t\t.sticky th,\n\t\t.sticky td {\n\t\t\tbox-shadow:\n\t\t\t\t0px 1px ", ",\n\t\t\t\t0px -0.5px ", ",\n\t\t\t\tinset -1px 0px ", ",\n\t\t\t\t0px -1px ", ";\n\t\t}\n\n\t\t/* this will remove jumpiness caused in Chrome for sticky headers */\n\t\t.fixed + tr {\n\t\t\tmin-height: 0px;\n\t\t}\n\n\t\t/*\n * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n * See ED-4159.\n */\n\t\t& .code-block {\n\t\t\tmax-width: 100%;\n\t\t\t/* -ms- properties are necessary until MS supports the latest version of the grid spec */\n\t\t\t/* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n\t\t\tdisplay: block;\n\t\t\t/* stylelint-enable */\n\n\t\t\tposition: relative;\n\t\t\tborder-radius: ", ";\n\n\t\t\t/*\n * The overall renderer has word-wrap: break; which causes issues with\n * code block line numbers in Safari / iOS.\n */\n\t\t\tword-wrap: normal;\n\t\t}\n\n\t\t& .MediaGroup,\n\t\t& .code-block {\n\t\t\tmargin-top: ", ";\n\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n ", ";\n\t\t& [data-layout-section] {\n\t\t\tmargin-top: ", ";\n\t\t\t& > div + div {\n\t\t\t\tmargin-left: ", ";\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t& > div + div {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t& .MediaGroup,\n\t\t\t& .code-block {\n\t\t\t\tmargin-top: ", ";\n\n\t\t\t\t&:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t& li {\n\t\t\t> .code-block {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\t\t\t> .code-block:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\n\t\t\t> div:last-of-type.code-block {\n\t\t\t\tmargin-bottom: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t"])), (0, _editorSharedStyles.editorFontSize)(themeProps), "var(--ds-text, ".concat(colors.N800, ")"), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), _consts.RendererCssClassName.DOCUMENT, _mediaInline.mediaInlineImageStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), telepointerStyles(colorMode), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(), (0, _styles.ruleSharedStyles)(), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, (0, _styles.backgroundColorStyles)(colorMode), _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), "var(--ds-background-neutral, ".concat(colors.N30A, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-space-100, 8px)", alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, breakoutWidthStyle(), _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, getShadowOverrides(), _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorTableNumberColumnWidth, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _consts.RendererCssClassName.NUMBER_COLUMN, _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-border-radius-100, 3px)", _editorSharedStyles.blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), _styles.columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
119
119
  };
120
120
  };
121
121
  var useGridRenderForCodeBlock = function useGridRenderForCodeBlock(codeBlockRenderAsBlock) {
package/dist/cjs/ui/annotations/element/mark.js CHANGED
@@ -19,7 +19,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
19
19
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
20
20
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState` is not object-safe
21
21
  var markStyles = function markStyles() {
22
- return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n color: inherit;\n background-color: unset;\n -webkit-tap-highlight-color: transparent;\n\n &[data-mark-annotation-state='", "'] {\n ", ";\n\n &:focus,\n &[data-has-focus='true'] {\n ", ";\n }\n }\n"])), _adfSchema.AnnotationMarkStates.ACTIVE, (0, _styles.AnnotationSharedCSSByState)().blur, (0, _styles.AnnotationSharedCSSByState)().focus);
22
+ return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tcolor: inherit;\n\tbackground-color: unset;\n\t-webkit-tap-highlight-color: transparent;\n\n\t&[data-mark-annotation-state='", "'] {\n\t\t", ";\n\n\t\t&:focus,\n\t\t&[data-has-focus='true'] {\n\t\t\t", ";\n\t\t}\n\t}\n"])), _adfSchema.AnnotationMarkStates.ACTIVE, (0, _styles.AnnotationSharedCSSByState)().blur, (0, _styles.AnnotationSharedCSSByState)().focus);
23
23
  };
24
24
  var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
25
25
  var annotationParentIds = _ref.annotationParentIds,
package/dist/es2019/react/marks/alignment.js CHANGED
@@ -7,8 +7,8 @@ const MarkWrapper = props => {
7
7
  const styles = props['data-align'] ?
8
8
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
9
9
  css`
10
- text-align: ${alignmentPositionMap[props['data-align']]};
11
- ` : '';
10
+ text-align: ${alignmentPositionMap[props['data-align']]};
11
+ ` : '';
12
12
  return (
13
13
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
14
14
  jsx("div", _extends({
package/dist/es2019/react/nodes/codeBlock/components/codeBlockContainer.js CHANGED
@@ -8,30 +8,37 @@ import CodeBlockButtonContainer from './codeBlockButtonContainer';
8
8
 
9
9
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
10
10
  const codeBlockStyleOverrides = css`
11
- tab-size: 4;
12
- background-color: ${`var(--ds-surface-raised, ${N20})`};
11
+ tab-size: 4;
12
+ background-color: ${`var(--ds-surface-raised, ${N20})`};
13
13
 
14
- &:hover {
15
- button {
16
- opacity: 1;
17
- }
18
- }
14
+ &:hover {
15
+ button {
16
+ opacity: 1;
17
+ }
18
+ }
19
19
 
20
- button {
21
- opacity: 0;
22
- transition: opacity 0.2s ease 0s;
23
- }
20
+ button {
21
+ opacity: 0;
22
+ transition: opacity 0.2s ease 0s;
23
+ }
24
24
 
25
- ${CodeBlockSharedCssClassName.DS_CODEBLOCK} {
26
- font-size: ${relativeFontSizeToBase16(fontSize())};
27
- line-height: 1.5rem;
28
- background-image: ${overflowShadow({
25
+ ${CodeBlockSharedCssClassName.DS_CODEBLOCK} {
26
+ font-size: ${relativeFontSizeToBase16(fontSize())};
27
+ line-height: 1.5rem;
28
+ background-image: ${overflowShadow({
29
29
  leftCoverWidth: "var(--ds-space-300, 24px)"
30
30
  })};
31
- background-attachment: local, local, local, local, scroll, scroll, scroll,
32
- scroll;
33
- background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;
34
- }
31
+ background-attachment: local, local, local, local, scroll, scroll, scroll, scroll;
32
+ background-position:
33
+ 0 0,
34
+ 0 0,
35
+ 100% 0,
36
+ 100% 0,
37
+ 100% 0,
38
+ 100% 0,
39
+ 0 0,
40
+ 0 0;
41
+ }
35
42
  `;
36
43
  const CodeBlockContainer = ({
37
44
  allowCopyToClipboard,
package/dist/es2019/react/nodes/codeBlock/components/lightWeightCodeBlock.js CHANGED
@@ -7,9 +7,9 @@ import { useBidiWarnings } from '../../../hooks/use-bidi-warnings';
7
7
  import { RendererCssClassName } from '../../../../consts';
8
8
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
9
9
  const lightWeightCodeBlockStyles = css`
10
- .${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER} {
11
- cursor: text;
12
- }
10
+ .${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER} {
11
+ cursor: text;
12
+ }
13
13
  `;
14
14
  export const LightWeightCodeBlockCssClassName = {
15
15
  CONTAINER: 'light-weight-code-block'
@@ -23,12 +23,12 @@ export const getLightWeightCodeBlockStylesForRootRendererStyleSheet = () => {
23
23
  // Renderer stylesheet.
24
24
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
25
25
  return css`
26
- .${RendererCssClassName.DOCUMENT}
27
- > .${LightWeightCodeBlockCssClassName.CONTAINER}
28
- .${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER} {
29
- margin-top: ${blockNodesVerticalMargin};
30
- }
31
- `;
26
+ .${RendererCssClassName.DOCUMENT}
27
+ > .${LightWeightCodeBlockCssClassName.CONTAINER}
28
+ .${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER} {
29
+ margin-top: ${blockNodesVerticalMargin};
30
+ }
31
+ `;
32
32
  };
33
33
  const LightWeightCodeBlock = /*#__PURE__*/forwardRef(({
34
34
  text,
package/dist/es2019/react/nodes/media/index.js CHANGED
@@ -21,22 +21,22 @@ import { injectIntl } from 'react-intl-next';
21
21
  import { useInlineCommentSubscriberContext, useInlineCommentsFilter } from '../../../ui/annotations/hooks';
22
22
  import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
23
23
  export const linkStyle = css`
24
- position: absolute;
25
- background: transparent;
26
- top: 0;
27
- right: 0;
28
- bottom: 0;
29
- left: 0;
30
- cursor: pointer;
31
- width: 100% !important;
32
- height: 100% !important;
24
+ position: absolute;
25
+ background: transparent;
26
+ top: 0;
27
+ right: 0;
28
+ bottom: 0;
29
+ left: 0;
30
+ cursor: pointer;
31
+ width: 100% !important;
32
+ height: 100% !important;
33
33
  `;
34
34
  export const borderStyle = (color, width) => css`
35
- position: absolute;
36
- width: 100% !important;
37
- height: 100% !important;
38
- border-radius: ${width}px;
39
- box-shadow: 0 0 0 ${width}px ${color};
35
+ position: absolute;
36
+ width: 100% !important;
37
+ height: 100% !important;
38
+ border-radius: ${width}px;
39
+ box-shadow: 0 0 0 ${width}px ${color};
40
40
  `;
41
41
  const MediaBorder = ({
42
42
  mark,
package/dist/es2019/react/nodes/multiBodiedExtension.js CHANGED
@@ -43,13 +43,13 @@ const useMultiBodiedExtensionActions = ({
43
43
 
44
44
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
45
45
  const navigationCssExtended = css`
46
- ${sharedMultiBodiedExtensionStyles.mbeNavigation};
47
- margin-left: 0 !important;
48
- margin-right: 0 !important;
49
- .mbe-add-tab-button,
50
- .mbe-remove-tab {
51
- display: none;
52
- }
46
+ ${sharedMultiBodiedExtensionStyles.mbeNavigation};
47
+ margin-left: 0 !important;
48
+ margin-right: 0 !important;
49
+ .mbe-add-tab-button,
50
+ .mbe-remove-tab {
51
+ display: none;
52
+ }
53
53
  `;
54
54
  const MultiBodiedExtension = props => {
55
55
  const {
@@ -75,25 +75,25 @@ const MultiBodiedExtension = props => {
75
75
  });
76
76
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
77
77
  const containerCssExtended = css`
78
- ${sharedMultiBodiedExtensionStyles.mbeExtensionContainer};
79
- .ak-renderer-extension {
80
- margin-top: 0 !important;
81
- }
78
+ ${sharedMultiBodiedExtensionStyles.mbeExtensionContainer};
79
+ .ak-renderer-extension {
80
+ margin-top: 0 !important;
81
+ }
82
82
 
83
- [data-layout='full-width'],
84
- [data-layout='wide'] {
85
- .multiBodiedExtension-navigation {
86
- border-right: 3px solid ${`var(--ds-border, ${N40})`} !important;
87
- }
88
- }
83
+ [data-layout='full-width'],
84
+ [data-layout='wide'] {
85
+ .multiBodiedExtension-navigation {
86
+ border-right: 3px solid ${`var(--ds-border, ${N40})`} !important;
87
+ }
88
+ }
89
89
 
90
- .multiBodiedExtension--frames
91
- > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) {
92
- ${sharedMultiBodiedExtensionStyles.extensionFrameContent}
93
- margin-left: 0;
94
- margin-right: 0;
95
- }
96
- `;
90
+ .multiBodiedExtension--frames
91
+ > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) {
92
+ ${sharedMultiBodiedExtensionStyles.extensionFrameContent}
93
+ margin-left: 0;
94
+ margin-right: 0;
95
+ }
96
+ `;
97
97
  const isTopLevel = path.length < 1;
98
98
  const centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
99
99
  function renderMbeContent(width) {