@atlaskit/editor-common 78.11.5 → 78.11.7

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,25 +1,29 @@
 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'] {
-      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 ========= */
 

package/dist/es2019/styles/shared/media-single.js

@@ -1,74 +1,51 @@
 import { css } from '@emotion/react';
 const richMediaClassName = 'rich-media-item';
 const wrappedMediaBreakoutPoint = 410;
-const mediaSingleSharedStyle = css`
-  li .${richMediaClassName} {
-    margin: 0;
-  }
-
-  /* Hack for chrome to fix media single position
-     inside a list when media is the first child */
-  &.ua-chrome li > .mediaSingleView-content-wrap::before {
-    content: '';
-    display: block;
-    height: 0;
-  }
-
-  &.ua-firefox {
-    .mediaSingleView-content-wrap {
-      user-select: none;
+const mediaSingleSharedStyle = css({
+  [`li .${richMediaClassName}`]: {
+    margin: 0
+  },
+  // Hack for chrome to fix media single position inside a list when media is the first child
+  '&.ua-chrome li > .mediaSingleView-content-wrap::before': {
+    content: "''",
+    display: 'block',
+    height: 0
+  },
+  '&.ua-firefox': {
+    '.mediaSingleView-content-wrap': {
+      userSelect: 'none'
+    },
+    '.captionView-content-wrap': {
+      userSelect: 'text'
     }
-
-    .captionView-content-wrap {
-      user-select: text;
-    }
-  }
-
-  .mediaSingleView-content-wrap[layout='center'] {
-    clear: both;
-  }
-
-  table .${richMediaClassName} {
-    margin-top: ${"var(--ds-space-150, 12px)"};
-    margin-bottom: ${"var(--ds-space-150, 12px)"};
-    clear: both;
-
-    &.image-wrap-left,
-    &.image-wrap-right {
-      clear: none;
-
-      &:first-child {
-        margin-top: ${"var(--ds-space-150, 12px)"};
+  },
+  ".mediaSingleView-content-wrap[layout='center']": {
+    clear: 'both'
+  },
+  [`table .${richMediaClassName}`]: {
+    marginTop: "var(--ds-space-150, 12px)",
+    marginBottom: "var(--ds-space-150, 12px)",
+    clear: 'both',
+    '&.image-wrap-left, &.image-wrap-right': {
+      clear: 'none',
+      '&:first-child': {
+        marginTop: "var(--ds-space-150, 12px)"
       }
     }
-  }
-
-  .${richMediaClassName}.image-wrap-right
-    + .${richMediaClassName}.image-wrap-left {
-    clear: both;
-  }
-
-  .${richMediaClassName}.image-wrap-left
-    + .${richMediaClassName}.image-wrap-right,
-    .${richMediaClassName}.image-wrap-right
-    + .${richMediaClassName}.image-wrap-left,
-    .${richMediaClassName}.image-wrap-left
-    + .${richMediaClassName}.image-wrap-left,
-    .${richMediaClassName}.image-wrap-right
-    + .${richMediaClassName}.image-wrap-right {
-    margin-right: 0;
-    margin-left: 0;
-  }
-
-  @media all and (max-width: ${wrappedMediaBreakoutPoint}px) {
-    div.mediaSingleView-content-wrap[layout='wrap-left'],
-    div.mediaSingleView-content-wrap[data-layout='wrap-left'],
-    div.mediaSingleView-content-wrap[layout='wrap-right'],
-    div.mediaSingleView-content-wrap[data-layout='wrap-right'] {
-      float: none;
-      overflow: auto;
-      margin: ${"var(--ds-space-150, 12px)"} 0;
+  },
+  [`.${richMediaClassName}.image-wrap-right + .${richMediaClassName}.image-wrap-left`]: {
+    clear: 'both'
+  },
+  [`.${richMediaClassName}.image-wrap-left + .${richMediaClassName}.image-wrap-right, .${richMediaClassName}.image-wrap-right + .${richMediaClassName}.image-wrap-left, .${richMediaClassName}.image-wrap-left + .${richMediaClassName}.image-wrap-left, .${richMediaClassName}.image-wrap-right + .${richMediaClassName}.image-wrap-right`]: {
+    marginRight: 0,
+    marginLeft: 0
+  },
+  [`@media all and (max-width: ${wrappedMediaBreakoutPoint}px)`]: {
+    "div.mediaSingleView-content-wrap[layout='wrap-left'], div.mediaSingleView-content-wrap[data-layout='wrap-left'], div.mediaSingleView-content-wrap[layout='wrap-right'], div.mediaSingleView-content-wrap[data-layout='wrap-right']": {
+      float: 'none',
+      overflow: 'auto',
+      margin: `${"var(--ds-space-150, 12px)"} 0`
     }
   }
-`;
+});
 export { mediaSingleSharedStyle, richMediaClassName };

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

