@uniformdev/design-system 19.207.1-alpha.11 → 19.207.1-alpha.28

package/dist/esm/index.js

@@ -11789,6 +11789,9 @@ var AnimationFile = ({
   );
 };
 
+// src/components/Avatar/Avatar.tsx
+import { CgProfile } from "@react-icons/all-files/cg/CgProfile";
+
 // src/components/Avatar/Avatar.styles.ts
 import { css as css18 } from "@emotion/react";
 var avatarStyles = css18`
@@ -11833,7 +11836,7 @@ var avatarSize2xlStyles = css18`
 `;
 
 // src/components/Avatar/Avatar.tsx
-import { jsx as jsx20, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
 var avatarSizeStylesMap = {
   "2xs": avatarSize2xsStyles,
   xs: avatarSizeXsStyles,
@@ -11845,10 +11848,11 @@ var avatarSizeStylesMap = {
 };
 var Avatar = ({ src, label = "", children, size = "md", as = "div", ...props }) => {
   const Element = as;
-  return /* @__PURE__ */ jsx20(Tooltip, { title: label, children: /* @__PURE__ */ jsxs7(Element, { css: [avatarStyles, avatarSizeStylesMap[size]], ...props, children: [
-    !src ? null : /* @__PURE__ */ jsx20("img", { role: "presentation", src, css: avatarImageStyles }),
+  const body = /* @__PURE__ */ jsx20(Fragment4, { children: /* @__PURE__ */ jsxs7(Element, { css: [avatarStyles, avatarSizeStylesMap[size]], ...props, children: [
+    src ? /* @__PURE__ */ jsx20("img", { role: "presentation", src, css: avatarImageStyles }) : children ? null : /* @__PURE__ */ jsx20(CgProfile, { css: avatarImageStyles }),
     children
   ] }) });
+  return src || children ? /* @__PURE__ */ jsx20(Tooltip, { title: label, children: body }) : body;
 };
 
 // src/components/Avatar/AvatarGroup.styles.ts
@@ -11882,10 +11886,13 @@ var AvatarGroup = ({
   getTruncatedLabel = defaultGetTruncatedLabel,
   ...props
 }) => {
+  if (max < 2) {
+    throw new Error("max must be 2 or more");
+  }
   const numberOfChildren = children.length;
-  const clampedMax = Math.max(max, 1);
-  const numberOfTruncatedItems = numberOfChildren <= clampedMax ? 0 : numberOfChildren - clampedMax;
-  const numberOfItemsToRender = numberOfTruncatedItems ? clampedMax - 1 : void 0;
+  const numberOfTruncatedItems = numberOfChildren <= max ? 0 : numberOfChildren - max + 1;
+  const numberOfItemsToRender = numberOfTruncatedItems ? Math.min(numberOfChildren, max - 1) : void 0;
+  const childrenToRender = children.slice(0, numberOfItemsToRender);
   return /* @__PURE__ */ jsxs8(
     "div",
     {
@@ -11895,7 +11902,7 @@ var AvatarGroup = ({
       ],
       ...props,
       children: [
-        children,
+        childrenToRender,
         !numberOfTruncatedItems ? null : /* @__PURE__ */ jsxs8(Avatar, { label: getTruncatedLabel(numberOfTruncatedItems), style: { display: "flex" }, children: [
           "+",
           numberOfTruncatedItems
@@ -13512,7 +13519,7 @@ var DebouncedInputKeywordSearch = forwardRef8(
 
 // src/components/Input/InputSelect.tsx
 import { forwardRef as forwardRef9 } from "react";
-import { Fragment as Fragment4, jsx as jsx44, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx44, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
 var InputSelect = forwardRef9(
   ({
     label,
@@ -13535,7 +13542,7 @@ var InputSelect = forwardRef9(
         css: [inputContainer, typeof classNameContainer === "object" ? classNameContainer : void 0],
         className: typeof classNameContainer === "string" ? classNameContainer : "",
         children: [
-          showLabel ? /* @__PURE__ */ jsx44(Fragment4, { children: /* @__PURE__ */ jsxs23(
+          showLabel ? /* @__PURE__ */ jsx44(Fragment5, { children: /* @__PURE__ */ jsxs23(
             Label,
             {
               htmlFor: props.id,
@@ -13814,10 +13821,10 @@ var SuccessMessage = ({ message, testId, ...props }) => {
 
 // src/components/Input/Textarea.tsx
 import { forwardRef as forwardRef12 } from "react";
-import { Fragment as Fragment5, jsx as jsx49, jsxs as jsxs27 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx49, jsxs as jsxs27 } from "@emotion/react/jsx-runtime";
 var Textarea = forwardRef12(
   ({ label, icon, id, caption, showLabel = true, errorMessage, warningMessage, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs27(Fragment5, { children: [
+    return /* @__PURE__ */ jsxs27(Fragment6, { children: [
       showLabel ? /* @__PURE__ */ jsx49("label", { htmlFor: id, css: [labelText], children: label }) : null,
       /* @__PURE__ */ jsxs27("div", { css: [inputContainer], children: [
         /* @__PURE__ */ jsx49(
@@ -14070,7 +14077,7 @@ var wholeButtonWithMenuIconOffset = css38`
 `;
 
 // src/components/ButtonWithMenu/ButtonWithMenu.tsx
-import { Fragment as Fragment6, jsx as jsx52, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx52, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
 var buttonTheme = {
   primary: buttonPrimary2,
   secondary: buttonSecondary2,
@@ -14155,7 +14162,7 @@ var ButtonWithMenu = ({
         ],
         "data-testid": "multioptions-button",
         children: [
-          /* @__PURE__ */ jsx52(Tooltip, { visible: tip ? void 0 : false, title: /* @__PURE__ */ jsx52(Fragment6, { children: tip }), children: /* @__PURE__ */ jsx52("span", { children: primaryButton }) }),
+          /* @__PURE__ */ jsx52(Tooltip, { visible: tip ? void 0 : false, title: /* @__PURE__ */ jsx52(Fragment7, { children: tip }), children: /* @__PURE__ */ jsx52("span", { children: primaryButton }) }),
           disabledValue ? menuButton2 : /* @__PURE__ */ jsx52(
             Menu,
             {
@@ -14499,7 +14506,7 @@ var paragraph = css42`
 `;
 
 // src/components/Typography/Paragraph.tsx
-import { Fragment as Fragment7, jsx as jsx56 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx56 } from "@emotion/react/jsx-runtime";
 import { createElement } from "@emotion/react";
 var Paragraph = ({ className, htmlContent, children, ...pAttributes }) => {
   if (htmlContent && Array.isArray(htmlContent)) {
@@ -14513,7 +14520,7 @@ var Paragraph = ({ className, htmlContent, children, ...pAttributes }) => {
         dangerouslySetInnerHTML: { __html: html }
       }
     ));
-    return /* @__PURE__ */ jsx56(Fragment7, { children: paragraphContent });
+    return /* @__PURE__ */ jsx56(Fragment8, { children: paragraphContent });
   }
   return htmlContent ? /* @__PURE__ */ jsx56(
     "p",
@@ -14582,7 +14589,7 @@ var IntegrationHeaderSectionDocsLink = css43`
 `;
 
 // src/components/Typography/IntegrationHeaderSection.tsx
-import { Fragment as Fragment8, jsx as jsx57, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx57, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
 var IntegrationHeaderSectionHexImage = ({ ...props }) => {
   return /* @__PURE__ */ jsxs33("svg", { viewBox: "0 0 100 116", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
     /* @__PURE__ */ jsx57(
@@ -14622,7 +14629,7 @@ var IntegrationHeaderSection = ({
   ...props
 }) => {
   const CompIcon = icon && typeof icon !== "string" ? icon : null;
-  return /* @__PURE__ */ jsxs33(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs33(Fragment9, { children: [
     /* @__PURE__ */ jsxs33("div", { css: IntegrationHeaderSectionContainer, ...props, children: [
       /* @__PURE__ */ jsxs33("div", { css: IntegrationHeaderSectionTitleContainer, children: [
         icon ? /* @__PURE__ */ jsxs33("div", { css: IntegrationHeaderSectionIconContainer, children: [
@@ -15144,7 +15151,7 @@ var ChipDisabled = css48`
 `;
 
 // src/components/Chip/Chip.tsx
-import { Fragment as Fragment9, jsx as jsx62, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx62, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
 var chipTheme = {
   "accent-light": ChipThemeAccentLight,
   "accent-dark": ChipThemeAccentDark,
@@ -15183,7 +15190,7 @@ var Chip = ({
       ],
       ...props,
       children: [
-        icon ? /* @__PURE__ */ jsxs37(Fragment9, { children: [
+        icon ? /* @__PURE__ */ jsxs37(Fragment10, { children: [
           /* @__PURE__ */ jsx62("span", { role: "presentation", css: [ChipIcon], children: /* @__PURE__ */ jsx62(Icon, { icon, iconColor, size: "1rem" }) }),
           /* @__PURE__ */ jsx62("span", { role: "separator", css: ChipSeparator })
         ] }) : null,
@@ -16433,7 +16440,7 @@ var DrawerContent2 = ({ children, buttonGroup, noPadding = false, ...props }) =>
 
 // src/components/Drawer/DrawerRenderer.tsx
 import { useEffect as useEffect7, useMemo as useMemo3 } from "react";
-import { Fragment as Fragment10, jsx as jsx74, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx74, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
 var drawerWidth = {
   narrow: "29rem",
   medium: "43rem",
@@ -16522,7 +16529,7 @@ var DrawerWrapper = ({
     offsetInPx = Math.round(maxLayeringInPx * relativeLevel);
   }
   const calculatedWidth = `calc(${width} - ${offsetInPx}px)`;
-  return /* @__PURE__ */ jsxs45(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs45(Fragment11, { children: [
     /* @__PURE__ */ jsx74("div", { css: drawerWrapperOverlayStyles, onClick: onOverlayClick }),
     /* @__PURE__ */ jsx74(
       "div",
@@ -17164,10 +17171,10 @@ var IntegrationLoadingFrame = css64`
 `;
 
 // src/components/Tiles/IntegrationLoadingTile.tsx
-import { Fragment as Fragment11, jsx as jsx84, jsxs as jsxs52 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx84, jsxs as jsxs52 } from "@emotion/react/jsx-runtime";
 var IntegrationLoadingTile = ({ count = 1 }) => {
   const componentCount = Array.from(Array(count).keys());
-  return /* @__PURE__ */ jsx84(Fragment11, { children: componentCount.map((i) => /* @__PURE__ */ jsxs52("div", { css: IntegrationLoadingTileContainer, children: [
+  return /* @__PURE__ */ jsx84(Fragment12, { children: componentCount.map((i) => /* @__PURE__ */ jsxs52("div", { css: IntegrationLoadingTileContainer, children: [
     /* @__PURE__ */ jsx84("div", { css: [IntegrationLoadingTileImg, IntegrationLoadingFrame], role: "presentation" }),
     /* @__PURE__ */ jsx84("div", { css: [IntegrationLoadingTileText, IntegrationLoadingFrame] })
   ] }, i)) });
@@ -17409,7 +17416,7 @@ var IntegrationModalHeaderContentWrapper = css69`
 `;
 
 // src/components/IntegrationModalHeader/IntegrationModalHeader.tsx
-import { Fragment as Fragment12, jsx as jsx90, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx90, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
 var HexModalBackground = ({ ...props }) => {
   return /* @__PURE__ */ jsxs55(
     "svg",
@@ -17450,7 +17457,7 @@ var HexModalBackground = ({ ...props }) => {
   );
 };
 var IntegrationModalHeader = ({ icon, name, menu, children }) => {
-  return /* @__PURE__ */ jsxs55(Fragment12, { children: [
+  return /* @__PURE__ */ jsxs55(Fragment13, { children: [
     /* @__PURE__ */ jsx90(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
     /* @__PURE__ */ jsx90("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ jsxs55("div", { css: IntegrationModalHeaderTitleGroup, children: [
       icon ? /* @__PURE__ */ jsx90(IntegrationModalIcon, { icon, name: name || "" }) : null,
@@ -18358,7 +18365,7 @@ import {
   usePopoverStore
 } from "@ariakit/react";
 import { useEffect as useEffect14 } from "react";
-import { Fragment as Fragment13, jsx as jsx100, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx100, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
 var Popover3 = ({
   iconColor = "action",
   icon = "info",
@@ -18385,7 +18392,7 @@ var Popover3 = ({
         css: [PopoverBtn, trigger2 ? void 0 : PopoverDefaulterTriggerBtn],
         title: buttonText,
         "data-testid": testId,
-        children: trigger2 ? trigger2 : /* @__PURE__ */ jsxs64(Fragment13, { children: [
+        children: trigger2 ? trigger2 : /* @__PURE__ */ jsxs64(Fragment14, { children: [
           /* @__PURE__ */ jsx100(Icon, { icon, iconColor, size: iconSize }),
           /* @__PURE__ */ jsx100("span", { hidden: true, children: buttonText })
         ] })
@@ -19033,7 +19040,7 @@ var CoverSelectedChip = css82`
 `;
 
 // src/components/Objects/ObjectGridItemCardCover.tsx
-import { Fragment as Fragment14, jsx as jsx106, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx106, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
 var ObjectGridItemCardCover = (props) => {
   if ("imageUrl" in props && props.imageUrl) {
     const { imageUrl, srcSet } = props;
@@ -19066,7 +19073,7 @@ var ObjectGridItemCover = ({
   coverSlotBottomRight,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs69(Fragment14, { children: [
+  return /* @__PURE__ */ jsxs69(Fragment15, { children: [
     coverSlotLeft ? /* @__PURE__ */ jsx106("div", { css: [CoverSlot, CoverSlotLeft], children: coverSlotLeft }) : null,
     /* @__PURE__ */ jsx106(ObjectGridItemCardCover, { ...props }),
     coverSlotRight ? /* @__PURE__ */ jsx106("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null,
@@ -20038,7 +20045,7 @@ var previewModalImage = css92`
 `;
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
-import { Fragment as Fragment15, jsx as jsx120, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx120, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
 function ParameterImagePreview({ imageSrc }) {
   const [showModal, setShowModal] = useState14(false);
   return imageSrc ? /* @__PURE__ */ jsxs79("div", { css: previewWrapper, children: [
@@ -20056,7 +20063,7 @@ function ParameterImagePreview({ imageSrc }) {
   ] }) : null;
 }
 var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
-  return open ? /* @__PURE__ */ jsx120(Fragment15, { children: createPortal2(
+  return open ? /* @__PURE__ */ jsx120(Fragment16, { children: createPortal2(
     /* @__PURE__ */ jsx120(
       Modal,
       {
@@ -20258,7 +20265,7 @@ var ParameterShellPlaceholder = ({ children }) => {
 var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx123(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx123("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx123("span", { hidden: true, children: "reset overridden value to default" }) }) });
 
 // src/components/ParameterInputs/ParameterImage.tsx
-import { Fragment as Fragment16, jsx as jsx124, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx124, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
 var ParameterImage = forwardRef20(
   ({ children, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
@@ -20272,7 +20279,7 @@ var ParameterImageInner = forwardRef20((props, ref) => {
   const { value } = props;
   const { id, label, hiddenLabel, errorMessage } = useParameterShell();
   const deferredValue = useDeferredValue(value);
-  return /* @__PURE__ */ jsxs81(Fragment16, { children: [
+  return /* @__PURE__ */ jsxs81(Fragment17, { children: [
     /* @__PURE__ */ jsx124(
       "input",
       {
@@ -20446,7 +20453,7 @@ var ParameterMultiSelectInner = (props) => {
 };
 
 // src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
-import { Fragment as Fragment17, jsx as jsx128, jsxs as jsxs83 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx128, jsxs as jsxs83 } from "@emotion/react/jsx-runtime";
 var ParameterNameAndPublicIdInput = ({
   id,
   onBlur,
@@ -20472,7 +20479,7 @@ var ParameterNameAndPublicIdInput = ({
     navigator.clipboard.writeText(values[publicIdFieldName]);
   };
   autoFocus == null ? void 0 : autoFocus();
-  return /* @__PURE__ */ jsxs83(Fragment17, { children: [
+  return /* @__PURE__ */ jsxs83(Fragment18, { children: [
     /* @__PURE__ */ jsx128(
       ParameterInput,
       {
@@ -21047,7 +21054,7 @@ var getSelectedNode = (selection) => {
 };
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { Fragment as Fragment18, jsx as jsx129, jsxs as jsxs84 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx129, jsxs as jsxs84 } from "@emotion/react/jsx-runtime";
 var isProjectMapLinkValue = (value) => {
   return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
     value.nodeId && value.path && value.projectMapId
@@ -21533,7 +21540,7 @@ function LinkNodePlugin({
       });
     });
   };
-  return /* @__PURE__ */ jsxs84(Fragment18, { children: [
+  return /* @__PURE__ */ jsxs84(Fragment19, { children: [
     /* @__PURE__ */ jsx129(
       NodeEventPlugin,
       {
@@ -22079,7 +22086,7 @@ import { calculateZoomLevel } from "@lexical/utils";
 import { $getNearestNodeFromDOMNode } from "lexical";
 import { useCallback as useCallback12, useEffect as useEffect22, useMemo as useMemo6, useRef as useRef13, useState as useState18 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { Fragment as Fragment19, jsx as jsx131, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx131, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
 var MIN_ROW_HEIGHT = 33;
 var MIN_COLUMN_WIDTH = 50;
 var tableResizer = css98`
