@atlaskit/editor-common 74.21.4 → 74.23.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-common
 
+## 74.23.0
+
+### Minor Changes
+
+- [`5f028fb62a1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f028fb62a1) - ED-19038 added mediaSingle.widthType support to renderer.
+
+## 74.22.0
+
+### Minor Changes
+
+- [`464745a92e6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/464745a92e6) - [ux] Updated the Editor Table plugin to use the new guidelines plugin when custom-table-widths FF is enabled
+
 ## 74.21.4
 
 ### Patch Changes

package/dist/cjs/guideline/fixedGuideline.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createGuidesFromLengths = exports.createFixedGuidelinesFromLengths = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+/**
+ * This creates a collection of points relative to the center line of each supplied length. For example; a length of
+ * 100 centered to 0 would result in the left position of -50 and a right position of +50.
+ *
+ * Length values should be unique, as duplicates will be trimmed from the result.
+ *
+ * @example
+ * createGuidelinesFromLengths([100, 200, 200, -200, 201]) => [
+ *  {left: -50, right: 50, length: 100},
+ *  {left: -100, right: 100, length: 200},
+ *  {left: 100, right: -100, length: -200},
+ *  {left: -100.5, right: 100.5, length: 201},
+ * ]
+ *
+ * @param lengths A colection of length values which will be split into a left & right guides.
+ * @returns A collection of LengthGuide objects which can be used to draw left & right guides
+ */
+var createGuidesFromLengths = function createGuidesFromLengths(lengths) {
+  return Array.from(new Set(lengths)).reduce(function (acc, length) {
+    var h = length * 0.5;
+    if (!h || !Number.isFinite(length)) {
+      // Filter out nonsensical values, like 0
+      return acc;
+    }
+    return [].concat((0, _toConsumableArray2.default)(acc), [{
+      left: -h,
+      right: h,
+      length: length
+    }]);
+  }, []);
+};
+
+/**
+ * This creates a Guideline configuration generating a collection of guideline pairs from each supplied length value.
+ * Each length value generates a guideline config for both the left and right side of the length.
+ */
+exports.createGuidesFromLengths = createGuidesFromLengths;
+var createFixedGuidelinesFromLengths = function createFixedGuidelinesFromLengths(lengths) {
+  var key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'guide';
+  return createGuidesFromLengths(lengths).reduce(function (acc, _ref) {
+    var left = _ref.left,
+      right = _ref.right,
+      length = _ref.length;
+    return [].concat((0, _toConsumableArray2.default)(acc), [{
+      key: "".concat(key, "-").concat(length, "-left"),
+      position: {
+        x: left
+      }
+    }, {
+      key: "".concat(key, "-").concat(length, "-right"),
+      position: {
+        x: right
+      }
+    }]);
+  }, []);
+};
+exports.createFixedGuidelinesFromLengths = createFixedGuidelinesFromLengths;

package/dist/cjs/guideline/index.js

@@ -3,10 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "createFixedGuidelinesFromLengths", {
+  enumerable: true,
+  get: function get() {
+    return _fixedGuideline.createFixedGuidelinesFromLengths;
+  }
+});
+Object.defineProperty(exports, "createGuidesFromLengths", {
+  enumerable: true,
+  get: function get() {
+    return _fixedGuideline.createGuidesFromLengths;
+  }
+});
 Object.defineProperty(exports, "generateDynamicGuidelines", {
   enumerable: true,
   get: function get() {
     return _dynamicGuideline.generateDynamicGuidelines;
   }
 });
-var _dynamicGuideline = require("./dynamicGuideline");
+Object.defineProperty(exports, "getGuidelinesWithHighlights", {
+  enumerable: true,
+  get: function get() {
+    return _updateGuideline.getGuidelinesWithHighlights;
+  }
+});
+var _dynamicGuideline = require("./dynamicGuideline");
+var _fixedGuideline = require("./fixedGuideline");
+var _updateGuideline = require("./updateGuideline");

package/dist/cjs/guideline/updateGuideline.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getGuidelinesWithHighlights = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var activeGuidelineStyle = function activeGuidelineStyle(guideline) {
+  return _objectSpread(_objectSpread({}, guideline), {}, {
+    active: true,
+    show: true
+  });
+};
+var getGuidelinesWithHighlights = function getGuidelinesWithHighlights(gap, maxGap, activeGuidelineKeys, guidelines) {
+  if (activeGuidelineKeys.length) {
+    return guidelines.map(function (guideline) {
+      if (activeGuidelineKeys.includes(guideline.key) && gap < maxGap) {
+        return activeGuidelineStyle(guideline);
+      }
+      return guideline;
+    });
+  } else {
+    return guidelines;
+  }
+};
+exports.getGuidelinesWithHighlights = getGuidelinesWithHighlights;

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "74.21.4";
+var packageVersion = "74.23.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -24,7 +24,7 @@ var _templateObject, _templateObject2, _templateObject3;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "74.21.4";
+var packageVersion = "74.23.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -40,6 +40,7 @@ function MediaSingle(_ref) {
     _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     pctWidth = _ref.pctWidth,