@@ -149,6 +149,8 @@ const mainDynamicStyles = panelType => {
     color: inherit;
   `;
 };
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Safe to autofix with a tiny tweak to `mainDynamicStyles` being an object, but holding off…
 export const panelSharedStylesWithoutPrefix = () => css`
   border-radius: ${"var(--ds-border-radius, 3px)"};
   margin: ${blockNodesVerticalMargin} 0 0;
@@ -249,8 +251,6 @@ export const panelSharedStylesWithoutPrefix = () => css`
     }
   }
 `;
-export const panelSharedStyles = () => css`
-  .${PanelSharedCssClassName.prefix} {
-    ${panelSharedStylesWithoutPrefix()}
-  }
-`;
+export const panelSharedStyles = () => css({
+  [`.${PanelSharedCssClassName.prefix}`]: panelSharedStylesWithoutPrefix()
+});

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

@@ -2,13 +2,14 @@ import { css } from '@emotion/react';
 import { akEditorLineHeight, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
-export const paragraphSharedStyles = css`
-  & p {
-    font-size: 1em;
-    line-height: ${akEditorLineHeight};
-    font-weight: normal;
-    margin-top: ${blockNodesVerticalMargin};
-    margin-bottom: 0;
-    letter-spacing: -0.005em;
+export const paragraphSharedStyles = css({
+  '& p': {
+    fontSize: '1em',
+    lineHeight: akEditorLineHeight,
+    fontWeight: 'normal',
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    marginTop: blockNodesVerticalMargin,
+    marginBottom: 0,
+    letterSpacing: '-0.005em'
   }
-`;
+});

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

@@ -1,43 +1,38 @@
 import { css } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-export const buttonGroupStyle = css`
-  display: inline-flex;
-  align-items: center;
-
-  & > div {
-    display: flex;
+export const buttonGroupStyle = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  '& > div': {
+    display: 'flex'
   }
-`;
+});
 
 // This style is copied to packages/editor/editor-plugin-ai/src/ui/components/AtlassianIntelligenceToolbarButton/styles.tsx
 // If you make change here, change in above file as well.
-export const separatorStyles = css`
-  background: ${`var(--ds-border, ${N30})`};
-  width: 1px;
-  height: 24px;
-  display: inline-block;
-  margin: 0 ${"var(--ds-space-100, 8px)"};
-  user-select: none;
-`;
+export const separatorStyles = css({
+  background: `var(--ds-border, ${N30})`,
+  width: '1px',
+  height: '24px',
+  display: 'inline-block',
+  margin: `0 ${"var(--ds-space-100, 8px)"}`,
+  userSelect: 'none'
+});
 
 // This style is copied to packages/editor/editor-plugin-ai/src/ui/components/AtlassianIntelligenceToolbarButton/styles.tsx
 // If you make change here, change in above file as well.
-export const wrapperStyle = css`
-  display: flex;
-  align-items: center;
-
-  > div,
-  > span {
-    display: flex;
-  }
-
-  > div > div {
-    display: flex;
-  }
-
-  margin-left: 0;
-  min-width: auto;
-`;
-export const triggerWrapperStyles = css`
-  display: flex;
-`;
+export const wrapperStyle = css({
+  display: 'flex',
+  alignItems: 'center',
+  '> div, > span': {
+    display: 'flex'
+  },
+  '> div > div': {
+    display: 'flex'
+  },
+  marginLeft: 0,
+  minWidth: 'auto'
+});
+export const triggerWrapperStyles = css({
+  display: 'flex'
+});

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

