@pingux/astro 2.170.1-alpha.0 → 2.172.0-alpha.0

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

@@ -3084,47 +3084,47 @@ declare const _default: {
         };
     };
     icons: {
-        [x: number]: import("@pingux/mdi-react").MdiReactIconComponentType;
+        [x: number]: string;
         aic: (props: any) => import("react/jsx-runtime").JSX.Element;
-        applicationsIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        Ascending: import("@pingux/mdi-react").MdiReactIconComponentType;
-        authenticationIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        clipboard: import("@pingux/mdi-react").MdiReactIconComponentType;
-        CreateIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        daVinci: import("@pingux/mdi-react").MdiReactIconComponentType;
-        DefaultCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
-        Descending: import("@pingux/mdi-react").MdiReactIconComponentType;
-        popoverMenuIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        ErrorCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
-        integrationsIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        listViewMenu: import("@pingux/mdi-react").MdiReactIconComponentType;
-        mdiAccountCog: import("@pingux/mdi-react").MdiReactIconComponentType;
-        mdiAccountMultiple: import("@pingux/mdi-react").MdiReactIconComponentType;
+        applicationsIcon: string;
+        Ascending: string;
+        authenticationIcon: string;
+        clipboard: string;
+        CreateIcon: string;
+        daVinci: string;
+        DefaultCircle: string;
+        Descending: string;
+        popoverMenuIcon: string;
+        ErrorCircle: string;
+        integrationsIcon: string;
+        listViewMenu: string;
+        mdiAccountCog: string;
+        mdiAccountMultiple: string;
         mdiEarth: import("@pingux/mdi-react").MdiReactIconComponentType;
         mdiEmoticonHappyOutline: import("@pingux/mdi-react").MdiReactIconComponentType;
-        mdiFingerprint: import("@pingux/mdi-react").MdiReactIconComponentType;
-        mdiPlayCircleIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        mdiScaleBalance: import("@pingux/mdi-react").MdiReactIconComponentType;
-        mdiShoCard: import("@pingux/mdi-react").MdiReactIconComponentType;
+        mdiFingerprint: string;
+        mdiPlayCircleIcon: string;
+        mdiScaleBalance: string;
+        mdiShoCard: string;
         mdiTransitConnectionVariant: import("@pingux/mdi-react").MdiReactIconComponentType;
-        mdiViewDashboard: import("@pingux/mdi-react").MdiReactIconComponentType;
-        mdiWeb: import("@pingux/mdi-react").MdiReactIconComponentType;
-        MenuDown: import("@pingux/mdi-react").MdiReactIconComponentType;
-        MenuUp: import("@pingux/mdi-react").MdiReactIconComponentType;
+        mdiViewDashboard: string;
+        mdiWeb: string;
+        MenuDown: string;
+        MenuUp: string;
         monitoringIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        openInNew: import("@pingux/mdi-react").MdiReactIconComponentType;
-        overviewIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        p1verify: import("@pingux/mdi-react").MdiReactIconComponentType;
+        openInNew: string;
+        overviewIcon: string;
+        p1verify: string;
         pam: (props: any) => import("react/jsx-runtime").JSX.Element;
-        PingAuthorize: import("@pingux/mdi-react").MdiReactIconComponentType;
+        PingAuthorize: string;
         pingLogoHorizontalSmall: import("react/jsx-runtime").JSX.Element;
         protect: (props: any) => import("react/jsx-runtime").JSX.Element;
-        rocketLaunchIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        shareFeedbackIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
+        rocketLaunchIcon: string;
+        shareFeedbackIcon: string;
         shieldStar: import("@pingux/mdi-react").MdiReactIconComponentType;
-        SuccessCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
-        userExperienceIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        WarningIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
+        SuccessCircle: string;
+        userExperienceIcon: string;
+        WarningIcon: string;
     };
     fonts: {
         standard: string;
@@ -6206,10 +6206,8 @@ declare const _default: {
                     backgroundColor: string;
                     '& > div.status-icon': {
                         bg: string;
-                        '& > svg': {
-                            path: {
-                                fill: string;
-                            };
+                        span: {
+                            color: string;
                         };
                     };
                 };
@@ -6452,58 +6450,64 @@ declare const _default: {
             base: {
                 '&.is-default': {
                     bg: string;
-                    path: {
-                        fill: string;
+                    span: {
+                        fontSize: string;
+                        color: string;
                     };
                 };
                 '&.is-critical': {
                     bg: string;
-                    path: {
-                        fill: string;
+                    span: {
+                        fontSize: string;
+                        color: string;
                     };
                 };
                 '&.is-warning': {
                     bg: string;
-                    path: {
-                        fill: string;
+                    span: {
+                        fontSize: string;
+                        color: string;
                     };
                 };
                 '&.is-info': {
                     bg: string;
-                    path: {
-                        fill: string;
+                    span: {
+                        fontSize: string;
+                        color: string;
                     };
                 };
                 '&.is-major': {
                     bg: string;
-                    path: {
-                        fill: string;
+                    span: {
+                        fontSize: string;
+                        color: string;
                     };
                 };
                 '&.is-minor': {
                     bg: string;
-                    path: {
-                        fill: string;
+                    span: {
+                        fontSize: string;
+                        color: string;
                     };
                 };
                 '&.is-warning-neutral': {
                     bg: string;
-                    path: {
-                        fill: string;
+                    span: {
+                        fontSize: string;
+                        color: string;
                     };
                 };
                 '&.is-fatal': {
                     bg: string;
-                    path: {
-                        fill: string;
+                    span: {
+                        fontSize: string;
+                        color: string;
                     };
                 };
                 '&.is-selected.is-selected': {
                     bg: string;
-                    '& > svg': {
-                        path: {
-                            fill: string;
-                        };
+                    span: {
+                        color: string;
                     };
                 };
             };

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

@@ -1593,10 +1593,8 @@ declare const _default: {
                 backgroundColor: string;
                 '& > div.status-icon': {
                     bg: string;
-                    '& > svg': {
-                        path: {
-                            fill: string;
-                        };
+                    span: {
+                        color: string;
                     };
                 };
             };
@@ -1839,58 +1837,64 @@ declare const _default: {
         base: {
             '&.is-default': {
                 bg: string;
-                path: {
-                    fill: string;
+                span: {
+                    fontSize: string;
+                    color: string;
                 };
             };
             '&.is-critical': {
                 bg: string;
-                path: {
-                    fill: string;
+                span: {
+                    fontSize: string;
+                    color: string;
                 };
             };
             '&.is-warning': {
                 bg: string;
-                path: {
-                    fill: string;
+                span: {
+                    fontSize: string;
+                    color: string;
                 };
             };
             '&.is-info': {
                 bg: string;
-                path: {
-                    fill: string;
+                span: {
+                    fontSize: string;
+                    color: string;
                 };
             };
             '&.is-major': {
                 bg: string;
-                path: {
-                    fill: string;
+                span: {
+                    fontSize: string;
+                    color: string;
                 };
             };
             '&.is-minor': {
                 bg: string;
-                path: {
-                    fill: string;
+                span: {
+                    fontSize: string;
+                    color: string;
                 };
             };
             '&.is-warning-neutral': {
                 bg: string;
-                path: {
-                    fill: string;
+                span: {
+                    fontSize: string;
+                    color: string;
                 };
             };
             '&.is-fatal': {
                 bg: string;
-                path: {
-                    fill: string;
+                span: {
+                    fontSize: string;
+                    color: string;
                 };
             };
             '&.is-selected.is-selected': {
                 bg: string;
-                '& > svg': {
-                    path: {
-                        fill: string;
-                    };
+                span: {
+                    color: string;
                 };
             };
         };

package/lib/cjs/styles/themes/next-gen/variants/variants.js

@@ -326,10 +326,8 @@ var rockerButton = {
       backgroundColor: 'active',
       '& > div.status-icon': {
         bg: 'white',
-        '& > svg': {
-          path: {
-            fill: 'active'
-          }
+        span: {
+          color: 'active'
         }
       }
     },
@@ -368,58 +366,64 @@ var statusIcon = {
   base: {
     '&.is-default': {
       bg: 'gray-100',
-      path: {
-        fill: 'gray-700'
+      span: {
+        fontSize: 'md',
+        color: 'gray-700'
       }
     },
     '&.is-critical': {
       bg: 'red-100',
-      path: {
-        fill: 'red-700'
+      span: {
+        fontSize: 'md',
+        color: 'red-700'
       }
     },
     '&.is-warning': {
       bg: 'yellow-100',
-      path: {
-        fill: 'yellow-800'
+      span: {
+        fontSize: 'md',
+        color: 'yellow-800'
       }
     },
     '&.is-info': {
       bg: 'blue-100',
-      path: {
-        fill: 'blue-600'
+      span: {
+        fontSize: 'md',
+        color: 'blue-600'
       }
     },
     '&.is-major': {
       bg: 'orange-100',
-      path: {
-        fill: 'orange-700'
+      span: {
+        fontSize: 'md',
+        color: 'orange-700'
       }
     },
     '&.is-minor': {
       bg: 'yellow-100',
-      path: {
-        fill: 'yellow-800'
+      span: {
+        fontSize: 'md',
+        color: 'yellow-800'
       }
     },
     '&.is-warning-neutral': {
       bg: 'gray-100',
-      path: {
-        fill: 'gray-700'
+      span: {
+        fontSize: 'md',
+        color: 'gray-700'
       }
     },
     '&.is-fatal': {
       bg: 'gray-700',
-      path: {
-        fill: 'gray-100'
+      span: {
+        fontSize: 'md',
+        color: 'gray-100'
       }
     },
     '&.is-selected.is-selected': {
       bg: 'white',
-      '& > svg': {
-        path: {
-          fill: 'active'
-        }
+      span: {
+        color: 'active'
       }
     }
   }

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/cjs/types/icon.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import type { MaterialSymbol } from '@material-symbols/font-400';
 import { TestingAttributes } from './shared/test';
 import { DOMAttributes, IconSize, StyleProps } from './shared';
 export type SVGComponentProps = {
@@ -23,8 +24,9 @@ export interface IconProps extends StyleProps, DOMAttributes, TestingAttributes
         name: string;
     };
     /** The icon to render. */
-    icon?: IconTypeExtended;
+    icon?: IconTypeExtended | MaterialSymbol | string;
     size?: IconSize;
     /** A theme-aware prop to set the icon's color. */
     color?: string;
+    hasFill?: boolean;
 }

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

@@ -1,4 +1,5 @@
 import React, { Key } from 'react';
+import type { MaterialSymbol } from '@material-symbols/font-400';
 import { ThemeUICSSObject } from 'theme-ui';
 import { IconProps, IconTypeExtended } from './icon';
 import { DOMAttributes, StyleProps } from './shared';
@@ -27,7 +28,7 @@ export interface NavBarItemProps extends StyleProps, DOMAttributes {
     /**  Handler that is called when the press is released over the target. */
     onPress?: () => void;
     /** The icon to render in between each node. */
-    icon?: IconTypeExtended;
+    icon?: IconTypeExtended | MaterialSymbol | string;
     /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
     id?: string;
     /** Text that will render within the component */

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({

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

@@ -1,13 +1,22 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/starts-with";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import React from 'react';
 import { faker } from '@faker-js/faker';
+import { randomUUID } from 'node:crypto';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import { avatarColors as colors } from './constants';
+import getColorFromUUID from './getColorFromUuid';
 import Avatar from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var src = 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] : {};
@@ -40,4 +49,89 @@ test('an avatar is rendered with custom alt', function () {
   });
   var avatar = 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 = getColorFromUUID(uuid, colors);
+    var result2 = getColorFromUUID(uuid, colors);
+    expect(result1).toBe(result2);
+  });
+  test('returns a color from the provided array', function () {
+    var uuid = 'random-id';
+    var result = getColorFromUUID(uuid, colors);
+    expect(colors).toContain(result);
+  });
+  test('distributes colors differently for different UUIDs', function () {
+    var colorA = getColorFromUUID('id-1', colors);
+    var colorB = getColorFromUUID('id-2', colors);
+
+    // 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 getColorFromUUID('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 = 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 = screen.getByTestId(datatestId);
+
+    // We check that it has *a* class starting with 'is-'
+    // and specifically isn't the default 'is-green'
+    var classList = _Array$from(avatar.classList);
+    var colorClass = _findInstanceProperty(classList).call(classList, function (cls) {
+      return _startsWithInstanceProperty(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 = 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
+    _forEachInstanceProperty(colors).call(colors, function (c) {
+      distribution[c] = 0;
+    });
+
+    // Generate and hash
+    for (var i = 0; i < iterations; i += 1) {
+      // Use the imported randomUUID function directly
+      var uuid = randomUUID();
+      var selectedColor = getColorFromUUID(uuid, colors);
+      distribution[selectedColor] += 1;
+    }
+    var expectedMean = iterations / colors.length;
+    // 15% variance is a safe threshold for 10k iterations
+    var allowedVariance = 0.15;
+    _forEachInstanceProperty(colors).call(colors, 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/components/Avatar/constants.js

@@ -0,0 +1,2 @@
+var avatarColors = ['green', 'purple', 'pink', 'red', 'orange', 'yellow', 'teal', 'cyan', 'blue', 'indigo'];
+export { avatarColors };

package/lib/components/Avatar/getColorFromUuid.js

@@ -0,0 +1,29 @@
+import _Math$imul from "@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 = _Math$imul(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];
+};
+export default getColorFromUUID;