@atlaskit/editor-common 78.11.4 → 78.11.6

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/media-inline/media-inline-image-card.js

@@ -1,5 +1,4 @@
 /** @jsx jsx */
-
 import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { jsx } from '@emotion/react';
 import ReactDOM from 'react-dom';

package/dist/es2019/media-inline/styles.js

@@ -7,6 +7,7 @@ export const INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY = '--editor-media-inline-image
 export const INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY = '--editor-media-inline-image-border-color';
 
 // We implemented such selectors to ensure specificity:
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Nested and dynamic css calls are violations, needs manual remediation
 const inlineImageHeight = (height, margin = 0) => css`
   /* Editor style */
   > .mediaInlineView-content-wrap > .${INLINE_IMAGE_WRAPPER_CLASS_NAME},
@@ -25,6 +26,7 @@ const inlineImageHeight = (height, margin = 0) => css`
  * shift in top and bottom and size adjustments to make up for lack of 1to1 size
  * mapping
  */
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Nested and dynamic css calls are violations, needs manual remediation
 export const mediaInlineImageStyles = css`
   // p, h3, and action items
   .${INLINE_IMAGE_WRAPPER_CLASS_NAME} {

package/dist/es2019/media-inline/views/icon-wrapper.js

@@ -1,5 +1,4 @@
 /** @jsx jsx */
-
 import { css, jsx } from '@emotion/react';
 const wrapperStyle = css({
   display: 'flex',

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.6";
 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

@@ -1,17 +1,19 @@
 import { css, keyframes } from '@emotion/react';
-const gapCursorBlink = keyframes`
-  from, to {
-    opacity: 0;
+const gapCursorBlink = keyframes({
+  'from, to': {
+    opacity: 0
+  },
+  '50%': {
+    opacity: 1
   }
-  50% {
-    opacity: 1;
-  }
-`;
+});
 export const hideCaretModifier = 'ProseMirror-hide-gapcursor';
 const gapCursor = '.ProseMirror-gapcursor';
 const prosemirrorwidget = '.ProseMirror-widget';
 const wrapLeft = '[layout="wrap-left"]';
 const wrapRight = '[layout="wrap-right"]';
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- This needs manual remediation, it autofixes seemingly safely, but the code style and readability is destroyed.
 export const gapCursorStyles = css`
   /* =============== GAP CURSOR ================== */
   .ProseMirror {
@@ -42,10 +44,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/annotation.js

@@ -9,22 +9,23 @@ export const AnnotationSharedClassNames = {
 const Y75a = 'rgba(255, 240, 179, 0.5)';
 const Y200a = 'rgba(255, 196, 0, 0.82)';
 export const AnnotationSharedCSSByState = () => ({
-  focus: css`
+  focus: css({
     // Background is not coming through in confluence, suspecting to be caused by some specific combination of
     // emotion and token look up
-
-    background: ${`var(--ds-background-accent-yellow-subtler, ${Y75})`};
-    border-bottom: 2px solid ${`var(--ds-border-accent-yellow, ${Y300})`};
+    background: `var(--ds-background-accent-yellow-subtler, ${Y75})`,
+    borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y300})`}`,
     // TODO: https://product-fabric.atlassian.net/browse/DSP-4147
-    box-shadow: ${`var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`};
-    cursor: pointer;
-  `,
-  blur: css`
-    background: ${`var(--ds-background-accent-yellow-subtlest, ${Y75a})`};
-    border-bottom: 2px solid ${`var(--ds-border-accent-yellow, ${Y200a})`};
-    cursor: pointer;
-  `
+    boxShadow: `var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`,
+    cursor: 'pointer'
+  }),
+  blur: css({
+    background: `var(--ds-background-accent-yellow-subtlest, ${Y75a})`,
+    borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y200a})`}`,
+    cursor: 'pointer'
+  })
 });
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState()` is not safe in object syntax
 export const annotationSharedStyles = () => css`
   .ProseMirror {
     .${AnnotationSharedClassNames.focus} {

package/dist/es2019/styles/shared/block-marks.js

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Perfectly safe to auto-fix, but leaving it up to the team to remediate as the readability only gets worse with autofixing */
 import { css } from '@emotion/react';
 export const blockMarksSharedStyles = css`
   /**

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

@@ -1,38 +1,31 @@
 import { css } from '@emotion/react';
 import { akEditorBlockquoteBorderColor, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
-export const blockquoteSharedStyles = css`
-  & blockquote {
-    box-sizing: border-box;
-    padding-left: ${"var(--ds-space-200, 16px)"};
-    border-left: 2px solid
-      ${`var(--ds-border, ${akEditorBlockquoteBorderColor})`};
-    margin: ${blockNodesVerticalMargin} 0 0 0;
-    margin-right: 0;
-
-    [dir='rtl'] & {
-      padding-left: 0;
-      padding-right: ${"var(--ds-space-200, 16px)"};
-    }
-
-    &:first-child {
-      margin-top: 0;
-    }
-
-    &::before {
-      content: '';
-    }
-
-    &::after {
-      content: none;
-    }
-
-    & p {
-      display: block;
-    }
-
-    & table,
-    & table:last-child {
-      display: inline-table;
+export const blockquoteSharedStyles = css({
+  '& blockquote': {
+    boxSizing: 'border-box',
+    paddingLeft: "var(--ds-space-200, 16px)",
+    borderLeft: `2px solid ${`var(--ds-border, ${akEditorBlockquoteBorderColor})`}`,
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    margin: `${blockNodesVerticalMargin} 0 0 0`,
+    marginRight: 0,
+    "[dir='rtl'] &": {
+      paddingLeft: 0,
+      paddingRight: "var(--ds-space-200, 16px)"
+    },
+    '&:first-child': {
+      marginTop: 0
+    },
+    '&::before': {
+      content: "''"
+    },
+    '&::after': {
+      content: 'none'
+    },
+    '& p': {
+      display: 'block'
+    },
+    '& table, & table:last-child': {
+      display: 'inline-table'
     }
   }
-`;
+});

package/dist/es2019/styles/shared/code-block.js

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Should be safe to autofix, but ignoring for now */
 import { css } from '@emotion/react';
 import { akEditorCodeFontFamily, akEditorLineHeight, akEditorTableCellMinWidth, blockNodesVerticalMargin, overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { N20, N30, N400, N800 } from '@atlaskit/theme/colors';

package/dist/es2019/styles/shared/code-mark.js

@@ -2,10 +2,10 @@ import { css } from '@emotion/react';
 import { getCodeStyles } from '@atlaskit/code/inline';
 import { N30A } from '@atlaskit/theme/colors';
 export const codeMarkSharedStyles = () => {
-  return css`
-    .code {
-      --ds--code--bg-color: ${`var(--ds-background-neutral, ${N30A})`};
-      ${getCodeStyles()}
+  return css({
+    '.code': {
+      '--ds--code--bg-color': `var(--ds-background-neutral, ${N30A})`,
+      ...getCodeStyles()
     }
-  `;
+  });
 };

package/dist/es2019/styles/shared/column-layout.js

@@ -1,22 +1,20 @@
 import { css } from '@emotion/react';
 import { gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
-const columnLayoutSharedStyle = css`
-  [data-layout-section] {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    & > * {
-      flex: 1;
-      min-width: 0;
-    }
-
-    & > .unsupportedBlockView-content-wrap {
-      min-width: initial;
-    }
-
-    @media screen and (max-width: ${gridMediumMaxWidth}px) {
-      flex-direction: column;
+const columnLayoutSharedStyle = css({
+  '[data-layout-section]': {
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'row',
+    '& > *': {
+      flex: 1,
+      minWidth: 0
+    },
+    '& > .unsupportedBlockView-content-wrap': {
+      minWidth: 'initial'
+    },
+    [`@media screen and (max-width: ${gridMediumMaxWidth}px)`]: {
+      flexDirection: 'column'
     }
   }
-`;
+});
 export { columnLayoutSharedStyle };

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

@@ -3,8 +3,8 @@ export const DateSharedCssClassName = {
   DATE_WRAPPER: `date-lozenger-container`,
   DATE_CONTAINER: 'dateView-content-wrap'
 };
-export const dateSharedStyle = css`
-  .${DateSharedCssClassName.DATE_WRAPPER} span {
-    white-space: unset;
+export const dateSharedStyle = css({
+  [`.${DateSharedCssClassName.DATE_WRAPPER} span`]: {
+    whiteSpace: 'unset'
   }
-`;
+});

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/expand.js

@@ -1,8 +1,7 @@
 import { css } from '@emotion/react';
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-export const expandIconWrapperStyle = css`
-  margin-left: ${"var(--ds-space-negative-100, -8px)"};
-`;
+export const expandIconWrapperStyle = css({
+  marginLeft: "var(--ds-space-negative-100, -8px)"
+});
 const prefix = 'ak-editor-expand';
 export const expandClassNames = {
   prefix,

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/headings.js

@@ -3,39 +3,40 @@ import { h100, h300, h400, h500, h600, h700 } from '@atlaskit/theme/typography';
 
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 // text sizing prototype: http://proto/fabricrender/
-export const headingsSharedStyles = () => css`
-  & h1 {
-    ${h700()};
-    margin-bottom: 0;
-    margin-top: 1.667em;
+export const headingsSharedStyles = () => css({
+  '& h1': {
+    ...h700(),
+    marginBottom: 0,
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    marginTop: '1.667em'
+  },
+  '& h2': {
+    ...h600(),
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    marginTop: '1.8em',
+    marginBottom: 0
+  },
+  '& h3': {
+    ...h500(),
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    marginTop: '2em',
+    marginBottom: 0
+  },
+  '& h4': {
+    ...h400(),
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    marginTop: '1.357em'
+  },
+  '& h5': {
+    ...h300(),
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    marginTop: '1.667em',
+    textTransform: 'none'
+  },
+  '& h6': {
+    ...h100(),
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    marginTop: '1.455em',
+    textTransform: 'none'
   }
-
-  & h2 {
-    ${h600()};
-    margin-top: 1.8em;
-    margin-bottom: 0;
-  }
-
-  & h3 {
-    ${h500()};
-    margin-top: 2em;
-    margin-bottom: 0;
-  }
-
-  & h4 {
-    ${h400()};
-    margin-top: 1.357em;
-  }
-
-  & h5 {
-    ${h300()};
-    margin-top: 1.667em;
-    text-transform: none;
-  }
-
-  & h6 {
-    ${h100()};
-    margin-top: 1.455em;
-    text-transform: none;
-  }
-`;
+});

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

@@ -1,23 +1,29 @@
 import { css } from '@emotion/react';
-export const indentationSharedStyles = css`
-  .fabric-editor-indentation-mark {
-    &[data-level='1'] {
-      margin-left: 30px;
-    }
-    &[data-level='2'] {
-      margin-left: 60px;
-    }
-    &[data-level='3'] {
-      margin-left: 90px;
-    }
-    &[data-level='4'] {
-      margin-left: 120px;
-    }
-    &[data-level='5'] {
-      margin-left: 150px;
-    }
-    &[data-level='6'] {
-      margin-left: 180px;
+export const indentationSharedStyles = css({
+  '.fabric-editor-indentation-mark': {
+    "&[data-level='1']": {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      marginLeft: '30px'
+    },
+    "&[data-level='2']": {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      marginLeft: '60px'
+    },
+    "&[data-level='3']": {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      marginLeft: '90px'
+    },
+    "&[data-level='4']": {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      marginLeft: '120px'
+    },
+    "&[data-level='5']": {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      marginLeft: '150px'
+    },
+    "&[data-level='6']": {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      marginLeft: '180px'
     }
   }
-`;
+});

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-const linkSharedStyle = css`
-  a.blockLink {
-    display: block;
+const linkSharedStyle = css({
+  'a.blockLink': {
+    display: 'block'
   }
-`;
+});
 export { linkSharedStyle };

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

@@ -33,6 +33,8 @@ export function getOrderedListInlineStyles(itemCounterDigitsSize, styleFormat) {
   }
   return style;
 }
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- There is some "flow-root" hack that is not actually valid css.  Do note, this might not even work in Compiled (or Emotion) due to the way tagged template expressions are parsed…
 export const listsSharedStyles = css`
   /* =============== INDENTATION SPACING ========= */