@astryxdesign/core 0.1.4-canary.d813abd → 0.1.4-canary.e009fdd

package/dist/AlertDialog/AlertDialog.js

@@ -26,7 +26,7 @@ import { Text } from "../Text/Text.js";
 import { Button } from "../Button/index.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 /**
  * A confirmation dialog for destructive or irreversible actions.
  *
@@ -69,7 +69,7 @@ export function AlertDialog({
   const handleCancel = useCallback(() => {
     onOpenChange(false);
   }, [onOpenChange]);
-  return /*#__PURE__*/_jsx(Dialog, {
+  return /*#__PURE__*/_jsxDEV(Dialog, {
     ref: ref,
     isOpen: isOpen,
     isInline: isInline,
@@ -85,36 +85,36 @@ export function AlertDialog({
     }),
     xstyle: xstyle,
     "data-testid": testId,
-    children: /*#__PURE__*/_jsx(Layout, {
-      content: /*#__PURE__*/_jsxs(LayoutContent, {
-        children: [/*#__PURE__*/_jsx(Heading, {
+    children: /*#__PURE__*/_jsxDEV(Layout, {
+      content: /*#__PURE__*/_jsxDEV(LayoutContent, {
+        children: [/*#__PURE__*/_jsxDEV(Heading, {
           level: 2,
           id: titleId,
           children: title
-        }), /*#__PURE__*/_jsx(Text, {
+        }, void 0, false), /*#__PURE__*/_jsxDEV(Text, {
           type: "body",
           color: "secondary",
           id: descriptionId,
           children: description
-        })]
-      }),
-      footer: /*#__PURE__*/_jsx(LayoutFooter, {
-        children: /*#__PURE__*/_jsxs(HStack, {
+        }, void 0, false)]
+      }, void 0, true),
+      footer: /*#__PURE__*/_jsxDEV(LayoutFooter, {
+        children: /*#__PURE__*/_jsxDEV(HStack, {
           gap: 2,
           hAlign: "end",
-          children: [/*#__PURE__*/_jsx(Button, {
+          children: [/*#__PURE__*/_jsxDEV(Button, {
             variant: "ghost",
             label: cancelLabel,
             onClick: handleCancel
-          }), /*#__PURE__*/_jsx(Button, {
+          }, void 0, false), /*#__PURE__*/_jsxDEV(Button, {
             variant: actionVariant,
             label: actionLabel,
             onClick: onAction,
             isLoading: isActionLoading
-          })]
-        })
-      })
-    })
-  });
+          }, void 0, false)]
+        }, void 0, true)
+      }, void 0, false)
+    }, void 0, false)
+  }, void 0, false);
 }
 AlertDialog.displayName = 'AlertDialog';

package/dist/AlertDialog/useImperativeAlertDialog.js

@@ -15,7 +15,7 @@
  */
 import { useState, useCallback, useMemo } from 'react';
 import { AlertDialog } from "./AlertDialog.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 /**
  * Imperative alert dialog — show/hide without managing state.
  *
@@ -54,7 +54,7 @@ export function useImperativeAlertDialog() {
     if (!options) {
       return null;
     }
-    return /*#__PURE__*/_jsx(AlertDialog, {
+    return /*#__PURE__*/_jsxDEV(AlertDialog, {
       ...options,
       isOpen: isOpen,
       onOpenChange: open => {
@@ -62,7 +62,7 @@ export function useImperativeAlertDialog() {
           setIsOpen(false);
         }
       }
-    });
+    }, void 0, false);
   }, [isOpen, options]);
   return {
     show,

package/dist/AppShell/AppShell.js

@@ -37,19 +37,19 @@ import { mergeProps, mergeRefs, isRenderable } from "../utils/index.js";
 import { useMediaQuery } from "../hooks/useMediaQuery.js";
 import { observeResize, unobserveResize } from "../utils/sharedResizeObserver.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
 const HasActivity = typeof React.Activity !== 'undefined';
 const ActivityWrapper = HasActivity ? ({
   mode,
   children
-}) => /*#__PURE__*/_jsx(React.Activity, {
+}) => /*#__PURE__*/_jsxDEV(React.Activity, {
   mode: mode,
   children: children
-}) : ({
+}, void 0, false) : ({
   children
-}) => /*#__PURE__*/_jsx(_Fragment, {
+}) => /*#__PURE__*/_jsxDEV(_Fragment, {
   children: children
-});
+}, void 0, false);
 
 // =============================================================================
 // Constants
