@atlaskit/editor-common 78.11.4 → 78.11.5

package/dist/es2019/element-browser/components/ElementList/ElementList.js

@@ -22,23 +22,21 @@ import EmptyState from './EmptyState';
 import { getColumnCount, getScrollbarWidth } from './utils';
 export const ICON_HEIGHT = 40;
 export const ICON_WIDTH = 40;
-export const itemIcon = css`
-  width: ${ICON_WIDTH}px;
-  height: ${ICON_HEIGHT}px;
-  overflow: hidden;
-  border: 1px solid ${"var(--ds-border, rgba(223, 225, 229, 0.5))"}; /* N60 at 50% */
-  border-radius: ${borderRadius()}px;
-  box-sizing: border-box;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  div {
-    width: ${ICON_WIDTH}px;
-    height: ${ICON_HEIGHT}px;
+export const itemIcon = css({
+  width: `${ICON_WIDTH}px`,
+  height: `${ICON_HEIGHT}px`,
+  overflow: 'hidden',
+  border: `1px solid ${"var(--ds-border, rgba(223, 225, 229, 0.5))"}`,
+  borderRadius: `${borderRadius()}px`,
+  boxSizing: 'border-box',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  div: {
+    width: `${ICON_WIDTH}px`,
+    height: `${ICON_HEIGHT}px`
   }
-`;
+});
 function ElementList({
   items,
   mode,
@@ -230,95 +228,86 @@ const ItemContent = /*#__PURE__*/memo(({
 }, keyshortcut))), description && jsx("p", {
   css: itemDescription
 }, description))));
-const elementItemsWrapper = css`
-  flex: 1;
-  flex-flow: row wrap;
-  align-items: flex-start;
-  justify-content: flex-start;
-  overflow: hidden;
-  padding: ${ELEMENT_LIST_PADDING}px; // For Focus outline
-
-  .ReactVirtualized__Collection {
-    border-radius: 3px; // Standard border-radius across other components like Search or Item.
-    outline: none;
-
-    :focus {
-      box-shadow: 0 0 0 ${ELEMENT_LIST_PADDING}px
-        ${`var(--ds-border-focused, ${B100})`};
+const elementItemsWrapper = css({
+  flex: 1,
+  flexFlow: 'row wrap',
+  alignItems: 'flex-start',
+  justifyContent: 'flex-start',
+  overflow: 'hidden',
+  padding: "var(--ds-space-025, 2px)",
+  '.ReactVirtualized__Collection': {
+    borderRadius: '3px',
+    outline: 'none',
+    ':focus': {
+      boxShadow: `0 0 0 ${ELEMENT_LIST_PADDING}px ${`var(--ds-border-focused, ${B100})`}`
     }
-  }
-  .ReactVirtualized__Collection__innerScrollContainer {
-    div[class='element-item-wrapper']:last-child {
-      padding-bottom: ${"var(--ds-space-050, 4px)"};
+  },
+  '.ReactVirtualized__Collection__innerScrollContainer': {
+    "div[class='element-item-wrapper']:last-child": {
+      paddingBottom: "var(--ds-space-050, 4px)"
     }
   }
-`;
-const elementItemWrapper = css`
-  div {
-    button {
-      height: 75px;
-      align-items: flex-start;
-      padding: ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-150, 12px)"} 11px;
+});
+const elementItemWrapper = css({
+  div: {
+    button: {
+      height: '75px',
+      alignItems: 'flex-start',
+      padding: "var(--ds-space-150, 12px)"
     }
   }
-`;
-const itemBody = css`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  line-height: 1.4;
-  width: 100%;
-
-  margin-top: ${"var(--ds-space-negative-025, -2px)"}; // Fixes the Item Icon and text's alignment issue
-`;
+});
+const itemBody = css({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'nowrap',
+  justifyContent: 'space-between',
+  lineHeight: 1.4,
+  width: '100%',
+  marginTop: "var(--ds-space-negative-025, -2px)"
+});
 
 /*
  * -webkit-line-clamp is also supported by firefox 🎉
  * https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/68#CSS
  */
