@atlaskit/renderer 109.7.0 → 109.7.2

package/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  rules: {
+    '@atlaskit/design-system/ensure-design-token-usage/preview': [
+      'error',
+      { domains: ['spacing'], shouldEnforceFallbacks: false },
+    ],
+  },
+};

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/renderer
 
+## 109.7.2
+
+### Patch Changes
+
+- [#75947](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/75947) [`43549c3789b1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/43549c3789b1) - Migrate @atlaskit/editor-core to use declarative entry points
+
+## 109.7.1
+
+### Patch Changes
+
+- [#78877](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/78877) [`e5ca78a1788d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e5ca78a1788d) - Upgrade @atlaskit/renderer types to be React 18 compatible
+
 ## 109.7.0
 
 ### Minor Changes

package/dist/cjs/react/nodes/blockCard.js

@@ -24,6 +24,7 @@ var _utils2 = require("@atlaskit/editor-common/utils");
 var datasourceContainerStyle = (0, _react2.css)({
   borderRadius: "var(--ds-border-radius-200, 8px)",
   border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
   marginLeft: '50%',
   transform: 'translateX(-50%)'
 });

package/dist/cjs/react/nodes/codeBlock/components/codeBlockButtonContainer.js

@@ -22,16 +22,16 @@ var codeBlockButtonsStyle = (0, _react.css)({
   position: 'absolute',
   height: '0',
   width: '100%',
-  right: '6px',
-  top: '4px',
-  padding: '2px',
+  right: "var(--ds-space-075, 6px)",
+  top: "var(--ds-space-050, 4px)",
+  padding: "var(--ds-space-025, 2px)",
   button: {
     height: '32px',
     width: '32px',
     border: "2px solid ".concat("var(--ds-border, ".concat(_colors.N0, ")")),
     borderRadius: '4px',
-    marginLeft: '4px',
-    padding: '2px',
+    marginLeft: "var(--ds-space-050, 4px)",
+    padding: "var(--ds-space-025, 2px)",
     background: "".concat("var(--ds-surface-overlay, ".concat(_colors.N20, ")")),
     color: "var(--ds-icon, rgb(66, 82, 110))",
     '&:hover': {

package/dist/cjs/react/nodes/codeBlock/components/codeBlockCopyButton.js

@@ -1,14 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("@emotion/react");
-var _react2 = _interopRequireWildcard(require("react"));
+var _react2 = require("react");
 var _reactIntlNext = require("react-intl-next");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
@@ -17,8 +16,6 @@ var _clipboard = require("../../../utils/clipboard");
 var _messages = require("@atlaskit/editor-common/messages");
 var _enums = require("../../../../analytics/enums");
 var _analyticsContext = _interopRequireDefault(require("../../../../analytics/analyticsContext"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /** @jsx jsx */
 
 var CopyButton = function CopyButton(_ref) {

package/dist/cjs/react/nodes/codeBlock/components/codeBlockWrapButton.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("@emotion/react");
-var _react2 = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));

package/dist/cjs/react/nodes/embedCard.js

@@ -33,6 +33,7 @@ var embedCardWrapperStyles = (0, _react.css)({
   margin: '0 auto'
 });
 var uIMediaSingleLayoutStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
   marginLeft: '50%',
   transform: 'translateX(-50%)'
 });

package/dist/cjs/react/nodes/table/sticky.js

@@ -8,7 +8,7 @@ exports.tableStickyPadding = exports.StickyTable = exports.OverflowParent = expo
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _styles = require("@atlaskit/editor-common/styles");
@@ -17,24 +17,47 @@ var _colors = require("@atlaskit/theme/colors");
 var _table = require("./table");
 var _injectProps = require("../../utils/inject-props");
 var _table2 = require("../table");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
+
 var tableStickyPadding = exports.tableStickyPadding = 8;
 var modeSpecficStyles = {
-  none: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: none;\n  "]))),
-  stick: (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    position: fixed;\n  "]))),
-  'pin-bottom': (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    position: absolute;\n  "])))
+  none: (0, _react2.css)({
+    display: 'none'
+  }),
+  stick: (0, _react2.css)({
+    position: 'fixed'
+  }),
+  'pin-bottom': (0, _react2.css)({
+    position: 'absolute'
+  })
 };
 
 // TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4123
 var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width, rendererAppearance) {
+  var _css;
   var stickyHeaderZIndex;
   if ((0, _table2.isTableResizingEnabled)(rendererAppearance)) {
     stickyHeaderZIndex = 13;
   } else {
     stickyHeaderZIndex = _editorSharedStyles.akEditorStickyHeaderZIndex;
   }
-  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    width: ", "px;\n    z-index: ", ";\n    &\n      .", ",\n      &\n      .", "\n      > table {\n      margin-top: 0;\n      margin-bottom: 0;\n      tr {\n        background: ", ";\n      }\n    }\n\n    border-top: ", "px solid\n      ", ";\n    background: ", ";\n    box-shadow: 0 6px 4px -4px ", ";\n\n    div[data-expanded='false'] & {\n      display: none;\n    }\n\n    &\n      .", ".is-sticky.right-shadow::after,\n      &\n      .", ".is-sticky.left-shadow::before {\n      top: 0px;\n      height: 100%;\n    }\n\n    &.fixed-table-div-custom-table-resizing[mode='stick'] {\n      z-index: ", ";\n    }\n  "])), typeof top === 'number' && "top: ".concat(top, "px;"), width, stickyHeaderZIndex, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, "var(--ds-surface, white)", tableStickyPadding, "var(--ds-surface, white)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overflow-perimeter, ".concat(_colors.N40A, ")"), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER, stickyHeaderZIndex);
+  return (0, _react2.css)(typeof top === 'number' && "top: ".concat(top, "px;"), (_css = {
+    width: "".concat(width, "px"),
+    zIndex: stickyHeaderZIndex
+  }, (0, _defineProperty2.default)(_css, "& .".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, ", & .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
+    marginTop: 0,
+    marginBottom: 0,
+    tr: {
+      background: "var(--ds-surface, white)"
+    }
+  }), (0, _defineProperty2.default)(_css, "borderTop", "".concat(tableStickyPadding, "px solid ", "var(--ds-surface, white)")), (0, _defineProperty2.default)(_css, "background", "var(--ds-surface-overlay, white)"), (0, _defineProperty2.default)(_css, "boxShadow", "0 6px 4px -4px ".concat("var(--ds-shadow-overflow-perimeter, ".concat(_colors.N40A, ")"))), (0, _defineProperty2.default)(_css, "div[data-expanded='false'] &", {
+    display: 'none'
+  }), (0, _defineProperty2.default)(_css, "& .".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, ".is-sticky.right-shadow::after, & .").concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, ".is-sticky.left-shadow::before"), {
+    top: '0px',
+    height: '100%'
+  }), (0, _defineProperty2.default)(_css, "&.fixed-table-div-custom-table-resizing[mode='stick']", {
+    zIndex: stickyHeaderZIndex
+  }), _css));
 };
 var FixedTableDiv = exports.FixedTableDiv = function FixedTableDiv(props) {
   var top = props.top,
@@ -71,12 +94,15 @@ var StickyTable = exports.StickyTable = function StickyTable(_ref) {
   /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
   if ((0, _table2.isTableResizingEnabled)(rendererAppearance)) {
     styles = (0, _react2.css)({
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       top: mode === 'pin-bottom' ? top : undefined,
       position: 'absolute'
     });
   } else {
     styles = (0, _react2.css)({
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       left: left && left < 0 ? left : undefined,
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       top: mode === 'pin-bottom' ? top : undefined,
       position: 'relative'
     });

package/dist/cjs/react/nodes/table.js

@@ -358,7 +358,8 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         ref: this.props.handleRef,
         style: {
           width: tableWidth,
-          left: left // eslint-disable-line @atlaskit/design-system/ensure-design-token-usage
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
+          left: left
         }
       }, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') && stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/_react.default.createElement(_sticky.StickyTable, {
         isNumberColumnEnabled: isNumberColumnEnabled,

package/dist/cjs/ui/Renderer/index.js

@@ -55,7 +55,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.7.0";
+var packageVersion = "109.7.2";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/cjs/ui/Renderer/style.js

@@ -33,6 +33,8 @@ var TELEPOINTER_ID = exports.TELEPOINTER_ID = 'ai-streaming-telepointer';
 var telepointerStyles = function telepointerStyles() {
   var _getGlobalTheme = (0, _tokens.getGlobalTheme)(),
     colorMode = _getGlobalTheme.colorMode;
+
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
   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');
 };
 var getLineHeight = function getLineHeight(fontCode) {
@@ -102,7 +104,8 @@ var breakoutWidthStyle = function breakoutWidthStyle() {
   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);
 };
 var getShadowOverrides = function getShadowOverrides() {
-  return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? (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          left: calc(100% - ", "px);\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)", tableShadowWidth) : '';
+  return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  (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          left: calc(100% - ", "px);\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)", tableShadowWidth) : '';
 };
 var rendererStyles = exports.rendererStyles = function rendererStyles(wrapperProps) {
   return function (theme) {
@@ -111,6 +114,8 @@ var rendererStyles = exports.rendererStyles = function rendererStyles(wrapperPro
       theme: theme
     };
     var useBlockRenderForCodeBlock = wrapperProps.useBlockRenderForCodeBlock;
+
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
     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      & .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: 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(), _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, _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 : '');
   };
 };

package/dist/es2019/react/nodes/blockCard.js

@@ -17,6 +17,7 @@ import { calcBreakoutWidth, canRenderDatasource } from '@atlaskit/editor-common/
 const datasourceContainerStyle = css({
   borderRadius: `${"var(--ds-border-radius-200, 8px)"}`,
   border: `1px solid ${`var(--ds-border, ${N40})`}`,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
   marginLeft: '50%',
   transform: 'translateX(-50%)'
 });

package/dist/es2019/react/nodes/codeBlock/components/codeBlockButtonContainer.js

@@ -14,16 +14,16 @@ const codeBlockButtonsStyle = css({
   position: 'absolute',
   height: '0',
   width: '100%',
-  right: '6px',
-  top: '4px',
-  padding: '2px',
+  right: "var(--ds-space-075, 6px)",
+  top: "var(--ds-space-050, 4px)",
+  padding: "var(--ds-space-025, 2px)",
   button: {
     height: '32px',
     width: '32px',
     border: `2px solid ${`var(--ds-border, ${N0})`}`,
     borderRadius: '4px',
-    marginLeft: '4px',
-    padding: '2px',
+    marginLeft: "var(--ds-space-050, 4px)",
+    padding: "var(--ds-space-025, 2px)",
     background: `${`var(--ds-surface-overlay, ${N20})`}`,
     color: `${"var(--ds-icon, rgb(66, 82, 110))"}`,
     '&:hover': {

package/dist/es2019/react/nodes/codeBlock/components/codeBlockCopyButton.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { injectIntl } from 'react-intl-next';
 import Tooltip from '@atlaskit/tooltip';
 import Button from '@atlaskit/button/custom-theme-button';

package/dist/es2019/react/nodes/codeBlock/components/codeBlockWrapButton.js

@@ -1,6 +1,5 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import Tooltip from '@atlaskit/tooltip';
 import Button from '@atlaskit/button/custom-theme-button';

package/dist/es2019/react/nodes/embedCard.js

@@ -24,6 +24,7 @@ const embedCardWrapperStyles = css({
   margin: '0 auto'
 });
 const uIMediaSingleLayoutStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
   marginLeft: '50%',
   transform: 'translateX(-50%)'
 });

package/dist/es2019/react/nodes/table/sticky.js

@@ -10,15 +10,15 @@ import { recursivelyInjectProps } from '../../utils/inject-props';
 import { isTableResizingEnabled } from '../table';
 export const tableStickyPadding = 8;
 const modeSpecficStyles = {
-  none: css`
-    display: none;
-  `,
-  stick: css`
-    position: fixed;
-  `,
-  'pin-bottom': css`
-    position: absolute;
-  `
+  none: css({
+    display: 'none'
+  }),
+  stick: css({
+    position: 'fixed'
+  }),
+  'pin-bottom': css({
+    position: 'absolute'
+  })
 };
 
 // TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4123
@@ -29,43 +29,30 @@ const fixedTableDivStaticStyles = (top, width, rendererAppearance) => {
   } else {
     stickyHeaderZIndex = akEditorStickyHeaderZIndex;
   }
-  return css`
-    ${typeof top === 'number' && `top: ${top}px;`}
-    width: ${width}px;
-    z-index: ${stickyHeaderZIndex};
-    &
-      .${TableSharedCssClassName.TABLE_CONTAINER},
-      &
-      .${TableSharedCssClassName.TABLE_STICKY_WRAPPER}
-      > table {
-      margin-top: 0;
-      margin-bottom: 0;
-      tr {
-        background: ${"var(--ds-surface, white)"};
+  return css(typeof top === 'number' && `top: ${top}px;`, {
+    width: `${width}px`,
+    zIndex: stickyHeaderZIndex,
+    [`& .${TableSharedCssClassName.TABLE_CONTAINER}, & .${TableSharedCssClassName.TABLE_STICKY_WRAPPER} > table`]: {
+      marginTop: 0,
+      marginBottom: 0,
+      tr: {
+        background: "var(--ds-surface, white)"
       }
+    },
+    borderTop: `${tableStickyPadding}px solid ${"var(--ds-surface, white)"}`,
+    background: "var(--ds-surface-overlay, white)",
+    boxShadow: `0 6px 4px -4px ${`var(--ds-shadow-overflow-perimeter, ${N40A})`}`,
+    "div[data-expanded='false'] &": {
+      display: 'none'
+    },
+    [`& .${TableSharedCssClassName.TABLE_CONTAINER}.is-sticky.right-shadow::after, & .${TableSharedCssClassName.TABLE_CONTAINER}.is-sticky.left-shadow::before`]: {
+      top: '0px',
+      height: '100%'
+    },
+    "&.fixed-table-div-custom-table-resizing[mode='stick']": {
+      zIndex: stickyHeaderZIndex
     }
-
-    border-top: ${tableStickyPadding}px solid
-      ${"var(--ds-surface, white)"};
-    background: ${"var(--ds-surface-overlay, white)"};
-    box-shadow: 0 6px 4px -4px ${`var(--ds-shadow-overflow-perimeter, ${N40A})`};
-
-    div[data-expanded='false'] & {
-      display: none;
-    }
-
-    &
-      .${TableSharedCssClassName.TABLE_CONTAINER}.is-sticky.right-shadow::after,
-      &
-      .${TableSharedCssClassName.TABLE_CONTAINER}.is-sticky.left-shadow::before {
-      top: 0px;
-      height: 100%;
-    }
-
-    &.fixed-table-div-custom-table-resizing[mode='stick'] {
-      z-index: ${stickyHeaderZIndex};
-    }
-  `;
+  });
 };
 export const FixedTableDiv = props => {
   const {
@@ -105,12 +92,15 @@ export const StickyTable = ({
   /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
   if (isTableResizingEnabled(rendererAppearance)) {
     styles = css({
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       top: mode === 'pin-bottom' ? top : undefined,
       position: 'absolute'
     });
   } else {
     styles = css({
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       left: left && left < 0 ? left : undefined,
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       top: mode === 'pin-bottom' ? top : undefined,
       position: 'relative'
     });

package/dist/es2019/react/nodes/table.js

@@ -305,7 +305,8 @@ export class TableContainer extends React.Component {
       ref: this.props.handleRef,
       style: {
         width: tableWidth,
-        left // eslint-disable-line @atlaskit/design-system/ensure-design-token-usage
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
+        left
       }
     }, getBooleanFF('platform.editor.custom-table-width') && stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
       isNumberColumnEnabled: isNumberColumnEnabled,

package/dist/es2019/ui/Renderer/index.js

@@ -36,7 +36,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.7.0";
+const packageVersion = "109.7.2";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

package/dist/es2019/ui/Renderer/style.js

@@ -24,6 +24,8 @@ const telepointerStyles = () => {
   const {
     colorMode
   } = getGlobalTheme();
+
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
   return css`
     #${TELEPOINTER_ID} {
       display: inline-block;
@@ -358,7 +360,9 @@ const breakoutWidthStyle = () => {
   `;
 };
 const getShadowOverrides = () => {
-  return getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? css`
+  return getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ?
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  css`
         /** Shadow overrides */
         &.${shadowClassNames.RIGHT_SHADOW}::after,
           &.${shadowClassNames.LEFT_SHADOW}::before {
@@ -398,6 +402,8 @@ export const rendererStyles = wrapperProps => theme => {
   const {
     useBlockRenderForCodeBlock
   } = wrapperProps;
+
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
   return css`
       font-size: ${editorFontSize(themeProps)}px;
       line-height: 1.5rem;

package/dist/esm/react/nodes/blockCard.js

@@ -17,6 +17,7 @@ import { calcBreakoutWidth, canRenderDatasource } from '@atlaskit/editor-common/
 var datasourceContainerStyle = css({
   borderRadius: "var(--ds-border-radius-200, 8px)",
   border: "1px solid ".concat("var(--ds-border, ".concat(N40, ")")),
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
   marginLeft: '50%',
   transform: 'translateX(-50%)'
 });

package/dist/esm/react/nodes/codeBlock/components/codeBlockButtonContainer.js

@@ -14,16 +14,16 @@ var codeBlockButtonsStyle = css({
   position: 'absolute',
   height: '0',
   width: '100%',
-  right: '6px',
-  top: '4px',
-  padding: '2px',
+  right: "var(--ds-space-075, 6px)",
+  top: "var(--ds-space-050, 4px)",
+  padding: "var(--ds-space-025, 2px)",
   button: {
     height: '32px',
     width: '32px',
     border: "2px solid ".concat("var(--ds-border, ".concat(N0, ")")),
     borderRadius: '4px',
-    marginLeft: '4px',
-    padding: '2px',
+    marginLeft: "var(--ds-space-050, 4px)",
+    padding: "var(--ds-space-025, 2px)",
     background: "".concat("var(--ds-surface-overlay, ".concat(N20, ")")),
     color: "var(--ds-icon, rgb(66, 82, 110))",
     '&:hover': {

package/dist/esm/react/nodes/codeBlock/components/codeBlockCopyButton.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { injectIntl } from 'react-intl-next';
 import Tooltip from '@atlaskit/tooltip';
 import Button from '@atlaskit/button/custom-theme-button';

package/dist/esm/react/nodes/codeBlock/components/codeBlockWrapButton.js

@@ -1,6 +1,5 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import Tooltip from '@atlaskit/tooltip';
 import Button from '@atlaskit/button/custom-theme-button';

package/dist/esm/react/nodes/embedCard.js

@@ -25,6 +25,7 @@ var embedCardWrapperStyles = css({
   margin: '0 auto'
 });
 var uIMediaSingleLayoutStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
   marginLeft: '50%',
   transform: 'translateX(-50%)'
 });

package/dist/esm/react/nodes/table/sticky.js

@@ -1,8 +1,7 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _extends from "@babel/runtime/helpers/extends";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
@@ -14,20 +13,43 @@ import { recursivelyInjectProps } from '../../utils/inject-props';
 import { isTableResizingEnabled } from '../table';
 export var tableStickyPadding = 8;
 var modeSpecficStyles = {
-  none: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: none;\n  "]))),
-  stick: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: fixed;\n  "]))),
-  'pin-bottom': css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: absolute;\n  "])))
+  none: css({
+    display: 'none'
+  }),
+  stick: css({
+    position: 'fixed'
+  }),
+  'pin-bottom': css({
+    position: 'absolute'
+  })
 };
 
 // TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4123
 var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width, rendererAppearance) {
+  var _css;
   var stickyHeaderZIndex;
   if (isTableResizingEnabled(rendererAppearance)) {
     stickyHeaderZIndex = 13;
   } else {
     stickyHeaderZIndex = akEditorStickyHeaderZIndex;
   }
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    ", "\n    width: ", "px;\n    z-index: ", ";\n    &\n      .", ",\n      &\n      .", "\n      > table {\n      margin-top: 0;\n      margin-bottom: 0;\n      tr {\n        background: ", ";\n      }\n    }\n\n    border-top: ", "px solid\n      ", ";\n    background: ", ";\n    box-shadow: 0 6px 4px -4px ", ";\n\n    div[data-expanded='false'] & {\n      display: none;\n    }\n\n    &\n      .", ".is-sticky.right-shadow::after,\n      &\n      .", ".is-sticky.left-shadow::before {\n      top: 0px;\n      height: 100%;\n    }\n\n    &.fixed-table-div-custom-table-resizing[mode='stick'] {\n      z-index: ", ";\n    }\n  "])), typeof top === 'number' && "top: ".concat(top, "px;"), width, stickyHeaderZIndex, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, "var(--ds-surface, white)", tableStickyPadding, "var(--ds-surface, white)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"), TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER, stickyHeaderZIndex);
+  return css(typeof top === 'number' && "top: ".concat(top, "px;"), (_css = {
+    width: "".concat(width, "px"),
+    zIndex: stickyHeaderZIndex
+  }, _defineProperty(_css, "& .".concat(TableSharedCssClassName.TABLE_CONTAINER, ", & .").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
+    marginTop: 0,
+    marginBottom: 0,
+    tr: {
+      background: "var(--ds-surface, white)"
+    }
+  }), _defineProperty(_css, "borderTop", "".concat(tableStickyPadding, "px solid ", "var(--ds-surface, white)")), _defineProperty(_css, "background", "var(--ds-surface-overlay, white)"), _defineProperty(_css, "boxShadow", "0 6px 4px -4px ".concat("var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"))), _defineProperty(_css, "div[data-expanded='false'] &", {
+    display: 'none'
+  }), _defineProperty(_css, "& .".concat(TableSharedCssClassName.TABLE_CONTAINER, ".is-sticky.right-shadow::after, & .").concat(TableSharedCssClassName.TABLE_CONTAINER, ".is-sticky.left-shadow::before"), {
+    top: '0px',
+    height: '100%'
+  }), _defineProperty(_css, "&.fixed-table-div-custom-table-resizing[mode='stick']", {
+    zIndex: stickyHeaderZIndex
+  }), _css));
 };
 export var FixedTableDiv = function FixedTableDiv(props) {
   var top = props.top,
@@ -64,12 +86,15 @@ export var StickyTable = function StickyTable(_ref) {
   /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
   if (isTableResizingEnabled(rendererAppearance)) {
     styles = css({
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       top: mode === 'pin-bottom' ? top : undefined,
       position: 'absolute'
     });
   } else {
     styles = css({
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       left: left && left < 0 ? left : undefined,
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       top: mode === 'pin-bottom' ? top : undefined,
       position: 'relative'
     });