+    size = _ref.size,
     className = _ref.className,
     propsChildren = _ref.children,
     _ref$nodeType = _ref.nodeType,
@@ -49,16 +50,18 @@ function MediaSingle(_ref) {
     _ref$hasFallbackConta = _ref.hasFallbackContainer,
     hasFallbackContainer = _ref$hasFallbackConta === void 0 ? true : _ref$hasFallbackConta,
     handleMediaSingleRef = _ref.handleMediaSingleRef;
+  var isPixelWidth = (size === null || size === void 0 ? void 0 : size.widthType) === 'pixel';
+  var mediaSingleWidth = (size === null || size === void 0 ? void 0 : size.width) || pctWidth;
   var children = _react.default.Children.toArray(propsChildren);
-  if (!pctWidth && shouldAddDefaultWrappedWidth(layout, width, lineLength)) {
-    pctWidth = 50;
+  if (!mediaSingleWidth && shouldAddDefaultWrappedWidth(layout, width, lineLength)) {
+    mediaSingleWidth = isPixelWidth ? lineLength / 2 : 50;
   }
   // When width is not set we have an absolute height for a given embed.
   // When both width and height are set we use them to determine ratio and use that to define
   // embed height in relation to whatever width of an dom element is in runtime
   var isHeightOnly = width === undefined;
-  if (pctWidth) {
-    var pxWidth = Math.ceil((0, _grid.calcPxFromPct)(pctWidth / 100, lineLength || containerWidth || 0));
+  if (mediaSingleWidth) {
+    var pxWidth = isPixelWidth ? mediaSingleWidth : Math.ceil((0, _grid.calcPxFromPct)(mediaSingleWidth / 100, lineLength || containerWidth || 0));
     if (isHeightOnly) {
       width = pxWidth - _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide;
     } else if (width !== undefined) {
@@ -66,7 +69,7 @@ function MediaSingle(_ref) {
       width = pxWidth;
     }
   } else if (isHeightOnly) {
-    // No pctWidth can be found on already existing pages with existing embeds
+    // No mediaSingleWidth can be found on already existing pages with existing embeds
 
     // It's ok to use Embed specific width, because width can be not set only in embed card.
     // This value will be used only in the case of non `wide` and non `full-width` cases inside MediaSingleDimensionHelper.
@@ -102,11 +105,12 @@ function MediaSingle(_ref) {
       width: width,
       layout: layout,
       containerWidth: containerWidth,
-      pctWidth: pctWidth,
+      mediaSingleWidth: mediaSingleWidth,
       fullWidthMode: fullWidthMode
     }),
     "data-layout": layout,
-    "data-width": pctWidth,
+    "data-width": mediaSingleWidth,
+    "data-width-type": (size === null || size === void 0 ? void 0 : size.widthType) || 'percentage',
     "data-node-type": nodeType,
     className: (0, _classnames.default)('rich-media-item mediaSingleView-content-wrap', "image-".concat(layout), className, {
       'is-loading': isLoading,

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

@@ -118,8 +118,9 @@ var MediaSingleDimensionHelper = function MediaSingleDimensionHelper(_ref) {
     isResized = _ref.isResized,
     layout = _ref.layout,
     pctWidth = _ref.pctWidth,
+    mediaSingleWidth = _ref.mediaSingleWidth,
     width = _ref.width;
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n  float: ", ";\n  margin: ", ";\n  ", ";\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n"])), pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), layout === 'full-width' && (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    min-width: 100%;\n  "]))), calcMaxWidth(layout, containerWidth), float(layout), calcMargin(layout), isImageAligned(layout));
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n  float: ", ";\n  margin: ", ";\n  ", ";\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n"])), mediaSingleWidth || pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), layout === 'full-width' && (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    min-width: 100%;\n  "]))), calcMaxWidth(layout, containerWidth), float(layout), calcMargin(layout), isImageAligned(layout));
 };
 exports.MediaSingleDimensionHelper = MediaSingleDimensionHelper;
 var RenderFallbackContainer = function RenderFallbackContainer(_ref2) {

package/dist/cjs/ui/MediaSingle/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "74.21.4",
+	"version": "74.23.0",
 	"sideEffects": false
 }

package/dist/es2019/guideline/fixedGuideline.js