@@ -327,39 +327,39 @@ export function AppShell({
   const mobileContentValue = hasSideNav && mobileNavHasToggle ?
   /*#__PURE__*/
   // eslint-disable-next-line @eslint-react/no-unstable-context-value -- context transports ReactNode; instability is inherent
-  _jsx(SideNavRenderContext, {
+  _jsxDEV(SideNavRenderContext, {
     value: "drawer-content",
     children: sideNav
-  }) : null;
+  }, void 0, false) : null;
   const drawerMobileContentValue = hasSideNav ?
   /*#__PURE__*/
   // eslint-disable-next-line @eslint-react/no-unstable-context-value -- context transports ReactNode; instability is inherent
-  _jsx(SideNavRenderContext, {
+  _jsxDEV(SideNavRenderContext, {
     value: "drawer-content",
     children: sideNav
-  }) : null;
-  const topNavContent = hasTopNav ? isBelowBreakpoint && !mobileNavDisabled && mobileNavReactNode == null ? /*#__PURE__*/_jsx(TopNavMobileContentContext, {
+  }, void 0, false) : null;
+  const topNavContent = hasTopNav ? isBelowBreakpoint && !mobileNavDisabled && mobileNavReactNode == null ? /*#__PURE__*/_jsxDEV(TopNavMobileContentContext, {
     value: mobileContentValue,
-    children: /*#__PURE__*/_jsx(TopNavRenderContext, {
+    children: /*#__PURE__*/_jsxDEV(TopNavRenderContext, {
       value: "mobile-bar",
       children: topNav
-    })
-  }) : topNav : null;
-  const headerInner = hasTopNav || hasBanner ? /*#__PURE__*/_jsxs(LayoutHeader, {
+    }, void 0, false)
+  }, void 0, false) : topNav : null;
+  const headerInner = hasTopNav || hasBanner ? /*#__PURE__*/_jsxDEV(LayoutHeader, {
     padding: 0,
     hasDivider: navHasDividers && hasTopNav,
-    children: [hasBanner && /*#__PURE__*/_jsx("div", {
+    children: [hasBanner && /*#__PURE__*/_jsxDEV("div", {
       ...stylex.props(styles.banner, navAreaStyle),
       children: banner
-    }), hasTopNav && topNavContent]
-  }) : undefined;
-  const headerContent = headerInner != null ? /*#__PURE__*/_jsx("div", {
+    }, void 0, false), hasTopNav && topNavContent]
+  }, void 0, true) : undefined;
+  const headerContent = headerInner != null ? /*#__PURE__*/_jsxDEV("div", {
     ref: headerRef,
     ...mergeProps(themeProps('app-shell-header', {
       variant
     }), stylex.props(navAreaStyle, isAuto && styles.headerSticky)),
     children: headerInner
-  }) : undefined;
+  }, void 0, false) : undefined;
 
   // =========================================================================
   // Build sideNav content
@@ -369,7 +369,7 @@ export function AppShell({
   // below the header while the main content scrolls. A wrapper div applies
   // the sticky behavior since LayoutPanel doesn't accept style/className.
   // =========================================================================
-  const sideNavPanel = showSideNavInline ? /*#__PURE__*/_jsx(LayoutPanel, {
+  const sideNavPanel = showSideNavInline ? /*#__PURE__*/_jsxDEV(LayoutPanel, {
     padding: 0,
     hasDivider: navHasDividers,
     isScrollable: isFill,
@@ -378,36 +378,36 @@ export function AppShell({
     }),
     xstyle: [navAreaStyle, isAuto && stickyBgStyle, isAuto && styles.panelAutoFill],
     children: sideNav
-  }) : undefined;
-  const sideNavContent = sideNavPanel != null && isAuto ? /*#__PURE__*/_jsx("div", {
+  }, void 0, false) : undefined;
+  const sideNavContent = sideNavPanel != null && isAuto ? /*#__PURE__*/_jsxDEV("div", {
     ...{
       className: "x2lah0s x7giv3 x7wzq59 xepuwc7 x16zugyo x78zum5 xdt5ytf"
     },
     children: sideNavPanel
-  }) : sideNavPanel;
+  }, void 0, false) : sideNavPanel;
 
   // =========================================================================
   // Build main content
   // =========================================================================
   const shouldElevateWithCorner = isElevated && hasTopNav && showSideNavInline;
-  const mainInner = /*#__PURE__*/_jsx(LayoutContent, {
+  const mainInner = /*#__PURE__*/_jsxDEV(LayoutContent, {
     padding: contentPadding ?? 0,
     role: "main",
     id: MAIN_CONTENT_ID,
     isScrollable: isFill,
     xstyle: contentAreaStyle,
     children: children
-  });
-  const mainContent = shouldElevateWithCorner ? /*#__PURE__*/_jsxs("div", {
+  }, void 0, false);
+  const mainContent = shouldElevateWithCorner ? /*#__PURE__*/_jsxDEV("div", {
     ...{
       className: "x1n2onr6 x78zum5 x98rzlu x2lwn1j x5yr21d"
     },
-    children: [/*#__PURE__*/_jsx("div", {
+    children: [/*#__PURE__*/_jsxDEV("div", {
       ...{
         className: "x10l6tqk x10a8y8t x10xzikg x183tx6i x47corl"
       }
-    }), mainInner]
-  }) : mainInner;
+    }, void 0, false), mainInner]
+  }, void 0, true) : mainInner;
 
   // =========================================================================
   // Render
@@ -423,63 +423,63 @@ export function AppShell({
 
   // For sidenav-only layouts with no TopNav, render the sideNav in topbar
   // mode — it shows heading + footer icons horizontally, with the hamburger
-  const autoMobileTopBar = shouldShowAutoToggle && !hasTopNav && hasSideNav ? /*#__PURE__*/_jsx("div", {
+  const autoMobileTopBar = shouldShowAutoToggle && !hasTopNav && hasSideNav ? /*#__PURE__*/_jsxDEV("div", {
     ...mergeProps(themeProps('app-shell-header', {
       variant
     }), stylex.props(navAreaStyle, isAuto && styles.headerSticky)),
-    children: /*#__PURE__*/_jsx(LayoutHeader, {
+    children: /*#__PURE__*/_jsxDEV(LayoutHeader, {
       padding: 0,
       hasDivider: navHasDividers,
-      children: /*#__PURE__*/_jsxs("div", {
+      children: /*#__PURE__*/_jsxDEV("div", {
         ...{
           className: "x78zum5 x6s0dn4 x1k15mir xf314gf"
         },
         role: "navigation",
         "aria-label": "Mobile navigation",
-        children: [/*#__PURE__*/_jsx(SideNavRenderContext, {
+        children: [/*#__PURE__*/_jsxDEV(SideNavRenderContext, {
           value: "topbar",
           children: sideNav
-        }), /*#__PURE__*/_jsx(MobileNavToggle, {})]
-      })
-    })
-  }) : undefined;
-  return /*#__PURE__*/_jsx(AppShellMobileContext, {
+        }, void 0, false), /*#__PURE__*/_jsxDEV(MobileNavToggle, {}, void 0, false)]
+      }, void 0, true)
+    }, void 0, false)
+  }, void 0, false) : undefined;
+  return /*#__PURE__*/_jsxDEV(AppShellMobileContext, {
     value: mobileContextValue,
-    children: /*#__PURE__*/_jsxs("div", {
+    children: /*#__PURE__*/_jsxDEV("div", {
       ref: mergeRefs(ref, shellRef),
       "data-testid": dataTestId,
       ...mergeProps(themeProps('app-shell', {
         variant
       }), stylex.props(styles.root, variant === 'wash' ? styles.variantWash : variant === 'surface' ? styles.variantSurface : variant === 'section' ? styles.variantSection : styles.variantElevated, isFill ? styles.rootFill : styles.rootAuto, xstyle), className, style),
-      children: [/*#__PURE__*/_jsx("a", {
+      children: [/*#__PURE__*/_jsxDEV("a", {
         href: `#${MAIN_CONTENT_ID}`,
         ...{
           className: "x10l6tqk x1xrnuwo x1i1rx1s x1jqxupm xjm9jq1 x15cytp8 xt970qd xh2mrf5 xnjsko4 x1cf3d6k xkdpibf x1y5lnwp xb3r6kr xomzh7y x1hyvwdk x1rsz1da xuxw1ft x1hbpcn8 xc342km x13vifvy x1rw3289 x1o0tod xodanix x10xzikg xjse4m1 x1q2oy4v x1hl2dhg x2mo6ok xjm74w1"
         },
         "data-testid": "skip-to-content",
         children: "Skip to content"
-      }), /*#__PURE__*/_jsx(Layout, {
+      }, void 0, false), /*#__PURE__*/_jsxDEV(Layout, {
         height: height,
         padding: 0,
-        header: /*#__PURE__*/_jsxs(_Fragment, {
+        header: /*#__PURE__*/_jsxDEV(_Fragment, {
           children: [headerContent, autoMobileTopBar]
-        }),
+        }, void 0, true),
         start: sideNavContent,
         content: mainContent
-      }), shouldRenderMobileNavReactNode && mobileNavReactNode, shouldRenderConfigContent && mobileNavConfigContent, isBelowBreakpoint && !mobileNavDisabled && mobileNavReactNode == null && !mobileNavConfigContent && /*#__PURE__*/_jsxs(ActivityWrapper, {
+      }, void 0, false), shouldRenderMobileNavReactNode && mobileNavReactNode, shouldRenderConfigContent && mobileNavConfigContent, isBelowBreakpoint && !mobileNavDisabled && mobileNavReactNode == null && !mobileNavConfigContent && /*#__PURE__*/_jsxDEV(ActivityWrapper, {
         mode: isMobileNavOpen ? 'visible' : 'hidden',
-        children: [hasSideNav && !hasTopNav && /*#__PURE__*/_jsx(SideNavRenderContext, {
+        children: [hasSideNav && !hasTopNav && /*#__PURE__*/_jsxDEV(SideNavRenderContext, {
           value: "drawer",
           children: sideNav
-        }), hasTopNav && /*#__PURE__*/_jsx(TopNavMobileContentContext, {
+        }, void 0, false), hasTopNav && /*#__PURE__*/_jsxDEV(TopNavMobileContentContext, {
           value: drawerMobileContentValue,
-          children: /*#__PURE__*/_jsx(TopNavRenderContext, {
+          children: /*#__PURE__*/_jsxDEV(TopNavRenderContext, {
             value: "drawer",
             children: topNav
-          })
-        })]
-      })]
-    })
-  });
+          }, void 0, false)
+        }, void 0, false)]
+      }, void 0, true)]
+    }, void 0, true)
+  }, void 0, false);
 }
 AppShell.displayName = 'AppShell';

package/dist/AspectRatio/AspectRatio.js

@@ -24,7 +24,7 @@ import { themeProps } from "../utils/themeProps.js";
  * - `ellipse`: clips the container to an ellipse. Combined with the `ratio`,
  *   this renders a circle at `ratio={1}` and an oval at non-square ratios.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   container: {
     kVAEAm: "x1n2onr6",
@@ -75,7 +75,7 @@ export function AspectRatio({
   ref,
   ...props
 }) {
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
     ...mergeProps(themeProps('aspect-ratio', {
       shape
@@ -84,12 +84,12 @@ export function AspectRatio({
       aspectRatio: ratio
     }),
     ...props,
-    children: /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsxDEV("div", {
       ...{
         className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d"
       },
       children: children
-    })
-  });
+    }, void 0, false)
+  }, void 0, false);
 }
 AspectRatio.displayName = 'AspectRatio';

package/dist/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsC5C;;GAEG;AACH,KAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExE;;GAEG;AACH,KAAK,iBAAiB,GAClB,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,GAAG,GACH,GAAG,GACH,GAAG,CAAC;AAER;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAE7D;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAgBpD;AAqFD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAsCD;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,WAAW,EACX,IAAI,EACJ,IAAc,EACd,GAAG,EACH,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAmFb;yBAhGe,MAAM"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsC5C;;GAEG;AACH,KAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExE;;GAEG;AACH,KAAK,iBAAiB,GACpB,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAE7D;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAgBpD;AAqFD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAsCD;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,WAAW,EACX,IAAI,EACJ,IAAc,EACd,GAAG,EACH,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAwFb;yBArGe,MAAM"}

package/dist/Avatar/Avatar.js

@@ -35,7 +35,7 @@ import { themeProps } from "../utils/themeProps.js";
  *
  * This constant represents that ratio: (1 - 1/√2) / 2 ≈ 0.146
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const CIRCLE_EDGE_OFFSET_RATIO = (1 - 1 / Math.SQRT2) / 2;
 
 /**
@@ -202,16 +202,16 @@ function getInitials(name) {
 function DefaultIcon({
   size
 }) {
-  return /*#__PURE__*/_jsx("svg", {
+  return /*#__PURE__*/_jsxDEV("svg", {
     width: size * 0.6,
     height: size * 0.6,
     viewBox: "0 0 24 24",
     fill: "currentColor",
     "aria-hidden": "true",
-    children: /*#__PURE__*/_jsx("path", {
+    children: /*#__PURE__*/_jsxDEV("path", {
       d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-    })
-  });
+    }, void 0, false)
+  }, void 0, false);
 }
 
 /**
@@ -241,10 +241,12 @@ export function Avatar({
   ref,
   ...props
 }) {
-  const [imageError, setImageError] = useState(false);
-  const [fallbackError, setFallbackError] = useState(false);
-  const showImage = src && !imageError;
-  const showFallbackImage = !showImage && fallbackSrc && !fallbackError;
+  // Track the exact src that failed (rather than a boolean) so a changed
+  // src/fallbackSrc gets a fresh load attempt instead of the stale error.
+  const [erroredSrc, setErroredSrc] = useState(undefined);
+  const [erroredFallbackSrc, setErroredFallbackSrc] = useState(undefined);
+  const showImage = src && erroredSrc !== src;
+  const showFallbackImage = !showImage && fallbackSrc && erroredFallbackSrc !== fallbackSrc;
   const showInitials = !showImage && !showFallbackImage && name;
   const showIcon = !showImage && !showFallbackImage && !name;
 
@@ -256,9 +258,9 @@ export function Avatar({
   const avatarGroup = useAvatarGroup();
   const resolvedSize = avatarGroup?.size ?? size;
   const numericSize = useMemo(() => resolveSize(resolvedSize), [resolvedSize]);
-  return /*#__PURE__*/_jsx(AvatarSizeContext, {
+  return /*#__PURE__*/_jsxDEV(AvatarSizeContext, {
     value: numericSize,
-    children: /*#__PURE__*/_jsxs("div", {
+    children: /*#__PURE__*/_jsxDEV("div", {
       ref: ref,
       role: isDecorative ? 'presentation' : 'img',
       "aria-label": isDecorative ? undefined : accessibleName,
@@ -268,38 +270,38 @@ export function Avatar({
         size: resolvedSize
       }), stylex.props(styles.wrapper, avatarGroup && groupStyles.ring, avatarGroup && groupStyles.overlap, avatarGroup && groupDynamicStyles.overlap(-avatarGroup.overlap), xstyle), className, style),
       ...props,
-      children: [/*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsxDEV("div", {
         ...stylex.props(styles.content, dynamicStyles.size(numericSize)),
-        children: [showImage && /*#__PURE__*/_jsx("img", {
+        children: [showImage && /*#__PURE__*/_jsxDEV("img", {
           src: src,
           alt: "",
-          onError: () => setImageError(true),
+          onError: () => setErroredSrc(src),
           ...{
             className: "xh8yej3 x5yr21d xl1xv1r"
           }
-        }), showFallbackImage && /*#__PURE__*/_jsx("img", {
+        }, void 0, false), showFallbackImage && /*#__PURE__*/_jsxDEV("img", {
           src: fallbackSrc,
           alt: "",
-          onError: () => setFallbackError(true),
+          onError: () => setErroredFallbackSrc(fallbackSrc),
           ...{
             className: "xh8yej3 x5yr21d xl1xv1r"
           }
-        }), showInitials && /*#__PURE__*/_jsx("div", {
+        }, void 0, false), showInitials && /*#__PURE__*/_jsxDEV("div", {
           ...stylex.props(styles.fallback, dynamicStyles.fontSize(numericSize)),
           children: getInitials(name)
-        }), showIcon && /*#__PURE__*/_jsx("div", {
+        }, void 0, false), showIcon && /*#__PURE__*/_jsxDEV("div", {
           ...{
             className: "x78zum5 x6s0dn4 xl56j7k xh8yej3 x5yr21d x17x4s8c xv1l7n4 x9ynric x1e4wzip xtvhhri"
           },
-          children: /*#__PURE__*/_jsx(DefaultIcon, {
+          children: /*#__PURE__*/_jsxDEV(DefaultIcon, {
             size: numericSize
-          })
-        })]
-      }), status && /*#__PURE__*/_jsx("div", {
+          }, void 0, false)
+        }, void 0, false)]
+      }, void 0, true), status && /*#__PURE__*/_jsxDEV("div", {
         ...stylex.props(styles.status, dynamicStyles.statusPosition(numericSize)),
         children: status
-      })]
-    })
-  });
+      }, void 0, false)]
+    }, void 0, true)
+  }, void 0, false);
 }
 Avatar.displayName = 'Avatar';

