@atlaskit/editor-common 74.50.1 → 74.50.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-common
 
+## 74.50.3
+
+### Patch Changes
+
+- [`c8acabc067e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c8acabc067e) - COMMENTS-342: Remove white space no wrap in expand macro causing inline comment navigation bug
+
+## 74.50.2
+
+### Patch Changes
+
+- [`90520713d49`](https://bitbucket.org/atlassian/atlassian-frontend/commits/90520713d49) - [ux] [ED-19441] - Added dark mode icons for panels
+
 ## 74.50.1
 
 ### Patch Changes

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

package/dist/cjs/quick-insert/assets/panel-error.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = IconPanelError;
 var _react = _interopRequireDefault(require("react"));
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-
+var _useIconThemed2 = require("../use-icon-themed");
 function IconPanelError() {
+  var _useIconThemed = (0, _useIconThemed2.useIconThemed)(),
+    iconThemed = _useIconThemed.iconThemed;
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",
     "aria-hidden": true,
@@ -19,10 +19,16 @@ function IconPanelError() {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/_react.default.createElement("path", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#161A1D'
+    }),
     d: "M0 0h40v40H0z"
   }), /*#__PURE__*/_react.default.createElement("rect", {
-    fill: "#FFEBE6",
+    fill: iconThemed({
+      light: '#FFEBE6',
+      dark: '#601D16'
+    }),
     x: 8,
     y: 12,
     width: 32,
@@ -30,6 +36,9 @@ function IconPanelError() {
     rx: 1
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M16.743 19.964l1.06-1.06a.5.5 0 00-.707-.707l-1.06 1.06-1.061-1.06a.5.5 0 00-.707.707l1.06 1.06-1.06 1.061a.5.5 0 10.707.707l1.06-1.06 1.061 1.06a.5.5 0 10.707-.707l-1.06-1.06zM16 24a4 4 0 110-8 4 4 0 010 8z",
-    fill: "#DE350B"
+    fill: iconThemed({
+      light: '#DE350B',
+      dark: '#F97362'
+    })
   })));
 }

package/dist/cjs/quick-insert/assets/panel-note.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = IconPanelNote;
 var _react = _interopRequireDefault(require("react"));
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-
+var _useIconThemed2 = require("../use-icon-themed");
 function IconPanelNote() {
+  var _useIconThemed = (0, _useIconThemed2.useIconThemed)(),
+    iconThemed = _useIconThemed.iconThemed;
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",
     "aria-hidden": true,
@@ -19,10 +19,16 @@ function IconPanelNote() {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/_react.default.createElement("path", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#161A1D'
+    }),
     d: "M0 0h40v40H0z"
   }), /*#__PURE__*/_react.default.createElement("rect", {
-    fill: "#EAE6FF",
+    fill: iconThemed({
+      light: '#EAE6FF',
+      dark: '#352C63'
+    }),
     x: 8,
     y: 12,
     width: 32,
@@ -30,6 +36,9 @@ function IconPanelNote() {
     rx: 1
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M13 16h4a1 1 0 011 1v6a1 1 0 01-1 1h-4a1 1 0 01-1-1v-6a1 1 0 011-1zm1 2a.5.5 0 100 1h2a.5.5 0 100-1h-2zm0 2a.5.5 0 100 1h1a.5.5 0 100-1h-1z",
-    fill: "#403294"
+    fill: iconThemed({
+      light: '#403294',
+      dark: '#8F7EE7'
+    })
   })));
 }

package/dist/cjs/quick-insert/assets/panel-success.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = IconPanelSuccess;
 var _react = _interopRequireDefault(require("react"));
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-
+var _useIconThemed2 = require("../use-icon-themed");
 function IconPanelSuccess() {
+  var _useIconThemed = (0, _useIconThemed2.useIconThemed)(),
+    iconThemed = _useIconThemed.iconThemed;
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",
     "aria-hidden": true,
@@ -19,10 +19,16 @@ function IconPanelSuccess() {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/_react.default.createElement("path", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#161A1D'
+    }),
     d: "M0 0h40v40H0z"
   }), /*#__PURE__*/_react.default.createElement("rect", {
-    fill: "#C3F8DF",
+    fill: iconThemed({
+      light: '#C3F8DF',
+      dark: '#164B35'
+    }),
     x: 8,
     y: 12,
     width: 32,
@@ -30,6 +36,9 @@ function IconPanelSuccess() {
     rx: 1
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M15 24a4 4 0 110-8 4 4 0 010 8zm.682-5.482l-1.076 2.055-.772-.695a.5.5 0 00-.668.744l1.25 1.125a.5.5 0 00.777-.14l1.375-2.625a.5.5 0 00-.886-.464z",
-    fill: "#00875A"
+    fill: iconThemed({
+      light: '#00875A',
+      dark: '#2ABB7F'
+    })
   })));
 }

package/dist/cjs/quick-insert/assets/panel-warning.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = IconPanelWarning;
 var _react = _interopRequireDefault(require("react"));
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-
+var _useIconThemed2 = require("../use-icon-themed");
 function IconPanelWarning() {
+  var _useIconThemed = (0, _useIconThemed2.useIconThemed)(),
+    iconThemed = _useIconThemed.iconThemed;
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",
     "aria-hidden": true,
@@ -19,10 +19,16 @@ function IconPanelWarning() {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/_react.default.createElement("path", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#161A1D'
+    }),
     d: "M0 0h40v40H0z"
   }), /*#__PURE__*/_react.default.createElement("rect", {
-    fill: "#FFF0B3",
+    fill: iconThemed({
+      light: '#FFF0B3',
+      dark: '#5F3811'
+    }),
     x: 8,
     y: 12,
     width: 32,
@@ -30,6 +36,9 @@ function IconPanelWarning() {
     rx: 1
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M16.847 16.83l2.808 5.73a1 1 0 01-.898 1.44h-6.514a1 1 0 01-.898-1.44l2.808-5.73a1.5 1.5 0 012.694 0zm-1.347.46a.568.568 0 00-.564.635l.278 2.32a.288.288 0 00.572 0l.278-2.32a.568.568 0 00-.564-.635zm0 5.035c.318 0 .576-.293.576-.656 0-.362-.258-.656-.576-.656-.318 0-.576.294-.576.656 0 .363.258.656.576.656z",
-    fill: "#FF8B00"
+    fill: iconThemed({
+      light: '#FF8B00',
+      dark: '#EBB800'
+    })
   })));
 }

package/dist/cjs/quick-insert/assets/panel.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = IconPanel;
 var _react = _interopRequireDefault(require("react"));
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-
+var _useIconThemed2 = require("../use-icon-themed");
 function IconPanel() {
+  var _useIconThemed = (0, _useIconThemed2.useIconThemed)(),
+    iconThemed = _useIconThemed.iconThemed;
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",
     "aria-hidden": true,
@@ -19,10 +19,16 @@ function IconPanel() {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/_react.default.createElement("path", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#161A1D'
+    }),
     d: "M0 0h40v40H0z"
   }), /*#__PURE__*/_react.default.createElement("rect", {
-    fill: "#DEEBFF",
+    fill: iconThemed({
+      light: '#DEEBFF',
+      dark: '#09326C'
+    }),
     x: 8,
     y: 12,
     width: 32,
@@ -30,10 +36,16 @@ function IconPanel() {
     rx: 1
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M12 20a4 4 0 108 0 4 4 0 00-8 0z",
-    fill: "#0052CC",
+    fill: iconThemed({
+      light: '#0052CC',
+      dark: '#388BFF'
+    }),
     fillRule: "nonzero"
   }), /*#__PURE__*/_react.default.createElement("rect", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#09326C'
+    }),
     fillRule: "nonzero",
     x: 15.556,
     y: 19.722,
@@ -41,7 +53,10 @@ function IconPanel() {
     height: 2.2,
     rx: 0.5
   }), /*#__PURE__*/_react.default.createElement("circle", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#09326C'
+    }),
     fillRule: "nonzero",
     cx: 16,
     cy: 18.444,

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.50.1";
+var packageVersion = "74.50.3";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -104,7 +104,7 @@ var containerStyles = function containerStyles(styleProps) {
 };
 var contentStyles = function contentStyles(styleProps) {
   return function (themeProps) {
-    return (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    padding-top: ", ";\n    padding-right: ", ";\n    // TODO: Migrate away from gridSize\n    // Recommendation: Replace gridSize with 8 if important to highlight 8*4 - 8/2, or directly replace with 28px\n    padding-left: ", "px;\n    display: flow-root;\n\n    // The follow rules inside @supports block are added as a part of ED-8893\n    // The fix is targeting mobile bridge on iOS 12 or below,\n    // We should consider remove this fix when we no longer support iOS 12\n    @supports not (display: flow-root) {\n      width: 100%;\n      box-sizing: border-box;\n    }\n\n    ", "\n  "])), styleProps.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)", "var(--ds-space-100, 8px)", (0, _constants.gridSize)() * 4 - (0, _constants.gridSize)() / 2, !styleProps.expanded ? "\n        .expand-content-wrapper, .nestedExpand-content-wrapper {\n          /* We visually hide the content here to preserve the content during copy+paste */\n          width: 100%;\n          display: block;\n          height: 0;\n          overflow: hidden;\n          clip: rect(1px, 1px, 1px, 1px);\n          white-space: nowrap;\n          user-select: none;\n        }\n      " : '');
+    return (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    padding-top: ", ";\n    padding-right: ", ";\n    // TODO: Migrate away from gridSize\n    // Recommendation: Replace gridSize with 8 if important to highlight 8*4 - 8/2, or directly replace with 28px\n    padding-left: ", "px;\n    display: flow-root;\n\n    // The follow rules inside @supports block are added as a part of ED-8893\n    // The fix is targeting mobile bridge on iOS 12 or below,\n    // We should consider remove this fix when we no longer support iOS 12\n    @supports not (display: flow-root) {\n      width: 100%;\n      box-sizing: border-box;\n    }\n\n    ", "\n  "])), styleProps.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)", "var(--ds-space-100, 8px)", (0, _constants.gridSize)() * 4 - (0, _constants.gridSize)() / 2, !styleProps.expanded ? "\n        .expand-content-wrapper, .nestedExpand-content-wrapper {\n          /* We visually hide the content here to preserve the content during copy+paste */\n          /* Do not add text nowrap here because inline comment navigation depends on the location of the text */\n          width: 100%;\n          display: block;\n          height: 0;\n          overflow: hidden;\n          clip: rect(1px, 1px, 1px, 1px);\n          user-select: none;\n        }\n      " : '');
   };
 };
 var titleInputStyles = function titleInputStyles(props) {

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

package/dist/es2019/quick-insert/assets/panel-error.js

@@ -1,7 +1,9 @@
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
+import { useIconThemed } from '../use-icon-themed';
 export default function IconPanelError() {
+  const {
+    iconThemed
+  } = useIconThemed();
   return /*#__PURE__*/React.createElement("svg", {
     focusable: "false",
     "aria-hidden": true,
@@ -11,10 +13,16 @@ export default function IconPanelError() {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#161A1D'
+    }),
     d: "M0 0h40v40H0z"
   }), /*#__PURE__*/React.createElement("rect", {
-    fill: "#FFEBE6",
+    fill: iconThemed({
+      light: '#FFEBE6',
+      dark: '#601D16'
+    }),
     x: 8,
     y: 12,
     width: 32,
@@ -22,6 +30,9 @@ export default function IconPanelError() {
     rx: 1
   }), /*#__PURE__*/React.createElement("path", {
     d: "M16.743 19.964l1.06-1.06a.5.5 0 00-.707-.707l-1.06 1.06-1.061-1.06a.5.5 0 00-.707.707l1.06 1.06-1.06 1.061a.5.5 0 10.707.707l1.06-1.06 1.061 1.06a.5.5 0 10.707-.707l-1.06-1.06zM16 24a4 4 0 110-8 4 4 0 010 8z",
-    fill: "#DE350B"
+    fill: iconThemed({
+      light: '#DE350B',
+      dark: '#F97362'
+    })
   })));
 }

package/dist/es2019/quick-insert/assets/panel-note.js

@@ -1,7 +1,9 @@
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
+import { useIconThemed } from '../use-icon-themed';
 export default function IconPanelNote() {
+  const {
+    iconThemed
+  } = useIconThemed();
   return /*#__PURE__*/React.createElement("svg", {
     focusable: "false",
     "aria-hidden": true,
@@ -11,10 +13,16 @@ export default function IconPanelNote() {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#161A1D'
+    }),
     d: "M0 0h40v40H0z"
   }), /*#__PURE__*/React.createElement("rect", {
-    fill: "#EAE6FF",
+    fill: iconThemed({
+      light: '#EAE6FF',
+      dark: '#352C63'
+    }),
     x: 8,
     y: 12,
     width: 32,
@@ -22,6 +30,9 @@ export default function IconPanelNote() {
     rx: 1
   }), /*#__PURE__*/React.createElement("path", {
     d: "M13 16h4a1 1 0 011 1v6a1 1 0 01-1 1h-4a1 1 0 01-1-1v-6a1 1 0 011-1zm1 2a.5.5 0 100 1h2a.5.5 0 100-1h-2zm0 2a.5.5 0 100 1h1a.5.5 0 100-1h-1z",
-    fill: "#403294"
+    fill: iconThemed({
+      light: '#403294',
+      dark: '#8F7EE7'
+    })
   })));
 }

package/dist/es2019/quick-insert/assets/panel-success.js

@@ -1,7 +1,9 @@
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
+import { useIconThemed } from '../use-icon-themed';
 export default function IconPanelSuccess() {
+  const {
+    iconThemed
+  } = useIconThemed();
   return /*#__PURE__*/React.createElement("svg", {
     focusable: "false",
     "aria-hidden": true,
@@ -11,10 +13,16 @@ export default function IconPanelSuccess() {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#161A1D'
+    }),
     d: "M0 0h40v40H0z"
   }), /*#__PURE__*/React.createElement("rect", {
-    fill: "#C3F8DF",
+    fill: iconThemed({
+      light: '#C3F8DF',
+      dark: '#164B35'
+    }),
     x: 8,
     y: 12,
     width: 32,
@@ -22,6 +30,9 @@ export default function IconPanelSuccess() {
     rx: 1
   }), /*#__PURE__*/React.createElement("path", {
     d: "M15 24a4 4 0 110-8 4 4 0 010 8zm.682-5.482l-1.076 2.055-.772-.695a.5.5 0 00-.668.744l1.25 1.125a.5.5 0 00.777-.14l1.375-2.625a.5.5 0 00-.886-.464z",
-    fill: "#00875A"
+    fill: iconThemed({
+      light: '#00875A',
+      dark: '#2ABB7F'
+    })
   })));
 }

package/dist/es2019/quick-insert/assets/panel-warning.js

@@ -1,7 +1,9 @@
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
+import { useIconThemed } from '../use-icon-themed';
 export default function IconPanelWarning() {
+  const {
+    iconThemed
+  } = useIconThemed();
   return /*#__PURE__*/React.createElement("svg", {
     focusable: "false",
     "aria-hidden": true,
@@ -11,10 +13,16 @@ export default function IconPanelWarning() {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#161A1D'
+    }),
     d: "M0 0h40v40H0z"
   }), /*#__PURE__*/React.createElement("rect", {
-    fill: "#FFF0B3",
+    fill: iconThemed({
+      light: '#FFF0B3',
+      dark: '#5F3811'
+    }),
     x: 8,
     y: 12,
     width: 32,
@@ -22,6 +30,9 @@ export default function IconPanelWarning() {
     rx: 1
   }), /*#__PURE__*/React.createElement("path", {
     d: "M16.847 16.83l2.808 5.73a1 1 0 01-.898 1.44h-6.514a1 1 0 01-.898-1.44l2.808-5.73a1.5 1.5 0 012.694 0zm-1.347.46a.568.568 0 00-.564.635l.278 2.32a.288.288 0 00.572 0l.278-2.32a.568.568 0 00-.564-.635zm0 5.035c.318 0 .576-.293.576-.656 0-.362-.258-.656-.576-.656-.318 0-.576.294-.576.656 0 .363.258.656.576.656z",
-    fill: "#FF8B00"
+    fill: iconThemed({
+      light: '#FF8B00',
+      dark: '#EBB800'
+    })
   })));
 }

package/dist/es2019/quick-insert/assets/panel.js

@@ -1,7 +1,9 @@
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
+import { useIconThemed } from '../use-icon-themed';
 export default function IconPanel() {
+  const {
+    iconThemed
+  } = useIconThemed();
   return /*#__PURE__*/React.createElement("svg", {
     focusable: "false",
     "aria-hidden": true,
@@ -11,10 +13,16 @@ export default function IconPanel() {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#161A1D'
+    }),
     d: "M0 0h40v40H0z"
   }), /*#__PURE__*/React.createElement("rect", {
-    fill: "#DEEBFF",
+    fill: iconThemed({
+      light: '#DEEBFF',
+      dark: '#09326C'
+    }),
     x: 8,
     y: 12,
     width: 32,
@@ -22,10 +30,16 @@ export default function IconPanel() {
     rx: 1
   }), /*#__PURE__*/React.createElement("path", {
     d: "M12 20a4 4 0 108 0 4 4 0 00-8 0z",
-    fill: "#0052CC",
+    fill: iconThemed({
+      light: '#0052CC',
+      dark: '#388BFF'
+    }),
     fillRule: "nonzero"
   }), /*#__PURE__*/React.createElement("rect", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#09326C'
+    }),
     fillRule: "nonzero",
     x: 15.556,
     y: 19.722,
@@ -33,7 +47,10 @@ export default function IconPanel() {
     height: 2.2,
     rx: 0.5
   }), /*#__PURE__*/React.createElement("circle", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#09326C'
+    }),
     fillRule: "nonzero",
     cx: 16,
     cy: 18.444,

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.50.1";
+const packageVersion = "74.50.3";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+
 import React, { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { defineMessages } from 'react-intl-next';
@@ -150,12 +151,12 @@ const contentStyles = styleProps => themeProps => css`
     ${!styleProps.expanded ? `
         .expand-content-wrapper, .nestedExpand-content-wrapper {
           /* We visually hide the content here to preserve the content during copy+paste */
+          /* Do not add text nowrap here because inline comment navigation depends on the location of the text */
           width: 100%;
           display: block;
           height: 0;
           overflow: hidden;
           clip: rect(1px, 1px, 1px, 1px);
-          white-space: nowrap;
           user-select: none;
         }
       ` : ''}

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

package/dist/esm/quick-insert/assets/panel-error.js

@@ -1,7 +1,8 @@
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
+import { useIconThemed } from '../use-icon-themed';
 export default function IconPanelError() {
+  var _useIconThemed = useIconThemed(),
+    iconThemed = _useIconThemed.iconThemed;
   return /*#__PURE__*/React.createElement("svg", {
     focusable: "false",
     "aria-hidden": true,
@@ -11,10 +12,16 @@ export default function IconPanelError() {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#161A1D'
+    }),
     d: "M0 0h40v40H0z"
   }), /*#__PURE__*/React.createElement("rect", {
-    fill: "#FFEBE6",
+    fill: iconThemed({
+      light: '#FFEBE6',
+      dark: '#601D16'
+    }),
     x: 8,
     y: 12,
     width: 32,
@@ -22,6 +29,9 @@ export default function IconPanelError() {
     rx: 1
   }), /*#__PURE__*/React.createElement("path", {
     d: "M16.743 19.964l1.06-1.06a.5.5 0 00-.707-.707l-1.06 1.06-1.061-1.06a.5.5 0 00-.707.707l1.06 1.06-1.06 1.061a.5.5 0 10.707.707l1.06-1.06 1.061 1.06a.5.5 0 10.707-.707l-1.06-1.06zM16 24a4 4 0 110-8 4 4 0 010 8z",
-    fill: "#DE350B"
+    fill: iconThemed({
+      light: '#DE350B',
+      dark: '#F97362'
+    })
   })));
 }

