@atlaskit/editor-shared-styles 3.0.1 → 3.1.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-shared-styles
 
+## 3.1.1
+
+### Patch Changes
+
+- [#156360](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156360)
+  [`482dbb03dbf68`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/482dbb03dbf68) -
+  Add akEditorWrappedNodeZIndex constant
+
+## 3.1.0
+
+### Minor Changes
+
+- [#155573](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155573)
+  [`92ca0dc09c6ac`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/92ca0dc09c6ac) -
+  Create new participantColors constant to be used in future updates to avatar badges and
+  telepointers
+
 ## 3.0.1
 
 ### Patch Changes

package/dist/cjs/consts/consts.js

@@ -4,9 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.editorFontSize = exports.breakoutWideScaleRatio = exports.blockNodesVerticalMargin = exports.avatarColors = exports.akRichMediaResizeZIndex = exports.akLayoutGutterOffset = exports.akEditorWideLayoutWidth = exports.akEditorUnitZIndex = exports.akEditorToolbarKeylineHeight = exports.akEditorTableToolbarSize = exports.akEditorTableToolbar = exports.akEditorTableNumberColumnWidth = exports.akEditorTableLegacyCellMinWidth = exports.akEditorTableHeaderCellBackgroundDark = exports.akEditorTableHeaderCellBackground = exports.akEditorTableCellOnStickyHeaderZIndex = exports.akEditorTableCellMinWidth = exports.akEditorTableCellBlanketSelected = exports.akEditorTableCellBlanketDeleted = exports.akEditorTableCellBackgroundOpacity = exports.akEditorTableBorderSelected = exports.akEditorTableBorderRadius = exports.akEditorTableBorder = exports.akEditorSwoopCubicBezier = exports.akEditorSubtleAccent = exports.akEditorStickyHeaderZIndex = exports.akEditorSmallZIndex = exports.akEditorShadowZIndex = exports.akEditorSelectedNodeClassName = exports.akEditorSelectedBoxShadow = exports.akEditorSelectedBorderSize = exports.akEditorSelectedBorderColor = exports.akEditorSelectedBorderBoldSize = exports.akEditorSelectedBorder = exports.akEditorSelectedBlanketOpacity = exports.akEditorRuleBorderRadius = exports.akEditorMobileMaxWidth = exports.akEditorMobileBreakoutPoint = exports.akEditorMenuZIndex = exports.akEditorMediaResizeHandlerPaddingWide = exports.akEditorMediaResizeHandlerPadding = exports.akEditorLineHeight = exports.akEditorGutterPaddingDynamic = exports.akEditorGutterPadding = exports.akEditorGridLineZIndex = exports.akEditorFullWidthLayoutWidth = exports.akEditorFullWidthLayoutLineLength = exports.akEditorFullPageMaxWidth = exports.akEditorFullPageDefaultFontSize = exports.akEditorFloatingPanelZIndex = exports.akEditorFloatingOverlapPanelZIndex = exports.akEditorFloatingDialogZIndex = exports.akEditorDeleteIconColor = exports.akEditorDeleteBorder = exports.akEditorDeleteBackgroundWithOpacity = exports.akEditorDeleteBackground = exports.akEditorDefaultLayoutWidth = exports.akEditorCustomIconSize = exports.akEditorContextPanelWidth = exports.akEditorCodeInlinePadding = exports.akEditorCodeFontFamily = exports.akEditorCodeBlockPadding = exports.akEditorCodeBackground = exports.akEditorCalculatedWideLayoutWidthSmallViewport = exports.akEditorCalculatedWideLayoutWidth = exports.akEditorBreakoutPadding = exports.akEditorBlockquoteBorderColor = exports.VIEWPORT_SIZES = exports.MAX_BROWSER_SCROLLBAR_HEIGHT = exports.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = exports.DEFAULT_EMBED_CARD_WIDTH = exports.DEFAULT_EMBED_CARD_HEIGHT = exports.ATLASSIAN_NAVIGATION_HEIGHT = void 0;
+exports.editorFontSize = exports.breakoutWideScaleRatio = exports.blockNodesVerticalMargin = exports.avatarColors = exports.akRichMediaResizeZIndex = exports.akLayoutGutterOffset = exports.akEditorWrappedNodeZIndex = exports.akEditorWideLayoutWidth = exports.akEditorUnitZIndex = exports.akEditorToolbarKeylineHeight = exports.akEditorTableToolbarSize = exports.akEditorTableToolbar = exports.akEditorTableNumberColumnWidth = exports.akEditorTableLegacyCellMinWidth = exports.akEditorTableHeaderCellBackgroundDark = exports.akEditorTableHeaderCellBackground = exports.akEditorTableCellOnStickyHeaderZIndex = exports.akEditorTableCellMinWidth = exports.akEditorTableCellBlanketSelected = exports.akEditorTableCellBlanketDeleted = exports.akEditorTableCellBackgroundOpacity = exports.akEditorTableBorderSelected = exports.akEditorTableBorderRadius = exports.akEditorTableBorder = exports.akEditorSwoopCubicBezier = exports.akEditorSubtleAccent = exports.akEditorStickyHeaderZIndex = exports.akEditorSmallZIndex = exports.akEditorShadowZIndex = exports.akEditorSelectedNodeClassName = exports.akEditorSelectedBoxShadow = exports.akEditorSelectedBorderSize = exports.akEditorSelectedBorderColor = exports.akEditorSelectedBorderBoldSize = exports.akEditorSelectedBorder = exports.akEditorSelectedBlanketOpacity = exports.akEditorRuleBorderRadius = exports.akEditorMobileMaxWidth = exports.akEditorMobileBreakoutPoint = exports.akEditorMenuZIndex = exports.akEditorMediaResizeHandlerPaddingWide = exports.akEditorMediaResizeHandlerPadding = exports.akEditorLineHeight = exports.akEditorGutterPaddingDynamic = exports.akEditorGutterPadding = exports.akEditorGridLineZIndex = exports.akEditorFullWidthLayoutWidth = exports.akEditorFullWidthLayoutLineLength = exports.akEditorFullPageMaxWidth = exports.akEditorFullPageDefaultFontSize = exports.akEditorFloatingPanelZIndex = exports.akEditorFloatingOverlapPanelZIndex = exports.akEditorFloatingDialogZIndex = exports.akEditorDeleteIconColor = exports.akEditorDeleteBorder = exports.akEditorDeleteBackgroundWithOpacity = exports.akEditorDeleteBackground = exports.akEditorDefaultLayoutWidth = exports.akEditorCustomIconSize = exports.akEditorContextPanelWidth = exports.akEditorCodeInlinePadding = exports.akEditorCodeFontFamily = exports.akEditorCodeBlockPadding = exports.akEditorCodeBackground = exports.akEditorCalculatedWideLayoutWidthSmallViewport = exports.akEditorCalculatedWideLayoutWidth = exports.akEditorBreakoutPadding = exports.akEditorBlockquoteBorderColor = exports.VIEWPORT_SIZES = exports.MAX_BROWSER_SCROLLBAR_HEIGHT = exports.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = exports.DEFAULT_EMBED_CARD_WIDTH = exports.DEFAULT_EMBED_CARD_HEIGHT = exports.ATLASSIAN_NAVIGATION_HEIGHT = void 0;
 exports.getTableCellBackgroundDarkModeColorCSS = getTableCellBackgroundDarkModeColorCSS;
-exports.relativeSize = exports.relativeFontSizeToBase16 = exports.gridMediumMaxWidth = exports.getTableCellBackgroundDarkModeColors = void 0;
+exports.relativeSize = exports.relativeFontSizeToBase16 = exports.participantColors = exports.gridMediumMaxWidth = exports.getTableCellBackgroundDarkModeColors = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
@@ -82,6 +82,7 @@ var akEditorToolbarKeylineHeight = exports.akEditorToolbarKeylineHeight = 2;
 var akEditorContextPanelWidth = exports.akEditorContextPanelWidth = 320;
 var akEditorTableCellBlanketSelected = exports.akEditorTableCellBlanketSelected = 'rgba(179, 212, 255, 0.3)';
 var akEditorTableCellBlanketDeleted = exports.akEditorTableCellBlanketDeleted = 'rgba(255, 235, 230, 0.3)';
+var akEditorWrappedNodeZIndex = exports.akEditorWrappedNodeZIndex = akEditorUnitZIndex * 2; //prevent paragraph nodes from rendering above wrapped nodes
 
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 var blockNodesVerticalMargin = exports.blockNodesVerticalMargin = '0.75rem';
@@ -159,4 +160,61 @@ var getTableCellBackgroundDarkModeColors = exports.getTableCellBackgroundDarkMod
 function getTableCellBackgroundDarkModeColorCSS(colorName, colorValue) {
   return "\n  &[colorname=\"".concat(colorName, "\"] {\n    background-color: ").concat(colorValue, " !important; // !important to override default style color\n  }\n  ");
 }
-var avatarColors = exports.avatarColors = ["var(--ds-icon-accent-red, #C9372C)", "var(--ds-background-accent-red-bolder-hovered, #AE2E24)", "var(--ds-icon-accent-magenta, #CD519D)", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", "var(--ds-icon-accent-orange, #E56910)", "var(--ds-background-accent-orange-bolder-hovered, #A54800)", "var(--ds-icon-accent-green, #22A06B)", "var(--ds-background-accent-green-bolder-hovered, #216E4E)", "var(--ds-icon-accent-blue, #1D7AFC)", "var(--ds-background-accent-blue-bolder-hovered, #0055CC)", "var(--ds-icon-accent-teal, #2898BD)", "var(--ds-background-accent-teal-bolder-hovered, #206A83)", "var(--ds-icon-accent-lime, #6A9A23)", "var(--ds-background-accent-lime-bolder-hovered, #4C6B1F)", "var(--ds-icon-accent-purple, #8270DB)", "var(--ds-background-accent-purple-bolder-hovered, #5E4DB2)", "var(--ds-icon-accent-gray, #758195)", "var(--ds-background-accent-gray-bolder-hovered, #44546F)", "var(--ds-icon-accent-yellow, #B38600)", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)"];
+var avatarColors = exports.avatarColors = ["var(--ds-icon-accent-red, #C9372C)", "var(--ds-background-accent-red-bolder-hovered, #AE2E24)", "var(--ds-icon-accent-magenta, #CD519D)", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", "var(--ds-icon-accent-orange, #E56910)", "var(--ds-background-accent-orange-bolder-hovered, #A54800)", "var(--ds-icon-accent-green, #22A06B)", "var(--ds-background-accent-green-bolder-hovered, #216E4E)", "var(--ds-icon-accent-blue, #1D7AFC)", "var(--ds-background-accent-blue-bolder-hovered, #0055CC)", "var(--ds-icon-accent-teal, #2898BD)", "var(--ds-background-accent-teal-bolder-hovered, #206A83)", "var(--ds-icon-accent-lime, #6A9A23)", "var(--ds-background-accent-lime-bolder-hovered, #4C6B1F)", "var(--ds-icon-accent-purple, #8270DB)", "var(--ds-background-accent-purple-bolder-hovered, #5E4DB2)", "var(--ds-icon-accent-gray, #758195)", "var(--ds-background-accent-gray-bolder-hovered, #44546F)", "var(--ds-icon-accent-yellow, #B38600)", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)"];
+
+// MDS-569: Will update references to avatarColors to use participantColors instead, we will then deprecate avatarColors
+var participantColors = exports.participantColors = [{
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-red-bolder, #C9372C)"
+}, {
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-blue-bolder, #0C66E4)"
+}, {
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-green-bolder, #1F845A)"
+}, {
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-yellow-bolder, #946F00)"
+}, {
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-purple-bolder, #6E5DC6)"
+}, {
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-magenta-bolder, #AE4787)"
+}, {
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-teal-bolder, #227D9B)"
+}, {
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-orange-bolder, #C25100)"
+}, {
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-lime-bolder, #5B7F24)"
+}, {
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-gray-bolder, #626F86)"
+}, {
+  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
+  backgroundColor: "var(--ds-background-accent-blue-subtle, #579DFF)"
+}, {
+  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
+  backgroundColor: "var(--ds-background-accent-red-subtle, #F87168)"
+}, {
+  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
+  backgroundColor: "var(--ds-background-accent-orange-subtle, #FEA362)"
+}, {
+  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
+  backgroundColor: "var(--ds-background-accent-yellow-subtle, #F5CD47)"
+}, {
+  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
+  backgroundColor: "var(--ds-background-accent-green-subtle, #4BCE97)"
+}, {
+  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
+  backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
+}, {
+  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
+  backgroundColor: "var(--ds-background-accent-purple-subtle, #9F8FEF)"
+}, {
+  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
+  backgroundColor: "var(--ds-background-accent-magenta-subtle, #E774BB)"
+}];

package/dist/cjs/consts/index.js

@@ -405,6 +405,12 @@ Object.defineProperty(exports, "akEditorWideLayoutWidth", {
     return _consts.akEditorWideLayoutWidth;
   }
 });
+Object.defineProperty(exports, "akEditorWrappedNodeZIndex", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorWrappedNodeZIndex;
+  }
+});
 Object.defineProperty(exports, "akLayoutGutterOffset", {
   enumerable: true,
   get: function get() {
@@ -453,6 +459,12 @@ Object.defineProperty(exports, "gridMediumMaxWidth", {
     return _consts.gridMediumMaxWidth;
   }
 });
+Object.defineProperty(exports, "participantColors", {
+  enumerable: true,
+  get: function get() {
+    return _consts.participantColors;
+  }
+});
 Object.defineProperty(exports, "relativeFontSizeToBase16", {
   enumerable: true,
   get: function get() {

package/dist/cjs/index.js

@@ -405,6 +405,12 @@ Object.defineProperty(exports, "akEditorWideLayoutWidth", {
     return _consts.akEditorWideLayoutWidth;
   }
 });
+Object.defineProperty(exports, "akEditorWrappedNodeZIndex", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorWrappedNodeZIndex;
+  }
+});
 Object.defineProperty(exports, "akLayoutGutterOffset", {
   enumerable: true,
   get: function get() {
@@ -441,6 +447,12 @@ Object.defineProperty(exports, "editorFontSize", {
     return _consts.editorFontSize;
   }
 });
+Object.defineProperty(exports, "getParticipantColor", {
+  enumerable: true,
+  get: function get() {
+    return _utils.getParticipantColor;
+  }
+});
 Object.defineProperty(exports, "getSelectionStyles", {
   enumerable: true,
   get: function get() {
@@ -471,6 +483,12 @@ Object.defineProperty(exports, "overflowShadow", {
     return _overflowShadow.overflowShadow;
   }
 });
+Object.defineProperty(exports, "participantColors", {
+  enumerable: true,
+  get: function get() {
+    return _consts.participantColors;
+  }
+});
 Object.defineProperty(exports, "relativeFontSizeToBase16", {
   enumerable: true,
   get: function get() {
@@ -485,4 +503,5 @@ Object.defineProperty(exports, "relativeSize", {
 });
 var _consts = require("./consts");
 var _selection = require("./selection");
-var _overflowShadow = require("./overflow-shadow");
+var _overflowShadow = require("./overflow-shadow");
+var _utils = require("./utils");

package/dist/cjs/utils.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getHashCode = getHashCode;
+exports.getParticipantColor = getParticipantColor;
+var _consts = require("./consts");
+/**
+ * Generates a hash code for a given string.
+ *
+ * This function computes a hash code by iterating over each character
+ * in the string and applying bitwise operations to accumulate the hash value.
+ *
+ * @param str - The input string for which the hash code is to be generated.
+ * @returns The computed hash code as a number.
+ */
+function getHashCode(str) {
+  var hash = 0;
+  for (var i = 0; i < str.length; i++) {
+    /* eslint-disable no-bitwise */
+    hash = (hash << 5) - hash + str.charCodeAt(i);
+    hash = (hash & hash) >>> 0;
+    /* eslint-enable no-bitwise */
+  }
+  return hash;
+}
+
+/**
+ * Returns the participant color based on the hash code of the input string.
+ *
+ * @param str - The input string used to determine the participant color.
+ * @returns An object containing the index and the corresponding participant color.
+ */
+function getParticipantColor(str) {
+  var index = getHashCode(str) % _consts.participantColors.length;
+  return {
+    index: index,
+    color: _consts.participantColors[index]
+  };
+}

package/dist/es2019/consts/consts.js

@@ -70,6 +70,7 @@ export const akEditorToolbarKeylineHeight = 2;
 export const akEditorContextPanelWidth = 320;
 export const akEditorTableCellBlanketSelected = 'rgba(179, 212, 255, 0.3)';
 export const akEditorTableCellBlanketDeleted = 'rgba(255, 235, 230, 0.3)';
+export const akEditorWrappedNodeZIndex = akEditorUnitZIndex * 2; //prevent paragraph nodes from rendering above wrapped nodes
 
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 export const blockNodesVerticalMargin = '0.75rem';
@@ -140,4 +141,61 @@ export function getTableCellBackgroundDarkModeColorCSS(colorName, colorValue) {
   }
   `;
 }
-export const avatarColors = ["var(--ds-icon-accent-red, #C9372C)", "var(--ds-background-accent-red-bolder-hovered, #AE2E24)", "var(--ds-icon-accent-magenta, #CD519D)", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", "var(--ds-icon-accent-orange, #E56910)", "var(--ds-background-accent-orange-bolder-hovered, #A54800)", "var(--ds-icon-accent-green, #22A06B)", "var(--ds-background-accent-green-bolder-hovered, #216E4E)", "var(--ds-icon-accent-blue, #1D7AFC)", "var(--ds-background-accent-blue-bolder-hovered, #0055CC)", "var(--ds-icon-accent-teal, #2898BD)", "var(--ds-background-accent-teal-bolder-hovered, #206A83)", "var(--ds-icon-accent-lime, #6A9A23)", "var(--ds-background-accent-lime-bolder-hovered, #4C6B1F)", "var(--ds-icon-accent-purple, #8270DB)", "var(--ds-background-accent-purple-bolder-hovered, #5E4DB2)", "var(--ds-icon-accent-gray, #758195)", "var(--ds-background-accent-gray-bolder-hovered, #44546F)", "var(--ds-icon-accent-yellow, #B38600)", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)"];
+export const avatarColors = ["var(--ds-icon-accent-red, #C9372C)", "var(--ds-background-accent-red-bolder-hovered, #AE2E24)", "var(--ds-icon-accent-magenta, #CD519D)", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", "var(--ds-icon-accent-orange, #E56910)", "var(--ds-background-accent-orange-bolder-hovered, #A54800)", "var(--ds-icon-accent-green, #22A06B)", "var(--ds-background-accent-green-bolder-hovered, #216E4E)", "var(--ds-icon-accent-blue, #1D7AFC)", "var(--ds-background-accent-blue-bolder-hovered, #0055CC)", "var(--ds-icon-accent-teal, #2898BD)", "var(--ds-background-accent-teal-bolder-hovered, #206A83)", "var(--ds-icon-accent-lime, #6A9A23)", "var(--ds-background-accent-lime-bolder-hovered, #4C6B1F)", "var(--ds-icon-accent-purple, #8270DB)", "var(--ds-background-accent-purple-bolder-hovered, #5E4DB2)", "var(--ds-icon-accent-gray, #758195)", "var(--ds-background-accent-gray-bolder-hovered, #44546F)", "var(--ds-icon-accent-yellow, #B38600)", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)"];
+
+// MDS-569: Will update references to avatarColors to use participantColors instead, we will then deprecate avatarColors
+export const participantColors = [{
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-red-bolder, #C9372C)"
+}, {
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-blue-bolder, #0C66E4)"
+}, {
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-green-bolder, #1F845A)"
+}, {
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-yellow-bolder, #946F00)"
+}, {
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-purple-bolder, #6E5DC6)"
+}, {
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-magenta-bolder, #AE4787)"
+}, {
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-teal-bolder, #227D9B)"
+}, {
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-orange-bolder, #C25100)"
+}, {
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-lime-bolder, #5B7F24)"
+}, {
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-gray-bolder, #626F86)"
+}, {
+  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
+  backgroundColor: "var(--ds-background-accent-blue-subtle, #579DFF)"
+}, {
+  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
+  backgroundColor: "var(--ds-background-accent-red-subtle, #F87168)"
+}, {
+  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
+  backgroundColor: "var(--ds-background-accent-orange-subtle, #FEA362)"
+}, {
+  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
+  backgroundColor: "var(--ds-background-accent-yellow-subtle, #F5CD47)"
+}, {
+  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
+  backgroundColor: "var(--ds-background-accent-green-subtle, #4BCE97)"
+}, {
+  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
+  backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
+}, {
+  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
+  backgroundColor: "var(--ds-background-accent-purple-subtle, #9F8FEF)"
+}, {
+  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
+  backgroundColor: "var(--ds-background-accent-magenta-subtle, #E774BB)"
+}];

package/dist/es2019/consts/index.js

@@ -1 +1 @@
-export { akEditorBlockquoteBorderColor, akEditorBreakoutPadding, akEditorCodeBackground, akEditorCodeBlockPadding, akEditorCodeFontFamily, akEditorCodeInlinePadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex, akEditorFloatingPanelZIndex, akEditorFullPageMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullWidthLayoutWidth, akEditorFullWidthLayoutLineLength, akEditorGridLineZIndex, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMenuZIndex, akEditorStickyHeaderZIndex, akEditorMobileBreakoutPoint, akEditorSelectedBorderColor, akEditorSelectedBorderBoldSize, akEditorSelectedBorderSize, akEditorSelectedBorder, akEditorSelectedBoxShadow, akEditorCustomIconSize, akEditorSelectedBlanketOpacity, akEditorSmallZIndex, akEditorShadowZIndex, akEditorSubtleAccent, akEditorSwoopCubicBezier, akEditorTableBorder, akEditorTableBorderRadius, akEditorTableBorderSelected, akEditorTableCellBackgroundOpacity, akEditorTableCellMinWidth, akEditorTableCellOnStickyHeaderZIndex, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted } from './consts';
+export { akEditorBlockquoteBorderColor, akEditorBreakoutPadding, akEditorCodeBackground, akEditorCodeBlockPadding, akEditorCodeFontFamily, akEditorCodeInlinePadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex, akEditorFloatingPanelZIndex, akEditorFullPageMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullWidthLayoutWidth, akEditorFullWidthLayoutLineLength, akEditorGridLineZIndex, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMenuZIndex, akEditorStickyHeaderZIndex, akEditorMobileBreakoutPoint, akEditorSelectedBorderColor, akEditorSelectedBorderBoldSize, akEditorSelectedBorderSize, akEditorSelectedBorder, akEditorSelectedBoxShadow, akEditorCustomIconSize, akEditorSelectedBlanketOpacity, akEditorSmallZIndex, akEditorShadowZIndex, akEditorSubtleAccent, akEditorSwoopCubicBezier, akEditorTableBorder, akEditorTableBorderRadius, akEditorTableBorderSelected, akEditorTableCellBackgroundOpacity, akEditorTableCellMinWidth, akEditorTableCellOnStickyHeaderZIndex, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, participantColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted, akEditorWrappedNodeZIndex } from './consts';

package/dist/es2019/index.js

@@ -1,3 +1,4 @@
-export { akEditorBlockquoteBorderColor, akEditorBreakoutPadding, akEditorCodeBackground, akEditorCodeBlockPadding, akEditorCodeFontFamily, akEditorCodeInlinePadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex, akEditorFloatingPanelZIndex, akEditorFullPageMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullWidthLayoutWidth, akEditorFullWidthLayoutLineLength, akEditorGridLineZIndex, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMenuZIndex, akEditorStickyHeaderZIndex, akEditorMobileBreakoutPoint, akEditorSelectedBorderColor, akEditorSelectedBorderBoldSize, akEditorSelectedBorderSize, akEditorSelectedBorder, akEditorSelectedBoxShadow, akEditorSelectedBlanketOpacity, akEditorSmallZIndex, akEditorShadowZIndex, akEditorSubtleAccent, akEditorSwoopCubicBezier, akEditorTableBorder, akEditorTableBorderRadius, akEditorTableBorderSelected, akEditorTableCellBackgroundOpacity, akEditorTableCellMinWidth, akEditorTableCellOnStickyHeaderZIndex, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted } from './consts';
+export { akEditorBlockquoteBorderColor, akEditorBreakoutPadding, akEditorCodeBackground, akEditorCodeBlockPadding, akEditorCodeFontFamily, akEditorCodeInlinePadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex, akEditorFloatingPanelZIndex, akEditorFullPageMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullWidthLayoutWidth, akEditorFullWidthLayoutLineLength, akEditorGridLineZIndex, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMenuZIndex, akEditorStickyHeaderZIndex, akEditorMobileBreakoutPoint, akEditorSelectedBorderColor, akEditorSelectedBorderBoldSize, akEditorSelectedBorderSize, akEditorSelectedBorder, akEditorSelectedBoxShadow, akEditorSelectedBlanketOpacity, akEditorSmallZIndex, akEditorShadowZIndex, akEditorSubtleAccent, akEditorSwoopCubicBezier, akEditorTableBorder, akEditorTableBorderRadius, akEditorTableBorderSelected, akEditorTableCellBackgroundOpacity, akEditorTableCellMinWidth, akEditorTableCellOnStickyHeaderZIndex, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, participantColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted, akEditorWrappedNodeZIndex } from './consts';
 export { SelectionStyle, getSelectionStyles, hideNativeBrowserTextSelectionStyles } from './selection';
-export { overflowShadow } from './overflow-shadow';
+export { overflowShadow } from './overflow-shadow';
+export { getParticipantColor } from './utils';

package/dist/es2019/utils.js

@@ -0,0 +1,35 @@
+import { participantColors } from './consts';
+
+/**
+ * Generates a hash code for a given string.
+ *
+ * This function computes a hash code by iterating over each character
+ * in the string and applying bitwise operations to accumulate the hash value.
+ *
+ * @param str - The input string for which the hash code is to be generated.
+ * @returns The computed hash code as a number.
+ */
+export function getHashCode(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    /* eslint-disable no-bitwise */
+    hash = (hash << 5) - hash + str.charCodeAt(i);
+    hash = (hash & hash) >>> 0;
+    /* eslint-enable no-bitwise */
+  }
+  return hash;
+}
+
+/**
+ * Returns the participant color based on the hash code of the input string.
+ *
+ * @param str - The input string used to determine the participant color.
+ * @returns An object containing the index and the corresponding participant color.
+ */
+export function getParticipantColor(str) {
+  const index = getHashCode(str) % participantColors.length;
+  return {
+    index,
+    color: participantColors[index]
+  };
+}

package/dist/esm/consts/consts.js

@@ -73,6 +73,7 @@ export var akEditorToolbarKeylineHeight = 2;
 export var akEditorContextPanelWidth = 320;
 export var akEditorTableCellBlanketSelected = 'rgba(179, 212, 255, 0.3)';
 export var akEditorTableCellBlanketDeleted = 'rgba(255, 235, 230, 0.3)';
+export var akEditorWrappedNodeZIndex = akEditorUnitZIndex * 2; //prevent paragraph nodes from rendering above wrapped nodes
 
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 export var blockNodesVerticalMargin = '0.75rem';
@@ -150,4 +151,61 @@ export var getTableCellBackgroundDarkModeColors = [['White', '#000000'], ['Light
 export function getTableCellBackgroundDarkModeColorCSS(colorName, colorValue) {
   return "\n  &[colorname=\"".concat(colorName, "\"] {\n    background-color: ").concat(colorValue, " !important; // !important to override default style color\n  }\n  ");
 }
-export var avatarColors = ["var(--ds-icon-accent-red, #C9372C)", "var(--ds-background-accent-red-bolder-hovered, #AE2E24)", "var(--ds-icon-accent-magenta, #CD519D)", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", "var(--ds-icon-accent-orange, #E56910)", "var(--ds-background-accent-orange-bolder-hovered, #A54800)", "var(--ds-icon-accent-green, #22A06B)", "var(--ds-background-accent-green-bolder-hovered, #216E4E)", "var(--ds-icon-accent-blue, #1D7AFC)", "var(--ds-background-accent-blue-bolder-hovered, #0055CC)", "var(--ds-icon-accent-teal, #2898BD)", "var(--ds-background-accent-teal-bolder-hovered, #206A83)", "var(--ds-icon-accent-lime, #6A9A23)", "var(--ds-background-accent-lime-bolder-hovered, #4C6B1F)", "var(--ds-icon-accent-purple, #8270DB)", "var(--ds-background-accent-purple-bolder-hovered, #5E4DB2)", "var(--ds-icon-accent-gray, #758195)", "var(--ds-background-accent-gray-bolder-hovered, #44546F)", "var(--ds-icon-accent-yellow, #B38600)", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)"];
+export var avatarColors = ["var(--ds-icon-accent-red, #C9372C)", "var(--ds-background-accent-red-bolder-hovered, #AE2E24)", "var(--ds-icon-accent-magenta, #CD519D)", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", "var(--ds-icon-accent-orange, #E56910)", "var(--ds-background-accent-orange-bolder-hovered, #A54800)", "var(--ds-icon-accent-green, #22A06B)", "var(--ds-background-accent-green-bolder-hovered, #216E4E)", "var(--ds-icon-accent-blue, #1D7AFC)", "var(--ds-background-accent-blue-bolder-hovered, #0055CC)", "var(--ds-icon-accent-teal, #2898BD)", "var(--ds-background-accent-teal-bolder-hovered, #206A83)", "var(--ds-icon-accent-lime, #6A9A23)", "var(--ds-background-accent-lime-bolder-hovered, #4C6B1F)", "var(--ds-icon-accent-purple, #8270DB)", "var(--ds-background-accent-purple-bolder-hovered, #5E4DB2)", "var(--ds-icon-accent-gray, #758195)", "var(--ds-background-accent-gray-bolder-hovered, #44546F)", "var(--ds-icon-accent-yellow, #B38600)", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)"];
+
+// MDS-569: Will update references to avatarColors to use participantColors instead, we will then deprecate avatarColors
+export var participantColors = [{
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-red-bolder, #C9372C)"
+}, {
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-blue-bolder, #0C66E4)"
+}, {
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-green-bolder, #1F845A)"
+}, {
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-yellow-bolder, #946F00)"
+}, {
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-purple-bolder, #6E5DC6)"
+}, {
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-magenta-bolder, #AE4787)"
+}, {
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-teal-bolder, #227D9B)"
+}, {
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-orange-bolder, #C25100)"
+}, {
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-lime-bolder, #5B7F24)"
+}, {
+  textColor: "var(--ds-text-inverse, #FFFFFF)",
+  backgroundColor: "var(--ds-background-accent-gray-bolder, #626F86)"
+}, {
+  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
+  backgroundColor: "var(--ds-background-accent-blue-subtle, #579DFF)"
+}, {
+  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
+  backgroundColor: "var(--ds-background-accent-red-subtle, #F87168)"
+}, {
+  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
+  backgroundColor: "var(--ds-background-accent-orange-subtle, #FEA362)"
+}, {
+  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
+  backgroundColor: "var(--ds-background-accent-yellow-subtle, #F5CD47)"
+}, {
+  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
+  backgroundColor: "var(--ds-background-accent-green-subtle, #4BCE97)"
+}, {
+  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
+  backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
+}, {
+  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
+  backgroundColor: "var(--ds-background-accent-purple-subtle, #9F8FEF)"
+}, {
+  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
+  backgroundColor: "var(--ds-background-accent-magenta-subtle, #E774BB)"
+}];

package/dist/esm/consts/index.js

@@ -1 +1 @@
-export { akEditorBlockquoteBorderColor, akEditorBreakoutPadding, akEditorCodeBackground, akEditorCodeBlockPadding, akEditorCodeFontFamily, akEditorCodeInlinePadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex, akEditorFloatingPanelZIndex, akEditorFullPageMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullWidthLayoutWidth, akEditorFullWidthLayoutLineLength, akEditorGridLineZIndex, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMenuZIndex, akEditorStickyHeaderZIndex, akEditorMobileBreakoutPoint, akEditorSelectedBorderColor, akEditorSelectedBorderBoldSize, akEditorSelectedBorderSize, akEditorSelectedBorder, akEditorSelectedBoxShadow, akEditorCustomIconSize, akEditorSelectedBlanketOpacity, akEditorSmallZIndex, akEditorShadowZIndex, akEditorSubtleAccent, akEditorSwoopCubicBezier, akEditorTableBorder, akEditorTableBorderRadius, akEditorTableBorderSelected, akEditorTableCellBackgroundOpacity, akEditorTableCellMinWidth, akEditorTableCellOnStickyHeaderZIndex, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted } from './consts';
+export { akEditorBlockquoteBorderColor, akEditorBreakoutPadding, akEditorCodeBackground, akEditorCodeBlockPadding, akEditorCodeFontFamily, akEditorCodeInlinePadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex, akEditorFloatingPanelZIndex, akEditorFullPageMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullWidthLayoutWidth, akEditorFullWidthLayoutLineLength, akEditorGridLineZIndex, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMenuZIndex, akEditorStickyHeaderZIndex, akEditorMobileBreakoutPoint, akEditorSelectedBorderColor, akEditorSelectedBorderBoldSize, akEditorSelectedBorderSize, akEditorSelectedBorder, akEditorSelectedBoxShadow, akEditorCustomIconSize, akEditorSelectedBlanketOpacity, akEditorSmallZIndex, akEditorShadowZIndex, akEditorSubtleAccent, akEditorSwoopCubicBezier, akEditorTableBorder, akEditorTableBorderRadius, akEditorTableBorderSelected, akEditorTableCellBackgroundOpacity, akEditorTableCellMinWidth, akEditorTableCellOnStickyHeaderZIndex, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, participantColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted, akEditorWrappedNodeZIndex } from './consts';

package/dist/esm/index.js

@@ -1,3 +1,4 @@
-export { akEditorBlockquoteBorderColor, akEditorBreakoutPadding, akEditorCodeBackground, akEditorCodeBlockPadding, akEditorCodeFontFamily, akEditorCodeInlinePadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex, akEditorFloatingPanelZIndex, akEditorFullPageMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullWidthLayoutWidth, akEditorFullWidthLayoutLineLength, akEditorGridLineZIndex, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMenuZIndex, akEditorStickyHeaderZIndex, akEditorMobileBreakoutPoint, akEditorSelectedBorderColor, akEditorSelectedBorderBoldSize, akEditorSelectedBorderSize, akEditorSelectedBorder, akEditorSelectedBoxShadow, akEditorSelectedBlanketOpacity, akEditorSmallZIndex, akEditorShadowZIndex, akEditorSubtleAccent, akEditorSwoopCubicBezier, akEditorTableBorder, akEditorTableBorderRadius, akEditorTableBorderSelected, akEditorTableCellBackgroundOpacity, akEditorTableCellMinWidth, akEditorTableCellOnStickyHeaderZIndex, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted } from './consts';
+export { akEditorBlockquoteBorderColor, akEditorBreakoutPadding, akEditorCodeBackground, akEditorCodeBlockPadding, akEditorCodeFontFamily, akEditorCodeInlinePadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex, akEditorFloatingPanelZIndex, akEditorFullPageMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullWidthLayoutWidth, akEditorFullWidthLayoutLineLength, akEditorGridLineZIndex, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMenuZIndex, akEditorStickyHeaderZIndex, akEditorMobileBreakoutPoint, akEditorSelectedBorderColor, akEditorSelectedBorderBoldSize, akEditorSelectedBorderSize, akEditorSelectedBorder, akEditorSelectedBoxShadow, akEditorSelectedBlanketOpacity, akEditorSmallZIndex, akEditorShadowZIndex, akEditorSubtleAccent, akEditorSwoopCubicBezier, akEditorTableBorder, akEditorTableBorderRadius, akEditorTableBorderSelected, akEditorTableCellBackgroundOpacity, akEditorTableCellMinWidth, akEditorTableCellOnStickyHeaderZIndex, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, participantColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted, akEditorWrappedNodeZIndex } from './consts';
 export { SelectionStyle, getSelectionStyles, hideNativeBrowserTextSelectionStyles } from './selection';
-export { overflowShadow } from './overflow-shadow';
+export { overflowShadow } from './overflow-shadow';
+export { getParticipantColor } from './utils';

package/dist/esm/utils.js

@@ -0,0 +1,35 @@
+import { participantColors } from './consts';
+
+/**
+ * Generates a hash code for a given string.
+ *
+ * This function computes a hash code by iterating over each character
+ * in the string and applying bitwise operations to accumulate the hash value.
+ *
+ * @param str - The input string for which the hash code is to be generated.
+ * @returns The computed hash code as a number.
+ */
+export function getHashCode(str) {
+  var hash = 0;
+  for (var i = 0; i < str.length; i++) {
+    /* eslint-disable no-bitwise */
+    hash = (hash << 5) - hash + str.charCodeAt(i);
+    hash = (hash & hash) >>> 0;
+    /* eslint-enable no-bitwise */
+  }
+  return hash;
+}
+
+/**
+ * Returns the participant color based on the hash code of the input string.
+ *
+ * @param str - The input string used to determine the participant color.
+ * @returns An object containing the index and the corresponding participant color.
+ */
+export function getParticipantColor(str) {
+  var index = getHashCode(str) % participantColors.length;
+  return {
+    index: index,
+    color: participantColors[index]
+  };
+}

package/dist/types/consts/consts.d.ts

@@ -1,4 +1,4 @@
-import type { EditorTheme } from './types';
+import type { EditorTheme, ParticipantColor } from './types';
 export declare const akEditorFullPageDefaultFontSize = 16;
 export declare const akEditorCodeFontFamily: "var(--ds-font-family-code)";
 export declare const akEditorSubtleAccent: "var(--ds-background-accent-gray-subtler)";
@@ -62,6 +62,7 @@ export declare const akEditorToolbarKeylineHeight = 2;
 export declare const akEditorContextPanelWidth = 320;
 export declare const akEditorTableCellBlanketSelected = "rgba(179, 212, 255, 0.3)";
 export declare const akEditorTableCellBlanketDeleted = "rgba(255, 235, 230, 0.3)";
+export declare const akEditorWrappedNodeZIndex: number;
 export declare const blockNodesVerticalMargin = "0.75rem";
 export declare const DEFAULT_EMBED_CARD_WIDTH = 680;
 export declare const DEFAULT_EMBED_CARD_HEIGHT = 480;
@@ -112,3 +113,4 @@ export declare const akEditorMobileMaxWidth = 0;
 export declare const getTableCellBackgroundDarkModeColors: string;
 export declare function getTableCellBackgroundDarkModeColorCSS(colorName: string, colorValue: string): string;
 export declare const avatarColors: ("var(--ds-icon-accent-red)" | "var(--ds-background-accent-red-bolder-hovered)" | "var(--ds-icon-accent-magenta)" | "var(--ds-background-accent-magenta-bolder-hovered)" | "var(--ds-icon-accent-orange)" | "var(--ds-background-accent-orange-bolder-hovered)" | "var(--ds-icon-accent-green)" | "var(--ds-background-accent-green-bolder-hovered)" | "var(--ds-icon-accent-blue)" | "var(--ds-background-accent-blue-bolder-hovered)" | "var(--ds-icon-accent-teal)" | "var(--ds-background-accent-teal-bolder-hovered)" | "var(--ds-icon-accent-lime)" | "var(--ds-background-accent-lime-bolder-hovered)" | "var(--ds-icon-accent-purple)" | "var(--ds-background-accent-purple-bolder-hovered)" | "var(--ds-icon-accent-gray)" | "var(--ds-background-accent-gray-bolder-hovered)" | "var(--ds-icon-accent-yellow)" | "var(--ds-background-accent-yellow-bolder-hovered)" | "var(--ds-background-accent-yellow-bolder-pressed)")[];
+export declare const participantColors: Array<ParticipantColor>;

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

@@ -1,2 +1,2 @@
-export type { EditorTheme } from './types';
-export { akEditorBlockquoteBorderColor, akEditorBreakoutPadding, akEditorCodeBackground, akEditorCodeBlockPadding, akEditorCodeFontFamily, akEditorCodeInlinePadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex, akEditorFloatingPanelZIndex, akEditorFullPageMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullWidthLayoutWidth, akEditorFullWidthLayoutLineLength, akEditorGridLineZIndex, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMenuZIndex, akEditorStickyHeaderZIndex, akEditorMobileBreakoutPoint, akEditorSelectedBorderColor, akEditorSelectedBorderBoldSize, akEditorSelectedBorderSize, akEditorSelectedBorder, akEditorSelectedBoxShadow, akEditorCustomIconSize, akEditorSelectedBlanketOpacity, akEditorSmallZIndex, akEditorShadowZIndex, akEditorSubtleAccent, akEditorSwoopCubicBezier, akEditorTableBorder, akEditorTableBorderRadius, akEditorTableBorderSelected, akEditorTableCellBackgroundOpacity, akEditorTableCellMinWidth, akEditorTableCellOnStickyHeaderZIndex, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted, } from './consts';
+export type { EditorTheme, ParticipantColor } from './types';
+export { akEditorBlockquoteBorderColor, akEditorBreakoutPadding, akEditorCodeBackground, akEditorCodeBlockPadding, akEditorCodeFontFamily, akEditorCodeInlinePadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex, akEditorFloatingPanelZIndex, akEditorFullPageMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullWidthLayoutWidth, akEditorFullWidthLayoutLineLength, akEditorGridLineZIndex, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMenuZIndex, akEditorStickyHeaderZIndex, akEditorMobileBreakoutPoint, akEditorSelectedBorderColor, akEditorSelectedBorderBoldSize, akEditorSelectedBorderSize, akEditorSelectedBorder, akEditorSelectedBoxShadow, akEditorCustomIconSize, akEditorSelectedBlanketOpacity, akEditorSmallZIndex, akEditorShadowZIndex, akEditorSubtleAccent, akEditorSwoopCubicBezier, akEditorTableBorder, akEditorTableBorderRadius, akEditorTableBorderSelected, akEditorTableCellBackgroundOpacity, akEditorTableCellMinWidth, akEditorTableCellOnStickyHeaderZIndex, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, participantColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted, akEditorWrappedNodeZIndex, } from './consts';

package/dist/types/consts/types.d.ts

@@ -1,3 +1,7 @@
 export type EditorTheme = {
     baseFontSize?: number;
 };
+export type ParticipantColor = {
+    textColor: string;
+    backgroundColor: string;
+};

package/dist/types/index.d.ts

@@ -1,4 +1,5 @@
-export { akEditorBlockquoteBorderColor, akEditorBreakoutPadding, akEditorCodeBackground, akEditorCodeBlockPadding, akEditorCodeFontFamily, akEditorCodeInlinePadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex, akEditorFloatingPanelZIndex, akEditorFullPageMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullWidthLayoutWidth, akEditorFullWidthLayoutLineLength, akEditorGridLineZIndex, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMenuZIndex, akEditorStickyHeaderZIndex, akEditorMobileBreakoutPoint, akEditorSelectedBorderColor, akEditorSelectedBorderBoldSize, akEditorSelectedBorderSize, akEditorSelectedBorder, akEditorSelectedBoxShadow, akEditorSelectedBlanketOpacity, akEditorSmallZIndex, akEditorShadowZIndex, akEditorSubtleAccent, akEditorSwoopCubicBezier, akEditorTableBorder, akEditorTableBorderRadius, akEditorTableBorderSelected, akEditorTableCellBackgroundOpacity, akEditorTableCellMinWidth, akEditorTableCellOnStickyHeaderZIndex, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted, } from './consts';
-export type { EditorTheme } from './consts';
+export { akEditorBlockquoteBorderColor, akEditorBreakoutPadding, akEditorCodeBackground, akEditorCodeBlockPadding, akEditorCodeFontFamily, akEditorCodeInlinePadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex, akEditorFloatingPanelZIndex, akEditorFullPageMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullWidthLayoutWidth, akEditorFullWidthLayoutLineLength, akEditorGridLineZIndex, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMenuZIndex, akEditorStickyHeaderZIndex, akEditorMobileBreakoutPoint, akEditorSelectedBorderColor, akEditorSelectedBorderBoldSize, akEditorSelectedBorderSize, akEditorSelectedBorder, akEditorSelectedBoxShadow, akEditorSelectedBlanketOpacity, akEditorSmallZIndex, akEditorShadowZIndex, akEditorSubtleAccent, akEditorSwoopCubicBezier, akEditorTableBorder, akEditorTableBorderRadius, akEditorTableBorderSelected, akEditorTableCellBackgroundOpacity, akEditorTableCellMinWidth, akEditorTableCellOnStickyHeaderZIndex, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, participantColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted, akEditorWrappedNodeZIndex, } from './consts';
+export type { EditorTheme, ParticipantColor } from './consts';
 export { SelectionStyle, getSelectionStyles, hideNativeBrowserTextSelectionStyles, } from './selection';
 export { overflowShadow } from './overflow-shadow';
+export { getParticipantColor } from './utils';

package/dist/types/utils.d.ts

@@ -0,0 +1,21 @@
+import { type ParticipantColor } from './consts';
+/**
+ * Generates a hash code for a given string.
+ *
+ * This function computes a hash code by iterating over each character
+ * in the string and applying bitwise operations to accumulate the hash value.
+ *
+ * @param str - The input string for which the hash code is to be generated.
+ * @returns The computed hash code as a number.
+ */
+export declare function getHashCode(str: string): number;
+/**
+ * Returns the participant color based on the hash code of the input string.
+ *
+ * @param str - The input string used to determine the participant color.
+ * @returns An object containing the index and the corresponding participant color.
+ */
+export declare function getParticipantColor(str: string): {
+    index: number;
+    color: ParticipantColor;
+};

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

@@ -1,4 +1,4 @@
-import type { EditorTheme } from './types';
+import type { EditorTheme, ParticipantColor } from './types';
 export declare const akEditorFullPageDefaultFontSize = 16;
 export declare const akEditorCodeFontFamily: "var(--ds-font-family-code)";
 export declare const akEditorSubtleAccent: "var(--ds-background-accent-gray-subtler)";
@@ -62,6 +62,7 @@ export declare const akEditorToolbarKeylineHeight = 2;
 export declare const akEditorContextPanelWidth = 320;
 export declare const akEditorTableCellBlanketSelected = "rgba(179, 212, 255, 0.3)";
 export declare const akEditorTableCellBlanketDeleted = "rgba(255, 235, 230, 0.3)";
+export declare const akEditorWrappedNodeZIndex: number;
 export declare const blockNodesVerticalMargin = "0.75rem";
 export declare const DEFAULT_EMBED_CARD_WIDTH = 680;
 export declare const DEFAULT_EMBED_CARD_HEIGHT = 480;
@@ -112,3 +113,4 @@ export declare const akEditorMobileMaxWidth = 0;
 export declare const getTableCellBackgroundDarkModeColors: string;
 export declare function getTableCellBackgroundDarkModeColorCSS(colorName: string, colorValue: string): string;
 export declare const avatarColors: ("var(--ds-icon-accent-red)" | "var(--ds-background-accent-red-bolder-hovered)" | "var(--ds-icon-accent-magenta)" | "var(--ds-background-accent-magenta-bolder-hovered)" | "var(--ds-icon-accent-orange)" | "var(--ds-background-accent-orange-bolder-hovered)" | "var(--ds-icon-accent-green)" | "var(--ds-background-accent-green-bolder-hovered)" | "var(--ds-icon-accent-blue)" | "var(--ds-background-accent-blue-bolder-hovered)" | "var(--ds-icon-accent-teal)" | "var(--ds-background-accent-teal-bolder-hovered)" | "var(--ds-icon-accent-lime)" | "var(--ds-background-accent-lime-bolder-hovered)" | "var(--ds-icon-accent-purple)" | "var(--ds-background-accent-purple-bolder-hovered)" | "var(--ds-icon-accent-gray)" | "var(--ds-background-accent-gray-bolder-hovered)" | "var(--ds-icon-accent-yellow)" | "var(--ds-background-accent-yellow-bolder-hovered)" | "var(--ds-background-accent-yellow-bolder-pressed)")[];
+export declare const participantColors: Array<ParticipantColor>;

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

@@ -1,2 +1,2 @@
-export type { EditorTheme } from './types';
-export { akEditorBlockquoteBorderColor, akEditorBreakoutPadding, akEditorCodeBackground, akEditorCodeBlockPadding, akEditorCodeFontFamily, akEditorCodeInlinePadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex, akEditorFloatingPanelZIndex, akEditorFullPageMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullWidthLayoutWidth, akEditorFullWidthLayoutLineLength, akEditorGridLineZIndex, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMenuZIndex, akEditorStickyHeaderZIndex, akEditorMobileBreakoutPoint, akEditorSelectedBorderColor, akEditorSelectedBorderBoldSize, akEditorSelectedBorderSize, akEditorSelectedBorder, akEditorSelectedBoxShadow, akEditorCustomIconSize, akEditorSelectedBlanketOpacity, akEditorSmallZIndex, akEditorShadowZIndex, akEditorSubtleAccent, akEditorSwoopCubicBezier, akEditorTableBorder, akEditorTableBorderRadius, akEditorTableBorderSelected, akEditorTableCellBackgroundOpacity, akEditorTableCellMinWidth, akEditorTableCellOnStickyHeaderZIndex, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted, } from './consts';
+export type { EditorTheme, ParticipantColor } from './types';
+export { akEditorBlockquoteBorderColor, akEditorBreakoutPadding, akEditorCodeBackground, akEditorCodeBlockPadding, akEditorCodeFontFamily, akEditorCodeInlinePadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex, akEditorFloatingPanelZIndex, akEditorFullPageMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullWidthLayoutWidth, akEditorFullWidthLayoutLineLength, akEditorGridLineZIndex, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMenuZIndex, akEditorStickyHeaderZIndex, akEditorMobileBreakoutPoint, akEditorSelectedBorderColor, akEditorSelectedBorderBoldSize, akEditorSelectedBorderSize, akEditorSelectedBorder, akEditorSelectedBoxShadow, akEditorCustomIconSize, akEditorSelectedBlanketOpacity, akEditorSmallZIndex, akEditorShadowZIndex, akEditorSubtleAccent, akEditorSwoopCubicBezier, akEditorTableBorder, akEditorTableBorderRadius, akEditorTableBorderSelected, akEditorTableCellBackgroundOpacity, akEditorTableCellMinWidth, akEditorTableCellOnStickyHeaderZIndex, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, participantColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted, akEditorWrappedNodeZIndex, } from './consts';

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

@@ -1,3 +1,7 @@
 export type EditorTheme = {
     baseFontSize?: number;
 };
+export type ParticipantColor = {
+    textColor: string;
+    backgroundColor: string;
+};

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

@@ -1,4 +1,5 @@
-export { akEditorBlockquoteBorderColor, akEditorBreakoutPadding, akEditorCodeBackground, akEditorCodeBlockPadding, akEditorCodeFontFamily, akEditorCodeInlinePadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex, akEditorFloatingPanelZIndex, akEditorFullPageMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullWidthLayoutWidth, akEditorFullWidthLayoutLineLength, akEditorGridLineZIndex, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMenuZIndex, akEditorStickyHeaderZIndex, akEditorMobileBreakoutPoint, akEditorSelectedBorderColor, akEditorSelectedBorderBoldSize, akEditorSelectedBorderSize, akEditorSelectedBorder, akEditorSelectedBoxShadow, akEditorSelectedBlanketOpacity, akEditorSmallZIndex, akEditorShadowZIndex, akEditorSubtleAccent, akEditorSwoopCubicBezier, akEditorTableBorder, akEditorTableBorderRadius, akEditorTableBorderSelected, akEditorTableCellBackgroundOpacity, akEditorTableCellMinWidth, akEditorTableCellOnStickyHeaderZIndex, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted, } from './consts';
-export type { EditorTheme } from './consts';
+export { akEditorBlockquoteBorderColor, akEditorBreakoutPadding, akEditorCodeBackground, akEditorCodeBlockPadding, akEditorCodeFontFamily, akEditorCodeInlinePadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex, akEditorFloatingPanelZIndex, akEditorFullPageMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullWidthLayoutWidth, akEditorFullWidthLayoutLineLength, akEditorGridLineZIndex, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMenuZIndex, akEditorStickyHeaderZIndex, akEditorMobileBreakoutPoint, akEditorSelectedBorderColor, akEditorSelectedBorderBoldSize, akEditorSelectedBorderSize, akEditorSelectedBorder, akEditorSelectedBoxShadow, akEditorSelectedBlanketOpacity, akEditorSmallZIndex, akEditorShadowZIndex, akEditorSubtleAccent, akEditorSwoopCubicBezier, akEditorTableBorder, akEditorTableBorderRadius, akEditorTableBorderSelected, akEditorTableCellBackgroundOpacity, akEditorTableCellMinWidth, akEditorTableCellOnStickyHeaderZIndex, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, participantColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted, akEditorWrappedNodeZIndex, } from './consts';
+export type { EditorTheme, ParticipantColor } from './consts';
 export { SelectionStyle, getSelectionStyles, hideNativeBrowserTextSelectionStyles, } from './selection';
 export { overflowShadow } from './overflow-shadow';
+export { getParticipantColor } from './utils';

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

@@ -0,0 +1,21 @@
+import { type ParticipantColor } from './consts';
+/**
+ * Generates a hash code for a given string.
+ *
+ * This function computes a hash code by iterating over each character
+ * in the string and applying bitwise operations to accumulate the hash value.
+ *
+ * @param str - The input string for which the hash code is to be generated.
+ * @returns The computed hash code as a number.
+ */
+export declare function getHashCode(str: string): number;
+/**
+ * Returns the participant color based on the hash code of the input string.
+ *
+ * @param str - The input string used to determine the participant color.
+ * @returns An object containing the index and the corresponding participant color.
+ */
+export declare function getParticipantColor(str: string): {
+    index: number;
+    color: ParticipantColor;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-shared-styles",
-	"version": "3.0.1",
+	"version": "3.1.1",
 	"description": "Style values used in the editor/renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -46,7 +46,6 @@
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
-	"peerDependencies": {},
 	"devDependencies": {
 		"typescript": "~5.4.2"
 	},

package/src/consts/consts.test.ts

@@ -1,6 +1,12 @@
-import { relativeFontSizeToBase16 } from './consts';
+import { participantColors, relativeFontSizeToBase16 } from './consts';
 
 describe('consts', () => {
+	describe('participantColors', () => {
+		it('should be an array of 18 colors', () => {
+			expect(participantColors).toHaveLength(18);
+		});
+	});
+
 	describe('relativeFontSizeToBase16', () => {
 		it('relativeFontSizeToBase16 should return 1rem with a base font size of 16px', () => {
 			expect(relativeFontSizeToBase16(16)).toBe('1rem');

package/src/consts/consts.ts

@@ -2,7 +2,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { token } from '@atlaskit/tokens';
 
-import type { EditorTheme } from './types';
+import type { EditorTheme, ParticipantColor } from './types';
 
 export const akEditorFullPageDefaultFontSize = 16;
 export const akEditorCodeFontFamily = token('font.family.code');
@@ -78,6 +78,7 @@ export const akEditorToolbarKeylineHeight = 2;
 export const akEditorContextPanelWidth = 320;
 export const akEditorTableCellBlanketSelected = 'rgba(179, 212, 255, 0.3)';
 export const akEditorTableCellBlanketDeleted = 'rgba(255, 235, 230, 0.3)';
+export const akEditorWrappedNodeZIndex = akEditorUnitZIndex * 2; //prevent paragraph nodes from rendering above wrapped nodes
 
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 export const blockNodesVerticalMargin = '0.75rem';
@@ -192,3 +193,79 @@ export const avatarColors = [
 	token('color.background.accent.yellow.bolder.hovered'),
 	token('color.background.accent.yellow.bolder.pressed'),
 ];
+
+// MDS-569: Will update references to avatarColors to use participantColors instead, we will then deprecate avatarColors
+export const participantColors: Array<ParticipantColor> = [
+	{
+		textColor: token('color.text.inverse'),
+		backgroundColor: token('color.background.accent.red.bolder'),
+	},
+	{
+		textColor: token('color.text.inverse'),
+		backgroundColor: token('color.background.accent.blue.bolder'),
+	},
+	{
+		textColor: token('color.text.inverse'),
+		backgroundColor: token('color.background.accent.green.bolder'),
+	},
+	{
+		textColor: token('color.text.inverse'),
+		backgroundColor: token('color.background.accent.yellow.bolder'),
+	},
+	{
+		textColor: token('color.text.inverse'),
+		backgroundColor: token('color.background.accent.purple.bolder'),
+	},
+	{
+		textColor: token('color.text.inverse'),
+		backgroundColor: token('color.background.accent.magenta.bolder'),
+	},
+	{
+		textColor: token('color.text.inverse'),
+		backgroundColor: token('color.background.accent.teal.bolder'),
+	},
+	{
+		textColor: token('color.text.inverse'),
+		backgroundColor: token('color.background.accent.orange.bolder'),
+	},
+	{
+		textColor: token('color.text.inverse'),
+		backgroundColor: token('color.background.accent.lime.bolder'),
+	},
+	{
+		textColor: token('color.text.inverse'),
+		backgroundColor: token('color.background.accent.gray.bolder'),
+	},
+	{
+		textColor: token('color.text.accent.gray.bolder'),
+		backgroundColor: token('color.background.accent.blue.subtle'),
+	},
+	{
+		textColor: token('color.text.accent.gray.bolder'),
+		backgroundColor: token('color.background.accent.red.subtle'),
+	},
+	{
+		textColor: token('color.text.accent.gray.bolder'),
+		backgroundColor: token('color.background.accent.orange.subtle'),
+	},
+	{
+		textColor: token('color.text.accent.gray.bolder'),
+		backgroundColor: token('color.background.accent.yellow.subtle'),
+	},
+	{
+		textColor: token('color.text.accent.gray.bolder'),
+		backgroundColor: token('color.background.accent.green.subtle'),
+	},
+	{
+		textColor: token('color.text.accent.gray.bolder'),
+		backgroundColor: token('color.background.accent.teal.subtle'),
+	},
+	{
+		textColor: token('color.text.accent.gray.bolder'),
+		backgroundColor: token('color.background.accent.purple.subtle'),
+	},
+	{
+		textColor: token('color.text.accent.gray.bolder'),
+		backgroundColor: token('color.background.accent.magenta.subtle'),
+	},
+];

package/src/consts/index.ts

@@ -1,4 +1,4 @@
-export type { EditorTheme } from './types';
+export type { EditorTheme, ParticipantColor } from './types';
 export {
 	akEditorBlockquoteBorderColor,
 	akEditorBreakoutPadding,
@@ -57,6 +57,7 @@ export {
 	akLayoutGutterOffset,
 	akRichMediaResizeZIndex,
 	avatarColors,
+	participantColors,
 	blockNodesVerticalMargin,
 	breakoutWideScaleRatio,
 	editorFontSize,
@@ -77,4 +78,5 @@ export {
 	FULL_PAGE_EDITOR_TOOLBAR_HEIGHT,
 	akEditorTableCellBlanketSelected,
 	akEditorTableCellBlanketDeleted,
+	akEditorWrappedNodeZIndex,
 } from './consts';

package/src/consts/types.ts

@@ -1,3 +1,8 @@
 export type EditorTheme = {
 	baseFontSize?: number;
 };
+
+export type ParticipantColor = {
+	textColor: string;
+	backgroundColor: string;
+};

package/src/index.ts

@@ -55,6 +55,7 @@ export {
 	akLayoutGutterOffset,
 	akRichMediaResizeZIndex,
 	avatarColors,
+	participantColors,
 	blockNodesVerticalMargin,
 	breakoutWideScaleRatio,
 	editorFontSize,
@@ -75,8 +76,9 @@ export {
 	FULL_PAGE_EDITOR_TOOLBAR_HEIGHT,
 	akEditorTableCellBlanketSelected,
 	akEditorTableCellBlanketDeleted,
+	akEditorWrappedNodeZIndex,
 } from './consts';
-export type { EditorTheme } from './consts';
+export type { EditorTheme, ParticipantColor } from './consts';
 
 export {
 	SelectionStyle,
@@ -85,3 +87,5 @@ export {
 } from './selection';
 
 export { overflowShadow } from './overflow-shadow';
+
+export { getParticipantColor } from './utils';

package/src/utils.test.ts

@@ -0,0 +1,63 @@
+import { token } from '@atlaskit/tokens';
+
+import { getHashCode, getParticipantColor } from './utils';
+
+describe('utils', () => {
+	describe('getHashCode', () => {
+		it('should return a hash code for a given string', () => {
+			expect(getHashCode('FawAXOcgL7ixM9qtAB0L')).toBe(2021471462);
+			expect(getHashCode('exB9qUN6fCHFlE-cAB0X')).toBe(2785253289);
+			expect(getHashCode('9NOVTX9WjLubYyVhAB0H')).toBe(3240394968);
+			expect(getHashCode('ceea2b46-6671-4827-a2ea-85e91a03f2ac')).toBe(308780004);
+			expect(getHashCode('42b0923a-c388-4cb8-b4f3-3210f95a489e')).toBe(1660294582);
+			expect(getHashCode('d3b6e136-0f93-4bf2-a7e7-cd93dcce20e8')).toBe(3395311041);
+		});
+	});
+
+	describe('getParticipantColor', () => {
+		it('should return a participant color based on the hash code of the input string', () => {
+			expect(getParticipantColor('FawAXOcgL7ixM9qtAB0L')).toEqual({
+				index: 2,
+				color: {
+					backgroundColor: token('color.background.accent.green.bolder'),
+					textColor: token('color.text.inverse'),
+				},
+			});
+			expect(getParticipantColor('exB9qUN6fCHFlE-cAB0X')).toEqual({
+				index: 15,
+				color: {
+					backgroundColor: token('color.background.accent.teal.subtle'),
+					textColor: token('color.text.accent.gray.bolder'),
+				},
+			});
+			expect(getParticipantColor('9NOVTX9WjLubYyVhAB0H')).toEqual({
+				index: 12,
+				color: {
+					backgroundColor: token('color.background.accent.orange.subtle'),
+					textColor: token('color.text.accent.gray.bolder'),
+				},
+			});
+			expect(getParticipantColor('ceea2b46-6671-4827-a2ea-85e91a03f2ac')).toEqual({
+				index: 12,
+				color: {
+					backgroundColor: token('color.background.accent.orange.subtle'),
+					textColor: token('color.text.accent.gray.bolder'),
+				},
+			});
+			expect(getParticipantColor('42b0923a-c388-4cb8-b4f3-3210f95a489e')).toEqual({
+				index: 16,
+				color: {
+					backgroundColor: token('color.background.accent.purple.subtle'),
+					textColor: token('color.text.accent.gray.bolder'),
+				},
+			});
+			expect(getParticipantColor('d3b6e136-0f93-4bf2-a7e7-cd93dcce20e8')).toEqual({
+				index: 3,
+				color: {
+					backgroundColor: token('color.background.accent.yellow.bolder'),
+					textColor: token('color.text.inverse'),
+				},
+			});
+		});
+	});
+});

package/src/utils.ts

@@ -0,0 +1,35 @@
+import { type ParticipantColor, participantColors } from './consts';
+
+/**
+ * Generates a hash code for a given string.
+ *
+ * This function computes a hash code by iterating over each character
+ * in the string and applying bitwise operations to accumulate the hash value.
+ *
+ * @param str - The input string for which the hash code is to be generated.
+ * @returns The computed hash code as a number.
+ */
+export function getHashCode(str: string): number {
+	let hash = 0;
+
+	for (let i = 0; i < str.length; i++) {
+		/* eslint-disable no-bitwise */
+		hash = (hash << 5) - hash + str.charCodeAt(i);
+		hash = (hash & hash) >>> 0;
+		/* eslint-enable no-bitwise */
+	}
+
+	return hash;
+}
+
+/**
+ * Returns the participant color based on the hash code of the input string.
+ *
+ * @param str - The input string used to determine the participant color.
+ * @returns An object containing the index and the corresponding participant color.
+ */
+export function getParticipantColor(str: string): { index: number; color: ParticipantColor } {
+	const index = getHashCode(str) % participantColors.length;
+
+	return { index, color: participantColors[index] };
+}