package/dist/Avatar/AvatarStatusDot.js

@@ -38,7 +38,7 @@ import { themeProps } from "../utils/themeProps.js";
  * Icons are not rendered at the smallest tier — there isn't enough
  * room for them to be legible.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 function resolveStatusDotSize(avatarSize) {
   if (avatarSize <= 36) {
     return {
@@ -174,7 +174,7 @@ export function AvatarStatusDot({
     borderWidth,
     iconSize
   } = resolveStatusDotSize(avatarSize);
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
     ...(label ? {
       role: 'img',
@@ -184,11 +184,11 @@ export function AvatarStatusDot({
       variant
     }), stylex.props(styles.dot, variantStyleMap[variant], dynamicStyles.size(dotSize, borderWidth), xstyle), className, style),
     ...props,
-    children: icon && iconSize > 0 && /*#__PURE__*/_jsx("span", {
+    children: icon && iconSize > 0 && /*#__PURE__*/_jsxDEV("span", {
       "aria-hidden": "true",
       ...stylex.props(styles.icon, dynamicStyles.iconSize(iconSize)),
       children: icon
-    })
-  });
+    }, void 0, false)
+  }, void 0, false);
 }
 AvatarStatusDot.displayName = 'AvatarStatusDot';

package/dist/AvatarGroup/AvatarGroup.js