@@ -17,6 +17,8 @@ export const resizerDangerClassName = `${resizerHandleClassName}-danger`;
 const akEditorSelectedNodeClassName = 'ak-editor-selected-node';
 export const handleWrapperClass = 'resizer-handle-wrapper';
 export const resizerHandleZIndex = 1;
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Seems perfectly safe to autofix, but comments would be lost…
 export const resizerStyles = css`
   .${resizerItemClassName} {
     will-change: width;

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

@@ -2,12 +2,13 @@ import { css } from '@emotion/react';
 import { akEditorLineHeight } from '@atlaskit/editor-shared-styles';
 import { N30A } from '@atlaskit/theme/colors';
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
-export const ruleSharedStyles = () => css`
-  & hr {
-    border: none;
-    background-color: ${`var(--ds-border, ${N30A})`};
-    margin: ${akEditorLineHeight}em 0;
-    height: 2px;
-    border-radius: 1px;
+export const ruleSharedStyles = () => css({
+  '& hr': {
+    border: 'none',
+    backgroundColor: `var(--ds-border, ${N30A})`,
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    margin: `${akEditorLineHeight}em 0`,
+    height: '2px',
+    borderRadius: '1px'
   }
-`;
+});

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

@@ -43,8 +43,7 @@ const shadowSharedStyle = css({
   },
   [`& .${shadowClassNames.RIGHT_SHADOW}::after`]: {
     background: `linear-gradient( to right, transparent 0, ${`var(--ds-shadow-overflow-spread, ${N40A})`} ${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100}% ), linear-gradient( to left, ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px, transparent 1px )`,
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-    left: `calc(100% - ${shadowWidth}px)`,
+    right: '0px',
     top: '0px',
     display: 'block'
   },

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

@@ -4,6 +4,8 @@ import { N0, N40 } from '@atlaskit/theme/colors';
 import { SmartCardSharedCssClassName } from './smart-card';
 export const DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';
 export const FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Seems safe to autofix with a fix to `getSelectionStyles`
 export const smartCardStyles = css`
   .${SmartCardSharedCssClassName.INLINE_CARD_CONTAINER} {
     max-width: calc(100% - 20px);

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

@@ -34,6 +34,8 @@ export const TableSharedCssClassName = {
   TABLE_COLUMN_CONTROLS_DECORATIONS: `${tablePrefixSelector}-column-controls-decoration`,
   TABLE_RESIZER_CONTAINER: `${tablePrefixSelector}-resizer-container`
 };
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Appears safe to auto-fix, but leaving it up to the team to remediate as the readability only gets worse with autofixing
 const tableSharedStyle = () => css`
   ${tableCellBackgroundStyleOverride()}
   .${TableSharedCssClassName.TABLE_CONTAINER} {

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

@@ -22,6 +22,4 @@ const mapBackgroundColors = () => {
   });
   return cssString;
 };
-export const tableCellBackgroundStyleOverride = () => css`
-  ${mapBackgroundColors()}
-`;
+export const tableCellBackgroundStyleOverride = () => css(mapBackgroundColors());

package/dist/es2019/styles/shared/text-color.js

@@ -1,10 +1,9 @@
 import { css } from '@emotion/react';
-export const textColorStyles = css`
-  .fabric-text-color-mark {
-    color: var(--custom-palette-color, inherit);
+export const textColorStyles = css({
+  '.fabric-text-color-mark': {
+    color: 'var(--custom-palette-color, inherit)'
+  },
+  'a .fabric-text-color-mark': {
+    color: 'unset'
   }
-
-  a .fabric-text-color-mark {
-    color: unset;
-  }
-`;
+});

package/dist/es2019/styles/shared/unsupported-content.js

@@ -6,6 +6,8 @@ export const UnsupportedSharedCssClassName = {
 };
 const inlineUnsupportedSelector = `.${UnsupportedSharedCssClassName.INLINE_CONTAINER} > span:nth-of-type(2)`;
 const blockUnsupportedSelector = `.${UnsupportedSharedCssClassName.BLOCK_CONTAINER} > div`;
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Nested `getSelectionStyles` would need a rebuild to autofix
 export const unsupportedStyles = css`
   ${blockUnsupportedSelector}, ${inlineUnsupportedSelector} {
     cursor: pointer;

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-const whitespaceSharedStyles = css`
-  word-wrap: break-word;
-  white-space: pre-wrap;
-`;
+const whitespaceSharedStyles = css({
+  wordWrap: 'break-word',
+  whiteSpace: 'pre-wrap'
+});
 export { whitespaceSharedStyles };

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

@@ -7,7 +7,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "78.11.5";
+const packageVersion = "78.11.7";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/es2019/ui/MediaSingle/styled.js

@@ -135,27 +135,29 @@ export const MediaSingleDimensionHelper = ({
   isExtendedResizeExperienceOn,
   isNestedNode = false,
   isInsideOfInlineExtension = false
-}) => css`
-  /* For nested rich media items, set max-width to 100% */
-  tr &,
-  [data-layout-column] &,
-  [data-node-type='expand'] &,
-  [data-panel-type] &,
-  li & {
-    max-width: 100%;
-  }
+}) =>
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
+css`
+    /* For nested rich media items, set max-width to 100% */
+    tr &,
+    [data-layout-column] &,
+    [data-node-type='expand'] &,
+    [data-panel-type] &,
+    li & {
+      max-width: 100%;
+    }
 
-  width: ${isExtendedResizeExperienceOn ? `${mediaSingleWidth || width}px` : mediaSingleWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized, isInsideOfInlineExtension)};
-  ${layout === 'full-width' &&
+    width: ${isExtendedResizeExperienceOn ? `${mediaSingleWidth || width}px` : mediaSingleWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized, isInsideOfInlineExtension)};
+    ${layout === 'full-width' &&
 /* This causes issues for new experience where we don't strip layout attributes
- when copying top-level node and pasting into a table/layout,
- because full-width layout will remain, causing node to be edge-to-edge */
-!isExtendedResizeExperienceOn && css`
-    min-width: 100%;
-  `}
-  max-width: ${isExtendedResizeExperienceOn ? `${containerWidth}px` : calcMaxWidth(layout, containerWidth)};
+when copying top-level node and pasting into a table/layout,
+because full-width layout will remain, causing node to be edge-to-edge */
+!isExtendedResizeExperienceOn && css({
+  minWidth: '100%'
+})}
+    max-width: ${isExtendedResizeExperienceOn ? `${containerWidth}px` : calcMaxWidth(layout, containerWidth)};
 
-  ${isExtendedResizeExperienceOn && `&[class*='is-resizing'] {
+    ${isExtendedResizeExperienceOn && `&[class*='is-resizing'] {
     .new-file-experience-wrapper {
       box-shadow: none !important;
     }
@@ -164,27 +166,29 @@ export const MediaSingleDimensionHelper = ({
       transform: translateX(-50%);`}
   }`}
 
-  &:not(.is-resizing) {
-    transition: width 100ms ease-in;
-  }
+    &:not(.is-resizing) {
+      transition: width 100ms ease-in;
+    }
 
-  float: ${float(layout)};
-  margin: ${calcMargin(layout)};
+    float: ${float(layout)};
+    margin: ${calcMargin(layout)};
 
-  &[class*='not-resizing'] {
-    ${isNestedNode ? /* Make nested node appear responsive when resizing table cell */
+    &[class*='not-resizing'] {
+      ${isNestedNode ? /* Make nested node appear responsive when resizing table cell */
 `max-width: 100%;` : nonWrappedLayouts.includes(layout) && `margin-left: 50%;
         transform: translateX(-50%);`}
-  }
+    }
 
-  ${isImageAligned(layout)};
-`;
+    ${isImageAligned(layout)};
+  `;
 const RenderFallbackContainer = ({
   hasFallbackContainer,
   paddingBottom,
   height
-}) => css`
-  ${hasFallbackContainer ? `
+}) =>
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
+css`
+    ${hasFallbackContainer ? `
   &::after {
     content: '';
     display: block;
@@ -195,7 +199,9 @@ const RenderFallbackContainer = ({
     line-height: 0;
   }
   ` : ''}
-`;
+  `;
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 export const mediaWrapperStyle = props => css`
   position: relative;
 

package/dist/es2019/ui/ResizerLegacy/styled.js

@@ -1,5 +1,7 @@
 import { css } from '@emotion/react';
 import { MediaSingleDimensionHelper } from '../MediaSingle/styled';
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 export const wrapperStyle = props => css`
   & > div {
     ${MediaSingleDimensionHelper(props)};