-const multilineStyle = css`
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-`;
-const itemDescription = css`
-  ${multilineStyle};
-
-  overflow: hidden;
-  font-size: ${relativeFontSizeToBase16(11.67)};
-  color: ${`var(--ds-text-subtle, ${N200})`};
-  margin-top: ${"var(--ds-space-025, 2px)"};
-`;
-const itemText = css`
-  width: inherit;
-  white-space: initial;
-`;
-const itemTitleWrapper = css`
-  display: flex;
-  justify-content: space-between; // Title and keyboardshortcut are rendered in the same block
-`;
-const itemTitle = css`
-  width: 100%;
-  overflow: hidden;
-
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`;
-const itemAfter = css`
-  flex: 0 0 auto;
-
-  // Prevents item from being cut off due to negative margin
-  padding-top: ${"var(--ds-space-025, 2px)"};
-  margin-bottom: ${"var(--ds-space-negative-025, -2px)"};
-`;
-const itemIconStyle = css`
-  img {
-    height: 40px;
-    width: 40px;
-    object-fit: cover;
+const multilineStyle = css({
+  display: '-webkit-box',
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: 'vertical'
+});
+const itemDescription = css(multilineStyle, {
+  overflow: 'hidden',
+  fontSize: relativeFontSizeToBase16(11.67),
+  color: `var(--ds-text-subtle, ${N200})`,
+  marginTop: "var(--ds-space-025, 2px)"
+});
+const itemText = css({
+  width: 'inherit',
+  whiteSpace: 'initial'
+});
+const itemTitleWrapper = css({
+  display: 'flex',
+  justifyContent: 'space-between'
+});
+const itemTitle = css({
+  width: '100%',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis'
+});
+const itemAfter = css({
+  flex: '0 0 auto',
+  paddingTop: "var(--ds-space-025, 2px)",
+  marginBottom: "var(--ds-space-negative-025, -2px)"
+});
+const itemIconStyle = css({
+  img: {
+    height: '40px',
+    width: '40px',
+    objectFit: 'cover'
   }
-`;
+});
 const MemoizedElementListWithAnalytics = /*#__PURE__*/memo(withAnalyticsContext({
   component: 'ElementList'
 })(ElementList));

package/dist/es2019/element-browser/components/ElementList/EmptyState.js

