@atlaskit/editor-common 72.1.2 → 72.2.1

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

@@ -1,26 +1,17 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.codeBlockSharedStyles = exports.codeBlockInListSafariFix = exports.CodeBlockSharedCssClassName = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = require("@emotion/react");
-
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _components = require("@atlaskit/theme/components");
-
 var _constants = require("@atlaskit/theme/constants");
-
 var _templateObject, _templateObject2;
-
 var CodeBlockSharedCssClassName = {
   CODEBLOCK_CONTAINER: 'code-block',
   CODEBLOCK_START: 'code-block--start',
@@ -31,7 +22,6 @@ var CodeBlockSharedCssClassName = {
   DS_CODEBLOCK: '[data-ds--code--code-block]'
 };
 exports.CodeBlockSharedCssClassName = CodeBlockSharedCssClassName;
-
 var codeBlockSharedStyles = function codeBlockSharedStyles(props) {
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    position: relative;\n    background-color: ", ";\n    border-radius: ", "px;\n    margin: ", " 0 0 0;\n    font-family: ", ";\n    min-width: ", "px;\n    cursor: pointer;\n\n    --ds--code--bg-color: transparent;\n\n    /* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */\n    white-space: normal;\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      top: 0px;\n      left: 0px;\n    }\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      bottom: 0px;\n      right: 0px;\n    }\n\n    .", " {\n      background-color: ", ";\n      display: flex;\n      border-radius: ", "px;\n      width: 100%;\n      counter-reset: line;\n      overflow-x: auto;\n\n      background-image: ", ";\n\n      background-repeat: no-repeat;\n      background-attachment: local, local, local, local, scroll, scroll, scroll,\n        scroll;\n      background-size: ", "px 100%, ", "px 100%,\n        ", "px 100%, ", "px 100%, ", "px 100%,\n        1px 100%, ", "px 100%, 1px 100%;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;\n\n      /* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */\n      overflow-y: hidden;\n    }\n\n    .", " {\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", "px;\n      position: relative;\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        ::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          color: ", ";\n          font-size: ", ";\n          line-height: 1.5rem;\n        }\n      }\n    }\n\n    .", " {\n      display: flex;\n      flex: 1;\n\n      code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        color: ", ";\n        border-radius: ", "px;\n        margin: ", "px;\n        white-space: pre;\n        font-size: ", ";\n        line-height: 1.5rem;\n      }\n    }\n  }\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, transparent)", (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorCodeFontFamily, _editorSharedStyles.akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, (0, _components.themed)({
     light: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
@@ -53,7 +43,6 @@ var codeBlockSharedStyles = function codeBlockSharedStyles(props) {
     dark: "var(--ds-text, ".concat(_colors.DN800, ")")
   })(props), (0, _constants.borderRadius)(), (0, _constants.gridSize)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
 };
-
 exports.codeBlockSharedStyles = codeBlockSharedStyles;
 var codeBlockInListSafariFix = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ::before {\n    content: ' ';\n    line-height: ", ";\n  }\n\n  > p:first-child,\n  > .code-block:first-child,\n  > .ProseMirror-gapcursor:first-child + .code-block {\n    margin-top: -", "em !important;\n  }\n"])), _editorSharedStyles.akEditorLineHeight, _editorSharedStyles.akEditorLineHeight);
 exports.codeBlockInListSafariFix = codeBlockInListSafariFix;

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

@@ -1,24 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.codeMarkSharedStyles = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = require("@emotion/react");
-
 var _inline = require("@atlaskit/code/inline");
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _components = require("@atlaskit/theme/components");
-
 var _templateObject;
-
 var codeMarkSharedStyles = function codeMarkSharedStyles(props) {
   var theme = (0, _components.getTheme)(props);
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    .code {\n      --ds--code--bg-color: ", ";\n      ", "\n    }\n  "])), (0, _components.themed)({
@@ -26,5 +18,4 @@ var codeMarkSharedStyles = function codeMarkSharedStyles(props) {
     dark: "var(--ds-background-neutral, ".concat(_colors.DN70, ")")
   })(props), (0, _inline.getCodeStyles)(theme));
 };