package/dist/esm/quick-insert/assets/panel-note.js

@@ -1,7 +1,8 @@
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
+import { useIconThemed } from '../use-icon-themed';
 export default function IconPanelNote() {
+  var _useIconThemed = useIconThemed(),
+    iconThemed = _useIconThemed.iconThemed;
   return /*#__PURE__*/React.createElement("svg", {
     focusable: "false",
     "aria-hidden": true,
@@ -11,10 +12,16 @@ export default function IconPanelNote() {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#161A1D'
+    }),
     d: "M0 0h40v40H0z"
   }), /*#__PURE__*/React.createElement("rect", {
-    fill: "#EAE6FF",
+    fill: iconThemed({
+      light: '#EAE6FF',
+      dark: '#352C63'
+    }),
     x: 8,
     y: 12,
     width: 32,
@@ -22,6 +29,9 @@ export default function IconPanelNote() {
     rx: 1
   }), /*#__PURE__*/React.createElement("path", {
     d: "M13 16h4a1 1 0 011 1v6a1 1 0 01-1 1h-4a1 1 0 01-1-1v-6a1 1 0 011-1zm1 2a.5.5 0 100 1h2a.5.5 0 100-1h-2zm0 2a.5.5 0 100 1h1a.5.5 0 100-1h-1z",
-    fill: "#403294"
+    fill: iconThemed({
+      light: '#403294',
+      dark: '#8F7EE7'
+    })
   })));
 }