@@ -0,0 +1,53 @@
+/**
+ * This creates a collection of points relative to the center line of each supplied length. For example; a length of
+ * 100 centered to 0 would result in the left position of -50 and a right position of +50.
+ *
+ * Length values should be unique, as duplicates will be trimmed from the result.
+ *
+ * @example
+ * createGuidelinesFromLengths([100, 200, 200, -200, 201]) => [
+ *  {left: -50, right: 50, length: 100},
+ *  {left: -100, right: 100, length: 200},
+ *  {left: 100, right: -100, length: -200},
+ *  {left: -100.5, right: 100.5, length: 201},
+ * ]
+ *
+ * @param lengths A colection of length values which will be split into a left & right guides.
+ * @returns A collection of LengthGuide objects which can be used to draw left & right guides
+ */
+export const createGuidesFromLengths = lengths => {
+  return Array.from(new Set(lengths)).reduce((acc, length) => {
+    const h = length * 0.5;
+    if (!h || !Number.isFinite(length)) {
+      // Filter out nonsensical values, like 0
+      return acc;
+    }
+    return [...acc, {
+      left: -h,
+      right: h,
+      length
+    }];
+  }, []);
+};
+
+/**
+ * This creates a Guideline configuration generating a collection of guideline pairs from each supplied length value.
+ * Each length value generates a guideline config for both the left and right side of the length.
+ */
+export const createFixedGuidelinesFromLengths = (lengths, key = 'guide') => {
+  return createGuidesFromLengths(lengths).reduce((acc, {
+    left,
+    right,
+    length
+  }) => [...acc, {
+    key: `${key}-${length}-left`,
+    position: {
+      x: left
+    }
+  }, {
+    key: `${key}-${length}-right`,
+    position: {
+      x: right
+    }
+  }], []);
+};

package/dist/es2019/guideline/index.js

@@ -1 +1,3 @@
-export { generateDynamicGuidelines } from './dynamicGuideline';
+export { generateDynamicGuidelines } from './dynamicGuideline';
+export { createFixedGuidelinesFromLengths, createGuidesFromLengths } from './fixedGuideline';
+export { getGuidelinesWithHighlights } from './updateGuideline';

package/dist/es2019/guideline/updateGuideline.js

@@ -0,0 +1,17 @@
+const activeGuidelineStyle = guideline => ({
+  ...guideline,
+  active: true,
+  show: true
+});
+export const getGuidelinesWithHighlights = (gap, maxGap, activeGuidelineKeys, guidelines) => {
+  if (activeGuidelineKeys.length) {
+    return guidelines.map(guideline => {
+      if (activeGuidelineKeys.includes(guideline.key) && gap < maxGap) {
+        return activeGuidelineStyle(guideline);
+      }
+      return guideline;
+    });
+  } else {
+    return guidelines;
+  }
+};

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 = "74.21.4";
+const packageVersion = "74.23.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -8,7 +8,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "74.21.4";
+const packageVersion = "74.23.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

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