-
 exports.codeMarkSharedStyles = codeMarkSharedStyles;

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

@@ -1,19 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.columnLayoutSharedStyle = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = require("@emotion/react");
-
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-
 var _templateObject;
-
 var columnLayoutSharedStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  [data-layout-section] {\n    position: relative;\n    display: flex;\n    flex-direction: row;\n    & > * {\n      flex: 1;\n      min-width: 0;\n    }\n\n    & > .unsupportedBlockView-content-wrap {\n      min-width: initial;\n    }\n\n    @media screen and (max-width: ", "px) {\n      flex-direction: column;\n    }\n  }\n"])), _editorSharedStyles.gridMediumMaxWidth);
 exports.columnLayoutSharedStyle = columnLayoutSharedStyle;

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

@@ -1,18 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.dateSharedStyle = exports.DateSharedCssClassName = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = require("@emotion/react");
-
 var _templateObject;
-
 var DateSharedCssClassName = {
   DATE_WRAPPER: "date-lozenger-container",
   DATE_CONTAINER: 'dateView-content-wrap'

package/dist/cjs/styles/shared/emoji.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EmojiSharedCssClassName = void 0;
-
 var _emoji = require("@atlaskit/emoji");
-
 var EmojiSharedCssClassName = {
   EMOJI_CONTAINER: 'emojiView-content-wrap',
   EMOJI_NODE: _emoji.emojiNode,

package/dist/cjs/styles/shared/extension.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EXTENSION_PADDING = exports.BODIED_EXT_PADDING = void 0;
-
 var _constants = require("@atlaskit/theme/constants");
-
 var EXTENSION_PADDING = (0, _constants.gridSize)();
 exports.EXTENSION_PADDING = EXTENSION_PADDING;
 var BODIED_EXT_PADDING = EXTENSION_PADDING * 2;

package/dist/cjs/styles/shared/headings.js

@@ -1,24 +1,17 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.headingsSharedStyles = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = require("@emotion/react");
-
 var _typography = require("@atlaskit/theme/typography");
-
 var _templateObject;
-
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 // text sizing prototype: http://proto/fabricrender/
 var headingsSharedStyles = function headingsSharedStyles(props) {
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & h1 {\n    ", ";\n    margin-bottom: 0;\n    margin-top: 1.667em;\n  }\n\n  & h2 {\n    ", ";\n    margin-top: 1.8em;\n    margin-bottom: 0;\n  }\n\n  & h3 {\n    ", ";\n    margin-top: 2em;\n    margin-bottom: 0;\n  }\n\n  & h4 {\n    ", ";\n    margin-top: 1.357em;\n  }\n\n  & h5 {\n    ", ";\n    margin-top: 1.667em;\n    text-transform: none;\n  }\n\n  & h6 {\n    ", ";\n    margin-top: 1.455em;\n    text-transform: none;\n  }\n"])), (0, _typography.h700)(props), (0, _typography.h600)(props), (0, _typography.h500)(props), (0, _typography.h400)(props), (0, _typography.h300)(props), (0, _typography.h100)(props));
 };
-
 exports.headingsSharedStyles = headingsSharedStyles;

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

@@ -1,17 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.indentationSharedStyles = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = require("@emotion/react");
-
 var _templateObject;
-
 var indentationSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .fabric-editor-indentation-mark {\n    &[data-level='1'] {\n      margin-left: 30px;\n    }\n    &[data-level='2'] {\n      margin-left: 60px;\n    }\n    &[data-level='3'] {\n      margin-left: 90px;\n    }\n    &[data-level='4'] {\n      margin-left: 120px;\n    }\n    &[data-level='5'] {\n      margin-left: 150px;\n    }\n    &[data-level='6'] {\n      margin-left: 180px;\n    }\n  }\n"])));
 exports.indentationSharedStyles = indentationSharedStyles;

package/dist/cjs/styles/shared/layout.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LAYOUT_SECTION_MARGIN = exports.LAYOUT_COLUMN_PADDING = void 0;
-
 var _constants = require("@atlaskit/theme/constants");
-
 var LAYOUT_SECTION_MARGIN = (0, _constants.gridSize)();
 exports.LAYOUT_SECTION_MARGIN = LAYOUT_SECTION_MARGIN;
 var LAYOUT_COLUMN_PADDING = (0, _constants.gridSize)() * 1.5;

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

@@ -1,17 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.linkSharedStyle = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = require("@emotion/react");
-
 var _templateObject;
-
 var linkSharedStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  a.blockLink {\n    display: block;\n  }\n"])));
 exports.linkSharedStyle = linkSharedStyle;

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

@@ -1,42 +1,30 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getOrderedListInlineStyles = getOrderedListInlineStyles;
 exports.listsSharedStyles = exports.listItemCounterPadding = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = require("@emotion/react");
-
 var _adfSchema = require("@atlaskit/adf-schema");
-
 var _browser = _interopRequireDefault(require("../../utils/browser"));
-
 var _templateObject;
-
 var listItemCounterPadding = 24;
 exports.listItemCounterPadding = listItemCounterPadding;
 var CSS_VAR_NAMES;
-
 (function (CSS_VAR_NAMES) {
   CSS_VAR_NAMES["ITEM_COUNTER_PADDING"] = "--ed--list--item-counter--padding";
 })(CSS_VAR_NAMES || (CSS_VAR_NAMES = {}));
-
 var getItemCounterLeftPadding = function getItemCounterLeftPadding(itemCounterDigitsSize) {
   // Previous padding-left was approximately 24px. We approximate that
   // same value using "ch" units (which represent the width of a "0" digit
   // character). We use "ch" so that this computed padding can now grow if
   //  the font-size ever enlarges.
   var paddingLeft = "2.385ch";
-
   if (itemCounterDigitsSize >= 3) {
     // When there are 3 or more digits, we use a combination of "ch" units and
     // pixel values so that while the computed padding grows if font-size ever
@@ -46,29 +34,22 @@ var getItemCounterLeftPadding = function getItemCounterLeftPadding(itemCounterDi
     var fixedBasePx = 2;
     paddingLeft = "calc(".concat(itemCounterDigitsSize + 1, "ch - ").concat(fixedBasePx, "px)");
   }
-
   return paddingLeft;
 };
-
 var stringifyStyle = function stringifyStyle(style) {
   return Object.entries(style).reduce(function (str, _ref) {
     var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
-        key = _ref2[0],
-        value = _ref2[1];
-
+      key = _ref2[0],
+      value = _ref2[1];
     return "".concat(str).concat(key, ":").concat(value, ";");
   }, "");
 };
-
 function getOrderedListInlineStyles(itemCounterDigitsSize, styleFormat) {
   var style = (0, _defineProperty2.default)({}, CSS_VAR_NAMES.ITEM_COUNTER_PADDING, getItemCounterLeftPadding(itemCounterDigitsSize));
-
   if (styleFormat === 'string') {
     return stringifyStyle(style);
   }
-
   return style;
 }
-
 var listsSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* =============== INDENTATION SPACING ========= */\n\n  ul,\n  ol {\n    box-sizing: border-box;\n    padding-left: var(\n      ", ",\n      ", "px\n    );\n\n    /*\n    Firefox does not handle empty block element inside li tag.\n    If there is not block element inside li tag,\n      then firefox sets inherited height to li\n    However, if there is any block element and if it's empty\n      (or has empty inline element) then\n    firefox sets li tag height to zero.\n    More details at\n    https://product-fabric.atlassian.net/wiki/spaces/~455502413/pages/3149365890/ED-14110+Investigation\n    */\n    li p:empty,\n    li p > span:empty {\n      ", "\n    }\n  }\n\n  ", ", ", " {\n    /*\n      Ensures list item content adheres to the list's margin instead\n      of filling the entire block row. This is important to allow\n      clicking interactive elements which are floated next to a list.\n\n      For some history and context on this block, see PRs related to tickets.:\n      @see ED-6551 - original issue.\n      @see ED-7015 - follow up issue.\n      @see ED-7447 - flow-root change.\n\n      We use 'display: table' (old clear fix / new block formatting context hack)\n      for older browsers and 'flow-root' for modern browsers.\n\n      @see https://css-tricks.com/display-flow-root/\n    */\n    // For older browsers the do not support flow-root.\n    /* stylelint-disable declaration-block-no-duplicate-properties */\n    display: table;\n    display: flow-root;\n    /* stylelint-enable declaration-block-no-duplicate-properties */\n  }\n\n  /* =============== INDENTATION AESTHETICS ========= */\n\n  /**\n        We support nested lists up to six levels deep.\n    **/\n\n  /* LEGACY LISTS */\n\n  ul,\n  ul ul ul ul {\n    list-style-type: disc;\n  }\n\n  ul ul,\n  ul ul ul ul ul {\n    list-style-type: circle;\n  }\n\n  ul ul ul,\n  ul ul ul ul ul ul {\n    list-style-type: square;\n  }\n\n  ol,\n  ol ol ol ol {\n    list-style-type: decimal;\n  }\n  ol ol,\n  ol ol ol ol ol {\n    list-style-type: lower-alpha;\n  }\n  ol ol ol,\n  ol ol ol ol ol ol {\n    list-style-type: lower-roman;\n  }\n\n  /* PREDICTABLE LISTS */\n\n  ol[data-indent-level='1'],\n  ol[data-indent-level='4'] {\n    list-style-type: decimal;\n  }\n\n  ol[data-indent-level='2'],\n  ol[data-indent-level='5'] {\n    list-style-type: lower-alpha;\n  }\n\n  ol[data-indent-level='3'],\n  ol[data-indent-level='6'] {\n    list-style-type: lower-roman;\n  }\n\n  ul[data-indent-level='1'],\n  ul[data-indent-level='4'] {\n    list-style-type: disc;\n  }\n\n  ul[data-indent-level='2'],\n  ul[data-indent-level='5'] {\n    list-style-type: circle;\n  }\n\n  ul[data-indent-level='3'],\n  ul[data-indent-level='6'] {\n    list-style-type: square;\n  }\n"])), CSS_VAR_NAMES.ITEM_COUNTER_PADDING, listItemCounterPadding, _browser.default.gecko ? 'display: inline-block;' : '', _adfSchema.orderedListSelector, _adfSchema.bulletListSelector);
 exports.listsSharedStyles = listsSharedStyles;

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

@@ -1,18 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.richMediaClassName = exports.mediaSingleSharedStyle = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = require("@emotion/react");
-
 var _templateObject;
-
 var richMediaClassName = 'rich-media-item';
 exports.richMediaClassName = richMediaClassName;
 var wrappedMediaBreakoutPoint = 410;

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

@@ -1,44 +1,27 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getPanelDarkColor = exports.getPanelBackgroundDarkModeColors = exports.darkPanelColors = exports.PanelSharedSelectors = exports.PanelSharedCssClassName = void 0;
 exports.getPanelDarkModeCSS = getPanelDarkModeCSS;
 exports.panelSharedStylesWithoutPrefix = exports.panelSharedStyles = exports.getPanelTypeBackgroundNoTokens = exports.getPanelTypeBackground = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = require("@emotion/react");
-
 var _adfSchema = require("@atlaskit/adf-schema");
-
 var _editorPalette = require("@atlaskit/editor-palette");
-
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-
 var _consts = require("@atlaskit/editor-shared-styles/consts");
-
 var _emoji = require("@atlaskit/emoji");
-
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
-
 var _components = require("@atlaskit/theme/components");
-
 var _constants = require("@atlaskit/theme/constants");
-
 var _templateObject, _templateObject2;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var lightPanelColors = {
   info: colors.B50,
   note: colors.P50,
@@ -133,36 +116,36 @@ var tokenDarkPanelColors = {
   success: "var(--ds-background-success, ".concat(darkPanelColors['success'], ")"),
   warning: "var(--ds-background-warning, ".concat(darkPanelColors['warning'], ")"),
   error: "var(--ds-background-danger, ".concat(darkPanelColors['error'], ")")
-}; // New custom icons are a little smaller than predefined icons.
-// To fix alignment issues with custom icons, vertical alignment is updated.
+};
 
+// New custom icons are a little smaller than predefined icons.
+// To fix alignment issues with custom icons, vertical alignment is updated.
 var panelEmojiSpriteVerticalAlignment = -((0, _constants.gridSize)() * 3 - _consts.akEditorCustomIconSize) / 2;
-var panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1; // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
+var panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1;
 
-var panelDarkModeColors = [[colors.B50, darkPanelColors.B1200S], [colors.B75, darkPanelColors.B900], [colors.B100, darkPanelColors.B800S], [colors.N0, darkPanelColors.LightGray], [colors.N20, darkPanelColors.Gray], [colors.N60, darkPanelColors.DarkGray], [colors.T50, darkPanelColors.T1200S], [colors.T75, darkPanelColors.T900], [colors.T100, darkPanelColors.T900S], [colors.G50, darkPanelColors.G1200S], [colors.G75, darkPanelColors.G900], [colors.G200, darkPanelColors.G900S], [colors.Y50, darkPanelColors.Y1200S], [colors.Y75, darkPanelColors.Y900], [colors.Y200, darkPanelColors.Y800S], [colors.R50, darkPanelColors.R1200S], [colors.R75, darkPanelColors.R900], [colors.R100, darkPanelColors.R800S], [colors.P50, darkPanelColors.P1200S], [colors.P75, darkPanelColors.P900], [colors.P100, darkPanelColors.P800S]]; // used for custom panels
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4066
+var panelDarkModeColors = [[colors.B50, darkPanelColors.B1200S], [colors.B75, darkPanelColors.B900], [colors.B100, darkPanelColors.B800S], [colors.N0, darkPanelColors.LightGray], [colors.N20, darkPanelColors.Gray], [colors.N60, darkPanelColors.DarkGray], [colors.T50, darkPanelColors.T1200S], [colors.T75, darkPanelColors.T900], [colors.T100, darkPanelColors.T900S], [colors.G50, darkPanelColors.G1200S], [colors.G75, darkPanelColors.G900], [colors.G200, darkPanelColors.G900S], [colors.Y50, darkPanelColors.Y1200S], [colors.Y75, darkPanelColors.Y900], [colors.Y200, darkPanelColors.Y800S], [colors.R50, darkPanelColors.R1200S], [colors.R75, darkPanelColors.R900], [colors.R100, darkPanelColors.R800S], [colors.P50, darkPanelColors.P1200S], [colors.P75, darkPanelColors.P900], [colors.P100, darkPanelColors.P800S]];
 
+// used for custom panels
 var getPanelDarkColor = function getPanelDarkColor(panelColor) {
   var colorObject = panelDarkModeColors.find(function (color) {
     return color[0] === panelColor || color[1] === panelColor;
   });
   return colorObject ? colorObject[1] : darkPanelColors.B1200S;
-}; // used for custom panels
-
+};
 
+// used for custom panels
 exports.getPanelDarkColor = getPanelDarkColor;
 var getPanelBackgroundDarkModeColors = panelDarkModeColors.map(function (_ref) {
   var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
-      colorName = _ref2[0],
-      colorValue = _ref2[1];
-
+    colorName = _ref2[0],
+    colorValue = _ref2[1];
   return getPanelDarkModeCSS(colorName, colorValue);
 }).join('\n');
 exports.getPanelBackgroundDarkModeColors = getPanelBackgroundDarkModeColors;
-
 function getPanelDarkModeCSS(colorName, colorValue) {
   return "\n  &[data-panel-color=\"".concat(colorName, "\"] {\n    background-color: ").concat(colorValue, " !important; // !important to override default style color\n    color: ").concat(darkPanelColors.TextColor, ";\n  }\n  ");
 }
-
 var prefix = 'ak-editor-panel';
 var PanelSharedCssClassName = {
   prefix: prefix,
@@ -194,7 +177,6 @@ var PanelSharedSelectors = {
   copyButton: "button[aria-label=\"Copy\"]"
 };
 exports.PanelSharedSelectors = PanelSharedSelectors;
-
 var iconDynamicStyles = function iconDynamicStyles(panelType) {
   return function (props) {
     var light = lightIconColor[panelType];
@@ -205,9 +187,9 @@ var iconDynamicStyles = function iconDynamicStyles(panelType) {
     })(props);
     return "\n    color: ".concat(color, ";\n  ");
   };
-}; // Provides the color without tokens, used when converting to a custom panel
-
+};
 
+// Provides the color without tokens, used when converting to a custom panel
 var getPanelTypeBackgroundNoTokens = function getPanelTypeBackgroundNoTokens(panelType) {
   var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var light = lightPanelColors[panelType];
@@ -218,13 +200,11 @@ var getPanelTypeBackgroundNoTokens = function getPanelTypeBackgroundNoTokens(pan
   })(props);
   return background || 'none';
 };
-
 exports.getPanelTypeBackgroundNoTokens = getPanelTypeBackgroundNoTokens;
-
 var getPanelTypeBackground = function getPanelTypeBackground(panelType) {
   var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var light = (0, _editorPalette.hexToEditorBackgroundPaletteColor)(lightPanelColors[panelType]); // hexToEditorBackgroundPaletteColor has a light mode as a fallback color - for legacy dark mode we define the tokens locally
-
+  var light = (0, _editorPalette.hexToEditorBackgroundPaletteColor)(lightPanelColors[panelType]);
+  // hexToEditorBackgroundPaletteColor has a light mode as a fallback color - for legacy dark mode we define the tokens locally
   var dark = tokenDarkPanelColors[panelType];
   var background = (0, _components.themed)({
     light: light,
@@ -232,9 +212,7 @@ var getPanelTypeBackground = function getPanelTypeBackground(panelType) {
   })(props);
   return background || 'none';
 };
-
 exports.getPanelTypeBackground = getPanelTypeBackground;
-
 var mainDynamicStyles = function mainDynamicStyles(panelType) {
   return function (props) {
     var background = getPanelTypeBackground(panelType, props);
@@ -245,17 +223,13 @@ var mainDynamicStyles = function mainDynamicStyles(panelType) {
     return "\n    background-color: ".concat(background, ";\n    color: ").concat(text, ";\n  ");
   };
 };
-
 var panelSharedStylesWithoutPrefix = function panelSharedStylesWithoutPrefix(props) {
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  margin: ", " 0 0;\n  padding: ", "px;\n  min-width: ", "px;\n  display: flex;\n  position: relative;\n  align-items: baseline;\n  word-break: break-word;\n\n  ", "\n\n  .", " {\n    flex-shrink: 0;\n    height: ", "px;\n    width: ", "px;\n    box-sizing: content-box;\n    padding-right: ", "px;\n    text-align: center;\n    user-select: none;\n    -moz-user-select: none;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    ", "\n\n    > span {\n      vertical-align: middle;\n      display: inline-flex;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n\n      // Vertical align only works for inline-block elements in Firefox\n      @-moz-document url-prefix() {\n        img {\n          display: inline-block;\n        }\n      }\n    }\n  }\n\n  .ak-editor-panel__content {\n    margin: 1px 0 1px;\n    flex: 1 0 0;\n    /*\n      https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox\n      The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn\u2019t compute to zero. The minimum size of a flex item is equal to the size of its contents.\n    */\n    min-width: 0;\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", ";\n  }\n"])), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, (0, _constants.gridSize)(), _editorSharedStyles.akEditorTableCellMinWidth, mainDynamicStyles(_adfSchema.PanelType.INFO)(props), PanelSharedCssClassName.icon, (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3, (0, _constants.gridSize)(), iconDynamicStyles(_adfSchema.PanelType.INFO)(props), _emoji.emojiSprite, panelEmojiSpriteVerticalAlignment, _emoji.emojiImage, panelEmojiImageVerticalAlignment, _adfSchema.PanelType.NOTE, mainDynamicStyles(_adfSchema.PanelType.NOTE)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.NOTE)(props), _adfSchema.PanelType.TIP, mainDynamicStyles(_adfSchema.PanelType.TIP)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.TIP)(props), _adfSchema.PanelType.WARNING, mainDynamicStyles(_adfSchema.PanelType.WARNING)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.WARNING)(props), _adfSchema.PanelType.ERROR, mainDynamicStyles(_adfSchema.PanelType.ERROR)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.ERROR)(props), _adfSchema.PanelType.SUCCESS, mainDynamicStyles(_adfSchema.PanelType.SUCCESS)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.SUCCESS)(props), _adfSchema.PanelType.CUSTOM, (0, _components.themed)({
     dark: getPanelBackgroundDarkModeColors
   })(props));
 };
-
 exports.panelSharedStylesWithoutPrefix = panelSharedStylesWithoutPrefix;
-
 var panelSharedStyles = function panelSharedStyles(props) {
   return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    ", "\n  }\n"])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix(props));
 };
-
 exports.panelSharedStyles = panelSharedStyles;

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

@@ -1,20 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.paragraphSharedStyles = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = require("@emotion/react");
-
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-
 var _templateObject;
-
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 var paragraphSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & p {\n    font-size: 1em;\n    line-height: ", ";\n    font-weight: normal;\n    margin-top: ", ";\n    margin-bottom: 0;\n    letter-spacing: -0.005em;\n  }\n"])), _editorSharedStyles.akEditorLineHeight, _editorSharedStyles.blockNodesVerticalMargin);
 exports.paragraphSharedStyles = paragraphSharedStyles;

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

@@ -1,31 +1,23 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ruleSharedStyles = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = require("@emotion/react");
-
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _components = require("@atlaskit/theme/components");
-
 var _templateObject;
-
 var divider = (0, _components.themed)({
   light: "var(--ds-border, ".concat(_colors.N30A, ")"),
   dark: "var(--ds-border, ".concat(_colors.DN50, ")")
-}); // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
+});
 
+// @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 var ruleSharedStyles = function ruleSharedStyles(props) {
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & hr {\n    border: none;\n    background-color: ", ";\n    margin: ", "em 0;\n    height: 2px;\n    border-radius: 1px;\n  }\n"])), divider(props), _editorSharedStyles.akEditorLineHeight);
 };
-
 exports.ruleSharedStyles = ruleSharedStyles;

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

@@ -1,27 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.shadowSharedStyle = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = require("@emotion/react");
-
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _OverflowShadow = require("../../ui/OverflowShadow");
-
 var _shadowObserver = require("../../ui/OverflowShadow/shadowObserver");
-
 var _templateObject;
-
 var shadowWidth = 8;
+
 /**
  * TODO: This is close to working and removes a tone of JS from OverflowShadow component
  *

package/dist/cjs/styles/shared/smart-card.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.smartCardSharedStyles = exports.SmartCardSharedCssClassName = void 0;
-
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-
 var _constants = require("@atlaskit/theme/constants");
-
 var SmartCardSharedCssClassName = {
   INLINE_CARD_CONTAINER: 'inlineCardView-content-wrap',
   BLOCK_CARD_CONTAINER: 'blockCardView-content-wrap',