package/dist/esm/quick-insert/assets/panel-success.js

@@ -1,7 +1,8 @@
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
+import { useIconThemed } from '../use-icon-themed';
 export default function IconPanelSuccess() {
+  var _useIconThemed = useIconThemed(),
+    iconThemed = _useIconThemed.iconThemed;
   return /*#__PURE__*/React.createElement("svg", {
     focusable: "false",
     "aria-hidden": true,
@@ -11,10 +12,16 @@ export default function IconPanelSuccess() {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#161A1D'
+    }),
     d: "M0 0h40v40H0z"
   }), /*#__PURE__*/React.createElement("rect", {
-    fill: "#C3F8DF",
+    fill: iconThemed({
+      light: '#C3F8DF',
+      dark: '#164B35'
+    }),
     x: 8,
     y: 12,
     width: 32,
@@ -22,6 +29,9 @@ export default function IconPanelSuccess() {
     rx: 1
   }), /*#__PURE__*/React.createElement("path", {
     d: "M15 24a4 4 0 110-8 4 4 0 010 8zm.682-5.482l-1.076 2.055-.772-.695a.5.5 0 00-.668.744l1.25 1.125a.5.5 0 00.777-.14l1.375-2.625a.5.5 0 00-.886-.464z",
-    fill: "#00875A"
+    fill: iconThemed({
+      light: '#00875A',
+      dark: '#2ABB7F'
+    })
   })));
 }