@@ -2,6 +2,7 @@
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button';
+import { Box, xcss } from '@atlaskit/primitives';
 import NotFoundIllustration from './NotFoundIllustration';
 export default function EmptyState({
   onExternalLinkClick
@@ -21,8 +22,8 @@ export default function EmptyState({
     id: "fabric.editor.elementbrowser.search.empty-state.sub-heading",
     defaultMessage: "Try searching with a different term or discover new apps for Atlassian products.",
     description: "Empty state sub-heading"
-  })), jsx("div", {
-    css: externalLinkWrapper
+  })), jsx(Box, {
+    xcss: externalLinkWrapper
   }, jsx(Button, {
     appearance: "primary",
     target: "_blank",
@@ -40,7 +41,7 @@ const emptyStateHeading = css({
   color: "var(--ds-text, rgb(23, 43, 77))",
   fontWeight: 500,
   letterSpacing: '-0.008em',
-  marginTop: '28px'
+  marginTop: "var(--ds-space-300, 24px)"
 });
 const emptyStateSubHeading = css({
   marginTop: "var(--ds-space-200, 16px)",
@@ -54,6 +55,6 @@ const emptyStateWrapper = css({
   alignItems: 'center',
   width: '100%'
 });
-const externalLinkWrapper = css({
-  marginTop: '14px'
+const externalLinkWrapper = xcss({
+  marginTop: "var(--ds-space-150, 12px)"
 });

package/dist/es2019/element-browser/components/ElementSearch.js

@@ -114,8 +114,8 @@ function ElementSearch({
   }, assistiveMessage));
 }
 const styledShortcut = css(shortcutStyle, {
-  padding: `${GRID_SIZE / 2}px ${GRID_SIZE}px`,
-  width: `${GRID_SIZE * 6}px`
+  padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}`,
+  width: "var(--ds-space-600, 48px)"
 });
 const wrapper = css({
   '& > [data-ds--text-field--container]': {
@@ -124,9 +124,8 @@ const wrapper = css({
     flex: '1 1 100%',
     overflow: 'visible',
     '& > [data-ds--text-field--input]': {
-      marginBottom: '3px',
       fontSize: relativeFontSizeToBase16(14),
-      padding: `${GRID_SIZE}px ${"var(--ds-space-075, 6px)"} ${GRID_SIZE}px 0`
+      padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-075, 6px)"} ${"var(--ds-space-100, 8px)"} 0`
     }
   }
 });

package/dist/es2019/extensibility/Extension/Extension/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-import { padding, wrapperDefault } from '../styles';
+import { wrapperDefault } from '../styles';
 export const widerLayoutClassName = 'wider-layout';
 export const wrapperStyle = css(wrapperDefault, {
   '&.without-frame': {
@@ -13,7 +13,7 @@ export const wrapperStyle = css(wrapperDefault, {
   }
 });
 export const header = css({
-  padding: `${padding / 2}px ${padding / 2}px 0px`,
+  padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-050, 4px)"} 0px`,
   verticalAlign: 'middle',
   '&.with-children:not(.without-frame)': {
     padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"}`
@@ -23,7 +23,7 @@ export const header = css({
   }
 });
 export const content = css({
-  padding: `${padding}px`,
+  padding: "var(--ds-space-100, 8px)",
   background: "var(--ds-surface, white)",
   border: `1px solid ${`var(--ds-border, ${N30})`}`,
   borderRadius: "var(--ds-border-radius, 3px)",
@@ -31,7 +31,7 @@ export const content = css({
   width: '100%'
 });
 export const contentWrapper = css({
-  padding: `0 ${padding}px ${padding}px`,
+  padding: `0 ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"}`,
   display: 'flex',
   justifyContent: 'center',
   '&.remove-padding': {

package/dist/es2019/extensibility/Extension/styles.js

@@ -43,7 +43,7 @@ export const placeholderFallback = css({
 export const placeholderFallbackParams = css({
   display: 'inline-block',
   maxWidth: '200px',
-  marginLeft: '5px',
+  marginLeft: "var(--ds-space-050, 4px)",
   color: `var(--ds-text-subtlest, ${N70})`,
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',

package/dist/es2019/extensibility/ExtensionComponent.js

@@ -210,7 +210,6 @@ export class ExtensionComponent extends Component {
       /** We don't want this error to block renderer */
       /** We keep rendering the default content */
     }
-
     return null;
   }
 }

package/dist/es2019/extensions/types/field-definitions.js

@@ -2,6 +2,7 @@
 //   Thereby they _always_ need a value for submission
 //
 // You can do that through `defaultValue`, or `isRequired: true`
+
 export const isFieldset = field => {
   return field.type === 'fieldset';
 };

package/dist/es2019/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -30,7 +30,7 @@ export const visuallyHiddenStyles = css`
   clip-path: inset(50%);
   height: 1px;
   width: 1px;
-  margin: -1px;
+  margin: ${"var(--ds-space-negative-025, -2px)"};
   overflow: hidden;
   padding: 0;
   position: absolute;

package/dist/es2019/link/LinkSearch/LinkSearchList.js

@@ -4,20 +4,20 @@ import { css, jsx } from '@emotion/react';
 import Spinner from '@atlaskit/spinner';
 import { N30 } from '@atlaskit/theme/colors';
 import LinkSearchListItem from './LinkSearchListItem';
-const listContainer = css`
-  padding-top: 0;
-  margin-top: ${"var(--ds-space-150, 12px)"};
-  border-top: 1px solid ${`var(--ds-border, ${N30})`};
-`;
-const spinnerContainer = css`
-  text-align: center;
-  min-height: 80px;
-  margin-top: 30px;
-`;
-export const linkSearchList = css`
-  padding: 0;
-  list-style: none;
-`;
+const listContainer = css({
+  paddingTop: 0,
+  marginTop: "var(--ds-space-150, 12px)",
+  borderTop: `1px solid ${`var(--ds-border, ${N30})`}`
+});
+const spinnerContainer = css({
+  textAlign: 'center',
+  minHeight: '80px',
+  marginTop: "var(--ds-space-400, 32px)"
+});
+export const linkSearchList = css({
+  padding: 0,
+  listStyle: 'none'
+});
 export default class LinkSearchList extends PureComponent {
   render() {
     const {

package/dist/es2019/link/LinkSearch/LinkSearchListItem.js

@@ -4,6 +4,7 @@ import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
+
 import { injectIntl } from 'react-intl-next';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { N20, N300, N800 } from '@atlaskit/theme/colors';
@@ -37,7 +38,7 @@ export const containerName = css({
 });
 const iconStyle = css({
   minWidth: '16px',
-  marginTop: '3px',
+  marginTop: "var(--ds-space-050, 4px)",
   marginRight: "var(--ds-space-150, 12px)",
   img: {
     maxWidth: '16px'

package/dist/es2019/link/LinkSearch/ToolbarComponents.js

@@ -1,20 +1,19 @@
 import { css } from '@emotion/react';
 import { RECENT_SEARCH_WIDTH_IN_PX, RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX } from '../../ui';
-export const inputWrapper = css`
-  display: flex;
-  line-height: 0;
-  padding: 5px 0;
-  align-items: center;
-`;
-export const container = css`
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  padding: 0;
-
-  width: ${RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX}px;
-  line-height: initial;
-`;
-export const containerWithProvider = css`
-  width: ${RECENT_SEARCH_WIDTH_IN_PX}px;
-`;
+export const inputWrapper = css({
+  display: 'flex',
+  lineHeight: 0,
+  padding: `${"var(--ds-space-075, 6px)"} 0`,
+  alignItems: 'center'
+});
+export const container = css({
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'auto',
+  padding: 0,
+  width: `${RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX}px`,
+  lineHeight: 'initial'
+});
+export const containerWithProvider = css({
+  width: `${RECENT_SEARCH_WIDTH_IN_PX}px`
+});

package/dist/es2019/link/LinkSearch/index.js

@@ -22,7 +22,6 @@ class RecentLink extends React.Component {
       if (!inputMethod) {
         return; // No call submit, if there is nothing to submit
       }
-
       switch (inputMethod) {
         case INPUT_METHOD.MANUAL:
           {

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "78.11.4";
+const packageVersion = "78.11.5";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/react-node-view/getInlineNodeViewProducer.js

@@ -199,6 +199,7 @@ function getPortalChildren({
 // nodeViews: {
 //   [nodeViewName: string]: NodeViewProducer
 // }
+
 // This return of this function is intended to be the value of a key
 // in a ProseMirror nodeViews object.
 export function getInlineNodeViewProducer({

package/dist/es2019/resizer/Resizer.js

@@ -3,7 +3,7 @@ import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, u
 import classnames from 'classnames';
 import { Resizable } from 're-resizable';
 import Tooltip from '@atlaskit/tooltip';
-import { handleWrapperClass, resizerDangerClassName, resizerHandleClassName, resizerHandleThumbClassName, resizerHandleTrackClassName, resizerHandleZIndex, resizerHoverZoneClassName, resizerItemClassName } from '../styles/shared/resizer';
+import { handleWrapperClass, resizerDangerClassName, resizerExtendedZone, resizerHandleClassName, resizerHandleThumbClassName, resizerHandleTrackClassName, resizerHandleZIndex, resizerHoverZoneClassName, resizerItemClassName } from '../styles/shared/resizer';
 const SUPPORTED_HANDLES = ['left', 'right'];
 const ResizerNext = (props, ref) => {
   const [isResizing, setIsResizing] = useState(false);
@@ -96,7 +96,7 @@ const ResizerNext = (props, ref) => {
     [resizerDangerClassName]: appearance === 'danger'
   });
   const resizerZoneClassName = classnames(resizerHoverZoneClassName, {
-    'is-extended': needExtendedResizeZone
+    [resizerExtendedZone]: needExtendedResizeZone
   });
   const handleComponent = useMemo(() => {
     return SUPPORTED_HANDLES.reduce((result, position) => {
@@ -108,7 +108,6 @@ const ResizerNext = (props, ref) => {
         type: "button",
         tabIndex: -1 //We want to control focus on this button ourselves
       });
-
       if ((!handleHighlight || handleHighlight === 'none') && !handleTooltipContent) {
         return {
           ...result,

package/dist/es2019/selection/gap-cursor/styles.js

@@ -42,10 +42,10 @@ export const gapCursorStyles = css`
         height: 100%;
       }
       &.-left span::after {
-        left: -3px;
+        left: ${"var(--ds-space-negative-050, -4px)"};
       }
       &.-right span::after {
-        right: -3px;
+        right: ${"var(--ds-space-negative-050, -4px)"};
       }
       & span[layout='full-width'],
       & span[layout='wide'],

package/dist/es2019/styles/shared/embedCard.js

@@ -1,24 +1,20 @@
 import { css } from '@emotion/react';
-export const embedCardStyles = css`
-  .ProseMirror {
-    .embedCardView-content-wrap[layout^='wrap-'] {
-      max-width: 100%;
-    }
-
-    .embedCardView-content-wrap[layout='wrap-left'] {
-      float: left;
-    }
-
-    .embedCardView-content-wrap[layout='wrap-right'] {
-      float: right;
-    }
-
-    .embedCardView-content-wrap[layout='wrap-right']
-      + .embedCardView-content-wrap[layout='wrap-left'] {
-      clear: both;
+export const embedCardStyles = css({
+  '.ProseMirror': {
+    ".embedCardView-content-wrap[layout^='wrap-']": {
+      maxWidth: '100%'
+    },
+    ".embedCardView-content-wrap[layout='wrap-left']": {
+      float: 'left'
+    },
+    ".embedCardView-content-wrap[layout='wrap-right']": {
+      float: 'right'
+    },
+    ".embedCardView-content-wrap[layout='wrap-right'] + .embedCardView-content-wrap[layout='wrap-left']": {
+      clear: 'both'
     }
   }
-`;
-export const embedSpacingStyles = css`
-  margin: 0 10px;
-`;
+});
+export const embedSpacingStyles = css({
+  margin: `0 ${"var(--ds-space-150, 12px)"}`
+});

package/dist/es2019/styles/shared/grid.js

@@ -2,35 +2,31 @@ import { css } from '@emotion/react';
 import { akEditorGridLineZIndex } from '@atlaskit/editor-shared-styles';
 import { B200, N30A } from '@atlaskit/theme/colors';
 export const GRID_GUTTER = 12;
-export const gridStyles = css`
-  .gridParent {
-    width: calc(100% + ${GRID_GUTTER * 2}px);
-    margin-left: ${"var(--ds-space-negative-150, -12px)"}; // Negative GRID_GUTTER
-    margin-right: ${"var(--ds-space-negative-150, -12px)"}; // Negative GRID_GUTTER
-    transform: scale(1);
-    z-index: ${akEditorGridLineZIndex};
+export const gridStyles = css({
+  '.gridParent': {
+    width: `calc(100% + ${GRID_GUTTER * 2}px)`,
+    marginLeft: "var(--ds-space-negative-150, -12px)",
+    marginRight: "var(--ds-space-negative-150, -12px)",
+    transform: 'scale(1)',
+    zIndex: akEditorGridLineZIndex
+  },
+  '.gridContainer': {
+    position: 'fixed',
+    height: '100vh',
+    width: '100%',
+    pointerEvents: 'none'
+  },
+  '.gridLine': {
+    borderLeft: `1px solid ${`var(--ds-border, ${N30A})`}`,
+    display: 'inline-block',
+    boxSizing: 'border-box',
+    height: '100%',
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    marginLeft: '-1px',
+    transition: 'border-color 0.15s linear',
+    zIndex: 0
+  },
+  '.highlight': {
+    borderLeft: `1px solid ${`var(--ds-border-focused, ${B200})`}`
   }
-
-  .gridContainer {
-    position: fixed;
-    height: 100vh;
-    width: 100%;
-    pointer-events: none;
-  }
-
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-4352
-  .gridLine {
-    border-left: 1px solid ${`var(--ds-border, ${N30A})`};
-    display: inline-block;
-    box-sizing: border-box;
-    height: 100%;
-    margin-left: -1px;
-
-    transition: border-color 0.15s linear;
-    z-index: 0;
-  }
-
-  .highlight {
-    border-left: 1px solid ${`var(--ds-border-focused, ${B200})`};
-  }
-`;
+});

package/dist/es2019/styles/shared/indentation.js

@@ -1,4 +1,6 @@
 import { css } from '@emotion/react';
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 export const indentationSharedStyles = css`
   .fabric-editor-indentation-mark {
     &[data-level='1'] {

package/dist/es2019/styles/shared/panel.js

@@ -200,7 +200,7 @@ export const panelSharedStylesWithoutPrefix = () => css`
   }
 
   .ak-editor-panel__content {
-    margin: 1px 0 1px;
+    margin: ${"var(--ds-space-025, 2px)"} 0 ${"var(--ds-space-025, 2px)"};
     flex: 1 0 0;
     /*
       https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox

package/dist/es2019/styles/shared/resizer.js

@@ -5,9 +5,9 @@ import { B200, B50, N60 } from '@atlaskit/theme/colors';
   Styles in this file are based on
   packages/editor/editor-core/src/plugins/media/styles.ts
 */
-
 export const resizerItemClassName = 'resizer-item';
 export const resizerHoverZoneClassName = 'resizer-hover-zone';
+export const resizerExtendedZone = 'resizer-is-extended';
 export const resizerHandleClassName = 'resizer-handle';
 export const resizerHandleTrackClassName = `${resizerHandleClassName}-track`;
 export const resizerHandleThumbClassName = `${resizerHandleClassName}-thumb`;
@@ -191,14 +191,17 @@ export const resizerStyles = css`
     display: inline-block;
     width: 100%;
 
-    &.is-extended {
+    &.${resizerExtendedZone} {
       padding: 0 ${"var(--ds-space-150, 12px)"};
       left: ${"var(--ds-space-negative-150, -12px)"};
     }
   }
 
   // This below style is here to make sure the image width is correct when nested in a table
-  table .${resizerHoverZoneClassName} {
+  table
+    .${resizerHoverZoneClassName},
+    table
+    .${resizerHoverZoneClassName}.${resizerExtendedZone} {
     padding: unset;
     left: unset;
   }