@pingux/astro 2.170.0 → 2.171.0-alpha.0

package/lib/cjs/components/Avatar/Avatar.js

@@ -21,8 +21,10 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 var _react = _interopRequireWildcard(require("react"));
 var _themeUi = require("theme-ui");
 var _hooks = require("../../hooks");
+var _constants = require("./constants");
+var _getColorFromUuid = _interopRequireDefault(require("./getColorFromUuid"));
 var _react2 = require("@emotion/react");
-var _excluded = ["alt", "defaultText", "color", "className", "size", "src", "sx", "children", "isSquare", "isLogo"];
+var _excluded = ["alt", "defaultText", "color", "colorId", "className", "size", "src", "sx", "children", "isSquare", "isLogo"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -32,6 +34,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     _props$defaultText = props.defaultText,
     defaultText = _props$defaultText === void 0 ? 'AA' : _props$defaultText,
     color = props.color,
+    colorId = props.colorId,
     className = props.className,
     _props$size = props.size,
     size = _props$size === void 0 ? 'sm' : _props$size,
@@ -41,7 +44,15 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isSquare = props.isSquare,
     isLogo = props.isLogo,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "is-".concat(color), color), "size-".concat(size), size), "font-size-".concat(size), src ? false : size), 'is-square', isSquare), 'is-image', src), 'is-logo', isLogo)),