package/dist/esm/quick-insert/assets/panel-warning.js

@@ -1,7 +1,8 @@
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
+import { useIconThemed } from '../use-icon-themed';
 export default function IconPanelWarning() {
+  var _useIconThemed = useIconThemed(),
+    iconThemed = _useIconThemed.iconThemed;
   return /*#__PURE__*/React.createElement("svg", {
     focusable: "false",
     "aria-hidden": true,
@@ -11,10 +12,16 @@ export default function IconPanelWarning() {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#161A1D'
+    }),
     d: "M0 0h40v40H0z"
   }), /*#__PURE__*/React.createElement("rect", {
-    fill: "#FFF0B3",
+    fill: iconThemed({
+      light: '#FFF0B3',
+      dark: '#5F3811'
+    }),
     x: 8,
     y: 12,
     width: 32,
@@ -22,6 +29,9 @@ export default function IconPanelWarning() {
     rx: 1
   }), /*#__PURE__*/React.createElement("path", {
     d: "M16.847 16.83l2.808 5.73a1 1 0 01-.898 1.44h-6.514a1 1 0 01-.898-1.44l2.808-5.73a1.5 1.5 0 012.694 0zm-1.347.46a.568.568 0 00-.564.635l.278 2.32a.288.288 0 00.572 0l.278-2.32a.568.568 0 00-.564-.635zm0 5.035c.318 0 .576-.293.576-.656 0-.362-.258-.656-.576-.656-.318 0-.576.294-.576.656 0 .363.258.656.576.656z",
-    fill: "#FF8B00"
+    fill: iconThemed({
+      light: '#FF8B00',
+      dark: '#EBB800'
+    })
   })));
 }