@@ -23,7 +23,7 @@ import * as stylex from '@stylexjs/stylex';
 import { mergeProps } from "../utils/index.js";
 import { AvatarGroupContext } from "./AvatarGroupContext.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const OVERLAP_RATIO = 0.25;
 const styles = {
   root: {
@@ -69,9 +69,9 @@ export function AvatarGroup({
     overlap,
     numericSize
   }), [size, overlap, numericSize]);
-  return /*#__PURE__*/_jsx(AvatarGroupContext, {
+  return /*#__PURE__*/_jsxDEV(AvatarGroupContext, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsxDEV("div", {
       ref: ref,
       role: "group",
       "aria-label": ariaLabel,
@@ -81,7 +81,7 @@ export function AvatarGroup({
       }), stylex.props(styles.root, xstyle), className, style),
       ...props,
       children: children
-    })
-  });
+    }, void 0, false)
+  }, void 0, false);
 }
 AvatarGroup.displayName = 'AvatarGroup';

package/dist/AvatarGroup/AvatarGroupOverflow.js

@@ -19,7 +19,7 @@ import { colorVars, typographyVars, fontWeightVars, radiusVars } from "../theme/
 import { mergeProps } from "../utils/index.js";
 import { useAvatarGroup } from "./AvatarGroupContext.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const BORDER_WIDTH = 2;
 const OVERFLOW_FONT_RATIO = 0.35;
 const styles = {
@@ -109,7 +109,7 @@ export function AvatarGroupOverflow({
   const label = `${count} more`;
   const content = children ?? `+${count}`;
   if (onClick) {
-    return /*#__PURE__*/_jsx("button", {
+    return /*#__PURE__*/_jsxDEV("button", {
       ref: ref,
       type: "button",
       onClick: onClick,
@@ -117,14 +117,14 @@ export function AvatarGroupOverflow({
       ...rest,
       ...mergeProps(themeProps('avatar-group-overflow'), stylex.props(styles.base, styles.button, styles.overlap, dynamicStyles.size(numericSize), dynamicStyles.fontSize(numericSize), dynamicStyles.overlap(-overlap), xstyle), className, style),
       children: content
-    });
+    }, void 0, false);
   }
-  return /*#__PURE__*/_jsx("span", {
+  return /*#__PURE__*/_jsxDEV("span", {
     ref: ref,
     "aria-label": label,
     ...rest,
     ...mergeProps(themeProps('avatar-group-overflow'), stylex.props(styles.base, styles.overlap, dynamicStyles.size(numericSize), dynamicStyles.fontSize(numericSize), dynamicStyles.overlap(-overlap), xstyle), className, style),
     children: content
-  });
+  }, void 0, false);
 }
 AvatarGroupOverflow.displayName = 'AvatarGroupOverflow';

package/dist/Badge/Badge.js

@@ -24,7 +24,7 @@ import { themeProps } from "../utils/themeProps.js";
 /**
  * Base badge styles
  */
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   base: {
     k1xSpc: "x3nfvp2",
@@ -164,13 +164,13 @@ export function Badge({
   ref,
   ...props
 }) {
-  return /*#__PURE__*/_jsxs("span", {
+  return /*#__PURE__*/_jsxDEV("span", {
     ref: ref,
     ...mergeProps(themeProps('badge', {
       variant
     }), stylex.props(styles.base, variants[variant], xstyle), className, style),
     ...props,
     children: [icon, label]
-  });
+  }, void 0, true);
 }
 Badge.displayName = 'Badge';