+
+  // this will use color prop if provided,
+  // else will map colorId to a color, else defaults to 'green'
+  var finalColor = (0, _react.useMemo)(function () {
+    if (color) return color;
+    if (colorId) return (0, _getColorFromUuid["default"])(colorId, _constants.avatarColors);
+    return 'green';
+  }, [color, colorId, _constants.avatarColors]);
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "is-".concat(finalColor), finalColor), "size-".concat(size), size), "font-size-".concat(size), src ? false : size), 'is-square', isSquare), 'is-image', src), 'is-logo', isLogo)),
     classNames = _useStatusClasses.classNames;
   if (src) {
     return (0, _react2.jsx)(_themeUi.Box, (0, _extends2["default"])({

package/lib/cjs/components/Avatar/Avatar.test.js

@@ -1,16 +1,25 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+var _startsWith = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/starts-with"));
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _faker = require("@faker-js/faker");
+var _nodeCrypto = require("node:crypto");
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _constants = require("./constants");
+var _getColorFromUuid = _interopRequireDefault(require("./getColorFromUuid"));
 var _ = _interopRequireDefault(require("."));
 var _react2 = require("@emotion/react");
 var src = _faker.faker.image.lorempicsum.imageUrl(150, 150, false, undefined, '1');
+var datatestId = 'avatar-component';
 var defaultProps = {
-  src: src
+  src: src,
+  'data-testid': datatestId
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -43,4 +52,89 @@ test('an avatar is rendered with custom alt', function () {
   });
   var avatar = _testWrapper.screen.getByText('KL');
   expect(avatar).toBeInTheDocument();
+});
+describe('getColorFromUUID', function () {
+  test('returns a consistent color for the same UUID', function () {
+    var uuid = '123e4567-e89b-12d3-a456-426614174000';
+    var result1 = (0, _getColorFromUuid["default"])(uuid, _constants.avatarColors);
+    var result2 = (0, _getColorFromUuid["default"])(uuid, _constants.avatarColors);
+    expect(result1).toBe(result2);
+  });
+  test('returns a color from the provided array', function () {
+    var uuid = 'random-id';
+    var result = (0, _getColorFromUuid["default"])(uuid, _constants.avatarColors);
+    expect(_constants.avatarColors).toContain(result);
+  });
+  test('distributes colors differently for different UUIDs', function () {
+    var colorA = (0, _getColorFromUuid["default"])('id-1', _constants.avatarColors);
+    var colorB = (0, _getColorFromUuid["default"])('id-2', _constants.avatarColors);
+
+    // While collisions are mathematically possible, for 2 items in a 10-item list,
+    // these specific IDs yield different results in FNV-1a.
+    expect(colorA).not.toBe(colorB);
+  });
+  test('throws error if color array is empty', function () {
+    expect(function () {
+      return (0, _getColorFromUuid["default"])('uuid', []);
+    }).toThrow('Color array cannot be empty.');
+  });
+  test('uses the specific color class when color prop is provided', function () {
+    getComponent({
+      color: 'blue',
+      colorId: 'some-id'
+    });
+    var avatar = _testWrapper.screen.getByTestId(datatestId);
+
+    // Checking for 'is-blue'
+    expect(avatar).toHaveClass('is-blue');
+  });
+  test('applies a hashed color class from colorId', function () {
+    var uuid = '550e8400-e29b-41d4-a716-446655440000';
+    getComponent({
+      colorId: uuid
+    });
+    var avatar = _testWrapper.screen.getByTestId(datatestId);
+
+    // We check that it has *a* class starting with 'is-'
+    // and specifically isn't the default 'is-green'
+    var classList = (0, _from["default"])(avatar.classList);
+    var colorClass = (0, _find["default"])(classList).call(classList, function (cls) {
+      return (0, _startsWith["default"])(cls).call(cls, 'is-');
+    });
+    expect(colorClass).toBeDefined();
+    expect(avatar).not.toHaveClass('is-green');
+  });
+  test('defaults to is-green when no color props are passed', function () {
+    getComponent();
+    var avatar = _testWrapper.screen.getByTestId(datatestId);
+    expect(avatar).toHaveClass('is-green');
+  });
+});
+describe('getColorFromUUID Distribution', function () {
+  test('distributes 10,000 UUIDs evenly across 10 colors', function () {
+    var iterations = 10000;
+    var distribution = {};
+
+    // Initialize counts
+    (0, _forEach["default"])(_constants.avatarColors).call(_constants.avatarColors, function (c) {
+      distribution[c] = 0;
+    });
+
+    // Generate and hash
+    for (var i = 0; i < iterations; i += 1) {
+      // Use the imported randomUUID function directly
+      var uuid = (0, _nodeCrypto.randomUUID)();
+      var selectedColor = (0, _getColorFromUuid["default"])(uuid, _constants.avatarColors);
+      distribution[selectedColor] += 1;
+    }
+    var expectedMean = iterations / _constants.avatarColors.length;
+    // 15% variance is a safe threshold for 10k iterations
+    var allowedVariance = 0.15;
+    (0, _forEach["default"])(_constants.avatarColors).call(_constants.avatarColors, function (color) {
+      var count = distribution[color];
+      // Assert that each color is roughly 10% of the total
+      expect(count).toBeGreaterThan(expectedMean * (1 - allowedVariance));
+      expect(count).toBeLessThan(expectedMean * (1 + allowedVariance));
+    });
+  });
 });

package/lib/cjs/components/Avatar/constants.d.ts

@@ -0,0 +1,2 @@
+declare const avatarColors: string[];
+export { avatarColors };

package/lib/cjs/components/Avatar/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.avatarColors = void 0;
+var avatarColors = exports.avatarColors = ['green', 'purple', 'pink', 'red', 'orange', 'yellow', 'teal', 'cyan', 'blue', 'indigo'];

package/lib/cjs/components/Avatar/getColorFromUuid.d.ts

@@ -0,0 +1,2 @@
+declare const getColorFromUUID: <T>(uuid: string, colors: T[]) => T;
+export default getColorFromUUID;

package/lib/cjs/components/Avatar/getColorFromUuid.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _imul = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/math/imul"));
+// * Maps a UUID to a specific color from a provided array.
+//  * @param uuid - The unique identifier string.
+//  * @param colors - An array of color strings/objects.
+//  * @returns A single color from the array.
+
+var getColorFromUUID = function getColorFromUUID(uuid, colors) {
+  if (colors.length === 0) {
+    throw new Error('Color array cannot be empty.');
+  }
+
+  // FNV-1a Hash implementation
+  // This spreads the bits of the UUID string evenly across a 32-bit integer
+  var hash = 2166136261;
+  for (var i = 0; i < uuid.length; i += 1) {
+    /* eslint-disable no-bitwise */
+    hash ^= uuid.charCodeAt(i);
+    // Standard FNV prime (using Math.imul for 32-bit integer multiplication)
+
+    hash = (0, _imul["default"])(hash, 16777619);
+  }
+
+  // Convert to an unsigned index using the modulo operator
+  // The >>> 0 ensures we are dealing with an unsigned 32-bit integer
+  /* eslint-disable no-bitwise */
+  var index = (hash >>> 0) % colors.length;
+  return colors[index];
+};
+var _default = exports["default"] = getColorFromUUID;

package/lib/cjs/components/NavBar/stories/NavBarNextGenComponent.js

@@ -57,11 +57,18 @@ var NavBarNextGenComponent = exports.NavBarNextGenComponent = function NavBarNex
     'data-id': 'Authentication-data-id',
     heading: 'Authentication',
     icon: icons.authenticationIcon,
+    title: 'Policies',
     key: 'Authentication',
     children: [(0, _react2.jsx)(_.NavBarItemButton, {
       key: "Authentication-Policies",
       id: "Authentication-Policies"
-    }, "Authentication Policies"), (0, _react2.jsx)(_.NavBarItemButton, {
+    }, "Authentication Policies"), {
+      hasSeparator: false,
+      subTitle: 'Applications'
+    }, (0, _react2.jsx)(_.Separator, {
+      key: "separator",
+      variant: "separator.navBarSubtitleSeparator"
+    }), (0, _react2.jsx)(_.NavBarItemButton, {
       key: "Password-Policies",
       id: "Password-Policies"
     }, "Password Policies")]

package/lib/cjs/components/NavBarSection/NavBarItem.js

@@ -67,7 +67,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     classNames = _useStatusClasses.classNames;
   var color = isSelected ? 'white' : 'neutral.95';
   var _useGetTheme = (0, _hooks.useGetTheme)(),
-    isOnyx = _useGetTheme.themeState.isOnyx;
+    navBarIconSize = _useGetTheme.navBarIconSize;
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     id: key,
     variant: state.navStyles.navBarItem,
@@ -89,7 +89,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     title: {
       name: text
     },
-    size: isOnyx ? 'icon-200' : 'sm',
+    size: navBarIconSize || 18,
     sx: {
       mr: 'sm',
       color: color,

package/lib/cjs/components/NavBarSection/NavBarItemHeader.js

@@ -38,8 +38,8 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(_ref2) {
     heading = item.heading;
   var navBarState = (0, _NavBarContext.useNavBarContext)();
   var _useGetTheme = (0, _useGetTheme3["default"])(),
-    isOnyx = _useGetTheme.themeState.isOnyx,
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    navBarIconSize = _useGetTheme.navBarIconSize;
   var MenuDown = icons.MenuDown,
     MenuUp = icons.MenuUp;
   var selectedKey = navBarState.selectedKey,
@@ -74,7 +74,7 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(_ref2) {
     "data-testid": heading
   }, icon && (0, _react2.jsx)(_index.Icon, {
     icon: icon,
-    size: isOnyx ? 'icon-200' : 18,
+    size: navBarIconSize || 18,
     sx: {
       mr: 'sm',
       color: getIconColor(),

package/lib/cjs/components/NavBarSection/NavBarItemHeader.test.js

@@ -81,6 +81,6 @@ describe('NavItemHeader', function () {
     getComponent();
     var icon = _testWrapper.screen.getByTestId('Dashboard').querySelector('svg');
     expect(icon).toBeInTheDocument();
-    expect(icon).toHaveAttribute('width', 'icon-200');
+    expect(icon).toHaveAttribute('width', '18');
   });
 });

package/lib/cjs/components/NavSideBar/NavSideBarItem.js

@@ -9,8 +9,8 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _interactions = require("@react-aria/interactions");
@@ -23,8 +23,13 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var
 var NavSideBarItem = function NavSideBarItem(props) {
   var children = props.children,
     linkProps = props.linkProps;
+  console.log(props);
   if (linkProps && linkProps !== null && linkProps !== void 0 && linkProps.href) {
-    return (0, _react2.jsx)(_index.Link, linkProps, (0, _react2.jsx)(ChildWrapper, props, children));
+    return (0, _react2.jsx)(_index.Link, (0, _extends2["default"])({}, linkProps, {
+      sx: {
+        textDecoration: 'none !important'
+      }
+    }), (0, _react2.jsx)(ChildWrapper, props, children));
   }
   return (0, _react2.jsx)(_index.Button, {
     variant: "link",
@@ -68,6 +73,8 @@ var ChildWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }),
     pressProps = _usePress.pressProps,
     isPressed = _usePress.isPressed;
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    navBarIconSize = _useGetTheme.navBarIconSize;
   var mergedProps = (0, _reactAria.mergeProps)(pressProps, hoverProps, focusWithinProps, focusProps, others);
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
       isPressed: isPressed,
@@ -76,6 +83,7 @@ var ChildWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       isFocused: isFocusVisible
     }),
     classNames = _useStatusClasses.classNames;
+  console.log(state.navStyles.navBarItem);
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     id: key,
     variant: state.navStyles.navBarItem,
@@ -93,13 +101,13 @@ var ChildWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     title: {
       name: children
     },
-    size: state.navStyles.navBarItemHeaderIconSize,
+    size: navBarIconSize,
     variant: isSelected ? state.navStyles.navBarItemIconSelected : state.navStyles.navBarItemIcon
   }, iconProps)), (0, _react2.jsx)(_index.Text, {
     variant: state.navStyles.navBarItemText
   }, children), customIcon && (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
     icon: customIcon,
-    size: state.navStyles.navBarItemHeaderIconSize,
+    size: navBarIconSize,
     variant: isSelected ? state.navStyles.navBarItemCustomIconSelected : state.navStyles.navBarItemCustomIcon
   }, customIconProps, {
     title: {

package/lib/cjs/components/NavSideBar/NavSideBarSectionHeader.js

@@ -33,7 +33,8 @@ var NavSideBarSectionHeader = function NavSideBarSectionHeader(props) {
     onExpandedChange = props.onExpandedChange,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useGetTheme = (0, _useGetTheme2["default"])(),
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    navBarIconSize = _useGetTheme.navBarIconSize;
   var MenuUp = icons.MenuUp,
     MenuDown = icons.MenuDown;
   var navBarState = (0, _NavBarContext.useNavBarContext)();
@@ -74,7 +75,7 @@ var NavSideBarSectionHeader = function NavSideBarSectionHeader(props) {
     isRow: true
   }, icon && (0, _react2.jsx)(_index.Icon, {
     icon: icon,
-    size: navStyles.navBarItemHeaderIconSize,
+    size: navBarIconSize,
     variant: variant,
     "aria-hidden": "true"
   }), (0, _react2.jsx)(_index.Text, {
@@ -87,7 +88,7 @@ var NavSideBarSectionHeader = function NavSideBarSectionHeader(props) {
     }
   }, (0, _react2.jsx)(_index.Icon, {
     icon: isExpanded ? MenuUp : MenuDown,
-    size: navStyles.navBarItemHeaderIconSize,
+    size: navBarIconSize,
     variant: variant,
     mr: "0",
     title: {

package/lib/cjs/hooks/useGetTheme/useGetTheme.d.ts

@@ -7,6 +7,7 @@ export declare const baseState: {
 declare const useGetTheme: () => {
     name: string;
     accordionItemDefaultLabelTag: string;
+    navBarIconSize: import("../..").IconSize;
     activeColor: string;
     backgroundBaseColor: string;
     icons: {
@@ -157,6 +158,7 @@ declare const useGetTheme: () => {
     pageHeaderAddIconSize: string;
     defaultLoaderSize: number;
     activeColor: string;
+    navBarIconSize: import("../..").IconSize;
     styles: {
         navButtonEstHeight: number;
     };

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/customProperties/index.d.ts

@@ -59,6 +59,7 @@ export declare const nextGenDarkThemeValues: {
     pageHeaderAddIconSize: string;
     defaultLoaderSize: number;
     activeColor: string;
+    navBarIconSize: import("../../../..").IconSize;
     styles: {
         navButtonEstHeight: number;
     };

package/lib/cjs/styles/themeOverrides/onyxSideNav.d.ts

@@ -16,6 +16,7 @@ declare const _default: {
                 p: string;
                 backgroundColor: string;
                 boxShadow: string;
+                zIndex: number;
             };
             logoParent: {
                 p: string;
@@ -127,6 +128,7 @@ declare const _default: {
                 textTransform: string;
                 fontSize: string;
                 letterSpacing: string;
+                lineHeight: string;
             };
             headerText: {
                 color: string;
@@ -156,6 +158,7 @@ declare const _default: {
                 py: string;
                 color: string;
                 borderRadius: string;
+                textDecoration: string;
                 mb: string;
                 '&.is-hovered': {
                     backgroundColor: string;
@@ -163,6 +166,9 @@ declare const _default: {
                 '> div > svg': {
                     fill: string;
                 };
+                '> svg': {
+                    fill: string;
+                };
                 '&.is-pressed': {
                     backgroundColor: string;
                 };
@@ -170,6 +176,9 @@ declare const _default: {
                     '> div > svg': {
                         fill: string;
                     };
+                    '> svg': {
+                        fill: string;
+                    };
                     backgroundColor: string;
                     boxShadow: string;
                 };
@@ -217,6 +226,11 @@ declare const _default: {
                 maxWidth: string;
                 backgroundColor: string;
             };
+            navBarSubtitleSeparator: {
+                backgroundColor: string;
+                mx: string;
+                my: string;
+            };
         };
     };
     icons: {
@@ -269,5 +283,6 @@ declare const _default: {
         md: number;
         xsm: number;
     };
+    navBarIconSize: string;
 };
 export default _default;

package/lib/cjs/styles/themeOverrides/onyxSideNav.js

@@ -35,7 +35,8 @@ var navBar = {
     width: '230px',
     p: '8px',
     backgroundColor: 'white',
-    boxShadow: '0 .5rem 1rem rgba(0, 0, 0, .15)'
+    boxShadow: '0 2px 11px rgba(0, 0, 0, .13)',
+    zIndex: 2
   },
   logoParent: {
     p: '8px'
@@ -51,7 +52,7 @@ var navBar = {
       backgroundColor: '#f6f8fa'
     },
     '&.is-pressed': {
-      backgroundColor: '#e5e9f8'
+      backgroundColor: '#EDEFF1'
     },
     '&.is-focused': _objectSpread({}, navBarFocus),
     ':focus': {
@@ -65,7 +66,7 @@ var navBar = {
         backgroundColor: '#f6f8fa'
       },
       '&.is-pressed': {
-        backgroundColor: '#e5e9f8'
+        backgroundColor: '#EDEFF1'
       },
       '&.is-focused': _objectSpread({}, navBarFocus),
       backgroundColor: '#f6f8fa'
@@ -99,7 +100,7 @@ var navBar = {
         border: 'none'
       },
       '&.is-pressed': {
-        backgroundColor: '#e5e9f8',
+        backgroundColor: '#EDEFF1',
         color: '#455469'
       },
       '&.is-selected': {
@@ -116,7 +117,7 @@ var navBar = {
       border: 'none'
     },
     '&.is-pressed': {
-      backgroundColor: '#e5e9f8',
+      backgroundColor: '#EDEFF1',
       color: '#455469'
     },
     '&.is-selected': {
@@ -130,7 +131,8 @@ var navBar = {
     marginLeft: '50px !important',
     textTransform: 'uppercase',
     fontSize: '12px',
-    letterSpacing: '1px'
+    letterSpacing: '1px',
+    lineHeight: '140%'
   },
   headerText: {
     color: '#455469',
@@ -160,6 +162,7 @@ var navBar = {
     py: '.75rem',
     color: '#455469',
     borderRadius: '4px',
+    textDecoration: 'none',
     mb: '2px',
     '&.is-hovered': {
       backgroundColor: '#f6f8fa'
@@ -167,12 +170,18 @@ var navBar = {
     '> div > svg': {
       fill: '#455469'
     },
+    '> svg': {
+      fill: '#455469'
+    },
     '&.is-pressed': {
-      backgroundColor: '#e5e9f8'
+      backgroundColor: '#EDEFF1'
     },
     '&.is-selected': _objectSpread(_objectSpread({}, navBarSelected), {}, {
       '> div > svg': {
         fill: 'accent.40'
+      },
+      '> svg': {
+        fill: 'accent.40'
       }
     }),
     '&.is-focused': {
@@ -216,6 +225,11 @@ var separator = {
     mx: '0px',
     maxWidth: '236px',
     backgroundColor: '#e7eef4'
+  },
+  navBarSubtitleSeparator: {
+    backgroundColor: '#e7eef4',
+    mx: '0px',
+    my: '10px'
   }
 };
 var _default = exports["default"] = {
@@ -235,5 +249,6 @@ var _default = exports["default"] = {
     sm: 20,
     md: 25,
     'xsm': 16
-  }
+  },
+  navBarIconSize: '20px'
 };

package/lib/cjs/styles/themes/astro/customProperties/index.d.ts

@@ -1,6 +1,7 @@
 import { IconSize, LoaderSize } from '../../../../types';
 export declare const astroThemeValues: {
     accordionItemDefaultLabelTag: string;
+    navBarIconSize: IconSize;
     activeColor: string;
     backgroundBaseColor: string;
     icons: {

package/lib/cjs/styles/themes/astro/customProperties/index.js

@@ -32,8 +32,10 @@ var defaultIconColor = 'currentColor';
 var defaultIconSize = 'sm';
 var linkSelectFieldWidth = '10em';
 var calendarIconSize = 25;
+var navBarIconSize = 18;
 var astroThemeValues = exports.astroThemeValues = {
   accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
+  navBarIconSize: navBarIconSize,
   activeColor: activeColor,
   backgroundBaseColor: backgroundBaseColor,
   icons: _icons["default"],

package/lib/cjs/styles/themes/next-gen/customProperties/index.d.ts

@@ -10,6 +10,7 @@ export declare const nextGenThemeValues: {
     pageHeaderAddIconSize: string;
     defaultLoaderSize: number;
     activeColor: string;
+    navBarIconSize: IconSize;
     backgroundBaseColor: string;
     styles: {
         navButtonEstHeight: number;

package/lib/cjs/styles/themes/next-gen/customProperties/index.js

@@ -39,8 +39,10 @@ var badgeStyles = {
 };
 var linkSelectFieldWidth = '12em';
 var calendarIconSize = 'sm';
+var navBarIconSize = '20px';
 var nextGenThemeValues = exports.nextGenThemeValues = _objectSpread({
   activeColor: activeColor,
+  navBarIconSize: navBarIconSize,
   backgroundBaseColor: backgroundBaseColor,
   styles: _styles["default"],
   icons: _icons["default"],

package/lib/cjs/types/avatar.d.ts

@@ -10,6 +10,8 @@ export interface AvatarProps extends ThemeUIAvatarProps {
     defaultText?: string;
     size?: string;
     color?: string;
+    colorId?: string;
     isSquare?: boolean;
     isLogo?: boolean;
+    'data-testid'?: string;
 }

package/lib/components/Avatar/Avatar.js

@@ -9,12 +9,14 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["alt", "defaultText", "color", "className", "size", "src", "sx", "children", "isSquare", "isLogo"];
+var _excluded = ["alt", "defaultText", "color", "colorId", "className", "size", "src", "sx", "children", "isSquare", "isLogo"];
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { Avatar as ThemeUIAvatar, Box } from 'theme-ui';
 import { useStatusClasses } from '../../hooks';
+import { avatarColors } from './constants';
+import getColorFromUUID from './getColorFromUuid';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Avatar = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$alt = props.alt,
@@ -22,6 +24,7 @@ var Avatar = /*#__PURE__*/forwardRef(function (props, ref) {
     _props$defaultText = props.defaultText,
     defaultText = _props$defaultText === void 0 ? 'AA' : _props$defaultText,
     color = props.color,
+    colorId = props.colorId,
     className = props.className,
     _props$size = props.size,
     size = _props$size === void 0 ? 'sm' : _props$size,
@@ -31,7 +34,15 @@ var Avatar = /*#__PURE__*/forwardRef(function (props, ref) {
     isSquare = props.isSquare,
     isLogo = props.isLogo,
     others = _objectWithoutProperties(props, _excluded);
-  var _useStatusClasses = useStatusClasses(className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "is-".concat(color), color), "size-".concat(size), size), "font-size-".concat(size), src ? false : size), 'is-square', isSquare), 'is-image', src), 'is-logo', isLogo)),
+
+  // this will use color prop if provided,
+  // else will map colorId to a color, else defaults to 'green'
+  var finalColor = useMemo(function () {
+    if (color) return color;
+    if (colorId) return getColorFromUUID(colorId, avatarColors);
+    return 'green';
+  }, [color, colorId, avatarColors]);
+  var _useStatusClasses = useStatusClasses(className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "is-".concat(finalColor), finalColor), "size-".concat(size), size), "font-size-".concat(size), src ? false : size), 'is-square', isSquare), 'is-image', src), 'is-logo', isLogo)),
     classNames = _useStatusClasses.classNames;
   if (src) {
     return ___EmotionJSX(Box, _extends({