package/dist/esm/quick-insert/assets/panel.js

@@ -1,7 +1,8 @@
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
+import { useIconThemed } from '../use-icon-themed';
 export default function IconPanel() {
+  var _useIconThemed = useIconThemed(),
+    iconThemed = _useIconThemed.iconThemed;
   return /*#__PURE__*/React.createElement("svg", {
     focusable: "false",
     "aria-hidden": true,
@@ -11,10 +12,16 @@ export default function IconPanel() {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#161A1D'
+    }),
     d: "M0 0h40v40H0z"
   }), /*#__PURE__*/React.createElement("rect", {
-    fill: "#DEEBFF",
+    fill: iconThemed({
+      light: '#DEEBFF',
+      dark: '#09326C'
+    }),
     x: 8,
     y: 12,
     width: 32,
@@ -22,10 +29,16 @@ export default function IconPanel() {
     rx: 1
   }), /*#__PURE__*/React.createElement("path", {
     d: "M12 20a4 4 0 108 0 4 4 0 00-8 0z",
-    fill: "#0052CC",
+    fill: iconThemed({
+      light: '#0052CC',
+      dark: '#388BFF'
+    }),
     fillRule: "nonzero"
   }), /*#__PURE__*/React.createElement("rect", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#09326C'
+    }),
     fillRule: "nonzero",
     x: 15.556,
     y: 19.722,