@@ -23,6 +23,7 @@ export default function MediaSingle({
   containerWidth = width,
   isLoading = false,
   pctWidth,
+  size,
   className,
   children: propsChildren,
   nodeType = 'mediaSingle',
@@ -31,16 +32,18 @@ export default function MediaSingle({
   hasFallbackContainer = true,
   handleMediaSingleRef
 }) {
+  const isPixelWidth = (size === null || size === void 0 ? void 0 : size.widthType) === 'pixel';
+  let mediaSingleWidth = (size === null || size === void 0 ? void 0 : size.width) || pctWidth;
   const children = React.Children.toArray(propsChildren);
-  if (!pctWidth && shouldAddDefaultWrappedWidth(layout, width, lineLength)) {
-    pctWidth = 50;
+  if (!mediaSingleWidth && shouldAddDefaultWrappedWidth(layout, width, lineLength)) {
+    mediaSingleWidth = isPixelWidth ? lineLength / 2 : 50;
   }
   // When width is not set we have an absolute height for a given embed.
   // When both width and height are set we use them to determine ratio and use that to define
   // embed height in relation to whatever width of an dom element is in runtime
   const isHeightOnly = width === undefined;
-  if (pctWidth) {
-    const pxWidth = Math.ceil(calcPxFromPct(pctWidth / 100, lineLength || containerWidth || 0));
+  if (mediaSingleWidth) {
+    const pxWidth = isPixelWidth ? mediaSingleWidth : Math.ceil(calcPxFromPct(mediaSingleWidth / 100, lineLength || containerWidth || 0));
     if (isHeightOnly) {
       width = pxWidth - akEditorMediaResizeHandlerPaddingWide;
     } else if (width !== undefined) {
@@ -48,7 +51,7 @@ export default function MediaSingle({
       width = pxWidth;
     }
   } else if (isHeightOnly) {
-    // No pctWidth can be found on already existing pages with existing embeds
+    // No mediaSingleWidth can be found on already existing pages with existing embeds
 
     // It's ok to use Embed specific width, because width can be not set only in embed card.
     // This value will be used only in the case of non `wide` and non `full-width` cases inside MediaSingleDimensionHelper.
@@ -82,11 +85,12 @@ export default function MediaSingle({
       width,
       layout,
       containerWidth,
-      pctWidth,
+      mediaSingleWidth,
       fullWidthMode
     }),
     "data-layout": layout,
-    "data-width": pctWidth,
+    "data-width": mediaSingleWidth,
+    "data-width-type": (size === null || size === void 0 ? void 0 : size.widthType) || 'percentage',
     "data-node-type": nodeType,
     className: classnames('rich-media-item mediaSingleView-content-wrap', `image-${layout}`, className, {
       'is-loading': isLoading,

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

@@ -99,6 +99,7 @@ export const MediaSingleDimensionHelper = ({
   isResized,
   layout,
   pctWidth,
+  mediaSingleWidth,
   width
 }) => css`
   /* For nested rich media items, set max-width to 100% */
@@ -108,7 +109,7 @@ export const MediaSingleDimensionHelper = ({
     max-width: 100%;
   }
 
-  width: ${pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized)};
+  width: ${mediaSingleWidth || pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized)};
   ${layout === 'full-width' && css`
     min-width: 100%;
   `}

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

@@ -0,0 +1 @@
+export {};

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "74.21.4",
+	"version": "74.23.0",
 	"sideEffects": false
 }

package/dist/esm/guideline/fixedGuideline.js

@@ -0,0 +1,56 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+/**
+ * This creates a collection of points relative to the center line of each supplied length. For example; a length of
+ * 100 centered to 0 would result in the left position of -50 and a right position of +50.
+ *
+ * Length values should be unique, as duplicates will be trimmed from the result.
+ *
+ * @example
+ * createGuidelinesFromLengths([100, 200, 200, -200, 201]) => [
+ *  {left: -50, right: 50, length: 100},
+ *  {left: -100, right: 100, length: 200},
+ *  {left: 100, right: -100, length: -200},
+ *  {left: -100.5, right: 100.5, length: 201},
+ * ]
+ *
+ * @param lengths A colection of length values which will be split into a left & right guides.
+ * @returns A collection of LengthGuide objects which can be used to draw left & right guides
+ */
+export var createGuidesFromLengths = function createGuidesFromLengths(lengths) {
+  return Array.from(new Set(lengths)).reduce(function (acc, length) {
+    var h = length * 0.5;
+    if (!h || !Number.isFinite(length)) {
+      // Filter out nonsensical values, like 0
+      return acc;
+    }
+    return [].concat(_toConsumableArray(acc), [{
+      left: -h,
+      right: h,
+      length: length
+    }]);
+  }, []);
+};
+
+/**
+ * This creates a Guideline configuration generating a collection of guideline pairs from each supplied length value.
+ * Each length value generates a guideline config for both the left and right side of the length.
+ */
+export var createFixedGuidelinesFromLengths = function createFixedGuidelinesFromLengths(lengths) {
+  var key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'guide';
+  return createGuidesFromLengths(lengths).reduce(function (acc, _ref) {
+    var left = _ref.left,
+      right = _ref.right,
+      length = _ref.length;
+    return [].concat(_toConsumableArray(acc), [{
+      key: "".concat(key, "-").concat(length, "-left"),
+      position: {
+        x: left
+      }
+    }, {
+      key: "".concat(key, "-").concat(length, "-right"),
+      position: {
+        x: right
+      }
+    }]);
+  }, []);
+};

package/dist/esm/guideline/index.js

@@ -1 +1,3 @@
-export { generateDynamicGuidelines } from './dynamicGuideline';
+export { generateDynamicGuidelines } from './dynamicGuideline';
+export { createFixedGuidelinesFromLengths, createGuidesFromLengths } from './fixedGuideline';
+export { getGuidelinesWithHighlights } from './updateGuideline';

package/dist/esm/guideline/updateGuideline.js

@@ -0,0 +1,21 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var activeGuidelineStyle = function activeGuidelineStyle(guideline) {
+  return _objectSpread(_objectSpread({}, guideline), {}, {
+    active: true,
+    show: true
+  });
+};
+export var getGuidelinesWithHighlights = function getGuidelinesWithHighlights(gap, maxGap, activeGuidelineKeys, guidelines) {
+  if (activeGuidelineKeys.length) {
+    return guidelines.map(function (guideline) {
+      if (activeGuidelineKeys.includes(guideline.key) && gap < maxGap) {
+        return activeGuidelineStyle(guideline);
+      }
+      return guideline;
+    });
+  } else {
+    return guidelines;
+  }
+};

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "74.21.4";
+var packageVersion = "74.23.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -18,7 +18,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "74.21.4";
+var packageVersion = "74.23.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/esm/ui/MediaSingle/index.js

@@ -26,6 +26,7 @@ export default function MediaSingle(_ref) {
     _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     pctWidth = _ref.pctWidth,
+    size = _ref.size,
     className = _ref.className,
     propsChildren = _ref.children,
     _ref$nodeType = _ref.nodeType,
@@ -35,16 +36,18 @@ export default function MediaSingle(_ref) {
     _ref$hasFallbackConta = _ref.hasFallbackContainer,
     hasFallbackContainer = _ref$hasFallbackConta === void 0 ? true : _ref$hasFallbackConta,
     handleMediaSingleRef = _ref.handleMediaSingleRef;
+  var isPixelWidth = (size === null || size === void 0 ? void 0 : size.widthType) === 'pixel';
+  var mediaSingleWidth = (size === null || size === void 0 ? void 0 : size.width) || pctWidth;
   var children = React.Children.toArray(propsChildren);
-  if (!pctWidth && shouldAddDefaultWrappedWidth(layout, width, lineLength)) {
-    pctWidth = 50;
+  if (!mediaSingleWidth && shouldAddDefaultWrappedWidth(layout, width, lineLength)) {
+    mediaSingleWidth = isPixelWidth ? lineLength / 2 : 50;
   }
   // When width is not set we have an absolute height for a given embed.
   // When both width and height are set we use them to determine ratio and use that to define
   // embed height in relation to whatever width of an dom element is in runtime
   var isHeightOnly = width === undefined;
-  if (pctWidth) {
-    var pxWidth = Math.ceil(calcPxFromPct(pctWidth / 100, lineLength || containerWidth || 0));
+  if (mediaSingleWidth) {
+    var pxWidth = isPixelWidth ? mediaSingleWidth : Math.ceil(calcPxFromPct(mediaSingleWidth / 100, lineLength || containerWidth || 0));
     if (isHeightOnly) {
       width = pxWidth - akEditorMediaResizeHandlerPaddingWide;
     } else if (width !== undefined) {
@@ -52,7 +55,7 @@ export default function MediaSingle(_ref) {
       width = pxWidth;
     }
   } else if (isHeightOnly) {
-    // No pctWidth can be found on already existing pages with existing embeds
+    // No mediaSingleWidth can be found on already existing pages with existing embeds
 
     // It's ok to use Embed specific width, because width can be not set only in embed card.
     // This value will be used only in the case of non `wide` and non `full-width` cases inside MediaSingleDimensionHelper.
@@ -88,11 +91,12 @@ export default function MediaSingle(_ref) {
       width: width,
       layout: layout,
       containerWidth: containerWidth,
-      pctWidth: pctWidth,
+      mediaSingleWidth: mediaSingleWidth,
       fullWidthMode: fullWidthMode
     }),
     "data-layout": layout,
-    "data-width": pctWidth,
+    "data-width": mediaSingleWidth,
+    "data-width-type": (size === null || size === void 0 ? void 0 : size.widthType) || 'percentage',
     "data-node-type": nodeType,
     className: classnames('rich-media-item mediaSingleView-content-wrap', "image-".concat(layout), className, {
       'is-loading': isLoading,

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

@@ -108,8 +108,9 @@ export var MediaSingleDimensionHelper = function MediaSingleDimensionHelper(_ref
     isResized = _ref.isResized,
     layout = _ref.layout,
     pctWidth = _ref.pctWidth,
+    mediaSingleWidth = _ref.mediaSingleWidth,
     width = _ref.width;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n  float: ", ";\n  margin: ", ";\n  ", ";\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n"])), pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), layout === 'full-width' && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    min-width: 100%;\n  "]))), calcMaxWidth(layout, containerWidth), float(layout), calcMargin(layout), isImageAligned(layout));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n  float: ", ";\n  margin: ", ";\n  ", ";\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n"])), mediaSingleWidth || pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), layout === 'full-width' && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    min-width: 100%;\n  "]))), calcMaxWidth(layout, containerWidth), float(layout), calcMargin(layout), isImageAligned(layout));
 };
 var RenderFallbackContainer = function RenderFallbackContainer(_ref2) {
   var hasFallbackContainer = _ref2.hasFallbackContainer,

package/dist/esm/ui/MediaSingle/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "74.21.4",
+	"version": "74.23.0",
 	"sideEffects": false
 }

package/dist/types/guideline/fixedGuideline.d.ts

@@ -0,0 +1,29 @@
+import { LengthGuide } from './types';
+/**
+ * This creates a collection of points relative to the center line of each supplied length. For example; a length of
+ * 100 centered to 0 would result in the left position of -50 and a right position of +50.
+ *
+ * Length values should be unique, as duplicates will be trimmed from the result.
+ *
+ * @example
+ * createGuidelinesFromLengths([100, 200, 200, -200, 201]) => [
+ *  {left: -50, right: 50, length: 100},
+ *  {left: -100, right: 100, length: 200},
+ *  {left: 100, right: -100, length: -200},
+ *  {left: -100.5, right: 100.5, length: 201},
+ * ]
+ *
+ * @param lengths A colection of length values which will be split into a left & right guides.
+ * @returns A collection of LengthGuide objects which can be used to draw left & right guides
+ */
+export declare const createGuidesFromLengths: (lengths: number[]) => LengthGuide[];
+/**
+ * This creates a Guideline configuration generating a collection of guideline pairs from each supplied length value.
+ * Each length value generates a guideline config for both the left and right side of the length.
+ */
+export declare const createFixedGuidelinesFromLengths: (lengths: number[], key?: string) => {
+    key: string;
+    position: {
+        x: number;
+    };
+}[];

package/dist/types/guideline/index.d.ts

@@ -1 +1,3 @@
 export { generateDynamicGuidelines } from './dynamicGuideline';
+export { createFixedGuidelinesFromLengths, createGuidesFromLengths, } from './fixedGuideline';
+export { getGuidelinesWithHighlights } from './updateGuideline';

package/dist/types/guideline/types.d.ts

@@ -2,3 +2,8 @@ export declare enum WidthTypes {
     PERCENTAGE = "percentage",
     PIXEL = "pixel"
 }
+export type LengthGuide = {
+    left: number;
+    right: number;
+    length: number;
+};

package/dist/types/guideline/updateGuideline.d.ts

@@ -0,0 +1,5 @@
+export declare const getGuidelinesWithHighlights: <T extends {
+    key: string;
+    active?: boolean | undefined;
+    show?: boolean | undefined;
+}>(gap: number, maxGap: number, activeGuidelineKeys: string[], guidelines: T[]) => T[];

package/dist/types/resizer/Resizer.d.ts

@@ -16,6 +16,11 @@ export type ResizerProps = {
     handleComponent?: HandleComponent;
     handleHeightSize?: HandleHeightSizeType;
     handleMarginTop?: number;
+    snap?: {
+        x?: Array<number>;
+        y?: Array<number>;
+    };
+    snapGap?: number;
     handleAlignmentMethod?: HandleAlignmentMethod;
     resizeRatio?: number;
 };

package/dist/types/ui/MediaSingle/index.d.ts

@@ -2,6 +2,7 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { RichMediaLayout as MediaSingleLayout, RichMediaLayout } from '@atlaskit/adf-schema';
+import type { MediaSingleSize, MediaSingleWidthType } from './types';
 export declare const DEFAULT_IMAGE_WIDTH = 250;
 export declare const DEFAULT_IMAGE_HEIGHT = 200;
 export declare const IMAGE_AND_BORDER_ADJUSTMENT = 2;
@@ -14,11 +15,18 @@ export interface Props {
     containerWidth?: number;
     isLoading?: boolean;
     className?: string;
+    /**
+     * @private
+     * @deprecated Use {@link Props.size.width} instead.
+     * Cleanup ticket: https://product-fabric.atlassian.net/browse/ED-19076
+     */
     pctWidth?: number;
+    size?: MediaSingleSize;
     nodeType?: string;
     fullWidthMode?: boolean;
     hasFallbackContainer?: boolean;
     handleMediaSingleRef?: React.RefObject<HTMLDivElement>;
 }
 export declare const shouldAddDefaultWrappedWidth: (layout: RichMediaLayout, width?: number, lineLength?: number) => boolean | 0 | undefined;
-export default function MediaSingle({ layout, width, height, containerWidth, isLoading, pctWidth, className, children: propsChildren, nodeType, fullWidthMode, lineLength, hasFallbackContainer, handleMediaSingleRef, }: Props): jsx.JSX.Element;
+export type { MediaSingleWidthType, MediaSingleSize };
+export default function MediaSingle({ layout, width, height, containerWidth, isLoading, pctWidth, size, className, children: propsChildren, nodeType, fullWidthMode, lineLength, hasFallbackContainer, handleMediaSingleRef, }: Props): jsx.JSX.Element;

package/dist/types/ui/MediaSingle/styled.d.ts

@@ -22,7 +22,13 @@ export interface MediaSingleWrapperProps {
     fullWidthMode?: boolean;
     isResized?: boolean;
     layout: MediaSingleLayout;
+    /**
+     * @private
+     * @deprecated Use {@link MediaSingleWrapperProps.mediaSingleWidth} instead.
+     * Cleanup ticket: https://product-fabric.atlassian.net/browse/ED-19076
+     */
     pctWidth?: number;
+    mediaSingleWidth?: number;
     width?: number;
     innerRef?: ((elem: HTMLDivElement) => void) | RefObject<HTMLDivElement>;
 }
@@ -30,7 +36,7 @@ export interface MediaSingleWrapperProps {
  * Can't use `.attrs` to handle highly dynamic styles because we are still
  * supporting `styled-components` v1.
  */
-export declare const MediaSingleDimensionHelper: ({ containerWidth, fullWidthMode, isResized, layout, pctWidth, width, }: MediaSingleWrapperProps) => import("@emotion/react").SerializedStyles;
+export declare const MediaSingleDimensionHelper: ({ containerWidth, fullWidthMode, isResized, layout, pctWidth, mediaSingleWidth, width, }: MediaSingleWrapperProps) => import("@emotion/react").SerializedStyles;
 export interface MediaWrapperProps {
     paddingBottom?: string;
     height?: number;

package/dist/types/ui/MediaSingle/types.d.ts

@@ -0,0 +1,12 @@
+export type MediaSingleWidthType = 'pixel' | 'percentage';
+export type MediaSingleSize = {
+    /**
+     * The width attribute from mediaSingle node
+     */
+    width?: number;
+    /**
+     * The widthType attribute from mediaSingle node
+     * @default percentage
+     */
+    widthType?: MediaSingleWidthType;
+};

package/dist/types/ui/index.d.ts

@@ -1,6 +1,6 @@
 export { default as Caption } from './Caption';
 export { default as MediaSingle, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, IMAGE_AND_BORDER_ADJUSTMENT, shouldAddDefaultWrappedWidth, } from './MediaSingle';
-export type { Props as MediaSingleProps } from './MediaSingle';
+export type { Props as MediaSingleProps, MediaSingleWidthType, MediaSingleSize, } from './MediaSingle';
 export { MediaSingleDimensionHelper } from './MediaSingle/styled';
 export type { MediaSingleWrapperProps as MediaSingleDimensionHelperProps } from './MediaSingle/styled';
 export { layoutSupportsWidth, calcPxFromColumns, calcPctFromPx, calcPxFromPct, calcColumnsFromPx, snapToGrid, calcMediaPxWidth, wrappedLayouts, } from './MediaSingle/grid';

package/dist/types-ts4.5/guideline/fixedGuideline.d.ts

@@ -0,0 +1,29 @@
+import { LengthGuide } from './types';
+/**
+ * This creates a collection of points relative to the center line of each supplied length. For example; a length of
+ * 100 centered to 0 would result in the left position of -50 and a right position of +50.
+ *
+ * Length values should be unique, as duplicates will be trimmed from the result.
+ *
+ * @example
+ * createGuidelinesFromLengths([100, 200, 200, -200, 201]) => [
+ *  {left: -50, right: 50, length: 100},
+ *  {left: -100, right: 100, length: 200},
+ *  {left: 100, right: -100, length: -200},
+ *  {left: -100.5, right: 100.5, length: 201},
+ * ]
+ *
+ * @param lengths A colection of length values which will be split into a left & right guides.
+ * @returns A collection of LengthGuide objects which can be used to draw left & right guides
+ */
+export declare const createGuidesFromLengths: (lengths: number[]) => LengthGuide[];
+/**
+ * This creates a Guideline configuration generating a collection of guideline pairs from each supplied length value.
+ * Each length value generates a guideline config for both the left and right side of the length.
+ */
+export declare const createFixedGuidelinesFromLengths: (lengths: number[], key?: string) => {
+    key: string;
+    position: {
+        x: number;
+    };
+}[];

package/dist/types-ts4.5/guideline/index.d.ts

@@ -1 +1,3 @@
 export { generateDynamicGuidelines } from './dynamicGuideline';
+export { createFixedGuidelinesFromLengths, createGuidesFromLengths, } from './fixedGuideline';
+export { getGuidelinesWithHighlights } from './updateGuideline';

package/dist/types-ts4.5/guideline/types.d.ts

@@ -2,3 +2,8 @@ export declare enum WidthTypes {
     PERCENTAGE = "percentage",
     PIXEL = "pixel"
 }
+export type LengthGuide = {
+    left: number;
+    right: number;
+    length: number;
+};

package/dist/types-ts4.5/guideline/updateGuideline.d.ts

@@ -0,0 +1,5 @@
+export declare const getGuidelinesWithHighlights: <T extends {
+    key: string;
+    active?: boolean | undefined;
+    show?: boolean | undefined;
+}>(gap: number, maxGap: number, activeGuidelineKeys: string[], guidelines: T[]) => T[];

package/dist/types-ts4.5/resizer/Resizer.d.ts

@@ -16,6 +16,11 @@ export type ResizerProps = {
     handleComponent?: HandleComponent;
     handleHeightSize?: HandleHeightSizeType;
     handleMarginTop?: number;
+    snap?: {
+        x?: Array<number>;
+        y?: Array<number>;
+    };
+    snapGap?: number;
     handleAlignmentMethod?: HandleAlignmentMethod;
     resizeRatio?: number;
 };

package/dist/types-ts4.5/ui/MediaSingle/index.d.ts

@@ -2,6 +2,7 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { RichMediaLayout as MediaSingleLayout, RichMediaLayout } from '@atlaskit/adf-schema';
+import type { MediaSingleSize, MediaSingleWidthType } from './types';
 export declare const DEFAULT_IMAGE_WIDTH = 250;
 export declare const DEFAULT_IMAGE_HEIGHT = 200;
 export declare const IMAGE_AND_BORDER_ADJUSTMENT = 2;
@@ -14,11 +15,18 @@ export interface Props {
     containerWidth?: number;
     isLoading?: boolean;
     className?: string;
+    /**
+     * @private
+     * @deprecated Use {@link Props.size.width} instead.
+     * Cleanup ticket: https://product-fabric.atlassian.net/browse/ED-19076
+     */
     pctWidth?: number;
+    size?: MediaSingleSize;
     nodeType?: string;
     fullWidthMode?: boolean;
     hasFallbackContainer?: boolean;
     handleMediaSingleRef?: React.RefObject<HTMLDivElement>;
 }
 export declare const shouldAddDefaultWrappedWidth: (layout: RichMediaLayout, width?: number, lineLength?: number) => boolean | 0 | undefined;
-export default function MediaSingle({ layout, width, height, containerWidth, isLoading, pctWidth, className, children: propsChildren, nodeType, fullWidthMode, lineLength, hasFallbackContainer, handleMediaSingleRef, }: Props): jsx.JSX.Element;
+export type { MediaSingleWidthType, MediaSingleSize };
+export default function MediaSingle({ layout, width, height, containerWidth, isLoading, pctWidth, size, className, children: propsChildren, nodeType, fullWidthMode, lineLength, hasFallbackContainer, handleMediaSingleRef, }: Props): jsx.JSX.Element;

package/dist/types-ts4.5/ui/MediaSingle/styled.d.ts

@@ -22,7 +22,13 @@ export interface MediaSingleWrapperProps {
     fullWidthMode?: boolean;
     isResized?: boolean;
     layout: MediaSingleLayout;
+    /**
+     * @private
+     * @deprecated Use {@link MediaSingleWrapperProps.mediaSingleWidth} instead.
+     * Cleanup ticket: https://product-fabric.atlassian.net/browse/ED-19076
+     */
     pctWidth?: number;
+    mediaSingleWidth?: number;
     width?: number;
     innerRef?: ((elem: HTMLDivElement) => void) | RefObject<HTMLDivElement>;
 }
@@ -30,7 +36,7 @@ export interface MediaSingleWrapperProps {
  * Can't use `.attrs` to handle highly dynamic styles because we are still
  * supporting `styled-components` v1.
  */
-export declare const MediaSingleDimensionHelper: ({ containerWidth, fullWidthMode, isResized, layout, pctWidth, width, }: MediaSingleWrapperProps) => import("@emotion/react").SerializedStyles;
+export declare const MediaSingleDimensionHelper: ({ containerWidth, fullWidthMode, isResized, layout, pctWidth, mediaSingleWidth, width, }: MediaSingleWrapperProps) => import("@emotion/react").SerializedStyles;
 export interface MediaWrapperProps {
     paddingBottom?: string;
     height?: number;

package/dist/types-ts4.5/ui/MediaSingle/types.d.ts

@@ -0,0 +1,12 @@
+export type MediaSingleWidthType = 'pixel' | 'percentage';
+export type MediaSingleSize = {
+    /**
+     * The width attribute from mediaSingle node
+     */
+    width?: number;
+    /**
+     * The widthType attribute from mediaSingle node
+     * @default percentage
+     */
+    widthType?: MediaSingleWidthType;
+};

package/dist/types-ts4.5/ui/index.d.ts

@@ -1,6 +1,6 @@
 export { default as Caption } from './Caption';
 export { default as MediaSingle, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, IMAGE_AND_BORDER_ADJUSTMENT, shouldAddDefaultWrappedWidth, } from './MediaSingle';
-export type { Props as MediaSingleProps } from './MediaSingle';
+export type { Props as MediaSingleProps, MediaSingleWidthType, MediaSingleSize, } from './MediaSingle';
 export { MediaSingleDimensionHelper } from './MediaSingle/styled';
 export type { MediaSingleWrapperProps as MediaSingleDimensionHelperProps } from './MediaSingle/styled';
 export { layoutSupportsWidth, calcPxFromColumns, calcPctFromPx, calcPxFromPct, calcColumnsFromPx, snapToGrid, calcMediaPxWidth, wrappedLayouts, } from './MediaSingle/grid';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "74.21.4",
+  "version": "74.23.0",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"