@@ -22380,7 +22387,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
     };
   }, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
   const resizerStyles = getResizers();
-  return /* @__PURE__ */ jsx131("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ jsxs86(Fragment19, { children: [
+  return /* @__PURE__ */ jsx131("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ jsxs86(Fragment20, { children: [
     /* @__PURE__ */ jsx131(
       "div",
       {
@@ -22640,7 +22647,7 @@ var useRichTextToolbarState = ({ config }) => {
 };
 
 // src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
-import { Fragment as Fragment20, jsx as jsx132, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx132, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
 var toolbar = css99`
   ${scrollbarStyles}
   background: var(--gray-50);
@@ -22893,7 +22900,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
           children: /* @__PURE__ */ jsx132(RichTextToolbarIcon, { icon: "link" })
         }
       ) }) : null,
-      visibleLists.size > 0 ? /* @__PURE__ */ jsxs87(Fragment20, { children: [
+      visibleLists.size > 0 ? /* @__PURE__ */ jsxs87(Fragment21, { children: [
         visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx132(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx132(
           "button",
           {
@@ -22988,7 +22995,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
 var RichTextToolbar_default = RichTextToolbar;
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { Fragment as Fragment21, jsx as jsx133, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx133, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
 var ParameterRichText = ({
   label,
   labelLeadingIcon,
@@ -23053,7 +23060,7 @@ var ParameterRichText = ({
             children
           }
         ),
-        menuItems ? /* @__PURE__ */ jsx133(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx133(Fragment21, { children: menuItems }) }) : null
+        menuItems ? /* @__PURE__ */ jsx133(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx133(Fragment22, { children: menuItems }) }) : null
       ]
     }
   );
@@ -23214,7 +23221,7 @@ var ParameterRichTextInner = ({
     },
     editable: !readOnly
   };
-  return /* @__PURE__ */ jsxs88(Fragment21, { children: [
+  return /* @__PURE__ */ jsxs88(Fragment22, { children: [
     /* @__PURE__ */ jsx133("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx133(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx133(
       RichText,
       {
@@ -23293,7 +23300,7 @@ var RichText = ({
       setPortalContainerRef(_portalContainerRef);
     }
   };
-  return /* @__PURE__ */ jsxs88(Fragment21, { children: [
+  return /* @__PURE__ */ jsxs88(Fragment22, { children: [
     readOnly || minimalInteractivity ? null : /* @__PURE__ */ jsx133(
       RichTextToolbar_default,
       {
@@ -23337,7 +23344,7 @@ var RichText = ({
           ]
         }
       ),
-      /* @__PURE__ */ jsx133(Fragment21, { children }),
+      /* @__PURE__ */ jsx133(Fragment22, { children }),
       editorContainerRef ? /* @__PURE__ */ jsx133(
         LinkNodePlugin,
         {
@@ -24061,14 +24068,14 @@ var SwitchText = (size) => css107`
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment22, jsx as jsx141, jsxs as jsxs93 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx141, jsxs as jsxs93 } from "@emotion/react/jsx-runtime";
 var Switch = forwardRef27(
   ({ label, infoText, toggleText, children, switchSize = "base", ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ jsxs93(Fragment22, { children: [
+    return /* @__PURE__ */ jsxs93(Fragment23, { children: [
       /* @__PURE__ */ jsxs93(
         "label",
         {

package/dist/index.d.mts

@@ -20213,7 +20213,13 @@ declare const AnimationFile: ({ label, loop, autoplay, width, height, ...props }
 
 type AvatarSizeProp = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 type AvatarProps = {
+    /**
+     * The src of the avatar.
+     * When this is undefined, the label will not be rendered,
+     * and a generic user icon will be shown (unless children are provided).
+     */
     src?: string;
+    /** Renders a tooltip over the avatar. Not used if there is no `src` */
     label?: string;
     size?: AvatarSizeProp;
     /**
@@ -20228,10 +20234,12 @@ type AvatarProps = {
  */
 declare const Avatar: ({ src, label, children, size, as, ...props }: AvatarProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-type AvatarGroupProps = {
+interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
-     * The maximum number of avatars to show.
+     * The maximum number of avatars to show. This must be 2 or more.
      * If this value is smaller than the number of children, the other avatars will be truncated and shows as "+N"
+     * Note that when truncation occurs, the truncation "+N" avatar _counts as one_ towards the max.
+     * For example with avatars A B C D, and max 3, the rendered avatars will be (A) (B) (+2).
      * @default 5
      * */
     max?: number;
@@ -20240,7 +20248,11 @@ type AvatarGroupProps = {
      * @default (n) => `and ${n} others`
      * */
     getTruncatedLabel?: (numberOfTruncatedItems: number) => string;
-} & React.HTMLAttributes<HTMLDivElement>;
+    /**
+     * The children to render. This component works best when the <Avatar> component are direct children.
+     * **/
+    children: React.ReactNode;
+}
 /**
  * @description Renders avatars in a group with the ability to truncate the list. This component works best when the <Avatar> component are direct children.
  * @example <AvatarGroup max={2}><Avatar>AB</Avatar><Avatar>CD</Avatar><Avatar>EF</Avatar><AvatarGroup>

package/dist/index.d.ts

@@ -20213,7 +20213,13 @@ declare const AnimationFile: ({ label, loop, autoplay, width, height, ...props }
 
 type AvatarSizeProp = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 type AvatarProps = {
+    /**
+     * The src of the avatar.
+     * When this is undefined, the label will not be rendered,
+     * and a generic user icon will be shown (unless children are provided).
+     */
     src?: string;
+    /** Renders a tooltip over the avatar. Not used if there is no `src` */
     label?: string;
     size?: AvatarSizeProp;
     /**
@@ -20228,10 +20234,12 @@ type AvatarProps = {
  */
 declare const Avatar: ({ src, label, children, size, as, ...props }: AvatarProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-type AvatarGroupProps = {
+interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
-     * The maximum number of avatars to show.
+     * The maximum number of avatars to show. This must be 2 or more.
      * If this value is smaller than the number of children, the other avatars will be truncated and shows as "+N"
+     * Note that when truncation occurs, the truncation "+N" avatar _counts as one_ towards the max.
+     * For example with avatars A B C D, and max 3, the rendered avatars will be (A) (B) (+2).
      * @default 5
      * */
     max?: number;
@@ -20240,7 +20248,11 @@ type AvatarGroupProps = {
      * @default (n) => `and ${n} others`
      * */
     getTruncatedLabel?: (numberOfTruncatedItems: number) => string;
-} & React.HTMLAttributes<HTMLDivElement>;
+    /**
+     * The children to render. This component works best when the <Avatar> component are direct children.
+     * **/
+    children: React.ReactNode;
+}
 /**
  * @description Renders avatars in a group with the ability to truncate the list. This component works best when the <Avatar> component are direct children.
  * @example <AvatarGroup max={2}><Avatar>AB</Avatar><Avatar>CD</Avatar><Avatar>EF</Avatar><AvatarGroup>

package/dist/index.js

@@ -13485,6 +13485,7 @@ var AnimationFile = ({
 
 // src/components/Avatar/Avatar.tsx
 init_emotion_jsx_shim();
+var import_CgProfile2 = require("@react-icons/all-files/cg/CgProfile");
 
 // src/components/Avatar/Avatar.styles.ts
 init_emotion_jsx_shim();
@@ -13543,10 +13544,11 @@ var avatarSizeStylesMap = {
 };
 var Avatar = ({ src, label = "", children, size = "md", as = "div", ...props }) => {
   const Element = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Tooltip, { title: label, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Element, { css: [avatarStyles, avatarSizeStylesMap[size]], ...props, children: [
-    !src ? null : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("img", { role: "presentation", src, css: avatarImageStyles }),
+  const body = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Element, { css: [avatarStyles, avatarSizeStylesMap[size]], ...props, children: [
+    src ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("img", { role: "presentation", src, css: avatarImageStyles }) : children ? null : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_CgProfile2.CgProfile, { css: avatarImageStyles }),
     children
   ] }) });
+  return src || children ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Tooltip, { title: label, children: body }) : body;
 };
 
 // src/components/Avatar/AvatarGroup.tsx
@@ -13584,10 +13586,13 @@ var AvatarGroup = ({
   getTruncatedLabel = defaultGetTruncatedLabel,
   ...props
 }) => {
+  if (max < 2) {
+    throw new Error("max must be 2 or more");
+  }
   const numberOfChildren = children.length;
-  const clampedMax = Math.max(max, 1);
-  const numberOfTruncatedItems = numberOfChildren <= clampedMax ? 0 : numberOfChildren - clampedMax;
-  const numberOfItemsToRender = numberOfTruncatedItems ? clampedMax - 1 : void 0;
+  const numberOfTruncatedItems = numberOfChildren <= max ? 0 : numberOfChildren - max + 1;
+  const numberOfItemsToRender = numberOfTruncatedItems ? Math.min(numberOfChildren, max - 1) : void 0;
+  const childrenToRender = children.slice(0, numberOfItemsToRender);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "div",
     {
@@ -13597,7 +13602,7 @@ var AvatarGroup = ({
       ],
       ...props,
       children: [
-        children,
+        childrenToRender,
         !numberOfTruncatedItems ? null : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Avatar, { label: getTruncatedLabel(numberOfTruncatedItems), style: { display: "flex" }, children: [
           "+",
           numberOfTruncatedItems

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.207.1-alpha.11+682b1954b3",
+  "version": "19.207.1-alpha.28+369def3ba0",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -26,8 +26,8 @@
     "@storybook/theming": "^8.3.3",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
-    "@uniformdev/canvas": "^19.207.1-alpha.11+682b1954b3",
-    "@uniformdev/richtext": "^19.207.1-alpha.11+682b1954b3",
+    "@uniformdev/canvas": "^19.207.1-alpha.28+369def3ba0",
+    "@uniformdev/richtext": "^19.207.1-alpha.28+369def3ba0",
     "autoprefixer": "10.4.16",
     "hygen": "6.2.11",
     "postcss": "8.4.47",
@@ -79,5 +79,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "682b1954b3ddfeb43952e44367c314cfe6feda69"
+  "gitHead": "369def3ba012b3fc314254d940448b9937e12900"
 }