@@ -33,7 +46,10 @@ export default function IconPanel() {
     height: 2.2,
     rx: 0.5
   }), /*#__PURE__*/React.createElement("circle", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#09326C'
+    }),
     fillRule: "nonzero",
     cx: 16,
     cy: 18.444,

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.50.1";
+var packageVersion = "74.50.3";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -4,6 +4,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _excluded = ["children"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 /** @jsx jsx */
+
 import React, { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { defineMessages } from 'react-intl-next';
@@ -90,7 +91,7 @@ var containerStyles = function containerStyles(styleProps) {
 };
 var contentStyles = function contentStyles(styleProps) {
   return function (themeProps) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding-top: ", ";\n    padding-right: ", ";\n    // TODO: Migrate away from gridSize\n    // Recommendation: Replace gridSize with 8 if important to highlight 8*4 - 8/2, or directly replace with 28px\n    padding-left: ", "px;\n    display: flow-root;\n\n    // The follow rules inside @supports block are added as a part of ED-8893\n    // The fix is targeting mobile bridge on iOS 12 or below,\n    // We should consider remove this fix when we no longer support iOS 12\n    @supports not (display: flow-root) {\n      width: 100%;\n      box-sizing: border-box;\n    }\n\n    ", "\n  "])), styleProps.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)", "var(--ds-space-100, 8px)", gridSize() * 4 - gridSize() / 2, !styleProps.expanded ? "\n        .expand-content-wrapper, .nestedExpand-content-wrapper {\n          /* We visually hide the content here to preserve the content during copy+paste */\n          width: 100%;\n          display: block;\n          height: 0;\n          overflow: hidden;\n          clip: rect(1px, 1px, 1px, 1px);\n          white-space: nowrap;\n          user-select: none;\n        }\n      " : '');
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding-top: ", ";\n    padding-right: ", ";\n    // TODO: Migrate away from gridSize\n    // Recommendation: Replace gridSize with 8 if important to highlight 8*4 - 8/2, or directly replace with 28px\n    padding-left: ", "px;\n    display: flow-root;\n\n    // The follow rules inside @supports block are added as a part of ED-8893\n    // The fix is targeting mobile bridge on iOS 12 or below,\n    // We should consider remove this fix when we no longer support iOS 12\n    @supports not (display: flow-root) {\n      width: 100%;\n      box-sizing: border-box;\n    }\n\n    ", "\n  "])), styleProps.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)", "var(--ds-space-100, 8px)", gridSize() * 4 - gridSize() / 2, !styleProps.expanded ? "\n        .expand-content-wrapper, .nestedExpand-content-wrapper {\n          /* We visually hide the content here to preserve the content during copy+paste */\n          /* Do not add text nowrap here because inline comment navigation depends on the location of the text */\n          width: 100%;\n          display: block;\n          height: 0;\n          overflow: hidden;\n          clip: rect(1px, 1px, 1px, 1px);\n          user-select: none;\n        }\n      " : '');
   };
 };
 var titleInputStyles = function titleInputStyles(props) {

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

@@ -1,7 +1,6 @@
-/** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { ThemeProps } from '@atlaskit/theme/types';
+import type { ThemeProps } from '@atlaskit/theme/types';
 export declare const messages: {
     collapseNode: {
         id: string;

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

@@ -1,7 +1,6 @@
-/** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { ThemeProps } from '@atlaskit/theme/types';
+import type { ThemeProps } from '@atlaskit/theme/types';
 export declare const messages: {
     collapseNode: {
         id: string;

package/package.json

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